Skip to content

Commit d728f6f

Browse files
Ikari-Shinji-reIkari-Shinji-re
committed
fix: fix bugs
1 parent f048752 commit d728f6f

14 files changed

Lines changed: 172 additions & 89 deletions

File tree

‎widget/app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,4 @@
2626
"react-dom": "^18.2.0",
2727
"react-router-dom": "^6.8.0"
2828
}
29-
}
29+
}

‎widget/embedded/src/components/SwitchFromAndTo/SwitchFromAndTo.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ReverseIcon } from '@rango-dev/ui';
22
import React from 'react';
33

4+
import { useAppStore } from '../../store/AppStore';
45
import { useQuoteStore } from '../../store/quote';
56

67
import {
@@ -11,6 +12,37 @@ import {
1112

1213
export function SwitchFromAndToButton() {
1314
const switchFromAndTo = useQuoteStore().use.switchFromAndTo();
15+
const sourceWallet = useAppStore().selectedWallet('source');
16+
const destinationWallet = useAppStore().selectedWallet('destination');
17+
const { customDestination } = useQuoteStore()();
18+
const { setSelectedWallet, clearSelectedWallet } = useAppStore();
19+
20+
const switchSelectedWallets = () => {
21+
if (sourceWallet) {
22+
setSelectedWallet({
23+
kind: 'destination',
24+
wallet: {
25+
blockchain: sourceWallet.chain,
26+
type: sourceWallet.walletType,
27+
address: sourceWallet.address,
28+
},
29+
});
30+
} else {
31+
clearSelectedWallet('destination');
32+
}
33+
if (customDestination || !destinationWallet) {
34+
clearSelectedWallet('source');
35+
} else {
36+
setSelectedWallet({
37+
kind: 'source',
38+
wallet: {
39+
blockchain: destinationWallet.chain,
40+
type: destinationWallet.walletType,
41+
address: destinationWallet.address,
42+
},
43+
});
44+
}
45+
};
1446

1547
return (
1648
<SwitchButtonContainer>
@@ -25,6 +57,9 @@ export function SwitchFromAndToButton() {
2557
button.classList.remove('rotate');
2658
}, ROTATE_ANIMATION_DURATION);
2759
switchFromAndTo();
60+
setTimeout(() => {
61+
switchSelectedWallets();
62+
}, 0);
2863
}}>
2964
<ReverseIcon size={12} />
3065
</StyledButton>

‎widget/embedded/src/components/TokenList/TokenList.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,10 @@ export function TokenList(props: PropTypes) {
158158
</Button>
159159
);
160160
}
161-
const tokenBalance = formatBalance(getBalanceFor(token));
161+
const tokenBalance = getBalanceFor(token);
162+
const formattedTokenBalance = tokenBalance
163+
? formatBalance(tokenBalance)
164+
: null;
162165

