wc: tx simulation (#5177)

* Simulation UI setup

* [Revert later] Hook up to Copy button for testing

* Fix card auto sizing, scroll handling

* Couple more fixes, add message card

* types

* init

* color

* disabled sim for personal sign

* fix request type label

* fix unlimited checlk

* Add simplified chain badge component

* save

* android + dismiss

* ts-ignore

* POST

* i18n + clean up

* review clean up

* clean up

* xtra clean up

* clean up

* copy + long account names

---------

Co-authored-by: Christian Baroni <[email protected]>

ios/Images.xcassets/badges/arbitrum.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "arbitrum.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Images.xcassets/badges/base.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "base.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Images.xcassets/badges/bsc.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "bsc.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Images.xcassets/badges/ethereum.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "ethereum.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Images.xcassets/badges/optimism.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "optimism.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Images.xcassets/badges/polygon.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "polygon.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Images.xcassets/badges/xdai.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "xdai.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Images.xcassets/badges/zora.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "zora.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

src/components/asset-list/RecyclerAssetList2/profile-header/ProfileActionButtonsRow.tsx

@@ -273,12 +273,18 @@ export function MoreButton() {
     Clipboard.setString(accountAddress);
   }, [accountAddress, isToastActive, setToastActive]);
 
+  const { navigate } = useNavigation();
+  const navigateToSigningSheet = React.useCallback(() => {
+    navigate(Routes.SIGN_TRANSACTION_SHEET);
+  }, [navigate]);
+
   return (
     <>
       {/* @ts-expect-error JavaScript component */}
       <CopyFloatingEmojis textToCopy={accountAddress}>
         <ActionButton
-          onPress={handlePressCopy}
+          // onPress={handlePressCopy}
+          onPress={navigateToSigningSheet}
           icon="􀐅"
           testID="receive-button"
         >

src/components/coin-icon/ChainBadgeSizeConfigs.ts

@@ -19,6 +19,10 @@ export const ChainBadgeSizeConfigs = {
     containerSize: 30,
     iconSize: 14,
   },
+  xtiny: {
+    containerSize: 26.4,
+    iconSize: 12,
+  },
 } as const;
 
 export type ChainBadgeType = keyof typeof ChainBadgeSizeConfigs;

src/components/coin-icon/ChainImage.tsx

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import { Source } from 'react-native-fast-image';
+
+import { IS_IOS } from '@/env';
+import { Network } from '@/helpers';
+
+import ArbitrumBadge from '../../assets/badges/arbitrum.png';
+import BaseBadge from '../../assets/badges/base.png';
+import BscBadge from '../../assets/badges/bsc.png';
+import EthereumBadge from '../../assets/badges/ethereum.png';
+import OptimismBadge from '../../assets/badges/optimism.png';
+import PolygonBadge from '../../assets/badges/polygon.png';
+import ZoraBadge from '../../assets/badges/zora.png';
+import { ImgixImage } from '../images';
+
+export function ChainImage({
+  borderRadius = 20,
+  chain,
+  size = 20,
+}: {
+  borderRadius?: number;
+  chain: Network | null | undefined;
+  size?: number;
+}) {
+  const source = useMemo(() => {
+    let val = null;
+    if (chain === Network.arbitrum) {
+      val = IS_IOS ? { uri: 'arbitrum' } : ArbitrumBadge;
+    } else if (chain === Network.base) {
+      val = IS_IOS ? { uri: 'base' } : BaseBadge;
+    } else if (chain === Network.bsc) {
+      val = IS_IOS ? { uri: 'bsc' } : BscBadge;
+    } else if (chain === Network.mainnet) {
+      val = IS_IOS ? { uri: 'ethereum' } : EthereumBadge;
+    } else if (chain === Network.optimism) {
+      val = IS_IOS ? { uri: 'optimism' } : OptimismBadge;
+    } else if (chain === Network.polygon) {
+      val = IS_IOS ? { uri: 'polygon' } : PolygonBadge;
+    } else if (chain === Network.zora) {
+      val = IS_IOS ? { uri: 'zora' } : ZoraBadge;
+    }
+    return val as Source;
+  }, [chain]);
+
+  if (!chain) return null;
+
+  return (
+    <ImgixImage
+      size={size}
+      source={source}
+      style={{ borderRadius, height: size, width: size }}
+    />
+  );
+}

