Add connect wallet button and provider

filmineio · Mar 7, 2023 · 7632378 · 7632378
1 parent bca3940
commit 7632378
Show file tree

Hide file tree

Showing 7 changed files with 2,116 additions and 80 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,8 @@
     "@segment/analytics-next": "^1.49.2",
     "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.4",
+    "@thirdweb-dev/react": "^3.9.5",
+    "@thirdweb-dev/sdk": "^3.9.5",
     "@types/bignumber.js": "^5.0.0",
     "@types/luxon": "^3.1.0",
     "@types/react-copy-to-clipboard": "^5.0.4",
@@ -33,6 +35,7 @@
     "classnames": "^2.3.2",
     "cross-env": "^7.0.3",
     "dotenv": "^16.0.3",
+    "ethers": "5",
     "graphiql": "^2.2.0",
     "graphql": "^16.6.0",
     "graphql-type-json": "^0.3.2",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,4 +1,5 @@
 import "../src/ui/styles/globals.css";
+import { ThirdwebProvider } from "@thirdweb-dev/react";
 import { appWithTranslation } from "next-i18next";
 import type { AppProps } from "next/app";
 import dynamic from "next/dynamic";
@@ -8,6 +9,9 @@ import NextNProgress from "nextjs-progressbar";
 import { useEffect } from "react";
 import { ToastContainer } from "react-toastify";
 
+import { supportedChains } from "@/ui/modules/ConnectWallet";
+import { filecoinHyperspaceTestnet } from "@/ui/modules/ConnectWallet/chains/filecoinHyperspace";
+
 import Store from "@/ui/state/Store";
 
 import { uiCtx } from "@/ui/ctx/uiCtx";
