Merge branch 'main' into fix/ensure-toHex-uses-evm-networks

Author: Prithpal-Sooriya

app/components/UI/Stake/components/StakeButton/index.tsx

@@ -110,16 +110,17 @@ const StakeButtonContent = ({ asset }: StakeButtonProps) => {
       testID={WalletViewSelectorsIDs.STAKE_BUTTON}
       style={styles.stakeButton}
     >
-      <Text variant={TextVariant.BodyLGMedium}>
+      <Text variant={TextVariant.BodyMDMedium} style={styles.dot}>
         {' • '}
-        <Text color={TextColor.Primary} variant={TextVariant.BodyLGMedium}>
-          {`${strings('stake.earn')} `}
-        </Text>
+      </Text>
+      <Text color={TextColor.Primary} variant={TextVariant.BodyMDMedium}>
+        {`${strings('stake.earn')}`}
       </Text>
       <Icon
         name={IconName.Plant}
         size={IconSize.Sm}
         color={IconColor.Primary}
+        style={styles.sprout}
       />
     </Pressable>
   );

app/components/UI/Tokens/TokenList/TokenListItem/index.tsx

@@ -436,11 +436,13 @@ export const TokenListItem = React.memo(
               {asset.name || asset.symbol}
             </Text>
             {/** Add button link to Portfolio Stake if token is supported ETH chain and not a staked asset */}
+          </View>
+          <View style={styles.percentageChange}>
+            {!isTestNet(chainId) && showPercentageChange ? (
+              <PercentageChange value={getPricePercentChange1d()} />
+            ) : null}
             {renderEarnCta()}
           </View>
-          {!isTestNet(chainId) && showPercentageChange ? (
-            <PercentageChange value={getPricePercentChange1d()} />
-          ) : null}
         </View>
         <ScamWarningIcon
           asset={asset}

app/components/UI/Tokens/styles.ts

@@ -112,9 +112,21 @@ const createStyles = (colors: Colors) =>
     assetName: {
       flexDirection: 'row',
     },
-    stakeButton: {
+    percentageChange: {
       flexDirection: 'row',
       alignItems: 'center',
+      alignContent: 'center',
+    },
+    stakeButton: {
+      flexDirection: 'row',
+    },
+    dot: {
+      marginLeft: 2,
+      marginRight: 2,
+    },
+    sprout: {
+      marginTop: 3,
+      marginLeft: 2,
     },
     portfolioBalance: {
       flexDirection: 'row',