src/components/contacts/ContactAvatar.js

@@ -68,6 +68,14 @@ const sizeConfigs = colors => ({
     ],
     textSize: 28,
   },
+  sim: {
+    dimensions: 44,
+    shadow: [
+      [0, 4, 6, colors.shadow, 0.04],
+      [0, 1, 3, colors.shadow, 0.08],
+    ],
+    textSize: 'larger',
+  },
   medium: {
     dimensions: 40,
     shadow: [

src/components/contacts/ImageAvatar.js

@@ -32,6 +32,14 @@ const sizeConfigs = (colors, isDarkMode) => ({
     ],
     textSize: 28,
   },
+  sim: {
+    dimensions: 44,
+    shadow: [
+      [0, 4, 6, colors.shadow, 0.04],
+      [0, 1, 3, colors.shadow, 0.08],
+    ],
+    textSize: 'larger',
+  },
   medium: {
     dimensions: 40,
     shadow: [[0, 4, 12, colors.shadow, isDarkMode ? 0.3 : 0.15]],

src/components/sheet/sheet-action-buttons/SheetActionButton.tsx

@@ -45,15 +45,15 @@ const addChartsStyling = (isCharts: boolean) =>
 const Button = styled(Centered)(
   ({ isCharts, size }: { isCharts?: boolean; size?: string }) => ({
     ...addChartsStyling(!!isCharts),
-    height: size === 'big' ? 56 : 46,
+    height: size === 'big' ? 52 : 46,
   })
 );
 
 const Content = styled(RowWithMargins).attrs({
   align: 'center',
   margin: 4,
 })({
-  height: ({ size }: Pick<Props, 'size'>) => (size === 'big' ? 56 : 46),
+  height: ({ size }: Pick<Props, 'size'>) => (size === 'big' ? 52 : 46),
   paddingBottom: ({ label }: Pick<Props, 'label'>) =>
     label && containsEmoji(label) ? 2.5 : 1,
   paddingHorizontal: 19,
@@ -76,7 +76,7 @@ const WhiteButtonGradient = React.memo(
 );
 
 const SheetActionButton: React.FC<Props> = ({
-  borderRadius = 56,
+  borderRadius = 52,
   children,
   color: givenColor,
   disabled = false,
@@ -136,7 +136,7 @@ const SheetActionButton: React.FC<Props> = ({
     <Button
       as={ButtonPressAnimation}
       contentContainerStyle={{
-        height: size === 'big' ? 56 : 46,
+        height: size === 'big' ? 52 : 46,
       }}
       elevation={android ? elevation : null}
       isCharts={isCharts}
@@ -156,7 +156,7 @@ const SheetActionButton: React.FC<Props> = ({
         {...position.coverAsObject}
         backgroundColor={color}
         borderRadius={borderRadius}
-        height={size === 'big' ? 56 : 46}
+        height={size === 'big' ? 52 : 46}
         shadows={shadowsForButtonColor}
       >
         {isWhite && <WhiteButtonGradient colors={colors} />}
@@ -177,7 +177,7 @@ const SheetActionButton: React.FC<Props> = ({
           <Text
             align="center"
             color={textColor}
-            lineHeight={size === 'big' ? 56 : 46}
+            lineHeight={size === 'big' ? 52 : 46}
             numberOfLines={truncate ? 1 : undefined}
             size={textSize ?? (size === 'big' ? 'larger' : 'large')}
             style={{ width: '100%' }}