Add subscribe/unsubscribe flow

package.json

@@ -6,7 +6,9 @@
   },
   "dependencies": {
     "@ethersproject/providers": "^5.5.0",
+    "@gimmixorg/use-wallet": "^0.0.30",
     "@prisma/client": "3.4.1",
+    "@walletconnect/web3-provider": "^1.6.6",
     "dayjs": "^1.10.7",
     "ethers": "^5.5.1",
     "expo-server-sdk": "^3.6.0",
@@ -15,6 +17,8 @@
     "next": "^11.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-ens-name": "^0.2.3",
+    "react-modal": "^3.14.3",
     "swr": "^1.0.1"
   },
   "devDependencies": {

src/app/components/ConnectWalletButton.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useCallback } from "react";
+
+import { useWallet } from "@gimmixorg/use-wallet";
+import WalletConnectProvider from "@walletconnect/web3-provider";
+
+const ConnectWalletButton = () => {
+  const { connect, account, web3Modal } = useWallet();
+
+  const providerOptions = {
+    walletconnect: {
+      package: WalletConnectProvider,
+      options: {
+        infuraId: process.env.NEXT_PUBLIC_INFURA_API_KEY as string,
+      },
+    },
+  };
+
+  const connectWallet = useCallback(() => {
+    connect({
+      cacheProvider: true,
+      providerOptions: providerOptions,
+      theme: "dark",
+    });
+  }, []);
+
+  // try an initial connect, we might be cached
+  useEffect(() => {
+    if (web3Modal?.cachedProvider) {
+      connectWallet();
+    }
+  }, [connectWallet]);
+
+  return (
+    <div className="account-container">
+      {account ? (
+        <div className="account">
+          <span>{account}</span>
+        </div>
+      ) : (
+        <button
+          className="connect-wallet-button"
+          onClick={() => connectWallet()}
+        >
+          connect wallet
+        </button>
+      )}
+      <style jsx>{``}</style>
+    </div>
+  );
+};
+
+export default ConnectWalletButton;

src/pages/api/refresh.ts

@@ -26,8 +26,9 @@ const api: NextApiHandler = async (_req, res) => {
     let toBurn = expiredGmIds.concat(expiredGmFilmIds);
 
     if (toBurn.length > 0) {
-      console.log('burning tokens', toBurn);
-      await gmCam.burnExpired(toBurn);
+      console.log("burning first 20 tokens", toBurn.slice(0, 20));
+      let tx = await gmCam.burnExpired(toBurn);
+      console.log("burn tx", tx.hash);
     }
 
     return res.json({ success: true });

src/pages/manage.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import ConnectWalletButton from "@app/components/ConnectWalletButton";
+import getContract from "@app/features/getContract";
+import { useWallet } from "@gimmixorg/use-wallet";
+
+const ManageSubscriptionState = () => {
+  // TODO: fetch subscribe state from contract/graph?
+
+  const { account, provider } = useWallet();
+
+  const unsubscribe = () => {
+    console.log("unsubscribing!");
+    if (!provider || !account) return alert("Not signed in.");
+
+    const signer = provider.getSigner();
+    const gmCam = getContract(signer);
+    gmCam.setSubscriptionState(false);
+  };
+
+  const subscribe = () => {
+    console.log("subscribing!");
+    if (!provider || !account) return alert("Not signed in.");
+
+    const signer = provider.getSigner();
+    const gmCam = getContract(signer);
+    gmCam.setSubscriptionState(true);
+  };
+
+  return (
+    <div className="index">
+      connect your wallet to unsubscribe
+      <ConnectWalletButton />
+      <button
+        onClick={() => {
+          unsubscribe();
+        }}
+      >
+        unsubscribe
+      </button>
+      <button
+        onClick={() => {
+          subscribe();
+        }}
+      >
+        subscribe
+      </button>
+      <style jsx>{`
+        .index {
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default ManageSubscriptionState;