Merge remote-tracking branch 'origin/@skylar/simulation' into @skylar…

…/simulation

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/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/screens/SignTransactionSheet.tsx

@@ -30,7 +30,8 @@ import ConditionalWrap from 'conditional-wrap';
 import { Transaction } from '@ethersproject/transactions';
 
 import { ButtonPressAnimation } from '@/components/animations';
-import { ChainBadge, CoinIcon } from '@/components/coin-icon';
+import { ChainImage } from '@/components/coin-icon/ChainImage';
+import { CoinIcon } from '@/components/coin-icon';
 import { SheetActionButton } from '@/components/sheet';
 import {
   Bleed,
@@ -1110,22 +1111,7 @@ export const SignTransactionSheet = () => {
                     wrap={false}
                   >
                     <Bleed vertical="4px">
-                      {currentNetwork !== Network.mainnet ? (
-                        <ChainBadge
-                          assetType={ethereumUtils.getAssetTypeFromNetwork(
-                            currentNetwork!
-                          )}
-                          badgeXPosition={0}
-                          badgeYPosition={-10}
-                          size="xtiny"
-                        />
-                      ) : (
-                        <CoinIcon
-                          address={ETH_ADDRESS}
-                          size={12}
-                          symbol={ETH_SYMBOL}
-                        />
-                      )}
+                      <ChainImage chain={currentNetwork} size={12} />
                     </Bleed>
                     <Text color="labelQuaternary" size="13pt" weight="semibold">
                       {isMessageRequest