Skip to content

Commit c4169bb

Browse files
ieowieow
authored
Merge branch 'main' into fix/optin-metric-flow
2 parents fd9ab52 + 7eaac6a commit c4169bb

File tree

21 files changed

+551
-640
lines changed

21 files changed

+551
-640
lines changed

‎.depcheckrc.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,4 +105,4 @@ ignores:
105105
- '@react-native/typescript-config'
106106
- 'react-native-pager-view'
107107
# this dependency can probably be removed, needs investigation
108-
- '@types/react-test-renderer'
108+
- '@types/react-test-renderer'

‎android/app/src/main/java/io/metamask/MainApplication.kt‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import expo.modules.ReactNativeHostWrapper
2525

2626
import cl.json.ShareApplication
2727
import io.branch.rnbranch.RNBranchModule
28-
import com.airbnb.android.react.lottie.LottiePackage
2928
import io.metamask.nativeModules.PreventScreenshotPackage
3029
import io.metamask.nativeModules.RCTMinimizerPackage
3130
import io.metamask.nativesdk.NativeSDKPackage
@@ -41,7 +40,6 @@ class MainApplication : Application(), ShareApplication, ReactApplication {
4140
override fun getPackages(): List<ReactPackage> {
4241
val packages = PackageList(this).packages.toMutableList()
4342
// Add all our custom packages
44-
packages.add(LottiePackage())
4543
packages.add(PreventScreenshotPackage())
4644
packages.add(RCTMinimizerPackage())
4745
packages.add(NativeSDKPackage())

‎android/settings.gradle‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ dependencyResolutionManagement {
3939
include ':app'
4040
includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile())
4141
includeBuild('../node_modules/@react-native') {}
42-
include ':lottie-react-native'
43-
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
4442
include ':react-native-gesture-handler'
4543
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
4644

‎app/components/Views/LockScreen/__snapshots__/index.test.tsx.snap‎

Lines changed: 24 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -346,49 +346,32 @@ exports[`LockScreen should render correctly 1`] = `
346346
}
347347
}
348348
>
349-
<View
349+
<LottieAnimationView
350+
autoPlay={false}
351+
cacheComposition={true}
352+
colorFilters={[]}
353+
enableMergePathsAndroidForKitKatAndAbove={false}
354+
loop={true}
355+
onAnimationFailure={[Function]}
356+
onAnimationFinish={[Function]}
357+
onAnimationLoaded={[Function]}
358+
progress={0}
359+
resizeMode="contain"
360+
sourceJson="{"v":"5.5.1","fr":30,"ip":0,"op":16,"w":1120,"h":930,"nm":"Bounce","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Romb_shadow","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[562.688,850.992,0],"e":[562.688,626.992,0],"to":[0,-37.333,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":12,"s":[562.688,626.992,0],"e":[562.688,850.992,0],"to":[0,0,0],"ti":[0,-37.333,0]},{"t":22}],"ix":2},"a":{"a":0,"k":[0.188,-367.008,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-52.392,-367.008],[0.188,-271.228],[-52.232,-367.008],[0.188,-462.788]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[52.608,-367.008],[0.188,-271.228],[-52.232,-367.008],[0.188,-462.788]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":7,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[52.608,-367.008],[0.188,-271.228],[-52.232,-367.008],[0.188,-462.788]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[52.608,-367.008],[0.188,-271.228],[51.768,-367.008],[0.188,-462.788]],"c":true}]},{"t":12}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.745802696078,0.358373754165,0.146384325214,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":23,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Romb","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[562.688,850.992,0],"e":[562.688,626.992,0],"to":[0,-37.333,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":12,"s":[562.688,626.992,0],"e":[562.688,850.992,0],"to":[0,0,0],"ti":[0,-37.333,0]},{"t":22}],"ix":2},"a":{"a":0,"k":[0.188,-367.008,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[52.608,-367.018],[52.608,-367.008],[52.598,-366.998],[0.188,-271.228],[-52.232,-367.008],[0.188,-462.788]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.960784375668,0.517647087574,0.121568635106,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":27,"s":[0],"e":[2]},{"t":30}],"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.960784316063,0.517647087574,0.121568627656,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":23,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Bounce_no_easing","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[560,733,0],"ix":2},"a":{"a":0,"k":[562.5,1218,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"tm":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.135],"y":[0]},"t":0,"s":[0],"e":[0.4]},{"i":{"x":[0.928],"y":[1]},"o":{"x":[1],"y":[0]},"t":8,"s":[0.4],"e":[0.733]},{"i":{"x":[0.858],"y":[1]},"o":{"x":[0.158],"y":[0]},"t":16,"s":[0.733],"e":[0.733]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.037],"y":[0]},"t":102,"s":[0.733],"e":[10]},{"t":300}],"ix":2},"w":1125,"h":2436,"ip":0,"op":21,"st":0,"bm":0}],"markers":[{"tm":95,"cm":"1","dr":0}]}"
361+
speed={1}
350362
style={
351-
[
352-
{
353-
"aspectRatio": 1.2043010752688172,
354-
},
355-
undefined,
356-
{
357-
"alignItems": "center",
358-
"alignSelf": "center",
359-
"height": 110,
360-
"justifyContent": "center",
361-
"width": 110,
362-
},
363-
]
364-
}
365-
>
366-
<View
367-
cacheComposition={true}
368-
collapsable={false}
369-
colorFilters={[]}
370-
enableMergePathsAndroidForKitKatAndAbove={false}
371-
loop={true}
372-
onAnimationFinish={[Function]}
373-
progress={0}
374-
resizeMode="contain"
375-
sourceJson="{"v":"5.5.1","fr":30,"ip":0,"op":16,"w":1120,"h":930,"nm":"Bounce","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Romb_shadow","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[562.688,850.992,0],"e":[562.688,626.992,0],"to":[0,-37.333,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":12,"s":[562.688,626.992,0],"e":[562.688,850.992,0],"to":[0,0,0],"ti":[0,-37.333,0]},{"t":22}],"ix":2},"a":{"a":0,"k":[0.188,-367.008,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-52.392,-367.008],[0.188,-271.228],[-52.232,-367.008],[0.188,-462.788]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[52.608,-367.008],[0.188,-271.228],[-52.232,-367.008],[0.188,-462.788]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":7,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[52.608,-367.008],[0.188,-271.228],[-52.232,-367.008],[0.188,-462.788]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[52.608,-367.008],[0.188,-271.228],[51.768,-367.008],[0.188,-462.788]],"c":true}]},{"t":12}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.745802696078,0.358373754165,0.146384325214,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":23,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Romb","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[562.688,850.992,0],"e":[562.688,626.992,0],"to":[0,-37.333,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":12,"s":[562.688,626.992,0],"e":[562.688,850.992,0],"to":[0,0,0],"ti":[0,-37.333,0]},{"t":22}],"ix":2},"a":{"a":0,"k":[0.188,-367.008,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[52.608,-367.018],[52.608,-367.008],[52.598,-366.998],[0.188,-271.228],[-52.232,-367.008],[0.188,-462.788]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.960784375668,0.517647087574,0.121568635106,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":27,"s":[0],"e":[2]},{"t":30}],"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.960784316063,0.517647087574,0.121568627656,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":23,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Bounce_no_easing","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[560,733,0],"ix":2},"a":{"a":0,"k":[562.5,1218,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"tm":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.135],"y":[0]},"t":0,"s":[0],"e":[0.4]},{"i":{"x":[0.928],"y":[1]},"o":{"x":[1],"y":[0]},"t":8,"s":[0.4],"e":[0.733]},{"i":{"x":[0.858],"y":[1]},"o":{"x":[0.158],"y":[0]},"t":16,"s":[0.733],"e":[0.733]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.037],"y":[0]},"t":102,"s":[0.733],"e":[10]},{"t":300}],"ix":2},"w":1125,"h":2436,"ip":0,"op":21,"st":0,"bm":0}],"markers":[{"tm":95,"cm":"1","dr":0}]}"
376-
speed={1}
377-
style={
378-
{
379-
"alignItems": "center",
380-
"alignSelf": "center",
381-
"aspectRatio": 1.2043010752688172,
382-
"height": 110,
383-
"justifyContent": "center",
384-
"width": 110,
385-
}
363+
{
364+
"alignItems": "center",
365+
"alignSelf": "center",
366+
"height": 110,
367+
"justifyContent": "center",
368+
"width": 110,
386369
}
387-
textFiltersAndroid={[]}
388-
textFiltersIOS={[]}
389-
useNativeLooping={false}
390-
/>
391-
</View>
370+
}
371+
textFiltersAndroid={[]}
372+
textFiltersIOS={[]}
373+
useNativeLooping={false}
374+
/>
392375
</View>
393376
</View>
394377
</View>

‎app/components/Views/Login/__snapshots__/index.test.tsx.snap‎

Lines changed: 44 additions & 74 deletions
Large diffs are not rendered by default.

‎app/components/Views/MultichainAccounts/WalletDetails/BaseWalletDetails/components/AccountItem.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React from 'react';
2+
import { TouchableOpacity, ViewStyle } from 'react-native';
3+
import { InternalAccount } from '@metamask/keyring-internal-api';
4+
import { useStyles } from '../../../../../hooks/useStyles';
5+
import styleSheet from '../styles';
6+
import {
7+
AlignItems,
8+
FlexDirection,
9+
JustifyContent,
10+
} from '../../../../../UI/Box/box.types';
11+
import { Box } from '../../../../../UI/Box/Box';
12+
import Text, {
13+
TextVariant,
14+
} from '../../../../../../component-library/components/Texts/Text';
15+
import Icon, {
16+
IconSize,
17+
IconName,
18+
} from '../../../../../../component-library/components/Icons/Icon';
19+
import Avatar, {
20+
AvatarAccountType,
21+
AvatarSize,
22+
AvatarVariant,
23+
} from '../../../../../../component-library/components/Avatars/Avatar';
24+
import AnimatedSpinner from '../../../../../UI/AnimatedSpinner';
25+
import { WalletDetailsIds } from '../../../../../../../e2e/selectors/MultichainAccounts/WalletDetails';
26+
27+
interface AccountItemProps {
28+
account: InternalAccount;
29+
index: number;
30+
totalItemsCount: number;
31+
accountBalance?: string;
32+
isAccountBalanceLoading: boolean;
33+
accountAvatarType: AvatarAccountType;
34+
onPress: (account: InternalAccount) => void;
35+
}
36+
37+
export const AccountItem: React.FC<AccountItemProps> = ({
38+
account,
39+
index,
40+
totalItemsCount,
41+
accountBalance,
42+
isAccountBalanceLoading,
43+
accountAvatarType,
44+
onPress,
45+
}) => {
46+
const { styles, theme } = useStyles(styleSheet, {});
47+
const { colors } = theme;
48+
49+
const boxStyles: ViewStyle[] = [styles.accountBox];
50+
51+
if (totalItemsCount > 1) {
52+
if (index === 0) {
53+
boxStyles.push(styles.firstAccountBox);
54+
} else if (index === totalItemsCount - 1) {
55+
boxStyles.push(styles.lastAccountBox);
56+
} else {
57+
boxStyles.push(styles.middleAccountBox as ViewStyle);
58+
}
59+
}
60+
61+
return (
62+
<TouchableOpacity
63+
key={account.id}
64+
testID={`${WalletDetailsIds.ACCOUNT_ITEM}_${account.id}`}
65+
onPress={() => onPress(account)}
66+
>
67+
<Box
68+
style={boxStyles}
69+
flexDirection={FlexDirection.Row}
70+
alignItems={AlignItems.center}
71+
justifyContent={JustifyContent.spaceBetween}
72+
>
73+
<Box
74+
flexDirection={FlexDirection.Row}
75+
alignItems={AlignItems.center}
76+
gap={8}
77+
>
78+
<Avatar
79+
variant={AvatarVariant.Account}
80+
size={AvatarSize.Md}
81+
accountAddress={account.address}
82+
type={accountAvatarType}
83+
/>
84+
<Text variant={TextVariant.BodyMDMedium}>
85+
{account.metadata.name}
86+
</Text>
87+
</Box>
88+
<Box
89+
flexDirection={FlexDirection.Row}
90+
alignItems={AlignItems.center}
91+
gap={8}
92+
>
93+
{isAccountBalanceLoading ? (
94+
<AnimatedSpinner />
95+
) : (
96+
<Text style={styles.text} variant={TextVariant.BodyMDMedium}>
97+
{accountBalance}
98+
</Text>
99+
)}
100+
<Icon
101+
name={IconName.ArrowRight}
102+
size={IconSize.Md}
103+
color={colors.text.alternative}
104+
/>
105+
</Box>
106+
</Box>
107+
</TouchableOpacity>
108+
);
109+
};
110+
111+
export default AccountItem;

‎app/components/Views/MultichainAccounts/WalletDetails/BaseWalletDetails/components/AddAccountItem.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import { TouchableOpacity, ViewStyle } from 'react-native';
3+
import { useStyles } from '../../../../../hooks/useStyles';
4+
import styleSheet from '../styles';
5+
import {
6+
AlignItems,
7+
FlexDirection,
8+
JustifyContent,
9+
} from '../../../../../UI/Box/box.types';
10+
import { Box } from '../../../../../UI/Box/Box';
11+
import Text, {
12+
TextVariant,
13+
} from '../../../../../../component-library/components/Texts/Text';
14+
import Icon, {
15+
IconSize,
16+
IconName,
17+
} from '../../../../../../component-library/components/Icons/Icon';
18+
import { strings } from '../../../../../../../locales/i18n';
19+
import { WalletDetailsIds } from '../../../../../../../e2e/selectors/MultichainAccounts/WalletDetails';
20+
21+
interface AddAccountItemProps {
22+
totalItemsCount: number;
23+
onPress: () => void;
24+
}
25+
26+
export const AddAccountItem: React.FC<AddAccountItemProps> = ({
27+
totalItemsCount,
28+
onPress,
29+
}) => {
30+
const { styles, theme } = useStyles(styleSheet, {});
31+
const { colors } = theme;
32+
33+
const boxStyles: ViewStyle[] = [styles.accountBox];
34+
35+
if (totalItemsCount > 1) {
36+
boxStyles.push(styles.lastAccountBox);
37+
}
38+
39+
return (
40+
<TouchableOpacity
41+
key="add-account"
42+
testID={WalletDetailsIds.ADD_ACCOUNT_BUTTON}
43+
onPress={onPress}
44+
>
45+
<Box
46+
style={boxStyles}
47+
flexDirection={FlexDirection.Row}
48+
alignItems={AlignItems.center}
49+
justifyContent={JustifyContent.spaceBetween}
50+
>
51+
<Box
52+
flexDirection={FlexDirection.Row}
53+
alignItems={AlignItems.center}
54+
gap={8}
55+
>
56+
<Icon
57+
name={IconName.Add}
58+
size={IconSize.Md}
59+
color={colors.primary.default}
60+
/>
61+
<Text
62+
style={{ color: colors.primary.default }}
63+
variant={TextVariant.BodyMDMedium}
64+
>
65+
{strings('multichain_accounts.wallet_details.create_account')}
66+
</Text>
67+
</Box>
68+
</Box>
69+
</TouchableOpacity>
70+
);
71+
};
72+
73+
export default AddAccountItem;

0 commit comments

Comments
 (0)