Merge pull request #1136 from chainapsis/delivan/keplr-313

Update the signing EVM transaction UI
chainapsis · Jun 21, 2024 · 5a46c91 · 5a46c91
2 parents 4813536 + 29e7fdc
commit 5a46c91
Show file tree

Hide file tree

Showing 6 changed files with 353 additions and 75 deletions.
diff --git a/apps/extension/src/pages/sign/components/eth-tx/registry.tsx b/apps/extension/src/pages/sign/components/eth-tx/registry.tsx
@@ -16,6 +16,8 @@ export class EthTxRenderRegistry implements IEthTxRenderRegistry {
     chainId: string,
     unsignedTx: UnsignedTransaction
   ): {
+    icon?: React.ReactElement;
+    title?: string | React.ReactElement;
     content: string | React.ReactElement;
   } {
     try {

diff --git a/apps/extension/src/pages/sign/components/eth-tx/render/send-token.tsx b/apps/extension/src/pages/sign/components/eth-tx/render/send-token.tsx
@@ -1,11 +1,18 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-import { FormattedMessage } from "react-intl";
 import { useStore } from "../../../../../stores";
 import { CoinPretty, Dec } from "@keplr-wallet/unit";
 import { erc20ContractInterface } from "@keplr-wallet/stores-eth";
 import { BigNumber } from "@ethersproject/bignumber";
 import { IEthTxRenderer } from "../types";
+import { ItemLogo } from "../../../../main/token-detail/msg-items/logo";
+import { ColorPalette } from "../../../../../styles";
+import { Box } from "../../../../../components/box";
+import { Body1, Body2, Subtitle4 } from "../../../../../components/typography";
+import { Gutter } from "../../../../../components/gutter";
+import { Columns } from "../../../../../components/column";
+import { Stack } from "../../../../../components/stack";
+import { useTheme } from "styled-components";
 
 export const EthSendTokenTx: IEthTxRenderer = {
   process(chainId, unsignedTx) {
@@ -31,6 +38,29 @@ export const EthSendTokenTx: IEthTxRenderer = {
         }
 
         return {
+          icon: (
+            <ItemLogo
+              center={
+                <svg
+                  width="44"
+                  height="44"
+                  viewBox="0 0 44 44"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect width="44" height="44" rx="22" fill="#2E2E32" />
+                  <path
+                    d="M13.875 30.125L30.125 13.875M30.125 13.875L17.9375 13.875M30.125 13.875V26.0625"
+                    stroke="#FEFEFE"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              }
+            />
+          ),
+          title: "Send",
           content: (
             <EthSendTokenTxPretty
               chainId={chainId}
@@ -58,6 +88,29 @@ export const EthSendTokenTx: IEthTxRenderer = {
       }
 
       return {
+        icon: (
+          <ItemLogo
+            center={
+              <svg
+                width="44"
+                height="44"
+                viewBox="0 0 44 44"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect width="44" height="44" rx="22" fill="#2E2E32" />
+                <path
+                  d="M13.875 30.125L30.125 13.875M30.125 13.875L17.9375 13.875M30.125 13.875V26.0625"
+                  stroke="#FEFEFE"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            }
+          />
+        ),
+        title: "Send",
         content: (
           <EthSendTokenTxPretty
             chainId={chainId}
@@ -85,17 +138,82 @@ export const EthSendTokenTxPretty: React.FunctionComponent<{
     : chainInfo.currencies[0];
   const amountCoinPretty = new CoinPretty(currency, new Dec(Number(amount)));
 
+  const theme = useTheme();
+
   return (
     <React.Fragment>
-      <FormattedMessage
-        id="page.sign.ethereum.tx.send.paragraph"
-        values={{
-          fromAddress: sender.slice(0, 7) + "..." + sender.slice(-5),
-          toAddress: recipient.slice(0, 7) + "..." + recipient.slice(-5),
-          amount: amountCoinPretty.trim(true).toString(),
-          b: (...chunks: any) => <b>{chunks}</b>,
-        }}
-      />
+      <Box
+        padding="0.25rem 0.625rem"
+        backgroundColor={ColorPalette["gray-400"]}
+        borderRadius="20rem"
+        width="fit-content"
+      >
+        <Body2 color={ColorPalette["white"]}>
+          {amountCoinPretty.trim(true).toString()}
+        </Body2>
+      </Box>
+
+      <Gutter size="0.75rem" />
+
+      <Columns sum={1} gutter="1.125rem" alignY="center">
+        <Stack alignX="center" gutter="0.375rem">
+          <Box
+            backgroundColor={ColorPalette["gray-300"]}
+            borderRadius="20rem"
+            width="0.5rem"
+            height="0.5rem"
+          />
+          <Box
+            backgroundColor={ColorPalette["gray-300"]}
+            width="1px"
+            height="3rem"
+          />
+          <Box
+            backgroundColor={ColorPalette["gray-300"]}
+            borderRadius="20rem"
+            width="0.5rem"
+            height="0.5rem"
+          />
+        </Stack>
+        <Stack gutter="1.625rem">
+          <Stack gutter="0.25rem">
+            <Subtitle4
+              color={
+                theme.mode === "light"
+                  ? ColorPalette["gray-400"]
+                  : ColorPalette["gray-200"]
+              }
+            >
+              From
+            </Subtitle4>
+            <Body1
+              color={
+                theme.mode === "light"
+                  ? ColorPalette["gray-500"]
+                  : ColorPalette["white"]
+              }
+            >{`${sender.slice(0, 10)}...${sender.slice(-8)}`}</Body1>
+          </Stack>
+          <Stack gutter="0.25rem">
+            <Subtitle4
+              color={
+                theme.mode === "light"
+                  ? ColorPalette["gray-400"]
+                  : ColorPalette["gray-200"]
+              }
+            >
+              To
+            </Subtitle4>
+            <Body1
+              color={
+                theme.mode === "light"
+                  ? ColorPalette["gray-500"]
+                  : ColorPalette["white"]
+              }
+            >{`${recipient.slice(0, 10)}...${recipient.slice(-8)}`}</Body1>
+          </Stack>
+        </Stack>
+      </Columns>
     </React.Fragment>
   );
 });
diff --git a/apps/extension/src/pages/sign/components/eth-tx/render/tx-base.tsx b/apps/extension/src/pages/sign/components/eth-tx/render/tx-base.tsx
@@ -0,0 +1,57 @@
+import React, { FunctionComponent } from "react";
+import { useTheme } from "styled-components";
+import { Box } from "../../../../../components/box";
+import { Column, Columns } from "../../../../../components/column";
+import { Gutter } from "../../../../../components/gutter";
+import { Body3, H5 } from "../../../../../components/typography";
+import { ColorPalette } from "../../../../../styles";
+
+export const EthTxBase: FunctionComponent<{
+  icon: React.ReactElement;
+  title: string | React.ReactElement;
+  content: string | React.ReactElement;
+}> = ({ icon, title, content }) => {
+  const theme = useTheme();
+
+  return (
+    <Columns sum={1}>
+      <Box
+        width="2.75rem"
+        minWidth="2.75rem"
+        height="2.75rem"
+        alignX="center"
+        alignY="center"
+      >
+        {icon}
+      </Box>
+
+      <Gutter size="0.5rem" />
+
+      <Column weight={1}>
+        <Box minHeight="3rem" alignY="center">
+          <H5
+            color={
+              theme.mode === "light"
+                ? ColorPalette["gray-500"]
+                : ColorPalette["gray-10"]
+            }
+          >
+            {title}
+          </H5>
+
+          <Gutter size="0.75rem" />
+
+          <Body3
+            color={
+              theme.mode === "light"
+                ? ColorPalette["gray-300"]
+                : ColorPalette["gray-200"]
+            }
+          >
+            {content}
+          </Body3>
+        </Box>
+      </Column>
+    </Columns>
+  );
+};
diff --git a/apps/extension/src/pages/sign/components/eth-tx/types.ts b/apps/extension/src/pages/sign/components/eth-tx/types.ts
@@ -7,6 +7,8 @@ export interface IEthTxRenderer {
     unsignedTx: UnsignedTransaction
   ):
     | {
+        icon?: React.ReactElement;
+        title?: string | React.ReactElement;
         content: string | React.ReactElement;
       }
     | undefined;
@@ -19,6 +21,8 @@ export interface IEthTxRenderRegistry {
     chainId: string,
     unsignedTx: UnsignedTransaction
   ): {
+    icon?: React.ReactElement;
+    title?: string | React.ReactElement;
     content: string | React.ReactElement;
   };
 }