Polygon Gating

src/components/web3/SelectableImageList.tsx

@@ -5,6 +5,7 @@ import noNftImage from "../../images/no-nft-image.png";
 interface Item {
   imageUrl: string;
   name?: string;
+  chain: string;
   collection?: {
     collection_id: string;
     name: string;
@@ -68,7 +69,7 @@ export const SelectableImageList: React.FC<Props> = ({
             title={item[0].name}
           >
             <img
-              title={item[0].name}
+              title={`${item[0].name} (${item[0].chain})`}
               height={167}
               width={167}
               src={item[0].imageUrl ? item[0].imageUrl : noNftImage}

src/components/web3/SelectableNFTCollectionList.tsx

@@ -16,6 +16,7 @@ export const SelectableNFTCollectionList: React.FC<Props> = ({
   const nftCollectionItems = nftCollections.map((p) => ({
     imageUrl: p.image_url,
     name: p.name,
+    chain: p.chain,
   }));
 
   const selectedIdxs = nftCollections.flatMap((p, idx) => {

src/components/web3/SelectablePoapList.tsx

@@ -16,6 +16,7 @@ export const SelectablePoapList: React.FC<Props> = ({
   const poapItems = poaps.map((p) => ({
     imageUrl: p.event.image_url,
     name: p.event.name,
+    chain: p.chain,
   }));
 
   const selectedIdxs = poaps.flatMap((p, idx) => {

src/components/web3/api.ts

@@ -66,7 +66,7 @@ export const web3Login = async (): Promise<string> => {
 
 export const web3NFTs = async (address: string): Promise<NFT[]> => {
   try {
-    const getNFTsURL = `${SIMPLEHASH_PROXY_ROOT_URL}/api/v0/nfts/owners?chains=ethereum&wallet_addresses=${encodeURIComponent(
+    const getNFTsURL = `${SIMPLEHASH_PROXY_ROOT_URL}/api/v0/nfts/owners?chains=ethereum,polygon&wallet_addresses=${encodeURIComponent(
       address
     )}`;
     console.log(`>>> GET ${getNFTsURL}`);
@@ -95,6 +95,7 @@ export const web3NFTs = async (address: string): Promise<NFT[]> => {
           : nft.image_url,
         name: nft.name,
         id: nft.nft_id,
+        chain: nft.chain,
         collection: {
           collection_id: nft.collection?.collection_id,
           name: nft.collection?.name,
@@ -143,6 +144,7 @@ export const web3NFTcollections = async (
           collections[nft.collection.collection_id] = {
             id: nft.collection.collection_id,
             name: nft.collection.name,
+            chain: nft.chain,
             image_url: nft.previews?.image_small_url
               ? nft.previews.image_small_url
               : nft.image_url
@@ -160,7 +162,7 @@ export const web3NFTcollections = async (
   };
 
   try {
-    const getNFTsByWalletURL = `${SIMPLEHASH_PROXY_ROOT_URL}/api/v0/nfts/owners?chains=ethereum&wallet_addresses=${encodeURIComponent(
+    const getNFTsByWalletURL = `${SIMPLEHASH_PROXY_ROOT_URL}/api/v0/nfts/owners?chains=ethereum,polygon&wallet_addresses=${encodeURIComponent(
       address
     )}`;
     console.log(`>>> GET ${getNFTsByWalletURL}`);

src/components/web3/core.ts

@@ -7,18 +7,21 @@ export interface POAP {
     image_url: string;
   };
   tokenId: string;
+  chain: string;
 }
 
 export interface NFTcollection {
   id: string;
   name: string;
   image_url: string;
+  chain: string;
 }
 
 export interface NFT {
   image_url: string;
   name: string;
   id: string;
+  chain: string;
   collection?: {
     collection_id: string;
     name: string;

src/i18n/locales/en/translation.json

@@ -1,6 +1,6 @@
 {
   "avatar_fetch_error": "Failed to fetch avatar NFTs",
-  "avatar_nft_subhead": "Currently supports Ethereum ERC-721 NFTs",
+  "avatar_nft_subhead": "Currently supports Ethereum ERC-721 NFTs and ERC-1155 NFTs ",
   "bat_gating_panel_header": "Non-Zero BAT gating will be applied.",
   "bat_gating_panel_subheader": "Users will need to have a non-zero balance of BAT in their wallet to join this call.",
   "call_permission_type": "Call permission type:",