Skip to content

Commit fa4db43

Browse files
samwel141samwel141
authored
Merge pull request #160 from samwel141/v2
Resolve trusted wallet selection issues in SendTokens component
2 parents 7f071ed + 26ba656 commit fa4db43

5 files changed

Lines changed: 112 additions & 75 deletions

File tree

‎src/api/trust_relationships.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,8 @@ export const getTrustedWallets = async (token) => {
133133
.get(`/wallets/${wallet.id}/trust_relationships?exclude_managed=true`);
134134

135135
const trustedWallets = response.data.trust_relationships.map(relationship => ({
136-
id: relationship.target_wallet_id,
137-
name: relationship.target_wallet,
136+
id: relationship.actor_wallet_id,
137+
name: relationship.actor_wallet,
138138
tokensInWallet: 0,
139139
}));
140140

‎src/pages/SendTokens/SendTokens.js‎

Lines changed: 54 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { handleCreateWallet } from './helpers/walletHandlers';
2020
import { handleSendToUntrustedWallets } from './helpers/sendTokenHandlers';
2121
import apiClient from '../../utils/apiClient';
2222
import { getTrustedWallets } from '../../api/trust_relationships';
23-
import { getPendingTransfers } from '../../api/wallets';
23+
import { getPendingTransfers, getWalletById } from '../../api/wallets';
2424

2525

2626

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

4242
const handleTabChange = (event, newValue) => {
4343
setTabValue(newValue);
44+
setSenderWalletName(null);
45+
setSenderWalletTokens(null);
46+
setSenderWalletId(null);
47+
setPendingTransfers(0);
4448
};
4549

4650
useEffect(() => {
@@ -53,7 +57,10 @@ const SendTokens = () => {
5357
try {
5458
setIsLoading(true);
5559
const wallets = await getTrustedWallets(authContext.token);
56-
setTrustedWallets(wallets);
60+
const uniqueWallets = wallets.filter((wallet, index, self) =>
61+
index === self.findIndex((w) => w.id === wallet.id)
62+
);
63+
setTrustedWallets(uniqueWallets);
5764
} catch (error) {
5865
console.error(error);
5966
setErrorMessage('An error occurred while fetching trusted wallets.');
@@ -72,6 +79,21 @@ const SendTokens = () => {
7279
}
7380
};
7481

82+
const refreshWalletData = async (walletId) => {
83+
try {
84+
const walletData = await getWalletById(authContext.token, walletId);
85+
const pendingAmount = await fetchPendingTransfers(walletId);
86+
87+
setSenderWalletTokens(walletData.tokensInWallet);
88+
setPendingTransfers(pendingAmount);
89+
90+
return walletData;
91+
} catch (error) {
92+
console.error('Error refreshing wallet data:', error);
93+
setErrorMessage('An error occurred while refreshing wallet data.');
94+
}
95+
};
96+
7597
const handleWalletSelection = async (wallet) => {
7698
if (!wallet) {
7799
setSenderWalletName(null);
@@ -133,18 +155,14 @@ const SendTokens = () => {
133155
receiver_wallet: data.receiverWallet,
134156
claim: false,
135157
})
136-
.then((response) => {
158+
.then(async (response) => {
137159
console.log(
138160
'Tokens transfer completed. Response: ' + JSON.stringify(response)
139161
);
140162

141-
// update tokens amount: total and sender's wallet token
142-
// TODO: uncomment when API is ready: is should have a totalTokens value
143-
// getTotalTokensAmount();
144-
setSenderWalletTokens((prev) => prev - data.tokensAmount);
145-
163+
// Refresh wallet data from backend to get accurate token information
146164
if (senderWalletId) {
147-
fetchPendingTransfers(senderWalletId).then(setPendingTransfers);
165+
await refreshWalletData(senderWalletId);
148166
}
149167

150168
setErrorMessage('');
@@ -176,7 +194,9 @@ const SendTokens = () => {
176194
setSenderWalletTokens,
177195
setCreatedWalletName,
178196
setPendingTransfers,
179-
fetchPendingTransfers
197+
fetchPendingTransfers,
198+
refreshWalletData,
199+
senderWalletId
180200
};
181201

182202
return (
@@ -231,12 +251,14 @@ const SendTokens = () => {
231251
walletType="managed"
232252
availableTokens={(senderWalletTokens || 0) - pendingTransfers}
233253
/>
234-
<TokenInfoBlock
235-
inWallet={senderWalletTokens || 0}
236-
pendingTransfer={pendingTransfers}
237-
available={(senderWalletTokens || 0) - pendingTransfers}
238-
senderWalletName={senderWalletName}
239-
/>
254+
{senderWalletName && (
255+
<TokenInfoBlock
256+
inWallet={senderWalletTokens || 0}
257+
pendingTransfer={pendingTransfers}
258+
available={(senderWalletTokens || 0) - pendingTransfers}
259+
senderWalletName={senderWalletName}
260+
/>
261+
)}
240262
</div>
241263
</TabPanel>
242264

@@ -249,12 +271,14 @@ const SendTokens = () => {
249271
trustedWallets={trustedWallets}
250272
availableTokens={(senderWalletTokens || 0) - pendingTransfers}
251273
/>
252-
<TokenInfoBlock
253-
inWallet={senderWalletTokens || 0}
254-
pendingTransfer={pendingTransfers}
255-
available={(senderWalletTokens || 0) - pendingTransfers}
256-
senderWalletName={senderWalletName}
257-
/>
274+
{senderWalletName && (
275+
<TokenInfoBlock
276+
inWallet={senderWalletTokens || 0}
277+
pendingTransfer={pendingTransfers}
278+
available={(senderWalletTokens || 0) - pendingTransfers}
279+
senderWalletName={senderWalletName}
280+
/>
281+
)}
258282
</div>
259283
</TabPanel>
260284

@@ -265,12 +289,14 @@ const SendTokens = () => {
265289
onSenderWalletSelected={handleWalletSelection}
266290
availableTokens={(senderWalletTokens || 0) - pendingTransfers}
267291
/>
268-
<TokenInfoBlock
269-
inWallet={senderWalletTokens || 0}
270-
pendingTransfer={pendingTransfers}
271-
available={(senderWalletTokens || 0) - pendingTransfers}
272-
senderWalletName={senderWalletName}
273-
/>
292+
{senderWalletName && (
293+
<TokenInfoBlock
294+
inWallet={senderWalletTokens || 0}
295+
pendingTransfer={pendingTransfers}
296+
available={(senderWalletTokens || 0) - pendingTransfers}
297+
senderWalletName={senderWalletName}
298+
/>
299+
)}
274300
</div>
275301
</TabPanel>
276302
</Paper>

‎src/pages/SendTokens/SendTokensForm/SelectWallet.js‎

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,12 @@ function SelectWallet({
3434
wallet.name
3535
.toLowerCase()
3636
.includes(walletSearchString.toLocaleLowerCase())
37-
)
38-
.map((wallet) => wallet.name);
37+
);
3938

40-
wallets.sort();
41-
setWalletsFullLoadedData(trustedWallets);
42-
setWalletsLoadedData(wallets);
39+
const walletNames = wallets.map(wallet => wallet.name);
40+
walletNames.sort();
41+
setWalletsFullLoadedData(wallets);
42+
setWalletsLoadedData(walletNames);
4343
return;
4444
}
4545

@@ -74,7 +74,7 @@ function SelectWallet({
7474
};
7575

7676
getWalletsData();
77-
}, [walletSearchString, trustedWallets, walletType]);
77+
}, [walletSearchString, walletType]);
7878

7979
useEffect(() => {
8080
// If createdWalletName is not null, get wallets again by createdWalletName and set it as selected value
@@ -145,26 +145,6 @@ function SelectWallet({
145145
setWalletsLoadedData(dataToShow);
146146
};
147147

148-
const handleWalletRenderOption = (props, option) => {
149-
if (!option) return;
150-
151-
if (option === filterLoadMore) {
152-
return (
153-
<li {...props}>
154-
<Button
155-
id="loadMore_btn"
156-
onClick={handleLoadMoreWallets}
157-
color="primary"
158-
>
159-
Load more
160-
</Button>
161-
</li>
162-
);
163-
}
164-
165-
return <li {...props}>{option}</li>;
166-
};
167-
168148
const handleLoadMoreWallets = async (event) => {
169149
event.stopPropagation();
170150
setWalletPage(walletPage + 1);
@@ -182,26 +162,32 @@ function SelectWallet({
182162
htmlFor="wallet"
183163
id="wallet"
184164
sx={{ maxWidth: '30rem', minWidth: '15rem' }}
185-
options={[...walletsLoadedData]}
186-
value={wallet}
187-
getOptionLabel={(wallet) => {
188-
if (wallet === filterLoadMore) {
165+
options={walletType === 'trusted' ? trustedWallets : [...walletsLoadedData]}
166+
value={wallet ? (walletType === 'trusted' ? trustedWallets.find(w => w.name === wallet) : wallet) : null}
167+
getOptionLabel={(option) => {
168+
if (!option) return '';
169+
if (option === filterLoadMore) {
189170
return walletSearchString;
190171
}
191-
192-
return wallet;
172+
if (walletType === 'trusted') {
173+
return option?.name || '';
174+
}
175+
return option || '';
193176
}}
194177
loading={walletsLoadedData.length === 1}
195178
loadingText={'Loading..'}
196179
onChange={(_oldVal, newVal) => {
197180
// event is triggered by onInputChange
198181
if (newVal === filterLoadMore) return;
199182

200-
const walletData = walletsFullLoadedData.find(
201-
(wallet) => wallet.name === newVal
202-
);
203-
204-
onChangeWallet(walletData);
183+
if (walletType === 'trusted') {
184+
onChangeWallet(newVal); // newVal is already the wallet object
185+
} else {
186+
const walletData = walletsFullLoadedData.find(
187+
(wallet) => wallet.name === newVal
188+
);
189+
onChangeWallet(walletData);
190+
}
205191
}}
206192
onInputChange={(event, newVal) => {
207193
// Do not select 'LOAD_MORE' as an autocomplete value
@@ -221,7 +207,22 @@ function SelectWallet({
221207
/>
222208
);
223209
}}
224-
renderOption={handleWalletRenderOption}
210+
renderOption={(props, option) => {
211+
if (option === filterLoadMore) {
212+
return (
213+
<li {...props}>
214+
<Button
215+
id="loadMore_btn"
216+
onClick={handleLoadMoreWallets}
217+
color="primary"
218+
>
219+
Load more
220+
</Button>
221+
</li>
222+
);
223+
}
224+
return <li {...props}>{walletType === 'trusted' ? option.name : option}</li>;
225+
}}
225226
/>
226227
</>
227228
);

‎src/pages/SendTokens/TokenInfoBlock/TokenInfoBlock.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const TokenInfoBlock = ({
4545
<AmountText>{inWallet?.toLocaleString() || '0'}</AmountText>
4646
</Grid>
4747
<Grid item xs={4}>
48-
<SubText>In Wallet</SubText>
48+
<SubText>Tokens In Wallet</SubText>
4949
</Grid>
5050

5151
<Grid item xs={3}></Grid>
@@ -58,7 +58,7 @@ const TokenInfoBlock = ({
5858
</AmountText>
5959
</Grid>
6060
<Grid item xs={4}>
61-
<SubText>Pending Transfer</SubText>
61+
<SubText>Tokens Pending Transfer</SubText>
6262
</Grid>
6363

6464
<Grid item xs={3}></Grid>
@@ -69,7 +69,7 @@ const TokenInfoBlock = ({
6969
<AmountText>{calculatedAvailable?.toLocaleString() || '0'}</AmountText>
7070
</Grid>
7171
<Grid item xs={4}>
72-
<SubText>Available</SubText>
72+
<SubText>Tokens Available</SubText>
7373
</Grid>
7474
</Grid>
7575
</Paper>

‎src/pages/SendTokens/helpers/sendTokenHandlers.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import apiClient from "../../../utils/apiClient";
33

44

55
export const handleSendTokenForm = async (data, authContext, callbacks) => {
6-
const { setIsLoading, setErrorMessage, setSuccessMessage, setSenderWalletTokens } = callbacks;
6+
const { setIsLoading, setErrorMessage, setSuccessMessage, setSenderWalletTokens, refreshWalletData, senderWalletId } = callbacks;
77

88
setIsLoading(true);
99

@@ -21,7 +21,12 @@ export const handleSendTokenForm = async (data, authContext, callbacks) => {
2121
'Tokens transfer completed. Response: ' + JSON.stringify(response)
2222
);
2323

24-
setSenderWalletTokens((prev) => prev - data.tokensAmount);
24+
if (senderWalletId && refreshWalletData) {
25+
await refreshWalletData(senderWalletId);
26+
} else {
27+
setSenderWalletTokens((prev) => prev - data.tokensAmount);
28+
}
29+
2530
setErrorMessage('');
2631
setSuccessMessage(
2732
`${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) => {
4146
};
4247

4348
export const handleSendToUntrustedWallets = async (data, authContext, callbacks) => {
44-
const { setIsLoading, setErrorMessage, setSuccessMessage, setSenderWalletTokens } = callbacks;
49+
const { setIsLoading, setErrorMessage, setSuccessMessage, setSenderWalletTokens, refreshWalletData, senderWalletId } = callbacks;
4550

4651
setIsLoading(true);
4752

@@ -59,7 +64,12 @@ export const handleSendToUntrustedWallets = async (data, authContext, callbacks)
5964
'Tokens transfer to untrusted wallet completed. Response: ' + JSON.stringify(response)
6065
);
6166

62-
setSenderWalletTokens((prev) => prev - data.tokensAmount);
67+
if (senderWalletId && refreshWalletData) {
68+
await refreshWalletData(senderWalletId);
69+
} else {
70+
setSenderWalletTokens((prev) => prev - data.tokensAmount);
71+
}
72+
6373
setErrorMessage('');
6474
setSuccessMessage(
6575
`${data.tokensAmount} tokens were successfully sent to untrusted wallet '${data.receiverWallet}'. ` +

0 commit comments

Comments
 (0)