Merge pull request #1263 from chainapsis/delivan/keplr-356

Support EVM swap
chainapsis · Dec 26, 2024 · f30bf43 · f30bf43
2 parents 51c08bc + 46fe710
commit f30bf43
Show file tree

Hide file tree

Showing 31 changed files with 4,592 additions and 599 deletions.
diff --git a/apps/extension/package.json b/apps/extension/package.json
@@ -82,6 +82,8 @@
     "react-is": "^18.2.0",
     "react-router": "^6.8.1",
     "react-router-dom": "^6.8.1",
+    "react-virtualized-auto-sizer": "^1.0.24",
+    "react-window": "^1.8.10",
     "scrypt-js": "^3.0.1",
     "secp256k1": "^5.0.0",
     "semver": "^7.6.0",
@@ -116,6 +118,7 @@
     "@types/firefox-webext-browser": "^120.0.3",
     "@types/js-yaml": "^4",
     "@types/react-is": "^16.7.2",
+    "@types/react-window": "^1",
     "@types/resize-observer-browser": "^0.1.7",
     "@types/secp256k1": "^4.0.1",
     "@types/semver": "^7",

diff --git a/apps/extension/src/config.ui.ts b/apps/extension/src/config.ui.ts
@@ -216,6 +216,38 @@ export const SwapVenues: {
     name: "chihuahua-white-whale",
     chainId: "chihuahua-1",
   },
+  {
+    name: "arbitrum-uniswap",
+    chainId: "eip155:42161",
+  },
+  {
+    name: "base-uniswap",
+    chainId: "eip155:8453",
+  },
+  {
+    name: "binance-uniswap",
+    chainId: "eip155:56",
+  },
+  {
+    name: "avalanche-uniswap",
+    chainId: "eip155:43114",
+  },
+  {
+    name: "optimism-uniswap",
+    chainId: "eip155:10",
+  },
+  {
+    name: "polygon-uniswap",
+    chainId: "eip155:137",
+  },
+  {
+    name: "blast-uniswap",
+    chainId: "eip155:81457",
+  },
+  {
+    name: "ethereum-uniswap",
+    chainId: "eip155:1",
+  },
 ];
 
 export const SwapFeeBps = {
@@ -225,7 +257,6 @@ export const SwapFeeBps = {
       chainId: "osmosis-1",
       address: "osmo1my4tk420gjmhggqwvvha6ey9390gqwfree2p4u",
     },
-    // TODO: 여기 밑으론 실제 receiver 주소로 변경해야 함
     {
       chainId: "injective-1",
       address: "inj1tfn0awxutuvrgqvme7g3e9nd2fe5r3uzqa4fjr",

diff --git a/apps/extension/src/layouts/header/header.tsx b/apps/extension/src/layouts/header/header.tsx
@@ -196,6 +196,7 @@ export const HeaderLayout: FunctionComponent<
   isNotReady,
   additionalPaddingBottom,
   headerContainerStyle,
+  contentContainerStyle,
 
   fixedTop,
 }) => {
@@ -296,6 +297,7 @@ export const HeaderLayout: FunctionComponent<
         fixedMinHeight={fixedMinHeight || false}
         bottomPadding={bottomPadding}
         fixedTopHeight={fixedTop?.height}
+        style={contentContainerStyle}
       >
         {children}
       </Styles.ContentContainer>

diff --git a/apps/extension/src/layouts/header/types.ts b/apps/extension/src/layouts/header/types.ts
@@ -22,6 +22,7 @@ export interface HeaderProps {
   isNotReady?: boolean;
 
   headerContainerStyle?: React.CSSProperties;
+  contentContainerStyle?: React.CSSProperties;
 
   // MainHeaderLayout에서만 테스트해봄
   // 다른 props 옵션과 섞였을때 잘 작동되는지는 모름

diff --git a/apps/extension/src/pages/ibc-swap/components/swap-fee-info/index.tsx b/apps/extension/src/pages/ibc-swap/components/swap-fee-info/index.tsx
@@ -29,8 +29,16 @@ export const SwapFeeInfo: FunctionComponent<{
   gasConfig: IGasConfig;
   feeConfig: IFeeConfig;
   gasSimulator: IGasSimulator;
+  isForEVMTx?: boolean;
 }> = observer(
-  ({ senderConfig, amountConfig, gasConfig, feeConfig, gasSimulator }) => {
+  ({
+    senderConfig,
+    amountConfig,
+    gasConfig,
+    feeConfig,
+    gasSimulator,
+    isForEVMTx,
+  }) => {
     const { queriesStore, chainStore, priceStore, uiConfigStore } = useStore();
 
     const theme = useTheme();
@@ -213,6 +221,8 @@ export const SwapFeeInfo: FunctionComponent<{
       }
     })();
 
+    const isShowingEstimatedFee = isForEVMTx && !!gasSimulator.gasEstimated;
+
     return (
       <React.Fragment>
         <Box
@@ -374,6 +384,18 @@ export const SwapFeeInfo: FunctionComponent<{
                       key={fee.currency.coinMinimalDenom}
                     >
                       {fee
+                        .quo(
+                          new Dec(
+                            isShowingEstimatedFee ? gasConfig.gas || 1 : 1
+                          )
+                        )
+                        .mul(
+                          new Dec(
+                            isShowingEstimatedFee
+                              ? gasSimulator.gasEstimated || 1
+                              : 1
+                          )
+                        )
                         .maxDecimals(6)
                         .trim(true)
                         .shrink(true)
@@ -506,6 +528,7 @@ export const SwapFeeInfo: FunctionComponent<{
               feeConfig={feeConfig}
               gasConfig={gasConfig}
               gasSimulator={gasSimulator}
+              isForEVMTx={isForEVMTx}
             />
           </Modal>
         </Box>