Skip to content

Resolve trusted wallet selection issues in SendTokens component #160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
samwel141 merged 4 commits into from
Oct 21, 2025
Merged

Resolve trusted wallet selection issues in SendTokens component #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a07a491
fix: resolve trusted wallet selection issues in SendTokens component
samwel141 Sep 15, 2025
51b2e93
Merge branch 'Greenstand:v2' into v2
samwel141 Sep 15, 2025
07b08e2
chore(SendTokens): implement update tokens information from backend i…
samwel141 Sep 23, 2025
26ba656
Merge branch 'v2' of https://github.com/samwel141/treetracker-wallet-…
samwel141 Sep 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/api/trust_relationships.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}));

Expand Down
82 changes: 54 additions & 28 deletions src/pages/SendTokens/SendTokens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';



Expand All @@ -41,6 +41,10 @@ const SendTokens = () => {

const handleTabChange = (event, newValue) => {
setTabValue(newValue);
setSenderWalletName(null);
setSenderWalletTokens(null);
setSenderWalletId(null);
setPendingTransfers(0);
};

useEffect(() => {
Expand All @@ -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.');
Expand All @@ -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);
Expand Down Expand Up @@ -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('');
Expand Down Expand Up @@ -176,7 +194,9 @@ const SendTokens = () => {
setSenderWalletTokens,
setCreatedWalletName,
setPendingTransfers,
fetchPendingTransfers
fetchPendingTransfers,
refreshWalletData,
senderWalletId
};

return (
Expand Down Expand Up @@ -231,12 +251,14 @@ const SendTokens = () => {
walletType="managed"
availableTokens={(senderWalletTokens || 0) - pendingTransfers}
/>
<TokenInfoBlock
inWallet={senderWalletTokens || 0}
pendingTransfer={pendingTransfers}
available={(senderWalletTokens || 0) - pendingTransfers}
senderWalletName={senderWalletName}
/>
{senderWalletName && (
<TokenInfoBlock
inWallet={senderWalletTokens || 0}
pendingTransfer={pendingTransfers}
available={(senderWalletTokens || 0) - pendingTransfers}
senderWalletName={senderWalletName}
/>
)}
</div>
</TabPanel>

Expand All @@ -249,12 +271,14 @@ const SendTokens = () => {
trustedWallets={trustedWallets}
availableTokens={(senderWalletTokens || 0) - pendingTransfers}
/>
<TokenInfoBlock
inWallet={senderWalletTokens || 0}
pendingTransfer={pendingTransfers}
available={(senderWalletTokens || 0) - pendingTransfers}
senderWalletName={senderWalletName}
/>
{senderWalletName && (
<TokenInfoBlock
inWallet={senderWalletTokens || 0}
pendingTransfer={pendingTransfers}
available={(senderWalletTokens || 0) - pendingTransfers}
senderWalletName={senderWalletName}
/>
)}
</div>
</TabPanel>

Expand All @@ -265,12 +289,14 @@ const SendTokens = () => {
onSenderWalletSelected={handleWalletSelection}
availableTokens={(senderWalletTokens || 0) - pendingTransfers}
/>
<TokenInfoBlock
inWallet={senderWalletTokens || 0}
pendingTransfer={pendingTransfers}
available={(senderWalletTokens || 0) - pendingTransfers}
senderWalletName={senderWalletName}
/>
{senderWalletName && (
<TokenInfoBlock
inWallet={senderWalletTokens || 0}
pendingTransfer={pendingTransfers}
available={(senderWalletTokens || 0) - pendingTransfers}
senderWalletName={senderWalletName}
/>
)}
</div>
</TabPanel>
</Paper>
Expand Down
77 changes: 39 additions & 38 deletions src/pages/SendTokens/SendTokensForm/SelectWallet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -145,26 +145,6 @@ function SelectWallet({
setWalletsLoadedData(dataToShow);
};

const handleWalletRenderOption = (props, option) => {
if (!option) return;

if (option === filterLoadMore) {
return (
<li {...props}>
<Button
id="loadMore_btn"
onClick={handleLoadMoreWallets}
color="primary"
>
Load more
</Button>
</li>
);
}

return <li {...props}>{option}</li>;
};

const handleLoadMoreWallets = async (event) => {
event.stopPropagation();
setWalletPage(walletPage + 1);
Expand All @@ -182,26 +162,32 @@ 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..'}
onChange={(_oldVal, newVal) => {
// 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
Expand All @@ -221,7 +207,22 @@ function SelectWallet({
/>
);
}}
renderOption={handleWalletRenderOption}
renderOption={(props, option) => {
if (option === filterLoadMore) {
return (
<li {...props}>
<Button
id="loadMore_btn"
onClick={handleLoadMoreWallets}
color="primary"
>
Load more
</Button>
</li>
);
}
return <li {...props}>{walletType === 'trusted' ? option.name : option}</li>;
}}
/>
</>
);
Expand Down
6 changes: 3 additions & 3 deletions src/pages/SendTokens/TokenInfoBlock/TokenInfoBlock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const TokenInfoBlock = ({
<AmountText>{inWallet?.toLocaleString() || '0'}</AmountText>
</Grid>
<Grid item xs={4}>
<SubText>In Wallet</SubText>
<SubText>Tokens In Wallet</SubText>
</Grid>

<Grid item xs={3}></Grid>
Expand All @@ -58,7 +58,7 @@ const TokenInfoBlock = ({
</AmountText>
</Grid>
<Grid item xs={4}>
<SubText>Pending Transfer</SubText>
<SubText>Tokens Pending Transfer</SubText>
</Grid>

<Grid item xs={3}></Grid>
Expand All @@ -69,7 +69,7 @@ const TokenInfoBlock = ({
<AmountText>{calculatedAvailable?.toLocaleString() || '0'}</AmountText>
</Grid>
<Grid item xs={4}>
<SubText>Available</SubText>
<SubText>Tokens Available</SubText>
</Grid>
</Grid>
</Paper>
Expand Down
18 changes: 14 additions & 4 deletions src/pages/SendTokens/helpers/sendTokenHandlers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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}'`
Expand All @@ -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);

Expand All @@ -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}'. ` +
Expand Down