163166
if (action) {
164167
return action(token);
@@ -174,18 +177,18 @@ export function TokenList(props: PropTypes) {
174177
}
175178

176179
return (
177-
tokenBalance && (
180+
formattedTokenBalance && (
178181
<BalanceContainer>
179182
<TokenBalance variant="title" size="small">
180-
{tokenBalance.amount}
183+
{formattedTokenBalance.amount}
181184
</TokenBalance>
182185
<div />
183-
{tokenBalance.usdValue && (
186+
{formattedTokenBalance.usdValue && (
184187
<Typography
185188
variant="body"
186189
className={usdValueStyles()}
187190
size="xsmall">
188-
{`$${tokenBalance.usdValue}`}
191+
{`$${formattedTokenBalance.usdValue}`}
189192
</Typography>
190193
)}
191194
</BalanceContainer>

‎widget/embedded/src/constants/messages.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const swapButtonTitles = () => {
55
connectWallet: i18n.t('Connect Wallet'),
66
selectToken: i18n.t('Select Token'),
77
enterAmount: i18n.t('Enter Amount'),
8-
swap: i18n.t('Swap'),
8+
swap: i18n.t('Confirm Swap'),
99
swapAnyway: i18n.t('Swap anyway'),
1010
ethWarning: i18n.t('The route goes through Ethereum. Continue?'),
1111
};

‎widget/embedded/src/containers/Inputs/SelectedWallet/SelectedWalletButton.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import type { PropTypes } from './SelectedWalletButton.types';
22

3-
import { Divider, EditIcon, Image, Typography } from '@rango-dev/ui';
3+
import {
4+
DestinationWallet,
5+
Divider,
6+
EditIcon,
7+
Image,
8+
Typography,
9+
} from '@rango-dev/ui';
410
import React from 'react';
511
import { useTranslation } from 'react-i18next';
612

@@ -26,12 +32,16 @@ export function SelectedWalletButton(props: PropTypes) {
2632
)}
2733
{address && (
2834
<div className="flex">
29-
{image && (
35+
{
3036
<>
31-
<Image size={16} src={image} />
37+
{image ? (
38+
<Image size={16} src={image} />
39+
) : (
40+
<DestinationWallet color="secondary" size={16} />
41+
)}
3242
<Divider direction="horizontal" size={4} />
3343
</>
34-
)}
44+
}
3545
<Typography variant="body" size="small" color="neutral800">
3646
{getConciseAddress(
3747
address,

‎widget/embedded/src/containers/Inputs/SourceInput/SourceInput.tsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@ import {
1717
} from '../../../constants/routing';
1818
import { useAppStore } from '../../../store/AppStore';
1919
import { useQuoteStore } from '../../../store/quote';
20+
import { createBalanceKey } from '../../../store/utils/wallets';
2021
import { getContainer } from '../../../utils/common';
2122
import { numberToString } from '../../../utils/numbers';
2223
import { canComputePriceImpact } from '../../../utils/swap';
23-
import { formatBalance, isFetchingBalance } from '../../../utils/wallets';
24+
import { formatBalance } from '../../../utils/wallets';
2425
import { SelectedWalletButton } from '../SelectedWallet/SelectedWalletButton';
2526
import { SwapInputLabel } from '../SwapInputLabel/SwapInputLabel';
2627

@@ -29,11 +30,8 @@ import { Container } from './SourceInput.styles';
2930

3031
export function SourceInput(props: PropTypes) {
3132
const { onClickToken } = props;
32-
const {
33-
connectedWallets,
34-
getBalanceFor,
35-
fetchStatus: fetchingMetaStatus,
36-
} = useAppStore();
33+
const { getBalancesForWalletAddress, fetchStatus: fetchingMetaStatus } =
34+
useAppStore();
3735
const sourceWallet = useAppStore().selectedWallet('source');
3836
const {
3937
fromToken,
@@ -52,12 +50,17 @@ export function SourceInput(props: PropTypes) {
5250
image: getWalletInfo(sourceWallet.walletType).img,
5351
}
5452
: undefined;
55-
const fetchingBalance = fromToken
56-
? isFetchingBalance(connectedWallets, fromToken.blockchain)
57-
: false;
53+
const fetchingBalance = !!sourceWallet?.loading;
5854

59-
const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
60-
const fromTokenFormattedBalance = formatBalance(fromTokenBalance)?.amount;
55+
const fromTokenBalance =
56+
fromToken && sourceWallet
57+
? getBalancesForWalletAddress(sourceWallet.address)[
58+
createBalanceKey(sourceWallet.address, fromToken)
59+
]
60+
: null;
61+
const fromTokenFormattedBalance = fromTokenBalance
62+
? formatBalance(fromTokenBalance)?.amount
63+
: undefined;
6164

6265
const fromBalanceAmount = fromTokenBalance
6366
? new BigNumber(fromTokenBalance.amount).shiftedBy(
@@ -108,11 +111,13 @@ export function SourceInput(props: PropTypes) {
108111
<SwapInput
109112
id="widget-swap-from"
110113
moreInfo={
111-
<MaxBalance
112-
loading={fetchingBalance}
113-
balance={fromTokenFormattedBalance}
114-
onClickMaxBalance={setMaxBalanceAsInputAmount}
115-
/>
114+
sourceWallet && (
115+
<MaxBalance
116+
loading={fetchingBalance}
117+
balance={fromTokenFormattedBalance}
118+
onClickMaxBalance={setMaxBalanceAsInputAmount}
119+
/>
120+
)
116121
}
117122
mode="From"
118123
onInputChange={setInputAmount}

‎widget/embedded/src/hooks/useUpdateSelectedWallets.ts/useUpdateSelectedWallets.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { useQuoteStore } from '../../store/quote';
1414
*/
1515
export function useUpdateSelectedWallets() {
1616
const quoteStore = useQuoteStore()();
17-
const { fromToken, toToken, setCustomDestination } = quoteStore;
17+
const { fromBlockchain, toBlockchain, setCustomDestination } = quoteStore;
1818
const {
1919
clearSelectedWallet,
2020
tryMatchWalletForBlockchain,
@@ -28,11 +28,11 @@ export function useUpdateSelectedWallets() {
2828
);
2929
if (shouldUpdateSourceWallet) {
3030
clearSelectedWallet('source');
31-
if (fromToken) {
32-
tryMatchWalletForBlockchain('source', fromToken.blockchain);
31+
if (fromBlockchain) {
32+
tryMatchWalletForBlockchain('source', fromBlockchain.name);
3333
}
3434
}
35-
}, [fromToken?.blockchain, fromToken?.address, fromToken?.symbol]);
35+
}, [fromBlockchain?.name]);
3636

3737
useEffect(() => {
3838
setCustomDestination(null);
@@ -43,9 +43,9 @@ export function useUpdateSelectedWallets() {
4343
);
4444
if (shouldUpdateDestinationWallet) {
4545
clearSelectedWallet('destination');
46-
if (toToken) {
47-
tryMatchWalletForBlockchain('destination', toToken.blockchain);
46+
if (toBlockchain) {
47+
tryMatchWalletForBlockchain('destination', toBlockchain.name);
4848
}
4949
}
50-
}, [toToken?.blockchain, toToken?.address, toToken?.symbol]);
50+
}, [toBlockchain?.name]);
5151
}

‎widget/embedded/src/store/slices/wallets.ts‎

Lines changed: 33 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -302,22 +302,22 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
302302
if (walletsNeedToBeAdded.length > 0) {
303303
const newConnectedWallets: ConnectedWallet[] = walletsNeedToBeAdded.map(
304304
(account) => {
305-
const { fromToken, toToken } = quoteStore;
305+
const { fromBlockchain, toBlockchain } = quoteStore;
306306
const shouldMarkWalletAsSource =
307-
account.chain === fromToken?.blockchain &&
307+
account.chain === fromBlockchain?.name &&
308308
!connectedWallets.some(
309309
(connectedWallet) =>
310-
fromToken &&
311-
connectedWallet.chain === fromToken.blockchain &&
310+
fromBlockchain &&
311+
connectedWallet.chain === fromBlockchain.name &&
312312
connectedWallet.selected &&
313313
connectedWallet.isSource
314314
);
315315
const shouldMarkWalletAsDestination =
316-
account.chain === toToken?.blockchain &&
316+
account.chain === toBlockchain?.name &&
317317
!connectedWallets.some(
318318
(connectedWallet) =>
319-
toToken &&
320-
connectedWallet.chain === toToken.blockchain &&
319+
toBlockchain &&
320+
connectedWallet.chain === toBlockchain.name &&
321321
connectedWallet.selected &&
322322
connectedWallet.isDestination
323323
);
@@ -370,16 +370,16 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
370370
};
371371
});
372372

373-
const fromToken = quoteStore.fromToken;
373+
const fromBlockchain = quoteStore.fromBlockchain;
374374
const sourceWallet = get().selectedWallet('source');
375-
if (fromToken && !sourceWallet) {
376-
get().tryMatchWalletForBlockchain('source', fromToken.blockchain);
375+
if (fromBlockchain && !sourceWallet) {
376+
get().tryMatchWalletForBlockchain('source', fromBlockchain.name);
377377
}
378378

379-
const toToken = quoteStore.toToken;
379+
const toBlockchain = quoteStore.toBlockchain;
380380
const destinationWallet = get().selectedWallet('destination');
381-
if (!destinationWallet && toToken) {
382-
get().tryMatchWalletForBlockchain('destination', toToken.blockchain);
381+
if (!destinationWallet && toBlockchain) {
382+
get().tryMatchWalletForBlockchain('destination', toBlockchain.name);
383383
}
384384
}
385385
},
@@ -602,14 +602,19 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
602602
set({ connectedWallets: nextConnectedWallets });
603603
},
604604
isSelectedWalletStillRelevant: (kind, quoteStore) => {
605-
const { fromToken, toToken } = quoteStore;
606-
const selectedToken = kind === 'source' ? fromToken : toToken;
605+
const { fromBlockchain, toBlockchain } = quoteStore;
606+
const selectedBlockchain =
607+
kind === 'source' ? fromBlockchain : toBlockchain;
607608
const selectedWallet =
608609
kind === 'source'
609610
? get().selectedWallet('source')
610611
: get().selectedWallet('destination');
611612

612-
return selectedToken?.blockchain === selectedWallet?.chain;
613+
return get().connectedWallets.some(
614+
(wallet) =>
615+
wallet.chain === selectedBlockchain?.name &&
616+
wallet.walletType === selectedWallet?.walletType
617+
);
613618
},
614619
clearSelectedWallet: (kind) => {
615620
const selectedWalletFlag = SELECTED_WALLETS_FLAG[kind];
@@ -759,16 +764,16 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
759764
connectedWallets: nextConnectedWallets,
760765
});
761766

762-
const fromToken = quoteStore.fromToken;
767+
const fromBlockchain = quoteStore.fromBlockchain;
763768
const sourceWallet = get().selectedWallet('source');
764-
if (fromToken && !sourceWallet) {
765-
get().tryMatchWalletForBlockchain('source', fromToken.blockchain);
769+
if (fromBlockchain && !sourceWallet) {
770+
get().tryMatchWalletForBlockchain('source', fromBlockchain.name);
766771
}
767772

768-
const toToken = quoteStore.toToken;
773+
const toBlockchain = quoteStore.toBlockchain;
769774
const destinationWallet = get().selectedWallet('destination');
770-
if (toToken && !destinationWallet) {
771-
get().tryMatchWalletForBlockchain('destination', toToken.blockchain);
775+
if (toBlockchain && !destinationWallet) {
776+
get().tryMatchWalletForBlockchain('destination', toBlockchain.name);
772777
}
773778
}
774779
},
@@ -801,16 +806,16 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
801806
connectedWallets: nextConnectedWallets,
802807
});
803808

804-
const fromToken = quoteStore.fromToken;
809+
const fromBlockchain = quoteStore.fromBlockchain;
805810
const sourceWallet = get().selectedWallet('source');
806-
if (fromToken && !sourceWallet) {
807-
get().tryMatchWalletForBlockchain('source', fromToken.blockchain);
811+
if (fromBlockchain && !sourceWallet) {
812+
get().tryMatchWalletForBlockchain('source', fromBlockchain.name);
808813
}
809814

810-
const toToken = quoteStore.toToken;
815+
const toBlockchain = quoteStore.toBlockchain;
811816
const destinationWallet = get().selectedWallet('destination');
812-
if (toToken && !destinationWallet) {
813-
get().tryMatchWalletForBlockchain('source', toToken.blockchain);
817+
if (toBlockchain && !destinationWallet) {
818+
get().tryMatchWalletForBlockchain('source', toBlockchain.name);
814819
}
815820
}
816821
},

0 commit comments

Comments
 (0)