Merge pull request #26 from terra-money/dev/add-wallet-connection

Dev/add wallet connection
terra-money · Dec 11, 2023 · e15d157 · e15d157
2 parents 4123f11 + ff01071
commit e15d157
Show file tree

Hide file tree

Showing 10 changed files with 146 additions and 82 deletions.
diff --git a/frontend/src/components/navigations/desktop/DesktopNav.tsx b/frontend/src/components/navigations/desktop/DesktopNav.tsx
@@ -1,21 +1,33 @@
 import classNames from "classnames/bind"
-import { Link, NavLink, useLocation } from "react-router-dom"
+import { NavLink, useLocation } from "react-router-dom"
+import { useWallet } from "@terra-money/wallet-kit"
 import { ReactComponent as Logo } from "assets/AllianceDAOLogo.svg"
 import { ReactComponent as ExternalLinkIcon } from "assets/ExternalLink.svg"
 import { ReactComponent as CheckIcon } from "assets/check.svg"
 import { ReactComponent as TwitterIcon } from "assets/socials/Twitter.svg"
 import { ReactComponent as MediumIcon } from "assets/socials/Medium.svg"
 import { ReactComponent as TelegramIcon } from "assets/socials/Telegram.svg"
+import { useAppContext } from "contexts"
 import { useNav } from "../../../config/routes"
 import styles from "./DesktopNav.module.scss"
 
 const cx = classNames.bind(styles)
 
 const DesktopNav = () => {
+  const wallet = useWallet()
+  const { walletAddress } = useAppContext()
   const socialSize = 16
   const { pathname } = useLocation()
   const { menu } = useNav()
 
+  const handleConnectClick = () => {
+    if (walletAddress) {
+      wallet.disconnect()
+    } else {
+      wallet.connect()
+    }
+  }
+
   return (
     <nav className={styles.navigation}>
       <a href="/nft-gallery">
@@ -79,12 +91,16 @@ const DesktopNav = () => {
             />
           </a>
         </div>
-        <Link to="/">
-          <button className={styles.nav__button}>
-            <CheckIcon />
-            Connect Wallet
-          </button>
-        </Link>
+        <button onClick={handleConnectClick} className={styles.nav__button}>
+          {walletAddress ? (
+            <>
+              <CheckIcon />
+              Connected
+            </>
+          ) : (
+            <>Connect Wallet</>
+          )}
+        </button>
       </div>
     </nav>
   )

diff --git a/frontend/src/config/index.ts b/frontend/src/config/index.ts
@@ -3,6 +3,9 @@ import { AccAddress } from "@terra-money/feather.js"
 export const supportedNetworks = ["phoenix-1", "pisco-1"] as const
 export type SupportedNetwork = (typeof supportedNetworks)[number]
 
+export const NFT_PREVIEW_URL =
+  "https://alliancedao.mypinata.cloud/ipfs/bafybeiek4cv2w6ot767nriveyzagejnvzpw3qr2b7iyc6ccddid6jj77za/{id}.png"
+
 export type AllianceContractConfig = {
   minter: AccAddress
   collection: AccAddress
@@ -11,9 +14,10 @@ export type AllianceContractConfig = {
 
 export const contracts: Record<SupportedNetwork, AllianceContractConfig> = {
   "phoenix-1": {
-    minter: "",
-    collection: "",
-    dao: "",
+    minter: "terra1m3ye6dl6s25el4xd8adg9lnquz88az9lur2ujztj9pfmzdyfz3xsm699r3",
+    collection:
+      "terra1phr9fngjv7a8an4dhmhd0u0f98wazxfnzccqtyheq4zqrrp4fpuqw3apw9",
+    dao: "terra1tay6vaymstcg95z4lwpaxujhzsnqylu39hl3328556y5edzsf8ysuzrtnq",
   },
   "pisco-1": {
     minter: "terra1a78x4w8da7ycdfj3dryrelvwa2p8t7vxk8t0tfvtuduf00aw5y5qnurwru",

diff --git a/frontend/src/config/routes.tsx b/frontend/src/config/routes.tsx
@@ -13,6 +13,13 @@ import {
 
 export const useNav = () => {
   const menu = [
+    {
+      path: "/",
+      element: <ClaimModalPage />,
+      name: "Claim",
+      isExternal: false,
+      isDynamic: false,
+    },
     {
       path: "/nft-gallery",
       element: <NFTsPage />,
@@ -61,13 +68,6 @@ export const useNav = () => {
       isExternal: false,
       isDynamic: false,
     },
-    {
-      path: "/",
-      element: <ClaimModalPage />,
-      name: "Claim",
-      isExternal: false,
-      isDynamic: false,
-    },
     {
       path: "/not-eligible",
       element: <NotEligibleModalPage />,

diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
@@ -1,4 +1,4 @@
-export { default as useAllNftsFromCollection } from "./useAllNFTsFromCollection"
+export { default as useAllMintedNFTsFromCollection } from "./useAllMintedNFTsFromCollection"
 export { default as useNFTFromCollection } from "./useNFTFromCollection"
 export { default as useUserNFTsFromCollection } from "./useUserNFTsFromCollection"
 export { default as useNFTFromMinter } from "./useNFTFromMinter"

diff --git a/...nd/src/hooks/useAllNFTsFromCollection.tsx → .../hooks/useAllMintedNFTsFromCollection.tsx b/...nd/src/hooks/useAllNFTsFromCollection.tsx → .../hooks/useAllMintedNFTsFromCollection.tsx
@@ -3,7 +3,7 @@ import { TokensResponse } from "types/AllianceNftCollection"
 import { contracts } from "config"
 import { useAppContext } from "contexts"
 
-const useAllNFTsFromCollection = () => {
+const useAllMintedNFTsFromCollection = () => {
   const { chainId, lcd } = useAppContext()
 
   return useQuery<TokensResponse, Error>({
@@ -18,4 +18,4 @@ const useAllNFTsFromCollection = () => {
   })
 }
 
-export default useAllNFTsFromCollection
+export default useAllMintedNFTsFromCollection
diff --git a/frontend/src/hooks/useAllianceContracts.tsx b/frontend/src/hooks/useAllianceContracts.tsx
@@ -44,6 +44,17 @@ const useAllianceContracts: (address?: string) => IUseContracts = (
         feeDenoms: ["uluna"],
       })
 
+      //   const instantiateResult = await post(postMessage);
+      // const txHash = instantiateResult?.result.txhash;
+
+      // if (!txHash) {
+      //   throw new Error('No txHash');
+      // }
+
+      // // poll for block result
+      // let txResult: any = await pollForTxInclusion(txHash);
+      // console.log('txResult', txResult);
+
       return postedTx
     } catch (error) {
       console.log("Error minting NFT:")

diff --git a/frontend/src/hooks/useUserNFTsFromCollection.tsx b/frontend/src/hooks/useUserNFTsFromCollection.tsx
@@ -3,7 +3,7 @@ import { TokensResponse } from "types/AllianceNftCollection"
 import { contracts } from "config"
 import { useAppContext } from "contexts"
 
-const useUserNFTsFromCollection = (userAddress: string) => {
+const useUserNFTsFromCollection = (userAddress: string | undefined) => {
   const { chainId, lcd } = useAppContext()
 
   return useQuery<TokensResponse, Error>({

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -1,7 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import { BrowserRouter } from "react-router-dom"
 import { getInitialConfig, WalletProvider } from "@terra-money/wallet-kit"
 import { AppProvider } from "contexts/index.ts"
@@ -16,7 +15,6 @@ getInitialConfig().then((defaultNetworks) => {
       <BrowserRouter>
         <WalletProvider defaultNetworks={defaultNetworks}>
           <QueryClientProvider client={new QueryClient()}>
-            <ReactQueryDevtools />
             <AppProvider defaultNetwork="pisco-1">
               <App />
             </AppProvider>

diff --git a/frontend/src/pages/nft/NFTs.tsx b/frontend/src/pages/nft/NFTs.tsx
@@ -1,12 +1,17 @@
-import { useEffect, useState } from "react"
+import { useState } from "react"
 import classNames from "classnames/bind"
 import NFTItem from "components/nft/NFTItem"
-import { filterNFTs } from "components/filters/helpers"
+import { NFT_PREVIEW_URL } from "config"
 import { FilterDropdowns } from "components/filters/dropdowns"
 import { ReactComponent as FilterIcon } from "assets/Filter.svg"
 import { mockNFTs, signedInUserData } from "fakeData/mockNFTs"
 import styles from "./NFTs.module.scss"
 import { SearchByID } from "components/filters/search/SearchByID"
+import {
+  useAllMintedNFTsFromCollection,
+  useUserNFTsFromCollection,
+} from "hooks"
+import { useAppContext } from "contexts"
 
 const cx = classNames.bind(styles)
 
@@ -19,8 +24,13 @@ export interface GalleryFiltersProps {
 
 export const NFTsPage = () => {
   const [showFilterRow, setShowFilterRow] = useState(false)
-  const [searchValue, setSearchValue] = useState("")
-  const [searchLoading, setSearchLoading] = useState(false)
+  // const [searchValue, setSearchValue] = useState("")
+  // const [searchLoading, setSearchLoading] = useState(false)
+  const { walletAddress } = useAppContext()
+  const { data: allNfts, isLoading: areNftsLoading } =
+    useAllMintedNFTsFromCollection()
+
+  const { data: userNfts } = useUserNFTsFromCollection(walletAddress)
 
   const [activeTab, setActiveTab] = useState("all")
   const [galleryFilters, setGalleryFilters] = useState<GalleryFiltersProps>({
@@ -30,38 +40,36 @@ export const NFTsPage = () => {
     nftObjects: [],
   })
 
-  const [displayedNFTs, setDisplayedNFTs] = useState(mockNFTs)
+  // useEffect(() => {
+  //   if (
+  //     !galleryFilters.planetNames.length &&
+  //     !galleryFilters.planetInhabitants.length &&
+  //     !galleryFilters.nftObjects.length
+  //   ) {
+  //     setDisplayedNFTs(mockNFTs)
+  //     return
+  //   }
 
-  useEffect(() => {
-    if (
-      !galleryFilters.planetNames.length &&
-      !galleryFilters.planetInhabitants.length &&
-      !galleryFilters.nftObjects.length
-    ) {
-      setDisplayedNFTs(mockNFTs)
-      return
-    }
+  //   const filtered = filterNFTs(mockNFTs, galleryFilters)
+  //   setDisplayedNFTs(filtered)
+  // }, [galleryFilters])
 
-    const filtered = filterNFTs(mockNFTs, galleryFilters)
-    setDisplayedNFTs(filtered)
-  }, [galleryFilters])
-
-  useEffect(() => {
-    if (!searchValue) {
-      setSearchLoading(false)
-      setDisplayedNFTs(mockNFTs)
-      return
-    }
+  // useEffect(() => {
+  //   if (!searchValue) {
+  //     setSearchLoading(false)
+  //     setDisplayedNFTs(mockNFTs)
+  //     return
+  //   }
 
-    setSearchLoading(true)
-    setTimeout(() => {
-      const filtered = mockNFTs.filter(
-        (nft) => nft.id.toString() === searchValue
-      )
-      setDisplayedNFTs(filtered)
-      setSearchLoading(false)
-    }, 1000)
-  }, [searchValue])
+  //   setSearchLoading(true)
+  //   setTimeout(() => {
+  //     const filtered = mockNFTs.filter(
+  //       (nft) => nft.id.toString() === searchValue
+  //     )
+  //     setDisplayedNFTs(filtered)
+  //     setSearchLoading(false)
+  //   }, 1000)
+  // }, [searchValue])
 
   const handleSwitch = (tab: string) => {
     if (tab === "all" && activeTab === "all") {
@@ -103,17 +111,19 @@ export const NFTsPage = () => {
           >
             All NFTs
           </button>
-          <button
-            className={cx(styles.button, {
-              [styles.button__selected]: activeTab === "my",
-            })}
-            onClick={() => handleSwitch("my")}
-          >
-            My NFTs
-            <span className={styles.button__count}>
-              {signedInUserData.nftIDs.length}
-            </span>
-          </button>
+          {walletAddress && (
+            <button
+              className={cx(styles.button, {
+                [styles.button__selected]: activeTab === "my",
+              })}
+              onClick={() => handleSwitch("my")}
+            >
+              My NFTs
+              <span className={styles.button__count}>
+                {userNfts?.tokens.length}
+              </span>
+            </button>
+          )}
         </div>
 
         {activeTab === "all" && showFilterRow && (
@@ -131,24 +141,27 @@ export const NFTsPage = () => {
         )}
 
         {activeTab === "all" ? (
-          <div className={styles.grid}>
-            {displayedNFTs.map((nft) => (
-              <NFTItem
-                key={nft.id}
-                id={nft.id}
-                imageUrl={nft.image}
-                title={nft.id.toString()}
-              />
-            ))}
-          </div>
+          !areNftsLoading &&
+          allNfts && (
+            <div className={styles.grid}>
+              {allNfts.tokens?.map((nft) => (
+                <NFTItem
+                  key={nft}
+                  id={parseInt(nft)}
+                  imageUrl={NFT_PREVIEW_URL.replace("{id}", nft)}
+                  title={nft.toString()}
+                />
+              ))}
+            </div>
+          )
         ) : (
           <div className={styles.grid}>
-            {signedInUserData.nftIDs.map((nft) => (
+            {userNfts?.tokens.map((nft) => (
               <NFTItem
-                key={mockNFTs[nft].id}
-                id={mockNFTs[nft].id}
-                imageUrl={mockNFTs[nft].image}
-                title={mockNFTs[nft].id.toString()}
+                key={nft}
+                id={parseInt(nft)}
+                imageUrl={NFT_PREVIEW_URL.replace("{id}", nft)}
+                title={nft.toString()}
               />
             ))}
           </div>

diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
@@ -14,3 +14,25 @@ export const isNFTBroken = (
       attribute.trait_type === "broken" && attribute.value === "true"
   )
 }
+
+// export const pollForTxInclusion = async (
+//   txHash: string,
+//   timeout: number = 30000,
+//   lcd: LCDClient,
+//   chainId: string
+// ): Promise<any> => {
+//   let txResult: any = null
+//   const startTime: number = new Date().getTime()
+//   try {
+//     txResult = await lcd.tx.txInfo(txHash, chainId)
+//     return txResult
+//   } catch (e) {
+//     if (new Date().getTime() - startTime > timeout) {
+//       return null
+//     }
+//     await delay(1000)
+//     return await pollForTxInclusion(txHash, timeout, lcd, chainId)
+//   }
+// }
+
+// const delay = (ms: number) => new Promise((r) => setTimeout(r, ms))