Merge pull request #221 from heronlancellot/feat/display-address-exte…

…rnal-link Feat/display address external link
blockful-io · Mar 21, 2024 · 0cb3201 · 0cb3201
2 parents 08e6f92 + 611df6f
commit 0cb3201
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 63 deletions.
diff --git a/components/01-atoms/BlockExplorerExternalLinkButton.tsx b/components/01-atoms/BlockExplorerExternalLinkButton.tsx
@@ -0,0 +1,36 @@
+import { ExternalLinkIcon } from "@/components/01-atoms";
+import { EthereumAddress } from "@/lib/shared/types";
+import { useNetwork } from "wagmi";
+
+export const BlockExplorerExternalLinkButton = ({
+  address,
+  label,
+}: {
+  address: EthereumAddress;
+  label?: string;
+}) => {
+  const { chain } = useNetwork();
+
+  if (!address) return null;
+
+  const displayEllipsedAddress = address.getEllipsedAddress();
+
+  const blockExplorer = `${
+    chain?.blockExplorers?.default.url
+  }/address/${address.toString()}`;
+
+  return (
+    <div className="flex">
+      <a
+        href={blockExplorer}
+        target="_blank"
+        className="flex gap-1 items-center justify-start"
+      >
+        <h3 className="p-medium">{label || displayEllipsedAddress}</h3>
+        <div className="p-1">
+          <ExternalLinkIcon className="p-medium" />
+        </div>
+      </a>
+    </div>
+  );
+};
diff --git a/components/01-atoms/LoadingIndicator.tsx b/components/01-atoms/LoadingIndicator.tsx
@@ -1,5 +1,8 @@
-import React, { HTMLProps } from "react";
+import { HTMLProps } from "react";
 
 export const LoadingIndicator = (props: HTMLProps<HTMLDivElement>) => (
-<div {...props} className="animate-spin rounded-full h-4 w-4 border-t-2 dark:border-white border-black"></div>
+  <div
+    {...props}
+    className="animate-spin rounded-full h-4 w-4 border-t-2 dark:border-white border-black"
+  />
 );
diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx
@@ -60,7 +60,7 @@ export const SearchBar = () => {
         setUserJustValidatedInput(true);
       }
     } else if (inputAddress && !authenticatedUserAddress) {
-      toast.error("Cannot get ENS address without connect your wallet");
+      toast.error("Cannot get ENS address without connecting your wallet");
     }
   };
 

diff --git a/components/01-atoms/index.ts b/components/01-atoms/index.ts
@@ -1,5 +1,6 @@
 /** Atoms */
 export * from "./ApprovedTokenCards";
+export * from "./BlockExplorerExternalLinkButton";
 export * from "./ConnectWallet";
 export * from "./DisconnectWallet";
 export * from "./ENSAvatar";

diff --git a/components/02-molecules/EnsNameAndAddressWallet.tsx b/components/02-molecules/EnsNameAndAddressWallet.tsx
@@ -1,9 +1,10 @@
 import { CopyAdressButton } from "@/components/02-molecules";
-import { ENSAvatar, ExternalLinkIcon } from "@/components/01-atoms";
+import {
+  BlockExplorerExternalLinkButton,
+  ENSAvatar,
+} from "@/components/01-atoms";
 import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser";
 import { useEnsData } from "@/lib/client/hooks/useENSData";
-import React from "react";
-import { useNetwork } from "wagmi";
 
 export const EnsNameAndAddressWallet = () => {
   const { authenticatedUserAddress } = useAuthenticatedUser();
@@ -12,14 +13,8 @@ export const EnsNameAndAddressWallet = () => {
     ensAddress: authenticatedUserAddress,
   });
 
-  const { chain } = useNetwork();
-
   if (!authenticatedUserAddress) return null;
 
-  const blockExplorer = `${
-    chain?.blockExplorers?.default.url
-  }/address/${authenticatedUserAddress?.toString()}`;
-
   const displayAddress = authenticatedUserAddress?.getEllipsedAddress();
 
   return (
@@ -42,20 +37,10 @@ export const EnsNameAndAddressWallet = () => {
                 displayAddress={displayAddress}
               />
             </div>
-            <div className="flex">
-              <a
-                href={blockExplorer}
-                target="_blank"
-                className="flex gap-1 items-center justify-start"
-              >
-                <h3 className="text-sm font-medium text-[#A3A9A5] ">
-                  View on explorer
-                </h3>
-                <div className="p-1">
-                  <ExternalLinkIcon className="dark:text-[#A3A9A5] text-[#AABE13] font-medium" />
-                </div>
-              </a>
-            </div>
+            <BlockExplorerExternalLinkButton
+              address={authenticatedUserAddress}
+              label="View on explorer"
+            />
           </div>
         </>
       )}

