Remove WalletBalanceSub and only display songs in account on wallet c…

…onnect - also address the warnings/errors of react
meta-web3-music · Sep 6, 2023 · 9a5ab27 · 9a5ab27
1 parent 0891bf1
commit 9a5ab27
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 203 deletions.
diff --git a/src/app/account/AccountListBtn.tsx b/src/app/account/AccountListBtn.tsx
@@ -13,7 +13,7 @@ const AccountListBtn = ({
 }) => {
   return (
     <OButton
-      color={(monetizeId ?? -1) > -1 ? "gray" : "yellow"}
+      $color={(monetizeId ?? -1) > -1 ? "gray" : "yellow"}
       btnType="fill"
       className="w-full mt-2"
       onClick={() => {

diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
@@ -72,14 +72,8 @@ const Account = () => {
     }
   };
 
-  const { data: myMusicSpinamp, refetch: refetchSpinamp } = useQuery(
-    GET_MY_MUSIC_SPINAMP,
-    {
-      variables: {
-        owner: "0x26ef03a20aaeda8aafcee4e146dc6b328195947c",
-      },
-    }
-  );
+  const { data: myMusicSpinamp, refetch: refetchSpinamp } =
+    useQuery(GET_MY_MUSIC_SPINAMP);
 
   const { data: myMusic, refetch } = useQuery(GET_MY_MUSIC, {
     variables: {
@@ -93,14 +87,11 @@ const Account = () => {
   });
   useEffect(() => {
     refetch();
-    refetchSpinamp();
+    refetchSpinamp({ owner: "0x26ef03a20aaeda8aafcee4e146dc6b328195947c" });
   }, [walletClient, refetchSpinamp, refetch]);
 
   const [inbuildBalance, setInbuildBalance] = useState<string>();
   const [browserBalance, setBrowserBalance] = useState<string>();
-  useEffect(() => {
-    // USDCxWalletBalanceSub.subscribe(setBalance);
-  }, []);
 
   useEffect(() => {
     setInterval(() => {
@@ -141,29 +132,93 @@ const Account = () => {
       </div>
 
       <div className="flex flex-wrap pt-1 mb-4 items-start h-[60vh] overflow-y-scroll">
-        {myMusicSpinamp?.allProcessedTracks?.nodes
-          .map(
-            (e) => e?.nftsProcessedTracksByProcessedTrackId.nodes[0]?.nftByNftId
-          )
-          .map((e) => {
+        {!walletClient && <p className="ml-2 mt-4">Connect Wallet</p>}
+        {walletClient &&
+          myMusicSpinamp?.allProcessedTracks?.nodes
+            .map(
+              (e) =>
+                e?.nftsProcessedTracksByProcessedTrackId.nodes[0]?.nftByNftId
+            )
+            .map((e) => {
+              if (!e) return <></>;
+              return (
+                <SongListItemSpinamp
+                  key={e.id}
+                  musicNft={e}
+                  onPlaySong={() => {
+                    handlePlaySongSpinamp(e);
+                  }}
+                  customBtn={
+                    <AccountListBtn
+                      monetizeId={BigInt(
+                        myListedMusic?.octaveTokens.find((ele) => {
+                          if (!e.contractAddress || !e.tokenId) return false;
+                          return (
+                            (ele.musicNftAddr as string).toLowerCase() ==
+                              e.contractAddress.toLowerCase() &&
+                            (ele.musicNftTokenId as string).toLowerCase() ==
+                              e.tokenId.toLowerCase()
+                          );
+                        })?.id ?? "-1"
+                      )}
+                      onList={() => {
+                        //TODO error
+                        if (
+                          !walletClient ||
+                          !publicClient ||
+                          !e.contractAddress ||
+                          !e.tokenId ||
+                          !e.tokenUri
+                        )
+                          return;
+                        monetize(
+                          e.contractAddress,
+                          BigInt(e.tokenId),
+                          e.tokenUri,
+                          e.platformId ?? "",
+                          e.chainId ?? "",
+                          e.nftsProcessedTracksByNftId.nodes[0]
+                            ?.platformInternalId ?? "",
+                          publicClient,
+                          walletClient
+                        );
+                      }}
+                      onUnlist={(monetizeId) => {
+                        if (
+                          !walletClient ||
+                          !publicClient ||
+                          !e.contractAddress ||
+                          !e.tokenId ||
+                          !e.tokenUri
+                        )
+                          return;
+                        unmonetize(monetizeId, publicClient, walletClient);
+                      }}
+                    />
+                  }
+                />
+              );
+            })}
+        {walletClient &&
+          myMusic?.musicTokens?.map((e) => {
             if (!e) return <></>;
             return (
-              <SongListItemSpinamp
+              <SongListItemMusicNFT
                 key={e.id}
                 musicNft={e}
                 onPlaySong={() => {
-                  handlePlaySongSpinamp(e);
+                  handlePlaySong(e);
                 }}
                 customBtn={
                   <AccountListBtn
                     monetizeId={BigInt(
                       myListedMusic?.octaveTokens.find((ele) => {
-                        if (!e.contractAddress || !e.tokenId) return false;
+                        if (!e.id) return false;
                         return (
                           (ele.musicNftAddr as string).toLowerCase() ==
-                            e.contractAddress.toLowerCase() &&
+                            MusicNFTAddr.toLowerCase() &&
                           (ele.musicNftTokenId as string).toLowerCase() ==
-                            e.tokenId.toLowerCase()
+                            e.id.toLowerCase()
                         );
                       })?.id ?? "-1"
                     )}
@@ -172,86 +227,31 @@ const Account = () => {
                       if (
                         !walletClient ||
                         !publicClient ||
-                        !e.contractAddress ||
-                        !e.tokenId ||
+                        !e.id ||
                         !e.tokenUri
                       )
                         return;
                       monetize(
-                        e.contractAddress,
-                        BigInt(e.tokenId),
+                        MusicNFTAddr,
+                        BigInt(e.id),
                         e.tokenUri,
-                        e.platformId ?? "",
-                        e.chainId ?? "",
-                        e.nftsProcessedTracksByNftId.nodes[0]
-                          ?.platformInternalId ?? "",
+                        "octav3",
+                        "mumbai",
+                        "",
                         publicClient,
                         walletClient
                       );
                     }}
                     onUnlist={(monetizeId) => {
-                      if (
-                        !walletClient ||
-                        !publicClient ||
-                        !e.contractAddress ||
-                        !e.tokenId ||
-                        !e.tokenUri
-                      )
-                        return;
+                      if (!walletClient || !publicClient || !e.id) return;
                       unmonetize(monetizeId, publicClient, walletClient);
                     }}
                   />
                 }
               />
             );
           })}
-        {myMusic?.musicTokens?.map((e) => {
-          if (!e) return <></>;
-          return (
-            <SongListItemMusicNFT
-              key={e.id}
-              musicNft={e}
-              onPlaySong={() => {
-                handlePlaySong(e);
-              }}
-              customBtn={
-                <AccountListBtn
-                  monetizeId={BigInt(
-                    myListedMusic?.octaveTokens.find((ele) => {
-                      if (!e.id) return false;
-                      return (
-                        (ele.musicNftAddr as string).toLowerCase() ==
-                          MusicNFTAddr.toLowerCase() &&
-                        (ele.musicNftTokenId as string).toLowerCase() ==
-                          e.id.toLowerCase()
-                      );
-                    })?.id ?? "-1"
-                  )}
-                  onList={() => {
-                    //TODO error
-                    if (!walletClient || !publicClient || !e.id || !e.tokenUri)
-                      return;
-                    monetize(
-                      MusicNFTAddr,
-                      BigInt(e.id),
-                      e.tokenUri,
-                      "octav3",
-                      "mumbai",
-                      "",
-                      publicClient,
-                      walletClient
-                    );
-                  }}
-                  onUnlist={(monetizeId) => {
-                    if (!walletClient || !publicClient || !e.id) return;
-                    unmonetize(monetizeId, publicClient, walletClient);
-                  }}
-                />
-              }
-            />
-          );
-        })}
-        <MintSongButton />
+        {walletClient && <MintSongButton />}
       </div>
     </div>
   );

diff --git a/src/app/ad-marketplace/RentSpaceButton.tsx b/src/app/ad-marketplace/RentSpaceButton.tsx
@@ -64,7 +64,7 @@ const RentSpaceButton: React.FC<Props> = (p) => {
         onClick={() =>
           isConnected ? setShowModal(true) : openConnectModal?.()
         }
-        color="yellow"
+        $color="yellow"
         btnType="outline"
         className="w-full"
       >
@@ -127,7 +127,7 @@ const RentSpaceButton: React.FC<Props> = (p) => {
               <div className="flex">
                 <OButton
                   btnType="fill"
-                  color="gray"
+                  $color="gray"
                   isLoading={false}
                   className="mt-1 inline-flex w-1/2 py-3 mb-4 mr-4"
                   onClick={handleOnCancel}
@@ -136,7 +136,7 @@ const RentSpaceButton: React.FC<Props> = (p) => {
                 </OButton>
                 <OButton
                   btnType="fill"
-                  color="yellow"
+                  $color="yellow"
                   isLoading={isMinting}
                   className="mt-1 inline-flex w-1/2 py-3 mb-4"
                   type="submit"

diff --git a/src/app/dashboard/artist/unlisted-spaces/ListButton.tsx b/src/app/dashboard/artist/unlisted-spaces/ListButton.tsx
@@ -61,7 +61,7 @@ const ListButton: React.FC<{ adTokenId: bigint }> = (p) => {
         onClick={() =>
           isConnected ? setShowModal(true) : openConnectModal?.()
         }
-        color="yellow"
+        $color="yellow"
         btnType="fill"
         className="w-full"
       >
@@ -90,7 +90,7 @@ const ListButton: React.FC<{ adTokenId: bigint }> = (p) => {
               <div className="flex">
                 <OButton
                   btnType="fill"
-                  color="gray"
+                  $color="gray"
                   isLoading={false}
                   className="mt-1 inline-flex w-1/2 py-3 mb-4 mr-4"
                   onClick={handleOnCancel}
@@ -99,7 +99,7 @@ const ListButton: React.FC<{ adTokenId: bigint }> = (p) => {
                 </OButton>
                 <OButton
                   btnType="fill"
-                  color="yellow"
+                  $color="yellow"
                   isLoading={isMinting}
                   className="mt-1 inline-flex w-1/2 py-3 mb-4"
                   type="submit"

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -49,51 +49,47 @@ export default function RootLayout({
   });
   return (
     <html lang="en">
-      <body>
-        <html lang="en">
-          <head>
-            <link rel="icon" type="image/png" href="/favicon.png" />
-            <link rel="preconnect" href="https://fonts.googleapis.com" />
-            <link rel="preconnect" href="https://fonts.gstatic.com" />
-            <link
-              href="https://fonts.googleapis.com/css2?family=Farro&display=swap"
-              rel="stylesheet"
-            />
-            {/* testtest */}
+      <head>
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Farro&display=swap"
+          rel="stylesheet"
+        />
+        {/* testtest */}
 
-            <link
-              href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
-              rel="stylesheet"
-            />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
+          rel="stylesheet"
+        />
 
-            <link
-              href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;700&display=swap"
-              rel="stylesheet"
-            />
-          </head>
-          <body>
-            <Script src="https://code.iconify.design/3/3.0.0/iconify.min.js" />
-            <WagmiConfig config={wagmiClient}>
-              <RainbowKitProvider
-                chains={Chains}
-                theme={lightTheme({
-                  accentColor: "#F3EA01",
-                  accentColorForeground: "#313131",
-                })}
-              >
-                <ApolloProvider client={client}>
-                  <ThemeProvider attribute="class">
-                    <AppWallet>
-                      <MusicPlayer />
-                      <Header />
-                      {children}
-                    </AppWallet>
-                  </ThemeProvider>
-                </ApolloProvider>
-              </RainbowKitProvider>
-            </WagmiConfig>
-          </body>
-        </html>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;700&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body>
+        <Script src="https://code.iconify.design/3/3.0.0/iconify.min.js" />
+        <WagmiConfig config={wagmiClient}>
+          <RainbowKitProvider
+            chains={Chains}
+            theme={lightTheme({
+              accentColor: "#F3EA01",
+              accentColorForeground: "#313131",
+            })}
+          >
+            <ApolloProvider client={client}>
+              <ThemeProvider attribute="class">
+                <AppWallet>
+                  <MusicPlayer />
+                  <Header />
+                  {children}
+                </AppWallet>
+              </ThemeProvider>
+            </ApolloProvider>
+          </RainbowKitProvider>
+        </WagmiConfig>
       </body>
     </html>
   );

diff --git a/src/components/AdvNFT/AdvNFTUI.tsx b/src/components/AdvNFT/AdvNFTUI.tsx
@@ -80,7 +80,7 @@ const AdvNFTUI: React.FC<AdvNFTUIProps> = ({
         {buttonText && btnType && (
           <OButton
             disabled={disabled}
-            color="yellow"
+            $color="yellow"
             isLoading={isLoading}
             className="self-stretch"
             btnType={btnType}