@@ -19,9 +23,9 @@ const PostHog = () => {
   return (
     <>
       <Script id="post-hog" strategy="afterInteractive">
-        {` 
+        {`
         !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-        posthog.init('phc_wWZp0284i99lujqPAyCZzmSZUzV1SUL3smsnWXdejan',{api_host:'https://app.posthog.com'}) 
+        posthog.init('phc_wWZp0284i99lujqPAyCZzmSZUzV1SUL3smsnWXdejan',{api_host:'https://app.posthog.com'})
        `}
       </Script>
     </>
@@ -42,14 +46,23 @@ function Auth() {
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <Store>
-      <Auth />
-      <ToastContainer theme={"dark"} hideProgressBar={true} />
-      <GoogleAnalytics trackPageViews />
-      {/*<PostHog />*/}
-      <NextNProgress nonce="my-nonce" color={"#0576F0"} showOnShallow={true} />
-      <Component {...pageProps} />
+      <ThirdwebProvider
+        supportedChains={supportedChains}
+        activeChain={filecoinHyperspaceTestnet.chainId}
+      >
+        <Auth />
+        <ToastContainer theme={"dark"} hideProgressBar={true} />
+        <GoogleAnalytics trackPageViews />
+        {/*<PostHog />*/}
+        <NextNProgress
+          nonce="my-nonce"
+          color={"#0576F0"}
+          showOnShallow={true}
+        />
+        <Component {...pageProps} />
+      </ThirdwebProvider>
     </Store>
   );
 }
 
-export default appWithTranslation(MyApp);
+export default appWithTranslation(MyApp);
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -36,7 +36,6 @@ import { fromHex, toHex } from "@/utils/hex";
 import { isEnum } from "@/utils/isEnum";
 import { parse } from "@/utils/parse";
 
-
 const handleServerData =
   (receivedServerData: number | null | undefined, mod: Mod) =>
   (serverResponse: ApplicationData) => {
@@ -160,4 +159,4 @@ export async function getServerSideProps({
   };
 }
 
-export default Home;
+export default Home;
diff --git a/src/ui/components/UserMenu/UserMenu.tsx b/src/ui/components/UserMenu/UserMenu.tsx
@@ -1,14 +1,15 @@
+import { ConnectWallet } from "@thirdweb-dev/react";
+import classNames from "classnames";
 import { useRouter } from "next/router";
 import { useCallback, useState } from "react";
 
+import ArrowChevronDown from "@/ui/components/Common/Icons/ArrowChevronDown";
+
 import { User } from "@/ui/state/types/AppState";
 
 import { uiCtx } from "@/ui/ctx/uiCtx";
 
 import { cb } from "@/utils/cb";
-import ArrowChevronDown from "@/ui/components/Common/Icons/ArrowChevronDown";
-import classNames from "classnames";
-
 
 export const UserMenu = ({ user }: { user: User }) => {
   const [expanded, setExpanded] = useState(false);
@@ -33,7 +34,12 @@ export const UserMenu = ({ user }: { user: User }) => {
       onMouseLeave={cb(setExpanded, false)}
     >
       <div className="py-4 text-white text-14 focus:outline-none flex items-center gap-4 mr-6">
-        {user && <div className="flex w-8 h-8 rounded-40 bg-purple items-center justify-center text-white text-16 font-bold leading-normal">{user.email?.charAt(0).toUpperCase()}</div>}
+        {user && <ConnectWallet />}
+        {user && (
+          <div className="flex w-8 h-8 rounded-40 bg-purple items-center justify-center text-white text-16 font-bold leading-normal">
+            {user.email?.charAt(0).toUpperCase()}
+          </div>
+        )}
         {user?.email}
         {user && <ArrowChevronDown />}
       </div>
@@ -46,7 +52,12 @@ export const UserMenu = ({ user }: { user: User }) => {
             onMouseLeave={() => setSelected(0)}
             onClick={cb(push, "/me/projects")}
           >
-            <div className={classNames("absolute inline-block top-0 left-0 h-full w-[3px] rounded-0330", {"bg-blue-400": selected === 1})}/>
+            <div
+              className={classNames(
+                "absolute inline-block top-0 left-0 h-full w-[3px] rounded-0330",
+                { "bg-blue-400": selected === 1 }
+              )}
+            />
             <span>My projects</span>
           </div>
           <div
@@ -55,20 +66,30 @@ export const UserMenu = ({ user }: { user: User }) => {
             onMouseLeave={() => setSelected(0)}
             onClick={cb(push, "/me/queries")}
           >
-            <div className={classNames("absolute inline-block top-0 left-0 h-full w-[3px] rounded-0330", {"bg-blue-400": selected === 2})}></div>
+            <div
+              className={classNames(
+                "absolute inline-block top-0 left-0 h-full w-[3px] rounded-0330",
+                { "bg-blue-400": selected === 2 }
+              )}
+            ></div>
             <span>My queries</span>
           </div>
           <div
             className="relative px-4 py-4 cursor-pointer hover:text-blue-400 hover:bg-body"
-            onMouseEnter={() => setSelected(3)}
+            onMouseEnter={() => setSelected(4)}
             onMouseLeave={() => setSelected(0)}
             onClick={logout}
           >
-            <div className={classNames("absolute inline-block top-0 left-0 h-full w-[3px] rounded-0330", {"bg-blue-400": selected === 3})}></div>
+            <div
+              className={classNames(
+                "absolute inline-block top-0 left-0 h-full w-[3px] rounded-0330",
+                { "bg-blue-400": selected === 4 }
+              )}
+            ></div>
             <span>Logout</span>
           </div>
         </div>
       )}
     </div>
   );
-};
+};
diff --git a/src/ui/modules/ConnectWallet/chains/filecoinHyperspace.ts b/src/ui/modules/ConnectWallet/chains/filecoinHyperspace.ts
@@ -0,0 +1,44 @@
+export const filecoinHyperspaceTestnet = {
+  name: "Filecoin - Hyperspace testnet",
+  chain: "FIL",
+  icon: {
+    url: "https://filecoin-io.ipns.dweb.link/images/filecoin-logo.svg",
+    height: 512,
+    width: 512,
+    format: "svg",
+    sizes: [512, 256, 128, 64, 32, 16],
+  },
+  rpc: [
+    "https://rpc.ankr.com/filecoin_testnet",
+    "https://api.hyperspace.node.glif.io/rpc/v1",
+    "https://filecoin-hyperspace.chainstacklabs.com/rpc/v1",
+    "https://api.hyperspace.node.glif.io/rpc/v1",
+    "https://api.hyperspace.node.glif.io/rpc/v1",
+  ],
+  features: [],
+  faucets: [],
+  nativeCurrency: {
+    name: "Filecoin",
+    symbol: "tFIL",
+    decimals: 18,
+  },
+  infoURL: "https://filecoin.org",
+  shortName: "fil",
+  chainId: 3141,
+  networkId: 3141,
+  slip44: 60,
+  ens: {
+    registry: "0x0000000000000000000000000000000000000000",
+  },
+  explorers: [
+    {
+      name: "filmine",
+      url: "https://explorer.filmine.io",
+      standard: "",
+    },
+  ],
+  testnet: true,
+  slug: "filecoin",
+};
+
+export const supportedChains = [filecoinHyperspaceTestnet];
diff --git a/src/ui/modules/ConnectWallet/index.ts b/src/ui/modules/ConnectWallet/index.ts
@@ -0,0 +1,3 @@
+import { filecoinHyperspaceTestnet } from "./chains/filecoinHyperspace";
+
+export const supportedChains = [filecoinHyperspaceTestnet];
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { filecoinHyperspaceTestnet } from "./chains/filecoinHyperspace";

		export const supportedChains = [filecoinHyperspaceTestnet];