diff --git a/src/api/trust_relationships.js b/src/api/trust_relationships.js index 2e077ad..3769783 100644 --- a/src/api/trust_relationships.js +++ b/src/api/trust_relationships.js @@ -133,8 +133,8 @@ export const getTrustedWallets = async (token) => { .get(`/wallets/${wallet.id}/trust_relationships?exclude_managed=true`); const trustedWallets = response.data.trust_relationships.map(relationship => ({ - id: relationship.target_wallet_id, - name: relationship.target_wallet, + id: relationship.actor_wallet_id, + name: relationship.actor_wallet, tokensInWallet: 0, })); diff --git a/src/pages/SendTokens/SendTokens.js b/src/pages/SendTokens/SendTokens.js index 47a06f3..4e539a1 100644 --- a/src/pages/SendTokens/SendTokens.js +++ b/src/pages/SendTokens/SendTokens.js @@ -20,7 +20,7 @@ import { handleCreateWallet } from './helpers/walletHandlers'; import { handleSendToUntrustedWallets } from './helpers/sendTokenHandlers'; import apiClient from '../../utils/apiClient'; import { getTrustedWallets } from '../../api/trust_relationships'; -import { getPendingTransfers } from '../../api/wallets'; +import { getPendingTransfers, getWalletById } from '../../api/wallets'; @@ -41,6 +41,10 @@ const SendTokens = () => { const handleTabChange = (event, newValue) => { setTabValue(newValue); + setSenderWalletName(null); + setSenderWalletTokens(null); + setSenderWalletId(null); + setPendingTransfers(0); }; useEffect(() => { @@ -53,7 +57,10 @@ const SendTokens = () => { try { setIsLoading(true); const wallets = await getTrustedWallets(authContext.token); - setTrustedWallets(wallets); + const uniqueWallets = wallets.filter((wallet, index, self) => + index === self.findIndex((w) => w.id === wallet.id) + ); + setTrustedWallets(uniqueWallets); } catch (error) { console.error(error); setErrorMessage('An error occurred while fetching trusted wallets.'); @@ -72,6 +79,21 @@ const SendTokens = () => { } }; + const refreshWalletData = async (walletId) => { + try { + const walletData = await getWalletById(authContext.token, walletId); + const pendingAmount = await fetchPendingTransfers(walletId); + + setSenderWalletTokens(walletData.tokensInWallet); + setPendingTransfers(pendingAmount); + + return walletData; + } catch (error) { + console.error('Error refreshing wallet data:', error); + setErrorMessage('An error occurred while refreshing wallet data.'); + } + }; + const handleWalletSelection = async (wallet) => { if (!wallet) { setSenderWalletName(null); @@ -133,18 +155,14 @@ const SendTokens = () => { receiver_wallet: data.receiverWallet, claim: false, }) - .then((response) => { + .then(async (response) => { console.log( 'Tokens transfer completed. Response: ' + JSON.stringify(response) ); - // update tokens amount: total and sender's wallet token - // TODO: uncomment when API is ready: is should have a totalTokens value - // getTotalTokensAmount(); - setSenderWalletTokens((prev) => prev - data.tokensAmount); - + // Refresh wallet data from backend to get accurate token information if (senderWalletId) { - fetchPendingTransfers(senderWalletId).then(setPendingTransfers); + await refreshWalletData(senderWalletId); } setErrorMessage(''); @@ -176,7 +194,9 @@ const SendTokens = () => { setSenderWalletTokens, setCreatedWalletName, setPendingTransfers, - fetchPendingTransfers + fetchPendingTransfers, + refreshWalletData, + senderWalletId }; return ( @@ -231,12 +251,14 @@ const SendTokens = () => { walletType="managed" availableTokens={(senderWalletTokens || 0) - pendingTransfers} /> - + {senderWalletName && ( + + )} @@ -249,12 +271,14 @@ const SendTokens = () => { trustedWallets={trustedWallets} availableTokens={(senderWalletTokens || 0) - pendingTransfers} /> - + {senderWalletName && ( + + )} @@ -265,12 +289,14 @@ const SendTokens = () => { onSenderWalletSelected={handleWalletSelection} availableTokens={(senderWalletTokens || 0) - pendingTransfers} /> - + {senderWalletName && ( + + )} diff --git a/src/pages/SendTokens/SendTokensForm/SelectWallet.js b/src/pages/SendTokens/SendTokensForm/SelectWallet.js index 6fcbf03..1dbd94c 100644 --- a/src/pages/SendTokens/SendTokensForm/SelectWallet.js +++ b/src/pages/SendTokens/SendTokensForm/SelectWallet.js @@ -34,12 +34,12 @@ function SelectWallet({ wallet.name .toLowerCase() .includes(walletSearchString.toLocaleLowerCase()) - ) - .map((wallet) => wallet.name); + ); - wallets.sort(); - setWalletsFullLoadedData(trustedWallets); - setWalletsLoadedData(wallets); + const walletNames = wallets.map(wallet => wallet.name); + walletNames.sort(); + setWalletsFullLoadedData(wallets); + setWalletsLoadedData(walletNames); return; } @@ -74,7 +74,7 @@ function SelectWallet({ }; getWalletsData(); - }, [walletSearchString, trustedWallets, walletType]); + }, [walletSearchString, walletType]); useEffect(() => { // If createdWalletName is not null, get wallets again by createdWalletName and set it as selected value @@ -145,26 +145,6 @@ function SelectWallet({ setWalletsLoadedData(dataToShow); }; - const handleWalletRenderOption = (props, option) => { - if (!option) return; - - if (option === filterLoadMore) { - return ( -
  • - -
    • - ); - } - - return
  • {option}
    • ; - }; - const handleLoadMoreWallets = async (event) => { event.stopPropagation(); setWalletPage(walletPage + 1); @@ -182,14 +162,17 @@ function SelectWallet({ htmlFor="wallet" id="wallet" sx={{ maxWidth: '30rem', minWidth: '15rem' }} - options={[...walletsLoadedData]} - value={wallet} - getOptionLabel={(wallet) => { - if (wallet === filterLoadMore) { + options={walletType === 'trusted' ? trustedWallets : [...walletsLoadedData]} + value={wallet ? (walletType === 'trusted' ? trustedWallets.find(w => w.name === wallet) : wallet) : null} + getOptionLabel={(option) => { + if (!option) return ''; + if (option === filterLoadMore) { return walletSearchString; } - - return wallet; + if (walletType === 'trusted') { + return option?.name || ''; + } + return option || ''; }} loading={walletsLoadedData.length === 1} loadingText={'Loading..'} @@ -197,11 +180,14 @@ function SelectWallet({ // event is triggered by onInputChange if (newVal === filterLoadMore) return; - const walletData = walletsFullLoadedData.find( - (wallet) => wallet.name === newVal - ); - - onChangeWallet(walletData); + if (walletType === 'trusted') { + onChangeWallet(newVal); // newVal is already the wallet object + } else { + const walletData = walletsFullLoadedData.find( + (wallet) => wallet.name === newVal + ); + onChangeWallet(walletData); + } }} onInputChange={(event, newVal) => { // Do not select 'LOAD_MORE' as an autocomplete value @@ -221,7 +207,22 @@ function SelectWallet({ /> ); }} - renderOption={handleWalletRenderOption} + renderOption={(props, option) => { + if (option === filterLoadMore) { + return ( +
  • + +
    • + ); + } + return
  • {walletType === 'trusted' ? option.name : option}
    • ; + }} /> ); diff --git a/src/pages/SendTokens/TokenInfoBlock/TokenInfoBlock.js b/src/pages/SendTokens/TokenInfoBlock/TokenInfoBlock.js index 3344d80..22f86c1 100644 --- a/src/pages/SendTokens/TokenInfoBlock/TokenInfoBlock.js +++ b/src/pages/SendTokens/TokenInfoBlock/TokenInfoBlock.js @@ -45,7 +45,7 @@ const TokenInfoBlock = ({ {inWallet?.toLocaleString() || '0'} - In Wallet + Tokens In Wallet @@ -58,7 +58,7 @@ const TokenInfoBlock = ({ - Pending Transfer + Tokens Pending Transfer @@ -69,7 +69,7 @@ const TokenInfoBlock = ({ {calculatedAvailable?.toLocaleString() || '0'} - Available + Tokens Available diff --git a/src/pages/SendTokens/helpers/sendTokenHandlers.js b/src/pages/SendTokens/helpers/sendTokenHandlers.js index e5eb178..ebc1c2a 100644 --- a/src/pages/SendTokens/helpers/sendTokenHandlers.js +++ b/src/pages/SendTokens/helpers/sendTokenHandlers.js @@ -3,7 +3,7 @@ import apiClient from "../../../utils/apiClient"; export const handleSendTokenForm = async (data, authContext, callbacks) => { - const { setIsLoading, setErrorMessage, setSuccessMessage, setSenderWalletTokens } = callbacks; + const { setIsLoading, setErrorMessage, setSuccessMessage, setSenderWalletTokens, refreshWalletData, senderWalletId } = callbacks; setIsLoading(true); @@ -21,7 +21,12 @@ export const handleSendTokenForm = async (data, authContext, callbacks) => { 'Tokens transfer completed. Response: ' + JSON.stringify(response) ); - setSenderWalletTokens((prev) => prev - data.tokensAmount); + if (senderWalletId && refreshWalletData) { + await refreshWalletData(senderWalletId); + } else { + setSenderWalletTokens((prev) => prev - data.tokensAmount); + } + setErrorMessage(''); setSuccessMessage( `${data.tokensAmount} tokens were successfully sent from '${data.senderWallet}' to '${data.receiverWallet}' wallet. Status of the transfer: '${response.data.state}'` @@ -41,7 +46,7 @@ export const handleSendTokenForm = async (data, authContext, callbacks) => { }; export const handleSendToUntrustedWallets = async (data, authContext, callbacks) => { - const { setIsLoading, setErrorMessage, setSuccessMessage, setSenderWalletTokens } = callbacks; + const { setIsLoading, setErrorMessage, setSuccessMessage, setSenderWalletTokens, refreshWalletData, senderWalletId } = callbacks; setIsLoading(true); @@ -59,7 +64,12 @@ export const handleSendToUntrustedWallets = async (data, authContext, callbacks) 'Tokens transfer to untrusted wallet completed. Response: ' + JSON.stringify(response) ); - setSenderWalletTokens((prev) => prev - data.tokensAmount); + if (senderWalletId && refreshWalletData) { + await refreshWalletData(senderWalletId); + } else { + setSenderWalletTokens((prev) => prev - data.tokensAmount); + } + setErrorMessage(''); setSuccessMessage( `${data.tokensAmount} tokens were successfully sent to untrusted wallet '${data.receiverWallet}'. ` +