Skip to content

Commit 462aacf

Browse files
runway-github[bot]runway-github[bot]
authored
chore(runway): cherry-pick fix: add loader if account balance is not defined (#16170)
- fix: cp-7.47.0 add loader if account balance is not defined (#16011)
1 parent 15260be commit 462aacf

14 files changed

Lines changed: 180 additions & 94 deletions

File tree

‎app/components/UI/AccountSelectorList/AccountSelectorList.tsx‎

Lines changed: 50 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { useNavigation } from '@react-navigation/native';
1313
import { KeyringTypes } from '@metamask/keyring-controller';
1414
import { isAddress as isSolanaAddress } from '@solana/addresses';
1515

16-
1716
// External dependencies.
1817
import Cell, {
1918
CellVariant,
@@ -47,6 +46,7 @@ import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletV
4746
import { RootState } from '../../../reducers';
4847
import { ACCOUNT_SELECTOR_LIST_TESTID } from './AccountSelectorList.constants';
4948
import { toHex } from '@metamask/controller-utils';
49+
import { Skeleton } from '../../../component-library/components/Skeleton';
5050

5151
const AccountSelectorList = ({
5252
onSelectAccount,
@@ -90,37 +90,49 @@ const AccountSelectorList = ({
9090
}, [selectedAddresses]);
9191

9292
const renderAccountBalances = useCallback(
93-
({ fiatBalance, tokens }: Assets, address: string) => {
93+
(
94+
{ fiatBalance, tokens }: Assets,
95+
address: string,
96+
isLoadingAccount: boolean,
97+
) => {
9498
const fiatBalanceStrSplit = fiatBalance.split('\n');
9599
const fiatBalanceAmount = fiatBalanceStrSplit[0] || '';
96100
const tokenTicker = fiatBalanceStrSplit[1] || '';
101+
97102
return (
98103
<View
99104
style={styles.balancesContainer}
100105
testID={`${AccountListBottomSheetSelectorsIDs.ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${address}`}
101106
>
102-
<SensitiveText
103-
length={SensitiveTextLength.Long}
104-
style={styles.balanceLabel}
105-
isHidden={privacyMode}
106-
>
107-
{fiatBalanceAmount}
108-
</SensitiveText>
109-
<SensitiveText
110-
length={SensitiveTextLength.Short}
111-
style={styles.balanceLabel}
112-
isHidden={privacyMode}
113-
color={privacyMode ? TextColor.Alternative : TextColor.Default}
114-
>
115-
{tokenTicker}
116-
</SensitiveText>
117-
{tokens && (
118-
<AvatarGroup
119-
avatarPropsList={tokens.map((tokenObj) => ({
120-
...tokenObj,
121-
variant: AvatarVariant.Token,
122-
}))}
123-
/>
107+
{isLoadingAccount ? (
108+
<Skeleton width={60} height={24} />
109+
) : (
110+
<>
111+
<SensitiveText
112+
length={SensitiveTextLength.Long}
113+
style={styles.balanceLabel}
114+
isHidden={privacyMode}
115+
>
116+
{fiatBalanceAmount}
117+
</SensitiveText>
118+
119+
<SensitiveText
120+
length={SensitiveTextLength.Short}
121+
style={styles.balanceLabel}
122+
isHidden={privacyMode}
123+
color={privacyMode ? TextColor.Alternative : TextColor.Default}
124+
>
125+
{tokenTicker}
126+
</SensitiveText>
127+
{tokens && (
128+
<AvatarGroup
129+
avatarPropsList={tokens.map((tokenObj) => ({
130+
...tokenObj,
131+
variant: AvatarVariant.Token,
132+
}))}
133+
/>
134+
)}
135+
</>
124136
)}
125137
</View>
126138
);
@@ -212,7 +224,15 @@ const AccountSelectorList = ({
212224

213225
const renderAccountItem: ListRenderItem<Account> = useCallback(
214226
({
215-
item: { name, address, assets, type, isSelected, balanceError },
227+
item: {
228+
name,
229+
address,
230+
assets,
231+
type,
232+
isSelected,
233+
balanceError,
234+
isLoadingAccount,
235+
},
216236
index,
217237
}) => {
218238
const shortAddress = formatAddress(address, 'short');
@@ -222,6 +242,7 @@ const AccountSelectorList = ({
222242
isDefaultAccountName(name) && ensName ? ensName : name;
223243
const isDisabled = !!balanceError || isLoading || isSelectionDisabled;
224244
let cellVariant = CellVariant.SelectWithMenu;
245+
225246
if (isMultiSelect) {
226247
cellVariant = CellVariant.MultiSelect;
227248
}
@@ -246,7 +267,8 @@ const AccountSelectorList = ({
246267
onLongPress({
247268
address,
248269
isAccountRemoveable:
249-
type === KeyringTypes.simple || (type === KeyringTypes.snap && !isSolanaAddress(address)),
270+
type === KeyringTypes.simple ||
271+
(type === KeyringTypes.snap && !isSolanaAddress(address)),
250272
isSelected: isSelectedAccount,
251273
index,
252274
});
@@ -289,7 +311,8 @@ const AccountSelectorList = ({
289311
buttonProps={buttonProps}
290312
>
291313
{renderRightAccessory?.(address, accountName) ||
292-
(assets && renderAccountBalances(assets, address))}
314+
(assets &&
315+
renderAccountBalances(assets, address, isLoadingAccount))}
293316
</Cell>
294317
);
295318
},

‎app/components/UI/WalletAccount/WalletAccount.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const mockAccount: Account = {
3434
type: internalAccount2.metadata.keyring.type as KeyringTypes,
3535
yOffset: 0,
3636
isSelected: true,
37+
isLoadingAccount: false,
3738
};
3839

3940
jest.mock('../../../core/Engine', () => {

‎app/components/Views/AccountConnect/AccountConnectMultiSelector/AccountConnectMultiSelector.test.tsx‎

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ jest.mock('../../../../core/Engine', () => ({
2424
KeyringController: {
2525
state: {
2626
keyrings: [],
27-
}
27+
},
2828
},
2929
AccountsController: {
3030
state: {
@@ -55,6 +55,7 @@ const mockAccounts = [
5555
type: KeyringTypes.simple,
5656
yOffset: 0,
5757
isSelected: false,
58+
isLoadingAccount: false,
5859
},
5960
{
6061
address: '0x5678',
@@ -63,6 +64,7 @@ const mockAccounts = [
6364
type: KeyringTypes.simple,
6465
yOffset: 0,
6566
isSelected: false,
67+
isLoadingAccount: false,
6668
},
6769
];
6870

@@ -109,10 +111,16 @@ describe('AccountConnectMultiSelector', () => {
109111

110112
it('disables the select all button when loading', () => {
111113
const { getByTestId, getAllByTestId } = renderWithProvider(
112-
<AccountConnectMultiSelector {...defaultProps} defaultSelectedAddresses={['0x1234']} isLoading />,
114+
<AccountConnectMultiSelector
115+
{...defaultProps}
116+
defaultSelectedAddresses={['0x1234']}
117+
isLoading
118+
/>,
113119
);
114120

115-
const selectAllbutton = getAllByTestId(ConnectAccountBottomSheetSelectorsIDs.SELECT_ALL_BUTTON);
121+
const selectAllbutton = getAllByTestId(
122+
ConnectAccountBottomSheetSelectorsIDs.SELECT_ALL_BUTTON,
123+
);
116124
fireEvent.press(selectAllbutton[0]);
117125

118126
const updateButton = getByTestId(
@@ -125,10 +133,15 @@ describe('AccountConnectMultiSelector', () => {
125133

126134
it('handles the select all button when not loading', () => {
127135
const { getByTestId, getAllByTestId } = renderWithProvider(
128-
<AccountConnectMultiSelector {...defaultProps} defaultSelectedAddresses={['0x1234', '0x5678']} />,
136+
<AccountConnectMultiSelector
137+
{...defaultProps}
138+
defaultSelectedAddresses={['0x1234', '0x5678']}
139+
/>,
129140
);
130141

131-
const selectAllbutton = getAllByTestId(ConnectAccountBottomSheetSelectorsIDs.SELECT_ALL_BUTTON);
142+
const selectAllbutton = getAllByTestId(
143+
ConnectAccountBottomSheetSelectorsIDs.SELECT_ALL_BUTTON,
144+
);
132145
fireEvent.press(selectAllbutton[0]);
133146
fireEvent.press(selectAllbutton[0]);
134147

@@ -142,7 +155,10 @@ describe('AccountConnectMultiSelector', () => {
142155

143156
it('handles account selection correctly', () => {
144157
const { getByTestId, getByText } = renderWithProvider(
145-
<AccountConnectMultiSelector {...defaultProps} defaultSelectedAddresses={['0x1234']} />,
158+
<AccountConnectMultiSelector
159+
{...defaultProps}
160+
defaultSelectedAddresses={['0x1234']}
161+
/>,
146162
{ state: { engine: { backgroundState } } },
147163
);
148164

@@ -153,19 +169,26 @@ describe('AccountConnectMultiSelector', () => {
153169
const exstingAccount = getByText('test1.eth');
154170
fireEvent.press(exstingAccount);
155171

156-
const updateButton = getByTestId(ConnectAccountBottomSheetSelectorsIDs.SELECT_MULTI_BUTTON);
172+
const updateButton = getByTestId(
173+
ConnectAccountBottomSheetSelectorsIDs.SELECT_MULTI_BUTTON,
174+
);
157175
fireEvent.press(updateButton);
158176

159177
expect(defaultProps.onSubmit).toHaveBeenCalledWith(['0x5678']);
160178
});
161179

162180
it('shows update button when accounts are selected', () => {
163181
const { getByTestId } = renderWithProvider(
164-
<AccountConnectMultiSelector {...defaultProps} defaultSelectedAddresses={['0x1234']} />,
182+
<AccountConnectMultiSelector
183+
{...defaultProps}
184+
defaultSelectedAddresses={['0x1234']}
185+
/>,
165186
{ state: { engine: { backgroundState } } },
166187
);
167188

168-
const updateButton = getByTestId(ConnectAccountBottomSheetSelectorsIDs.SELECT_MULTI_BUTTON);
189+
const updateButton = getByTestId(
190+
ConnectAccountBottomSheetSelectorsIDs.SELECT_MULTI_BUTTON,
191+
);
169192
expect(updateButton).toBeTruthy();
170193
fireEvent.press(updateButton);
171194

@@ -174,11 +197,16 @@ describe('AccountConnectMultiSelector', () => {
174197

175198
it('shows disconnect button when no accounts are selected', () => {
176199
const { getByTestId } = renderWithProvider(
177-
<AccountConnectMultiSelector {...defaultProps} defaultSelectedAddresses={[]} />,
200+
<AccountConnectMultiSelector
201+
{...defaultProps}
202+
defaultSelectedAddresses={[]}
203+
/>,
178204
{ state: { engine: { backgroundState } } },
179205
);
180206

181-
const disconnectButton = getByTestId(ConnectedAccountsSelectorsIDs.DISCONNECT);
207+
const disconnectButton = getByTestId(
208+
ConnectedAccountsSelectorsIDs.DISCONNECT,
209+
);
182210
expect(disconnectButton).toBeTruthy();
183211
fireEvent.press(disconnectButton);
184212

‎app/components/Views/AccountConnect/AccountConnectMultiSelector/__snapshots__/AccountConnectMultiSelector.test.tsx.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,7 @@ exports[`AccountConnectMultiSelector renders correctly 1`] = `
190190
{
191191
"address": "0x1234",
192192
"balance": "0x1",
193+
"isLoadingAccount": false,
193194
"isSelected": false,
194195
"name": "Account 1",
195196
"type": "Simple Key Pair",
@@ -198,6 +199,7 @@ exports[`AccountConnectMultiSelector renders correctly 1`] = `
198199
{
199200
"address": "0x5678",
200201
"balance": "0x2",
202+
"isLoadingAccount": false,
201203
"isSelected": false,
202204
"name": "Account 2",
203205
"type": "Simple Key Pair",

0 commit comments

Comments
 (0)