Merge branch 'nft-layout-2' of github.com:vigvamapp/local-vigvam into…

… transfer-approval-nft-layout
wigwamapp · Aug 11, 2022 · 544c583 · 544c583
2 parents 43d86e7 + 6dac892
commit 544c583
Show file tree

Hide file tree

Showing 11 changed files with 228 additions and 94 deletions.
diff --git a/src/app/components/blocks/ActivityModal.tsx b/src/app/components/blocks/ActivityModal.tsx
@@ -25,10 +25,10 @@ import {
   ActivitySource,
   ActivityType,
   TransactionActivity,
+  TxAction,
   TxActionType,
 } from "core/types";
 import { rejectAllApprovals } from "core/client";
-import { matchTxAction } from "core/common/transaction";
 
 import {
   activityModalAtom,
@@ -415,7 +415,7 @@ const ActivityCard = memo(
         {item.type === ActivityType.Transaction && (
           <ActivityTokens
             source={item.source}
-            tx={item.rawTx}
+            action={item.txAction}
             accountAddress={item.accountAddress}
             className="w-[10rem] mr-8"
           />
@@ -731,49 +731,36 @@ const SectionHeader: FC<{ className?: string }> = memo(
 
 type ActivityTokensProps = {
   source: ActivitySource;
-  tx: string;
+  action?: TxAction;
   accountAddress: string;
   className?: string;
 };
 
-const ActivityTokens: FC<ActivityTokensProps> = ({
-  source,
-  tx,
-  accountAddress,
-  className,
-}) => {
-  const parsedTx = ethers.utils.parseTransaction(tx);
-  const action = useMemo(() => {
-    try {
-      return matchTxAction(parsedTx);
-    } catch (err) {
-      console.warn(err);
+const ActivityTokens = memo<ActivityTokensProps>(
+  ({ source, action, accountAddress, className }) => {
+    if (
+      source.type !== "self" ||
+      !action ||
+      action.type !== TxActionType.TokenTransfer ||
+      action.tokens?.length === 0
+    ) {
       return null;
     }
-  }, [parsedTx]);
-
-  if (
-    source.type !== "self" ||
-    !action ||
-    action.type !== TxActionType.TokenTransfer ||
-    action.tokens?.length === 0
-  ) {
-    return null;
-  }
 
-  return (
-    <div className={classNames("flex flex-col", className)}>
-      {action.tokens.map((token, i) => (
-        <TokenAmount
-          key={token.slug}
-          accountAddress={accountAddress}
-          token={token}
-          className={classNames(i !== action.tokens.length - 1 && "mb-1")}
-        />
-      ))}
-    </div>
-  );
-};
+    return (
+      <div className={classNames("flex flex-col", className)}>
+        {action.tokens.map((token, i) => (
+          <TokenAmount
+            key={token.slug}
+            accountAddress={accountAddress}
+            token={token}
+            className={classNames(i !== action.tokens.length - 1 && "mb-1")}
+          />
+        ))}
+      </div>
+    );
+  }
+);
 
 function capitalize(word: string) {
   const lower = word.toLowerCase();

diff --git a/src/app/components/blocks/TokenAmount.tsx b/src/app/components/blocks/TokenAmount.tsx
@@ -2,13 +2,16 @@ import { memo } from "react";
 import classNames from "clsx";
 import BigNumber from "bignumber.js";
 
-import { AccountAsset, TokenType } from "core/types";
+import { TokenType } from "core/types";
 import { useToken } from "app/hooks";
 import { LARGE_AMOUNT } from "app/utils/largeAmount";
 
+import { ReactComponent as XSymbolIcon } from "app/icons/xsymbol.svg";
+
 import PrettyAmount from "../elements/PrettyAmount";
 import FiatAmount from "../elements/FiatAmount";
 import AssetLogo from "../elements/AssetLogo";
+import NftAvatar from "../elements/NftAvatar";
 import Dot from "../elements/Dot";
 
 type TokenAmountProps = {
@@ -27,7 +30,7 @@ const TokenAmount = memo<TokenAmountProps>(
     if (!tokenInfo) return null;
 
     if (tokenInfo.tokenType === TokenType.Asset) {
-      const { name, symbol, decimals, priceUSD } = tokenInfo as AccountAsset;
+      const { name, symbol, decimals, priceUSD } = tokenInfo;
 
       const usdAmount = amount
         ? new BigNumber(amount)
@@ -78,7 +81,34 @@ const TokenAmount = memo<TokenAmountProps>(
         </div>
       );
     } else {
-      return null;
+      const { name, thumbnailUrl } = tokenInfo;
+
+      return (
+        <div className={classNames("flex items-center", className)}>
+          <div className="flex flex-col items-end justify-around text-brand-light">
+            {amount && +amount > 1 && (
+              <div className="flex items-center text-sm font-bold">
+                <PrettyAmount
+                  amount={amount}
+                  threeDots={false}
+                  className="mr-1"
+                />
+
+                <XSymbolIcon />
+              </div>
+            )}
+
+            <div className="text-sm">{name}</div>
+          </div>
+
+          <NftAvatar
+            src={thumbnailUrl}
+            alt={name}
+            className={classNames("ml-2 w-10 h-10 min-w-[1rem] !rounded-md")}
+            errorClassName="h-[6rem]"
+          />
+        </div>
+      );
     }
   }
 );

diff --git a/src/app/components/blocks/overview/NftInfo.tsx b/src/app/components/blocks/overview/NftInfo.tsx
@@ -162,7 +162,7 @@ const NftInfo: FC = () => {
                   {preparedId && (
                     <CopiableTooltip
                       content={preparedId}
-                      textToCopy={preparedId}
+                      textToCopy={tokenId}
                       followCursor
                       plugins={[followCursor]}
                       className={classNames(

diff --git a/src/app/components/elements/Tooltip.tsx b/src/app/components/elements/Tooltip.tsx
@@ -53,7 +53,7 @@ const Tooltip: FC<TooltipProps> = ({
       }
       interactive={interactive ?? size === "large"}
       appendTo={overflowElement ?? document.body}
-      maxWidth={maxWidth ?? (size === "large" ? "18rem" : "none")}
+      maxWidth={maxWidth ?? "18rem"}
       placement={placement ?? (size === "large" ? "right-start" : "bottom")}
       hideOnClick={hideOnClick}
       className="pointer-events-auto"
@@ -101,6 +101,7 @@ const getSizeClasses = (size: sizeType) =>
     .otherwise(() =>
       classNames(
         "rounded-md",
+        "overflow-hidden truncate",
         "bg-brand-main/20 backdrop-blur-[6px]",
         IS_FIREFOX && "!bg-[#414356]/[.98]",
         "py-1 px-3"

diff --git a/src/app/components/screens/approvals/Transaction.tsx b/src/app/components/screens/approvals/Transaction.tsx
@@ -21,6 +21,7 @@ import {
   FeeMode,
   FeeSuggestions,
   AccountSource,
+  TxAction,
 } from "core/types";
 import {
   approveItem,
@@ -92,15 +93,6 @@ const ApproveTransaction: FC<ApproveTransactionProps> = ({ approval }) => {
     [approval, allAccounts]
   );
 
-  const action = useMemo(() => {
-    try {
-      return matchTxAction(txParams);
-    } catch (err) {
-      console.warn(err);
-      return null;
-    }
-  }, [txParams]);
-
   const provider = useProvider();
   const withLedger = useLedger();
 
@@ -118,6 +110,7 @@ const ApproveTransaction: FC<ApproveTransactionProps> = ({ approval }) => {
     approvingRef.current = approving;
   }
 
+  const [action, setAction] = useState<TxAction | null>(null);
   const [prepared, setPrepared] = useState<{
     tx: Tx;
     estimatedGasLimit: ethers.BigNumber;
@@ -282,6 +275,12 @@ const ApproveTransaction: FC<ApproveTransactionProps> = ({ approval }) => {
     ]
   );
 
+  useEffect(() => {
+    matchTxAction(provider, txParams)
+      .then((a) => a && setAction(a))
+      .catch(console.warn);
+  }, [provider, txParams]);
+
   useEffect(() => {
     estimateTx();
   }, [estimateTx]);

diff --git a/src/app/icons/xsymbol.svg b/src/app/icons/xsymbol.svg
diff --git a/src/core/back/approve/index.ts b/src/core/back/approve/index.ts
@@ -15,6 +15,7 @@ import {
   TxParams,
   TxActionType,
   TokenActivity,
+  TxAction,
 } from "core/types";
 import * as repo from "core/repo";
 import { saveNonce } from "core/common/nonce";
@@ -24,7 +25,7 @@ import { createTokenActivityKey } from "core/common/tokens";
 
 import { Vault } from "../vault";
 import { $accounts, $approvals, approvalResolved } from "../state";
-import { sendRpc } from "../rpc";
+import { sendRpc, getRpcProvider } from "../rpc";
 
 const { serializeTransaction, parseTransaction, keccak256, hexValue } =
   ethers.utils;
@@ -128,6 +129,11 @@ export async function processApprove(
             const txHash = rpcRes.result;
             const timeAt = Date.now();
 
+            const txAction = await matchTxAction(
+              getRpcProvider(chainId),
+              txParams
+            ).catch(() => null);
+
             await Promise.all([
               saveNonce(chainId, accountAddress, tx.nonce),
               saveActivity({
@@ -138,12 +144,13 @@ export async function processApprove(
                 accountAddress,
                 txParams,
                 rawTx: rawTx!,
+                txAction: txAction ?? undefined,
                 txHash,
                 timeAt,
                 pending: 1,
               }),
               saveTokenActivity(
-                txParams,
+                txAction,
                 chainId,
                 accountAddress,
                 txHash,
@@ -226,15 +233,13 @@ async function saveActivity(activity: Activity) {
 }
 
 async function saveTokenActivity(
-  txParams: TxParams,
+  action: TxAction | null,
   chainId: number,
   accountAddress: string,
   txHash: string,
   timeAt: number
 ) {
   try {
-    const action = matchTxAction(txParams);
-
     if (action) {
       const tokenActivities = new Map<string, TokenActivity>();
       const addToActivities = (activity: TokenActivity) => {

diff --git a/src/core/back/services/txObserver.ts b/src/core/back/services/txObserver.ts
@@ -14,8 +14,8 @@ import * as repo from "core/repo";
 import { createAccountTokenKey, NATIVE_TOKEN_SLUG } from "core/common/tokens";
 import { matchTokenTransferEvents } from "core/common/transaction";
 
-import { sendRpc } from "../rpc";
-import { isUnlocked } from "../state";
+import { sendRpc, getRpcProvider } from "../rpc";
+import { isUnlocked, $accountAddresses } from "../state";
 import { addFindTokenRequest } from "../sync";
 
 export async function startTxObserver() {
@@ -29,6 +29,7 @@ export async function startTxObserver() {
 
     if (pendingTxs.length === 0) return;
 
+    const accountAddresses = $accountAddresses.getState();
     const txsToUpdate = new Map<string, TransactionActivity>();
     const completeHashes = new Set<string>();
 
@@ -65,17 +66,20 @@ export async function startTxObserver() {
 
             if (!isFailedStatus(result)) {
               try {
-                const transfers = matchTokenTransferEvents(result.logs);
+                const transfers = await matchTokenTransferEvents(
+                  getRpcProvider(tx.chainId),
+                  result.logs
+                );
+
                 for (const transfer of transfers) {
-                  if (
-                    transfer.to === tx.accountAddress ||
-                    transfer.from === tx.accountAddress
-                  ) {
-                    addFindTokenRequest(
-                      tx.chainId,
-                      tx.accountAddress,
-                      transfer.tokenSlug
-                    );
+                  for (const transferAddress of [transfer.to, transfer.from]) {
+                    if (accountAddresses.includes(transferAddress)) {
+                      addFindTokenRequest(
+                        tx.chainId,
+                        transferAddress,
+                        transfer.tokenSlug
+                      );
+                    }
                   }
                 }
               } catch (err) {