Display blockies on PopupTokenList component if logo is not available

- Don't use Function as a type in useLoanApproval hook
Magnify-Cash · Nov 12, 2024 · 1a32b71 · 1a32b71
1 parent afde002
commit 1a32b71
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 15 deletions.
diff --git a/dapp-v1/src/components/PopupTokenList.tsx b/dapp-v1/src/components/PopupTokenList.tsx
@@ -16,6 +16,7 @@ import {
 import { FixedSizeList } from "react-window";
 import { isAddress } from "viem";
 import { useChainId } from "wagmi";
+import { Blockies } from "./Blockies";
 
 /*
 Component Props
@@ -282,13 +283,23 @@ export const PopupTokenList = (props: PopupTokenListProps) => {
                             data={item}
                             className="btn d-flex align-items-center justify-content-start w-100 p-2 border-0 rounded-0 focus-ring"
                           >
-                            <img
-                              className="d-block w-auto me-2 rounded"
-                              src={item.token.logoURI}
-                              alt={`${item.token.name} Logo`}
-                              height="32px"
-                              width="32px"
-                            />
+                            {item.token.logoURI ? (
+                              <img
+                                className="d-block w-auto me-2 rounded"
+                                src={item.token.logoURI}
+                                alt={`${item.token.name} Logo`}
+                                height="32px"
+                                width="32px"
+                              />
+                            ) : (
+                              <div
+                                className="d-block me-2 rounded"
+                                style={{ height: "32px", width: "32px" }}
+                              >
+                                {" "}
+                                <Blockies seed={item.token?.address} size={8} />
+                              </div>
+                            )}
                             <div className="text-start w-100">
                               <div>{item.token.name}</div>
                               <div className="text-body-secondary fw-normal d-flex">
@@ -331,13 +342,23 @@ export const PopupTokenList = (props: PopupTokenListProps) => {
                             data={item}
                             className="btn d-flex align-items-center justify-content-start w-100 p-2 border-0 rounded-0 focus-ring"
                           >
-                            <img
-                              className="d-block w-auto me-2 rounded"
-                              src={item.nft.logoURI}
-                              alt={`${item.nft.name} Logo`}
-                              height="32px"
-                              width="32px"
-                            />
+                            {item.nft.logoURI ? (
+                              <img
+                                className="d-block w-auto me-2 rounded"
+                                src={item.nft.logoURI}
+                                alt={`${item.nft.name} Logo`}
+                                height="32px"
+                                width="32px"
+                              />
+                            ) : (
+                              <div
+                                className="d-block me-2 rounded"
+                                style={{ height: "32px", width: "32px" }}
+                              >
+                                {" "}
+                                <Blockies seed={item.nft?.address} size={8} />
+                              </div>
+                            )}
                             <div className="text-start">
                               <div>{item.nft.name}</div>
                               <div className="text-body-secondary fw-normal d-flex">

diff --git a/dapp-v1/src/hooks/useLoanApproval.tsx b/dapp-v1/src/hooks/useLoanApproval.tsx
@@ -189,7 +189,7 @@ export const useLoanApproval = (
   }, [nftId, erc1155ApprovalData]);
 
   // Checkbox click function
-  const handleApproval = async (approveFunction: Function) => {
+  const handleApproval = async (approveFunction: (args: any) => Promise<any>) => {
     if (checked) {
       addToast("Warning", <ErrorDetails error={"already approved"} />, "warning");
       return;