Add connect wallet button and provider

package.json

@@ -24,6 +24,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",
@@ -38,6 +40,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",

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);

server.ts

@@ -35,13 +35,22 @@ app.post("/api/contracts/:contractAddress/verify", async (req, res) => {
 app.listen(port, async () => {
   const ctx = await getCtx(config);
 
-  console.log(`Server running at http://localhost:${port}; `);
+  console.log(`Server running at http://localhost:${ port }; `);
 
+
+  const mainnetKafkaConsumer = await newKafkaConsumer<KafkaEventMap>(
+    ctx,
+    Network.Mainnet
+  );
   const hyperspaceKafkaConsumer = await newKafkaConsumer<KafkaEventMap>(
     ctx,
     Network.HyperSpace
   );
 
   await hyperspaceKafkaConsumer.subscribe(newContractKafkaSubscriber(ctx));
-  await hyperspaceKafkaConsumer.startConsumer();
+  await mainnetKafkaConsumer.subscribe(newContractKafkaSubscriber(ctx));
+  await Promise.all([
+    mainnetKafkaConsumer.startConsumer(),
+    hyperspaceKafkaConsumer.startConsumer(),
+  ])
 });

src/api/ctx/config/clickhouse.config.ts

@@ -7,13 +7,13 @@ export type ClickhouseConfig = {
   password: string;
 };
 
-const clickhouseWallabyConfig: (
+const clickhouseMainnetConfig: (
   env?: typeof process.env
 ) => ClickhouseConfig = (env = process.env) => ({
-  host: env.WALLABY_CLICKHOUSE_HOST as string,
-  username: env.WALLABY_CLICKHOUSE_USER as string,
-  password: env.WALLABY_CLICKHOUSE_PASSWORD as string,
-  database: env.WALLABY_CLICKHOUSE_DATABASE as string,
+  host: env.MAINNET_CLICKHOUSE_HOST as string,
+  username: env.MAINNET_CLICKHOUSE_USER as string,
+  password: env.MAINNET_CLICKHOUSE_PASSWORD as string,
+  database: env.MAINNET_CLICKHOUSE_DATABASE as string,
 });
 
 const clickhouseHyperspaceConfig: (
@@ -35,7 +35,7 @@ const userdataConfig: (env?: typeof process.env) => ClickhouseConfig = (
 });
 
 export default (env = process.env) => ({
-  [Network.Wallaby]: clickhouseWallabyConfig(env),
+  [Network.Mainnet]: clickhouseMainnetConfig(env),
   [Network.HyperSpace]: clickhouseHyperspaceConfig(env),
   userdata: userdataConfig(env),
 });

src/api/ctx/config/config.ts

@@ -1,30 +1,26 @@
 import { KafkaConfig } from "kafkajs";
 
 import authConfig, { AuthConfig } from "@/api/ctx/config/auth.config";
-import clickhouseConfig, {
-  ClickhouseConfig,
-} from "@/api/ctx/config/clickhouse.config";
+import clickhouseConfig, { ClickhouseConfig, } from "@/api/ctx/config/clickhouse.config";
 import kafkaConfig from "@/api/ctx/config/kafka.config";
 import lotusConfig, { LotusConfig } from "@/api/ctx/config/lotus.config";
-import web3StorageConfig, {
-  Web3StorageConfig,
-} from "@/api/ctx/config/web3.config";
+import web3StorageConfig, { Web3StorageConfig, } from "@/api/ctx/config/web3.config";
 
 export type APIConfig = {
   clickhouse: {
-    wallaby: ClickhouseConfig;
+    mainnet: ClickhouseConfig;
     hyperspace: ClickhouseConfig;
     userdata: ClickhouseConfig;
   };
   lotus: {
-    wallaby: LotusConfig;
+    mainnet: LotusConfig;
     hyperspace: LotusConfig;
   };
   auth: AuthConfig;
   web3Storage: Web3StorageConfig;
   kafka: {
     hyperspace: KafkaConfig;
-    wallaby?: KafkaConfig;
+    mainnet: KafkaConfig;
   };
 };
 

src/api/ctx/config/kafka.config.ts

@@ -8,7 +8,15 @@ const kafkaHyperspaceConfig: (env?: typeof process.env) => KafkaConfig = (
   logLevel: logLevel.INFO,
 });
 
+
+const kafkaMainnetConfig: (env?: typeof process.env) => KafkaConfig = (
+  env = process.env
+) => ({
+  brokers: [env.MAINNET_KAFKA_CONNECTION_STRING as string],
+  logLevel: logLevel.INFO,
+});
+
 export default (env = process.env) => ({
+  [Network.Mainnet]: kafkaMainnetConfig(env),
   [Network.HyperSpace]: kafkaHyperspaceConfig(env),
-  [Network.Wallaby]: undefined,
 });

src/api/ctx/config/lotus.config.ts

@@ -7,11 +7,11 @@ export type LotusConfig = {
   retryOptions?: Pick<RetryOptions, "socketTimeout" | "retryMaxDuration">;
 };
 
-const lotusWallabyConfig: (env?: typeof process.env) => LotusConfig = (
+const lotusMainnetConfig: (env?: typeof process.env) => LotusConfig = (
   env = process.env
 ) => ({
-  url: process.env.WALLABY_LOTUS_URL as string,
-  token: process.env.WALLABY_LOTUS_TOKEN as string,
+  url: process.env.MAINNET_LOTUS_URL as string,
+  token: process.env.MAINNET_LOTUS_TOKEN as string,
   retryOptions: {
     socketTimeout: +(process.env.LOTUS_SOCKET_TIMEOUT || 180000),
     // Without retryMaxDuration defined it will default to 60000ms and socketTimeout
@@ -38,6 +38,6 @@ const lotusHyperspaceConfig: (env?: typeof process.env) => LotusConfig = (
 });
 
 export default (env = process.env) => ({
-  [Network.Wallaby]: lotusWallabyConfig(env),
+  [Network.Mainnet]: lotusMainnetConfig(env),
   [Network.HyperSpace]: lotusHyperspaceConfig(env),
 });

src/api/ctx/database/clickhouse/index.ts

@@ -23,7 +23,7 @@ export const initClient = (config: APIConfig["clickhouse"]): ClickhouseDB => {
   return {
     data: {
       chain: {
-        [Network.Wallaby]: getWriteClient(config.wallaby),
+        [Network.Mainnet]: getWriteClient(config.mainnet),
         [Network.HyperSpace]: getWriteClient(config.hyperspace),
       },
       users: getWriteClient(config.userdata),

src/api/ctx/kafka/index.ts

@@ -4,9 +4,10 @@ import { APIConfig } from "../config/config";
 
 export type Kafka = {
   [Network.HyperSpace]: KafkaClient;
-  [Network.Wallaby]?: KafkaClient;
+  [Network.Mainnet]: KafkaClient;
 };
 
 export const initKafka = (config: APIConfig["kafka"]): Kafka => ({
+  [Network.Mainnet]: new KafkaClient(config.mainnet),
   [Network.HyperSpace]: new KafkaClient(config.hyperspace),
 });

src/api/ctx/lotus/index.ts

@@ -8,7 +8,7 @@ export type Lotus = Record<Network, LotusClient>;
 
 export const initLotus = (config: APIConfig["lotus"]): Lotus => {
   return {
-    [Network.Wallaby]: getLotusClient(config.wallaby),
+    [Network.Mainnet]: getLotusClient(config.mainnet),
     [Network.HyperSpace]: getLotusClient(config.hyperspace),
   };
 };

src/enums/Network.ts

@@ -1,4 +1,4 @@
 export enum Network {
-  Wallaby = "wallaby",
+  Mainnet = "mainnet",
   HyperSpace = "hyperspace",
 }

src/filters/defaultNetwork.ts

@@ -1,3 +1,3 @@
 import { Network } from "@/enums/Network";
 
-export const defaultNetwork = () => Network.HyperSpace;
+export const defaultNetwork = () => Network.Mainnet;

src/ui/components/UserMenu/UserMenu.tsx

@@ -8,6 +8,7 @@ import { uiCtx } from "@/ui/ctx/uiCtx";
 import { cb } from "@/utils/cb";
 import ArrowChevronDown from "@/ui/components/Common/Icons/ArrowChevronDown";
 import classNames from "classnames";
+import { ConnectWallet } from "@thirdweb-dev/react";
 
 
 export const UserMenu = ({ user }: { user: User }) => {
@@ -27,48 +28,52 @@ export const UserMenu = ({ user }: { user: User }) => {
   const [selected, setSelected] = useState(0);
 
   return (
-    <div
-      className="flex items-center relative cursor-pointer relative"
-      onMouseEnter={cb(setExpanded, true)}
-      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?.email}
-        {user && <ArrowChevronDown />}
+    <>
+      <div className="ml-auto mr-5">
+        {user && <ConnectWallet />}
       </div>
-
-      {expanded && (
-        <div className="flex absolute flex-col z-50 bg-slate py-2 h-fit w-64 right-6 top-16 text-label text-14 font-semibold rounded-9 shadow-dropdown">
-          <div
-            className="relative px-4 py-4 cursor-pointer hover:text-blue-400 hover:bg-body"
-            onMouseEnter={() => setSelected(1)}
-            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})}/>
-            <span>My projects</span>
-          </div>
-          <div
-            className="relative px-4 py-4 cursor-pointer hover:text-blue-400 hover:bg-body"
-            onMouseEnter={() => setSelected(2)}
-            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>
-            <span>My queries</span>
-          </div>
-          <div
-            className="relative px-4 py-4 cursor-pointer hover:text-blue-400 hover:bg-body"
-            onMouseEnter={() => setSelected(3)}
-            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>
-            <span>Logout</span>
-          </div>
+      <div
+        className="flex items-center relative cursor-pointer relative"
+        onMouseEnter={cb(setExpanded, true)}
+        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?.email}
+          {user && <ArrowChevronDown />}
         </div>
-      )}
-    </div>
+        {expanded && (
+          <div className="flex absolute flex-col z-50 bg-slate py-2 h-fit w-64 right-6 top-16 text-label text-14 font-semibold rounded-9 shadow-dropdown">
+            <div
+              className="relative px-4 py-4 cursor-pointer hover:text-blue-400 hover:bg-body"
+              onMouseEnter={() => setSelected(1)}
+              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})}/>
+              <span>My projects</span>
+            </div>
+            <div
+              className="relative px-4 py-4 cursor-pointer hover:text-blue-400 hover:bg-body"
+              onMouseEnter={() => setSelected(2)}
+              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>
+              <span>My queries</span>
+            </div>
+            <div
+              className="relative px-4 py-4 cursor-pointer hover:text-blue-400 hover:bg-body"
+              onMouseEnter={() => setSelected(3)}
+              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>
+              <span>Logout</span>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
   );
-};
+};

src/ui/ctx/auth/initAuth.ts

@@ -4,11 +4,13 @@ import { Magic, MagicSDKExtensionsOption } from "magic-sdk";
 
 export type AuthClient = InstanceWithExtensions<
   SDKBase,
+  // @ts-ignore
   MagicSDKExtensionsOption<string>
 >;
 
 export const initClientAuth = (
   config: UIConfig["magic"]
 ): (() => AuthClient) => {
+  // @ts-ignore
   return () => new Magic(config.key);
 };

src/ui/ctx/uiCtx.ts

@@ -18,7 +18,7 @@ export const uiCtx: UiCtx = {
   client: getHttpClient(() => localStorage.getItem("token")),
   externalClient: getHttpClient(
     () => localStorage.getItem("token"),
-    "https://hyper-api.lotus-node.dev/api"
+    "https://fvm-explorer-api.filmine.io/api" // TODO: move to config
   ),
   w3s: () => makeStorageClient(uiConfig.w3s),
-};
+};