Skip to content

Commit f0a18d3

Browse files
mchappellmchappell
committed
Fix/lw 13861 (#2050)
* fix(extension): display only one warning dialog at a time for swaps page * fix(extension): update local storage function naming * fix(extension): wait for auto set collateral before determining route * fix(extension): ignore reset stage on swap success * fix(extension): reset quote section in failure
1 parent 0f286be commit f0a18d3

File tree

7 files changed

+127
-85
lines changed

7 files changed

+127
-85
lines changed

‎apps/browser-extension-wallet/src/hooks/useCollateral.ts‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,21 +56,22 @@ export const useCollateral = (): UseCollateralReturn => {
5656
const checkCollateral = async (): Promise<void> => {
5757
if (!inMemoryWallet?.utxo?.available$) return;
5858

59-
// if there aren't any utxos, this will never complete
60-
const utxo = await firstValueFrom(
61-
inMemoryWallet.utxo.available$.pipe(
62-
map((utxos) => utxos.find((o) => isPureUtxoWithEnoughCoins(o))),
63-
filter(isNotNil),
64-
take(1)
65-
)
66-
);
59+
// Get the first emission of available UTXOs and check if any match
60+
const utxos = await firstValueFrom(inMemoryWallet.utxo.available$.pipe(take(1)));
61+
const matchingUtxo = utxos.find((o) => isPureUtxoWithEnoughCoins(o));
6762

68-
setPureUtxoWithEnoughCoinToUseForCollateral([utxo]);
63+
if (matchingUtxo) {
64+
setPureUtxoWithEnoughCoinToUseForCollateral([matchingUtxo]);
65+
} else {
66+
// No suitable UTXO found - set empty array to indicate check is complete
67+
setPureUtxoWithEnoughCoinToUseForCollateral([]);
68+
}
6969
};
7070

7171
if (!hasCollateral) checkCollateral();
72+
else setPureUtxoWithEnoughCoinToUseForCollateral([]);
7273

73-
return () => setPureUtxoWithEnoughCoinToUseForCollateral([]);
74+
return () => setPureUtxoWithEnoughCoinToUseForCollateral(undefined);
7475
}, [
7576
hasEnoughAda,
7677
hasCollateral,

‎apps/browser-extension-wallet/src/views/browser-view/features/settings/components/Collateral/CollateralDrawer.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export const CollateralDrawer = ({
9595

9696
// handle drawer states for inMemory(non-hardware) wallets
9797
useEffect(() => {
98-
if (!isInMemoryWallet || !readyToOperate || !inMemoryWallet?.utxo) return;
98+
if (!isInMemoryWallet || !readyToOperate || !visible) return;
9999
if (hasCollateral) {
100100
setSection({ currentSection: Sections.RECLAIM });
101101
} else {
@@ -109,18 +109,29 @@ export const CollateralDrawer = ({
109109
setSection,
110110
readyToOperate,
111111
pureUtxoWithEnoughCoinToUseForCollateral,
112-
inMemoryWallet?.utxo
112+
inMemoryWallet?.utxo,
113+
visible
113114
]);
114115

115116
// handle drawer states for hw
116117
useEffect(() => {
117-
if (isInMemoryWallet || !readyToOperate) return;
118-
if (!hasCollateral && section.currentSection === Sections.RECLAIM) {
118+
if (isInMemoryWallet || !readyToOperate || !inMemoryWallet?.utxo || !visible) return;
119+
if (hasCollateral) {
120+
setSection({ currentSection: Sections.RECLAIM });
121+
} else {
119122
setSection({
120-
currentSection: Sections.SEND
123+
currentSection: pureUtxoWithEnoughCoinToUseForCollateral?.length > 0 ? Sections.AUTO_SET : Sections.SEND
121124
});
122125
}
123-
}, [hasCollateral, isInMemoryWallet, section.currentSection, setSection, readyToOperate]);
126+
}, [
127+
hasCollateral,
128+
isInMemoryWallet,
129+
setSection,
130+
readyToOperate,
131+
pureUtxoWithEnoughCoinToUseForCollateral,
132+
inMemoryWallet?.utxo,
133+
visible
134+
]);
124135

125136
// show tx success screen for hw flow
126137
useEffect(() => {

‎apps/browser-extension-wallet/src/views/browser-view/features/settings/components/Collateral/__tests__/CollateralDrawer.test.tsx‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -129,26 +129,25 @@ const testIds = {
129129

130130
const getWrapper =
131131
({ backgroundService }: { backgroundService?: BackgroundServiceAPIProviderProps['value'] }) =>
132-
({ children }: { children: React.ReactNode }) =>
133-
(
134-
<AppSettingsProvider>
135-
<DatabaseProvider>
136-
<StoreProvider appMode={APP_MODE_BROWSER}>
137-
<I18nextProvider i18n={i18n}>
138-
<CurrencyStoreProvider>
139-
<BackgroundServiceAPIProvider value={backgroundService}>
140-
<PostHogClientProvider postHogCustomClient={postHogClientMocks as any}>
141-
<AnalyticsProvider analyticsDisabled tracker={mockAnalyticsTracker as any}>
142-
{children}
143-
</AnalyticsProvider>
144-
</PostHogClientProvider>
145-
</BackgroundServiceAPIProvider>
146-
</CurrencyStoreProvider>
147-
</I18nextProvider>
148-
</StoreProvider>
149-
</DatabaseProvider>
150-
</AppSettingsProvider>
151-
);
132+
({ children }: { children: React.ReactNode }) => (
133+
<AppSettingsProvider>
134+
<DatabaseProvider>
135+
<StoreProvider appMode={APP_MODE_BROWSER}>
136+
<I18nextProvider i18n={i18n}>
137+
<CurrencyStoreProvider>
138+
<BackgroundServiceAPIProvider value={backgroundService}>
139+
<PostHogClientProvider postHogCustomClient={postHogClientMocks as any}>
140+
<AnalyticsProvider analyticsDisabled tracker={mockAnalyticsTracker as any}>
141+
{children}
142+
</AnalyticsProvider>
143+
</PostHogClientProvider>
144+
</BackgroundServiceAPIProvider>
145+
</CurrencyStoreProvider>
146+
</I18nextProvider>
147+
</StoreProvider>
148+
</DatabaseProvider>
149+
</AppSettingsProvider>
150+
);
152151

153152
describe('Testing CollateralDrawer component', () => {
154153
window.ResizeObserver = ResizeObserver;
@@ -306,7 +305,7 @@ describe('Testing CollateralDrawer component', () => {
306305
}
307306
);
308307

309-
expect(setSection).toBeCalledTimes(2);
308+
expect(setSection).toBeCalledTimes(1);
310309
expect(setSection).toHaveBeenLastCalledWith({ currentSection: Sections.RECLAIM });
311310

312311
mockUseSyncingTheFirstTime.mockReset();
@@ -321,7 +320,7 @@ describe('Testing CollateralDrawer component', () => {
321320
/>
322321
);
323322

324-
expect(setSection).toBeCalledTimes(3);
323+
expect(setSection).toBeCalledTimes(2);
325324
expect(setSection).toHaveBeenLastCalledWith({ currentSection: Sections.SEND });
326325
});
327326

@@ -361,7 +360,7 @@ describe('Testing CollateralDrawer component', () => {
361360
<CollateralDrawer visible hasCollateral unspendableLoaded onClose={jest.fn()} sendAnalyticsEvent={jest.fn()} />
362361
);
363362

364-
expect(setSection).toBeCalledTimes(2);
363+
expect(setSection).toBeCalledTimes(3);
365364
}
366365
);
367366

@@ -393,15 +392,15 @@ describe('Testing CollateralDrawer component', () => {
393392
}
394393
);
395394

396-
expect(setSection).toBeCalledTimes(2);
395+
expect(setSection).toBeCalledTimes(3);
397396
expect(setSection.mock.calls[0][0]).toEqual({ currentSection: Sections.RECLAIM });
398397
expect(setSection).toHaveBeenLastCalledWith({ currentSection: Sections.SUCCESS_TX });
399398

400399
rerender(
401400
<CollateralDrawer visible hasCollateral unspendableLoaded onClose={jest.fn()} sendAnalyticsEvent={jest.fn()} />
402401
);
403402

404-
expect(setSection).toBeCalledTimes(2);
403+
expect(setSection).toBeCalledTimes(4);
405404
}
406405
);
407406

‎apps/browser-extension-wallet/src/views/browser-view/features/swaps/components/DisclaimerModal/DisclaimerModal.tsx‎

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,22 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React from 'react';
22
import { Dialog } from '@input-output-hk/lace-ui-toolkit';
33
import { useTranslation } from 'react-i18next';
4-
import { storage } from 'webextension-polyfill';
5-
import { SWAPS_DISCLAIMER_ACKNOWLEDGED } from '@lib/scripts/types/storage';
4+
import { useSwaps } from '../SwapProvider';
65

76
export const DisclaimerModal = (): React.ReactElement => {
87
const { t } = useTranslation();
9-
const [showDisclaimer, setShowDisclaimer] = useState(false);
8+
const { disclaimerAcknowledged, handleAcknowledgeDisclaimer } = useSwaps();
109

11-
useEffect(() => {
12-
const loadStorage = async () => {
13-
const data = await storage.local.get(SWAPS_DISCLAIMER_ACKNOWLEDGED);
14-
setShowDisclaimer(!(data[SWAPS_DISCLAIMER_ACKNOWLEDGED] ?? false));
15-
};
16-
17-
loadStorage();
18-
}, []);
19-
20-
const handleAcknowledgeDisclaimer = async () => {
21-
await storage.local.set({
22-
[SWAPS_DISCLAIMER_ACKNOWLEDGED]: true
23-
});
24-
25-
setShowDisclaimer(false);
26-
};
27-
28-
const handleDialog = (isOpen: boolean) => {
29-
setShowDisclaimer(isOpen);
10+
const handleDialog = () => {
11+
handleAcknowledgeDisclaimer();
3012
};
3113

3214
return (
33-
<Dialog.Root open={showDisclaimer} setOpen={handleDialog} zIndex={999}>
15+
<Dialog.Root
16+
open={typeof disclaimerAcknowledged === 'boolean' && !disclaimerAcknowledged}
17+
setOpen={handleDialog}
18+
zIndex={999}
19+
>
3420
<Dialog.Title>{t('swaps.disclaimer.heading')}</Dialog.Title>
3521
<Dialog.Description>{t('swaps.disclaimer.content.paragraph1')}</Dialog.Description>
3622
<Dialog.Description>{t('swaps.disclaimer.content.paragraph2')}</Dialog.Description>

‎apps/browser-extension-wallet/src/views/browser-view/features/swaps/components/SwapContainer.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,9 @@ export const SwapsContainer = (): React.ReactElement => {
8585
setStage,
8686
stage,
8787
unsignedTx,
88-
targetSlippage
88+
targetSlippage,
89+
disclaimerAcknowledged,
90+
fetchingQuote
8991
} = useSwaps();
9092
const { inMemoryWallet } = useWalletStore();
9193
const assetsInfo = useAssetInfo();
@@ -131,7 +133,7 @@ export const SwapsContainer = (): React.ReactElement => {
131133
/>
132134
);
133135
}
134-
if (!estimate && tokenA && tokenB && quantity && Number(quantity) > 0) {
136+
if (fetchingQuote) {
135137
return <Button.CallToAction icon label={t('swaps.btn.fetchingEstimate')} w="$fill" disabled />;
136138
}
137139
return (
@@ -147,7 +149,7 @@ export const SwapsContainer = (): React.ReactElement => {
147149
}}
148150
/>
149151
);
150-
}, [estimate, tokenA, setStage, buildSwap, t, quantity, tokenB]);
152+
}, [estimate, tokenA, setStage, buildSwap, t, fetchingQuote]);
151153

152154
const sidePanel = useMemo(() => {
153155
const titles = {
@@ -558,7 +560,7 @@ export const SwapsContainer = (): React.ReactElement => {
558560
<WarningModal
559561
content={t('browserView.settings.wallet.collateral.amountDescription')}
560562
header={t('swaps.warningModal.collateral.header')}
561-
visible={collateral?.length === 0}
563+
visible={collateral?.length === 0 && typeof disclaimerAcknowledged === 'boolean' && disclaimerAcknowledged}
562564
onConfirm={navigateToCollateralSetting}
563565
confirmLabel={t('announcement.cta')}
564566
/>

0 commit comments

Comments
 (0)