diff --git a/components/03-organisms/ApproveTokenCard.tsx b/components/03-organisms/ApproveTokenCard.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import { BlockExplorerExternalLinkButton } from "@/components/01-atoms";
 import {
   TokenCard,
   TokenCardActionType,
@@ -13,7 +14,7 @@ import { SWAPLACE_SMART_CONTRACT_ADDRESS } from "@/lib/client/constants";
 import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser";
 import { isTokenSwapApproved } from "@/lib/service/verifyTokensSwapApproval";
 import { IApproveTokenSwap } from "@/lib/client/swap-utils";
-import { getTokenName } from "@/lib/client/ui-utils";
+import { getTokenContractAddress, getTokenName } from "@/lib/client/ui-utils";
 import { Token } from "@/lib/shared/types";
 import toast from "react-hot-toast";
 import { type TransactionReceipt } from "viem";
@@ -79,13 +80,12 @@ export const ApproveTokenCard = ({
       throw new Error("User is not connected to any network");
     }
 
-    setTokenApprovalStatus(TokenApprovalStatus.APPROVE_IN_YOUR_WALLET);
-
     const approved = await checkForTokenApproval(token);
 
     if (approved) {
       toast.success(`${getTokenName(token)} was approved for swap`);
     } else {
+      setTokenApprovalStatus(TokenApprovalStatus.APPROVE_IN_YOUR_WALLET);
       await askForTokenApproval(token).then((isApproved) => {
         if (typeof isApproved !== "undefined") {
           setIsApproved(true);
@@ -168,42 +168,53 @@ export const ApproveTokenCard = ({
       onClick={() => handleTokenApproval()}
       role="button"
     >
-      <div>
-        <TokenCard
-          displayERC20TokensAmount={true}
-          withSelectionValidation={false}
-          onClickAction={TokenCardActionType.APPROVE_TOKEN_SWAP}
-          ownerAddress={authenticatedUserAddress}
-          styleType={TokenCardStyleType.SMALL}
-          tokenData={token}
-        />
-      </div>
-      <div className="flex flex-col gap-1">
-        <div className="flex">
-          <p>{getTokenName(token)}</p>
+      <div className="flex gap-4 w-[75%]">
+        <div>
+          <TokenCard
+            displayERC20TokensAmount={true}
+            withSelectionValidation={false}
+            onClickAction={TokenCardActionType.APPROVE_TOKEN_SWAP}
+            ownerAddress={authenticatedUserAddress}
+            styleType={TokenCardStyleType.SMALL}
+            tokenData={token}
+          />
         </div>
-        <div className="flex p-semibold-dark">
-          {tokenApprovalStatus === TokenApprovalStatus.CLICK_TO_APPROVE ? (
-            <p className="bg-[#707572] dark:bg-[#505150] p-1.5 w-fit rounded-[4px] min-h-6 items-center flex">
-              CLICK TO APPROVE
-            </p>
-          ) : tokenApprovalStatus ===
-            TokenApprovalStatus.APPROVE_IN_YOUR_WALLET ? (
-            <p className="bg-[#707572] dark:bg-[#505150] p-1.5 w-fit rounded-[4px] min-h-6 items-center flex">
-              APPROVE TRANSACTION REQUEST IN YOUR WALLET
-            </p>
-          ) : tokenApprovalStatus ===
-            TokenApprovalStatus.WAITING_BLOCKCHAIN_CONFIRMATION ? (
-            <p className="bg-[#707572] dark:bg-[#505150] p-1.5 w-fit rounded-[4px] min-h-6 items-center flex">
-              WAITING FOR BLOCKCHAIN CONFIRMATION
-            </p>
-          ) : TokenApprovalStatus.APPROVED ? (
-            <div className="bg-[#707572] dark:bg-[#505150] p-1.5 w-fit bg-opacity-30 rounded-[4px] min-h-6 items-center flex">
-              <p className="text-white">APPROVED</p>
-            </div>
-          ) : null}
+        <div className="flex flex-col gap-1">
+          <div className="flex">
+            <p>{getTokenName(token)}</p>
+          </div>
+          <div className="flex p-semibold-dark">
+            {tokenApprovalStatus === TokenApprovalStatus.CLICK_TO_APPROVE ? (
+              <p className="bg-[#707572] dark:bg-[#505150] p-1.5 w-fit rounded-[4px] min-h-6 items-center flex">
+                CLICK TO APPROVE
+              </p>
+            ) : tokenApprovalStatus ===
+              TokenApprovalStatus.APPROVE_IN_YOUR_WALLET ? (
+              <p className="bg-[#707572] dark:bg-[#505150] p-1.5 w-fit rounded-[4px] min-h-6 items-center flex">
+                APPROVE TRANSACTION REQUEST IN YOUR WALLET
+              </p>
+            ) : tokenApprovalStatus ===
+              TokenApprovalStatus.WAITING_BLOCKCHAIN_CONFIRMATION ? (
+              <p className="bg-[#707572] dark:bg-[#505150] p-1.5 w-fit rounded-[4px] min-h-6 items-center flex">
+                WAITING FOR BLOCKCHAIN CONFIRMATION
+              </p>
+            ) : TokenApprovalStatus.APPROVED ? (
+              <div className="bg-[#707572] dark:bg-[#505150] p-1.5 w-fit bg-opacity-30 rounded-[4px] min-h-6 items-center flex">
+                <p className="text-white">APPROVED</p>
+              </div>
+            ) : null}
+          </div>
         </div>
       </div>
+      <div
+        role="button"
+        className="flex pointer-events-auto items-center"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <BlockExplorerExternalLinkButton
+          address={getTokenContractAddress(token)}
+        />
+      </div>
     </div>
   );
 };
diff --git a/lib/client/ui-utils.ts b/lib/client/ui-utils.ts
@@ -3,6 +3,7 @@ import {
   ERC20,
   ERC20WithTokenAmountSelection,
   ERC721,
+  EthereumAddress,
   Token,
   TokenType,
 } from "../shared/types";
@@ -60,3 +61,24 @@ export const getTokenName = (
     return `${token.tokenType} - Token Name Not Found`;
   }
 };
+
+/**
+ *
+ * @param token
+ * @returns TokenContractAddress from token, returns EthereumAddress type.
+ */
+export const getTokenContractAddress = (token: Token): EthereumAddress => {
+  if (!token) throw new Error("Token not defined");
+
+  let address: EthereumAddress | undefined = !token.contract
+    ? (token as ERC721).contractMetadata?.address
+    : typeof token.contract === "string"
+    ? new EthereumAddress(token.contract)
+    : undefined;
+
+  if (address === undefined)
+    throw new Error(
+      `Token contract address not defined for ${getTokenName(token)}`,
+    );
+  return address;
+};
diff --git a/styles/global.css b/styles/global.css
@@ -198,7 +198,7 @@ input[type="number"] {
     @apply shadow-inner w-[90px] h-[90px] lg:w-[80px] lg:h-[80px] relative rounded-xl border border-[#E0E0E0] bg-[#E0E0E0] dark:bg-[#353836] dark:border-[#212322] flex flex-col shadow-token;
   }
   .card-token-small {
-    @apply shadow-inner mx-auto w-[44px] h-[44px] lg:w-[44px] lg:h-[44px] relative rounded-lg border-2 border-[#E0E0E0] bg-[#E0E0E0] dark:bg-[#353836] dark:border-[#212322] flex flex-col shadow-token;
+    @apply shadow-inner mx-auto w-[55px] h-[55px] lg:w-[55px] lg:h-[55px] relative rounded-lg border-2 border-[#E0E0E0] bg-[#E0E0E0] dark:bg-[#353836] dark:border-[#212322] flex flex-col shadow-token;
   }
   .card-token-medium {
     @apply shadow-inner w-[72px] h-[72px] lg:w-[72px] lg:h-[72px] relative rounded-xl border border-[#E0E0E0] bg-[#E0E0E0] dark:bg-[#353836] dark:border-[#212322] flex flex-col shadow-token;