Merge pull request #53 from kleros/feat(web)/frontend-support-erc20-transactions

feat(web): support for ERC20 Tokens in the General Escrow flow

Author: kemuru

web/package.json

@@ -79,6 +79,7 @@
     "@web3modal/ethereum": "^2.7.1",
     "@web3modal/react": "^2.2.2",
     "@yornaath/batshit": "^0.9.0",
+    "alchemy-sdk": "^3.3.1",
     "amqplib": "^0.10.3",
     "chart.js": "^3.9.1",
     "chartjs-adapter-moment": "^1.0.1",

web/src/assets/svgs/icons/eth-token-icon.png

@@ -12,7 +12,7 @@ interface IEscrowTimeline {
   isPreview: boolean;
   transactionCreationTimestamp: number;
   status: boolean;
-  token: string;
+  assetSymbol: string;
   buyerAddress: string;
   sellerAddress: string;
   payments: Payment[];
@@ -26,7 +26,7 @@ const EscrowTimeline: React.FC<IEscrowTimeline> = ({
   isPreview,
   transactionCreationTimestamp,
   status,
-  token,
+  assetSymbol,
   buyerAddress,
   sellerAddress,
   payments,
@@ -41,7 +41,7 @@ const EscrowTimeline: React.FC<IEscrowTimeline> = ({
     isPreview,
     transactionCreationTimestamp,
     status,
-    token,
+    assetSymbol,
     buyerAddress,
     sellerAddress,
     payments,

web/src/components/PreviewCard/EscrowTimeline/index.tsx

@@ -8,6 +8,10 @@ const StyledP = styled.p`
   word-break: break-word;
 `;
 
+const InlineBlockSpan = styled.span`
+  display: inline-block;
+`;
+
 interface IDescription {
   escrowType: string;
   deliverableText: string;
@@ -17,7 +21,7 @@ interface IDescription {
   sendingQuantity: string;
   sendingToken: string;
   sellerAddress: string;
-  deadlineDate: Date;
+  deadline: number;
   assetSymbol: string;
   buyer: string;
 }
@@ -31,19 +35,25 @@ const Description: React.FC<IDescription> = ({
   sendingQuantity,
   sendingToken,
   sellerAddress,
-  deadlineDate,
+  deadline,
   assetSymbol,
 }) => {
-  const generalEscrowSummary =
-    `By Paying ${sendingQuantity + " " + assetSymbol}, address ${buyerAddress} should receive` +
-    ` "${deliverableText}" from address ${sellerAddress} before the delivery deadline ${new Date(
-      deadlineDate
-    )}.`;
+  const generalEscrowSummary = (
+    <>
+      By Paying {sendingQuantity}{" "}
+      <InlineBlockSpan>{assetSymbol ? assetSymbol : <StyledSkeleton width={30} />}</InlineBlockSpan>, address{" "}
+      {buyerAddress} should receive "{deliverableText}" from address {sellerAddress} before the delivery deadline{" "}
+      {new Date(deadline).toString()}.
+    </>
+  );
 
-  const cryptoSwapSummary =
-    `By Paying ${sendingQuantity + " " + sendingToken}, [Blockchain] address ${buyerAddress} should receive` +
-    ` ${receivingQuantity + " " + receivingToken} at the [Blockchain] address ${sellerAddress}` +
-    ` from [Blockchain] address TODO before the delivery deadline ${deadlineDate}.`;
+  const cryptoSwapSummary = (
+    <>
+      By Paying {sendingQuantity} {sendingToken}, [Blockchain] address {buyerAddress} should receive {receivingQuantity}{" "}
+      {receivingToken} at the [Blockchain] address {sellerAddress} from [Blockchain] address TODO before the delivery
+      deadline {new Date(deadline).toString()}.
+    </>
+  );
 
   return isUndefined(deliverableText) ? (
     <StyledSkeleton />
@@ -58,4 +68,5 @@ const Description: React.FC<IDescription> = ({
     </div>
   );
 };
+
 export default Description;

web/src/components/PreviewCard/Terms/Description.tsx

@@ -19,7 +19,7 @@ interface ITerms {
   sendingQuantity: string;
   sendingToken: string;
   sellerAddress: string;
-  deadlineDate: Date;
+  deadline: number;
   assetSymbol: string;
   extraDescriptionUri: string;
   buyer: string;
@@ -29,31 +29,29 @@ const Terms: React.FC<ITerms> = ({
   escrowType,
   deliverableText,
   receivingQuantity,
-  receivingToken,
   buyerAddress,
   sendingQuantity,
-  sendingToken,
   sellerAddress,
-  deadlineDate,
+  deadline,
   assetSymbol,
   extraDescriptionUri,
 }) => {
   return (
     <Container>
       <Header />
       <Description
-        escrowType={escrowType}
-        deliverableText={deliverableText}
-        receivingQuantity={receivingQuantity}
-        receivingToken={receivingToken}
-        buyerAddress={buyerAddress}
-        sendingQuantity={sendingQuantity}
-        sendingToken={sendingToken}
-        sellerAddress={sellerAddress}
-        deadlineDate={deadlineDate}
-        assetSymbol={assetSymbol}
+        {...{
+          escrowType,
+          deliverableText,
+          receivingQuantity,
+          buyerAddress,
+          sendingQuantity,
+          sellerAddress,
+          deadline,
+          assetSymbol,
+        }}
       />
-      <AttachedFile extraDescriptionUri={extraDescriptionUri} />
+      <AttachedFile {...{ extraDescriptionUri }} />
     </Container>
   );
 };

web/src/components/PreviewCard/Terms/index.tsx

@@ -52,15 +52,12 @@ interface IPreviewCard {
   escrowTitle: string;
   deliverableText: string;
   receivingQuantity: string;
-  receivingToken: string;
   transactionCreationTimestamp: string;
   status: string;
-  token: string;
   buyerAddress: string;
   sendingQuantity: string;
-  sendingToken: string;
   sellerAddress: string;
-  deadlineDate: string;
+  deadline: number;
   assetSymbol: string;
   overrideIsList: boolean;
   extraDescriptionUri: string;
@@ -80,15 +77,12 @@ const PreviewCard: React.FC<IPreviewCard> = ({
   escrowTitle,
   deliverableText,
   receivingQuantity,
-  receivingToken,
   transactionCreationTimestamp,
   status,
-  token,
   buyerAddress,
   sendingQuantity,
-  sendingToken,
   sellerAddress,
-  deadlineDate,
+  deadline,
   assetSymbol,
   overrideIsList,
   extraDescriptionUri,
@@ -108,9 +102,8 @@ const PreviewCard: React.FC<IPreviewCard> = ({
       <Divider />
       <TransactionInfo
         amount={sendingQuantity}
-        assetSymbol={assetSymbol}
         isPreview={true}
-        {...{ overrideIsList, deadlineDate, sellerAddress, buyerAddress }}
+        {...{ overrideIsList, deadline, sellerAddress, buyerAddress, assetSymbol }}
       />
       <Divider />
     </TransactionInfoContainer>
@@ -119,12 +112,10 @@ const PreviewCard: React.FC<IPreviewCard> = ({
         escrowType,
         deliverableText,
         receivingQuantity,
-        receivingToken,
         buyerAddress,
         sendingQuantity,
-        sendingToken,
         sellerAddress,
-        deadlineDate,
+        deadline,
         assetSymbol,
         extraDescriptionUri,
       }}
@@ -134,7 +125,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
       {...{
         isPreview,
         status,
-        token,
+        assetSymbol,
         transactionCreationTimestamp,
         buyerAddress,
         sellerAddress,

web/src/components/PreviewCard/index.tsx

@@ -1,18 +1,19 @@
 import React from "react";
 import styled from "styled-components";
-import { formatEther } from "viem";
+import { responsiveSize } from "styles/responsiveSize";
 import { Card } from "@kleros/ui-components-library";
+import { formatEther } from "viem";
 import { useIsList } from "context/IsListProvider";
-import TransactionInfo from "../TransactionInfo";
-import StatusBanner from "./StatusBanner";
-import { responsiveSize } from "styles/responsiveSize";
 import { mapStatusToEnum } from "utils/mapStatusToEnum";
 import { isUndefined } from "utils/index";
+import { StyledSkeleton, StyledSkeletonTitle } from "../StyledSkeleton";
+import TransactionInfo from "../TransactionInfo";
+import StatusBanner from "./StatusBanner";
+import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
 import { useNativeTokenSymbol } from "hooks/useNativeTokenSymbol";
 import useFetchIpfsJson from "hooks/useFetchIpfsJson";
-import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
+import { useTokenMetadata } from "hooks/useTokenMetadata";
 import { TransactionDetailsFragment } from "src/graphql/graphql";
-import { StyledSkeleton, StyledSkeletonTitle } from "../StyledSkeleton";
 
 const StyledCard = styled(Card)`
   width: 100%;
@@ -69,6 +70,8 @@ const TransactionCard: React.FC<ITransactionCard> = ({
   const transactionInfo = useFetchIpfsJson(transactionUri);
   const { isList } = useIsList();
   const nativeTokenSymbol = useNativeTokenSymbol();
+  const { tokenMetadata } = useTokenMetadata(token);
+  const erc20TokenSymbol = tokenMetadata?.symbol;
   const title = transactionInfo?.title;
   const navigateAndScrollTop = useNavigateAndScrollTop();
 
@@ -83,7 +86,7 @@ const TransactionCard: React.FC<ITransactionCard> = ({
             {!isUndefined(title) ? <StyledTitle>{title}</StyledTitle> : <StyledSkeleton />}
             <TransactionInfo
               amount={formatEther(amount)}
-              assetSymbol={!token ? nativeTokenSymbol : ""}
+              assetSymbol={!token ? nativeTokenSymbol : erc20TokenSymbol}
               buyerAddress={buyer}
               sellerAddress={seller}
               deadlineDate={new Date(deadline * 1000).toLocaleString()}
@@ -104,7 +107,7 @@ const TransactionCard: React.FC<ITransactionCard> = ({
             )}
             <TransactionInfo
               amount={formatEther(amount)}
-              assetSymbol={!token ? nativeTokenSymbol : ""}
+              assetSymbol={!token ? nativeTokenSymbol : erc20TokenSymbol}
               buyerAddress={buyer}
               sellerAddress={seller}
               deadlineDate={new Date(deadline * 1000).toLocaleString()}

web/src/components/TransactionCard/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled, { css } from "styled-components";
+import Skeleton from "react-loading-skeleton";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { Statuses } from "consts/statuses";
 import { useIsList } from "context/IsListProvider";
@@ -70,7 +71,7 @@ const RestOfFieldsContainer = styled.div<{ isList?: boolean; isPreview?: boolean
 
 export interface ITransactionInfo {
   amount?: string;
-  deadlineDate: string;
+  deadline: number;
   assetSymbol?: string;
   status?: Statuses;
   overrideIsList?: boolean;
@@ -82,7 +83,7 @@ export interface ITransactionInfo {
 const TransactionInfo: React.FC<ITransactionInfo> = ({
   amount,
   assetSymbol,
-  deadlineDate,
+  deadline,
   sellerAddress,
   buyerAddress,
   overrideIsList,
@@ -94,20 +95,24 @@ const TransactionInfo: React.FC<ITransactionInfo> = ({
   return (
     <Container isList={displayAsList} isPreview={isPreview}>
       <RestOfFieldsContainer isPreview={isPreview} isList={displayAsList}>
-        {amount && assetSymbol ? (
+        {amount ? (
           <Field
             icon={PileCoinsIcon}
             name="Amount"
-            value={`${amount} ${assetSymbol}`}
+            value={
+              <>
+                {amount} {!assetSymbol ? <Skeleton width={30} /> : assetSymbol}
+              </>
+            }
             displayAsList={displayAsList}
             isPreview={isPreview}
           />
         ) : null}
-        {deadlineDate ? (
+        {deadline ? (
           <Field
             icon={CalendarIcon}
             name="Delivery Deadline"
-            value={deadlineDate}
+            value={new Date(deadline).toLocaleString()}
             displayAsList={displayAsList}
             isPreview={isPreview}
           />
@@ -134,4 +139,5 @@ const TransactionInfo: React.FC<ITransactionInfo> = ({
     </Container>
   );
 };
+
 export default TransactionInfo;

web/src/components/TransactionInfo/index.tsx

@@ -1,5 +1,11 @@
 import React, { createContext, useState, useContext, useEffect } from "react";
 
+export interface IToken {
+  symbol: string;
+  address: string;
+  logo: string;
+}
+
 interface INewTransactionContext {
   escrowType: string;
   setEscrowType: (type: string) => void;
@@ -23,8 +29,8 @@ interface INewTransactionContext {
   setSellerAddress: (address: string) => void;
   sendingQuantity: string;
   setSendingQuantity: (quantity: string) => void;
-  sendingToken: string;
-  setSendingToken: (token: string) => void;
+  sendingToken: IToken;
+  setSendingToken: (token: IToken) => void;
   buyerAddress: string;
   setBuyerAddress: (address: string) => void;
   deadline: string;
@@ -61,7 +67,7 @@ const NewTransactionContext = createContext<INewTransactionContext>({
   setSellerAddress: () => {},
   sendingQuantity: "",
   setSendingQuantity: () => {},
-  sendingToken: "",
+  sendingToken: { address: "native", symbol: "", logo: "" },
   setSendingToken: () => {},
   buyerAddress: "",
   setBuyerAddress: () => {},
@@ -93,7 +99,9 @@ export const NewTransactionProvider: React.FC<{ children: React.ReactNode }> = (
   const [receivingToken, setReceivingToken] = useState<string>(localStorage.getItem("receivingToken") || "");
   const [sellerAddress, setSellerAddress] = useState<string>(localStorage.getItem("sellerAddress") || "");
   const [sendingQuantity, setSendingQuantity] = useState<string>(localStorage.getItem("sendingQuantity") || "");
-  const [sendingToken, setSendingToken] = useState<string>(localStorage.getItem("sendingToken") || "");
+  const [sendingToken, setSendingToken] = useState<IToken>(
+    JSON.parse(localStorage.getItem("sendingToken")) || { address: "native", symbol: "", logo: "" }
+  );
   const [buyerAddress, setBuyerAddress] = useState<string>(localStorage.getItem("buyerAddress") || "");
   const [isRecipientAddressResolved, setIsRecipientAddressResolved] = useState(false);
   const [deadline, setDeadline] = useState<string>(localStorage.getItem("deadline") || "");
@@ -111,7 +119,7 @@ export const NewTransactionProvider: React.FC<{ children: React.ReactNode }> = (
     setReceivingToken("");
     setSellerAddress("");
     setSendingQuantity("");
-    setSendingToken("");
+    setSendingToken({ address: "native", symbol: "", logo: "" });
     setBuyerAddress("");
     setDeadline("");
     setNotificationEmail("");
@@ -128,7 +136,7 @@ export const NewTransactionProvider: React.FC<{ children: React.ReactNode }> = (
     localStorage.setItem("receivingToken", receivingToken);
     localStorage.setItem("buyerAddress", buyerAddress);
     localStorage.setItem("sendingQuantity", sendingQuantity);
-    localStorage.setItem("sendingToken", sendingToken);
+    localStorage.setItem("sendingToken", JSON.stringify(sendingToken));
     localStorage.setItem("sellerAddress", sellerAddress);
     localStorage.setItem("deadline", deadline);
     localStorage.setItem("notificationEmail", notificationEmail);