diff --git a/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap b/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap
index 85739b38e4c..057890f6b46 100644
--- a/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap
+++ b/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap
@@ -321,7 +321,8 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
Object {
"alignItems": "center",
"flexDirection": "row",
- "marginLeft": 16,
+ "justifyContent": "space-between",
+ "marginHorizontal": 16,
"marginVertical": 24,
}
}
@@ -339,21 +340,20 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
>
0 USD
-
-
-
+ variant="Secondary"
+ width="full"
+ />
}
data={
@@ -415,7 +415,8 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
Object {
"alignItems": "center",
"flexDirection": "row",
- "marginLeft": 16,
+ "justifyContent": "space-between",
+ "marginHorizontal": 16,
"marginVertical": 24,
}
}
@@ -436,25 +437,54 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
0 USD
+
+ Portfolio
+
@@ -1276,7 +1306,8 @@ exports[`Tokens should render correctly 1`] = `
Object {
"alignItems": "center",
"flexDirection": "row",
- "marginLeft": 16,
+ "justifyContent": "space-between",
+ "marginHorizontal": 16,
"marginVertical": 24,
}
}
@@ -1294,21 +1325,20 @@ exports[`Tokens should render correctly 1`] = `
>
0 USD
-
-
-
+ variant="Secondary"
+ width="full"
+ />
}
data={
@@ -1370,7 +1400,8 @@ exports[`Tokens should render correctly 1`] = `
Object {
"alignItems": "center",
"flexDirection": "row",
- "marginLeft": 16,
+ "justifyContent": "space-between",
+ "marginHorizontal": 16,
"marginVertical": 24,
}
}
@@ -1391,25 +1422,54 @@ exports[`Tokens should render correctly 1`] = `
0 USD
+
+ Portfolio
+
@@ -2231,7 +2291,8 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
Object {
"alignItems": "center",
"flexDirection": "row",
- "marginLeft": 16,
+ "justifyContent": "space-between",
+ "marginHorizontal": 16,
"marginVertical": 24,
}
}
@@ -2249,21 +2310,20 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
>
0 USD
-
-
-
+ variant="Secondary"
+ width="full"
+ />
}
data={
@@ -2333,7 +2393,8 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
Object {
"alignItems": "center",
"flexDirection": "row",
- "marginLeft": 16,
+ "justifyContent": "space-between",
+ "marginHorizontal": 16,
"marginVertical": 24,
}
}
@@ -2354,25 +2415,54 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
0 USD
+
+ Portfolio
+
diff --git a/app/components/UI/Tokens/index.tsx b/app/components/UI/Tokens/index.tsx
index ea54f3e0b35..b7923cecc24 100644
--- a/app/components/UI/Tokens/index.tsx
+++ b/app/components/UI/Tokens/index.tsx
@@ -72,11 +72,7 @@ import SkeletonText from '../../../components/UI/FiatOnRampAggregator/components
import Routes from '../../../constants/navigation/Routes';
import { TOKEN_BALANCE_LOADING, TOKEN_RATE_UNDEFINED } from './constants';
import AppConstants from '../../../core/AppConstants';
-import Icon, {
- IconColor,
- IconName,
- IconSize,
-} from '../../../component-library/components/Icons/Icon';
+import { IconName } from '../../../component-library/components/Icons/Icon';
import {
PORTFOLIO_BUTTON,
@@ -455,17 +451,16 @@ const Tokens: React.FC = ({ tokens }) => {
>
{fiatBalance}
-
-
-
+ endIconName={IconName.Export}
+ />
);
};
diff --git a/app/components/UI/Tokens/styles.ts b/app/components/UI/Tokens/styles.ts
index d349d941850..a67b68273d3 100644
--- a/app/components/UI/Tokens/styles.ts
+++ b/app/components/UI/Tokens/styles.ts
@@ -89,7 +89,8 @@ const createStyles = (colors: Colors) =>
networth: {
flexDirection: 'row',
alignItems: 'center',
- marginLeft: 16,
+ marginHorizontal: 16,
+ justifyContent: 'space-between',
marginVertical: 24,
},
fiatBalance: {