From 01c1832ad3568904f28c3e034aeb0af97a7c82f6 Mon Sep 17 00:00:00 2001
From: Munchies <munchies@bytemasons.com>
Date: Fri, 21 Jun 2024 09:12:34 +1000
Subject: [PATCH] Add React import, update connector type, refactor Button
 component styling, create Input component with label handling. - Added React
 import for Account.tsx - Updated connector type to 'any' in Account.tsx -
 Refactored Button component styling in Button.tsx - Created Input component
 with label handling in Input.tsx

---
 .../src/components/Account/Account.tsx        |  7 +-
 .../src/components/AuthModal/AuthModal.tsx    | 18 +---
 .../components/AuthOptions/AuthOptions.tsx    | 22 ++---
 .../src/components/Button/Button.tsx          | 11 ++-
 .../src/components/EmailLogin/EmailLogin.tsx  | 78 ++++++++----------
 .../moon-react/src/components/Input/Input.tsx | 31 +++++++
 .../moon-react/src/components/Input/index.ts  |  1 +
 .../moon-react/src/components/Modal/Modal.tsx | 22 ++++-
 .../components/Oauth2Button/Oauth2Button.tsx  |  1 +
 .../SignInAnonymously/SignInAnonymously.tsx   |  2 +-
 .../components/SocialLogins/SocialLogins.tsx  | 82 +++++++++----------
 .../WalletConnectorList.tsx                   | 40 ++++-----
 .../WebAuthnComponent/WebAuthnComponent.tsx   |  1 +
 packages/moon-react/src/constants.ts          |  8 +-
 packages/moon-react/src/context/Context.tsx   | 52 ++++++------
 .../moon-react/src/hooks/useConnectToMoon.ts  |  4 +-
 .../src/hooks/useWalletConnectors.tsx         |  3 +-
 17 files changed, 204 insertions(+), 179 deletions(-)
 create mode 100644 packages/moon-react/src/components/Input/Input.tsx
 create mode 100644 packages/moon-react/src/components/Input/index.ts

diff --git a/packages/moon-react/src/components/Account/Account.tsx b/packages/moon-react/src/components/Account/Account.tsx
index 0eb8431..fd407e7 100644
--- a/packages/moon-react/src/components/Account/Account.tsx
+++ b/packages/moon-react/src/components/Account/Account.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useMoonSDK } from "../../context";
 import { useAccount, useConnect, useSwitchChain } from "wagmi";
+import React from "react";
 
 function Account() {
   const { address, status } = useAccount();
@@ -38,7 +39,7 @@ function Account() {
   const getBalance = async (wallet: string) => {
     // moon connector
     console.log(connectors);
-    const conn = connectors.find((connector) => connector.name === "Moon");
+    const conn = connectors.find((connector: any) => connector.name === "Moon");
     console.log(conn);
     setWallet(wallet);
     console.log("wallet", wallet);
@@ -99,7 +100,7 @@ function Account() {
 
           <ul>
             <li>
-              {connectors.map((connector) => (
+              {connectors.map((connector: any) => (
                 <button
                   key={connector.uid}
                   onClick={() => connect({ connector })}
@@ -116,7 +117,7 @@ function Account() {
           </div>
           <ul>
             <li>
-              {chains.map((chain) => (
+              {chains.map((chain: any) => (
                 <button
                   key={chain.id}
                   onClick={() => switchChain({ chainId: chain.id })}
diff --git a/packages/moon-react/src/components/AuthModal/AuthModal.tsx b/packages/moon-react/src/components/AuthModal/AuthModal.tsx
index e88f705..7001605 100644
--- a/packages/moon-react/src/components/AuthModal/AuthModal.tsx
+++ b/packages/moon-react/src/components/AuthModal/AuthModal.tsx
@@ -2,12 +2,7 @@ import React from "react";
 import { useState } from "react";
 import { AuthModalConfig } from "../../types";
 import { useMoonSDK } from "../../context";
-import { useAccount, useConnect, useSignMessage } from "wagmi";
-import { useConnectToMoon } from "../../hooks/useConnectToMoon";
-import { useWalletConnectors } from "../../hooks/useWalletConnectors";
 import WalletConnectorsList from "../WalletConnectorList/WalletConnectorList";
-
-import moonLogoLight from "../../assets/moon-logo-light.png";
 import { ModalContent, ModalOverlay } from "../Modal/Modal";
 import AuthOptions from "../AuthOptions/AuthOptions";
 
@@ -17,18 +12,9 @@ type AuthModalProps = {
 };
 
 const AuthModal: React.FC<AuthModalProps> = ({ config, children }) => {
-  const {
-    enabled,
-    socialLogins,
-    walletConnectEnabled,
-    anonymousLoginEnabled,
-    appearance,
-    theming,
-  } = config;
+  const { enabled, appearance } = config;
   const [connectWallet, setConnectWallet] = useState(false);
-  const [showModal, setShowModal] = useState(false);
   const { session } = useMoonSDK();
-  const [selectedTab, setSelectedTab] = useState(0);
 
   if (!enabled) return <>{children}</>;
   if (session) return <>{children}</>;
@@ -40,7 +26,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ config, children }) => {
 
   return (
     <>
-      <ModalOverlay onClick={() => setShowModal(false)} config={config} />
+      <ModalOverlay onClick={() => {}} config={config} />
       <ModalContent config={config}>
         {config.appearance.logo?.enabled && (
           <img
diff --git a/packages/moon-react/src/components/AuthOptions/AuthOptions.tsx b/packages/moon-react/src/components/AuthOptions/AuthOptions.tsx
index 77461a0..36d5c53 100644
--- a/packages/moon-react/src/components/AuthOptions/AuthOptions.tsx
+++ b/packages/moon-react/src/components/AuthOptions/AuthOptions.tsx
@@ -1,29 +1,21 @@
 import React from "react";
-import {
-  FaDiscord,
-  FaTwitter,
-  FaGithub,
-  FaWallet,
-  FaChevronRight,
-} from "react-icons/fa";
-import { FcGoogle } from "react-icons/fc";
+import { FaWallet, FaChevronRight } from "react-icons/fa";
 import Button from "../Button/Button";
 import SignInAnonymously from "../SignInAnonymously/SignInAnonymously";
 import EmailLogin from "../EmailLogin/EmailLogin";
 import SocialLogins from "../SocialLogins/SocialLogins";
-import { AuthModalConfig, SocialLogins as SocialLoginsType } from "../../types";
+import { AuthModalConfig } from "../../types";
 
 interface AuthOptionsProps {
   config: AuthModalConfig;
   onConnectWallet: any;
 }
 
-const AuthOptions = ({
-  config,
-  onConnectWallet,
-}: AuthOptionsProps) => (
-  <div className={`p-${config.appearance.modal.padding} justify-center items-center flex flex-col gap-5`}>
-    <EmailLogin config={config}/>
+const AuthOptions = ({ config, onConnectWallet }: AuthOptionsProps) => (
+  <div
+    className={`p-${config.appearance.modal.padding} justify-center items-center flex flex-col gap-5`}
+  >
+    <EmailLogin config={config} />
     <div className="w-full border-b-[1px] border-text-secondary" />
     {config.socialLogins && config.socialLogins.length > 0 && (
       <div className="w-full overflow-x-scroll h-20 flex gap-4 justify-center scrollbar-hide">
diff --git a/packages/moon-react/src/components/Button/Button.tsx b/packages/moon-react/src/components/Button/Button.tsx
index bf6e0d3..954b190 100644
--- a/packages/moon-react/src/components/Button/Button.tsx
+++ b/packages/moon-react/src/components/Button/Button.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useMoonSDK } from "../..";
-import { AuthModalConfig } from "../../types";
 
 interface ButtonProps {
   className?: string;
@@ -23,9 +22,13 @@ function Button({
   return (
     <button
       onClick={handleClick}
-      className={`w-full relative rounded-${authConfig.appearance.button.borderRadius} flex gap-10 p-2 text-lg bg-[${
-        authConfig.theming[color]
-      }] justify-center items-center border-2 border-[${authConfig.theming[color]}] hover:opacity-90 ${className}`}
+      style={{
+        backgroundColor: authConfig.theming[color],
+        color: authConfig.theming.textColor,
+        borderColor: authConfig.theming[color],
+        borderRadius: authConfig.appearance.button.borderRadius,
+      }}
+      className={`w-full relative flex gap-10 p-2 text-lg justify-center items-center border-2 hover:opacity-90 ${className}`}
     >
 
       {children}
diff --git a/packages/moon-react/src/components/EmailLogin/EmailLogin.tsx b/packages/moon-react/src/components/EmailLogin/EmailLogin.tsx
index 429d5af..6f77747 100644
--- a/packages/moon-react/src/components/EmailLogin/EmailLogin.tsx
+++ b/packages/moon-react/src/components/EmailLogin/EmailLogin.tsx
@@ -3,6 +3,7 @@ import { useMoonSDK } from "../../context";
 import { AuthModalConfig } from "../../types";
 import Button from "../Button/Button";
 import React from "react";
+import Input from "../Input/Input";
 
 interface EmailLoginProps {
   config: AuthModalConfig;
@@ -42,55 +43,46 @@ const EmailLogin = ({ config }: EmailLoginProps) => {
       setIsLoggingIn(false);
     }
   };
+  if (isLoggingIn)
+    return (
+      <div className="flex flex-col gap-4 items-center justify-center">
+        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-text-primary"></div>
+        Logging in...
+      </div>
+    );
 
   return (
     <>
-      <div className="w-full">
-        <label
-          htmlFor="email"
-          className="block text-sm font-medium leading-6 text-text-secondary"
-        >
-          Email
-        </label>
-        <div className="relative mt-1 rounded-md shadow-sm">
-          <input
-            type="text"
-            name="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            id="email"
-            className={`block w-full rounded-${authConfig.appearance.input.borderRadius} border-0 py-1.5 pl-2 pr-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
-            placeholder={
-              config?.appearance?.input?.placeholders?.email ||
-              "eg. ILoveMoon@gmail.com"
-            }
-          />
-        </div>
-      </div>
-      <div className="w-full">
-        <label
-          htmlFor="password"
-          className="block text-sm font-medium leading-6 text-text-secondary"
-        >
-          Password
-        </label>
-        <div className="relative mt-1 rounded-md shadow-sm">
-          <input
-            type="password"
-            name="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            id="password"
-            className={`block w-full rounded-${authConfig.appearance.input.borderRadius} border-0 py-1.5 pl-2 pr-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
-            placeholder={
-              config?.appearance?.input?.placeholders?.password || "******"
-            }
-          />
-        </div>
-      </div>
+      <Input
+        label="Email"
+        id="email"
+        type="text"
+        name="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        style={{
+          borderRadius: authConfig.appearance.input.borderRadius || "3px",
+        }}
+        placeholder={
+          config?.appearance?.input?.placeholders?.email ||
+          "eg. ILoveMoon@gmail.com"
+        }
+      />
+      <Input
+        label="Password"
+        id="password"
+        type="password"
+        name="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder={
+          config?.appearance?.input?.placeholders?.password || "******"
+        }
+      />
       <Button onClick={handleLoginEmail} color="successColor">
         Login
       </Button>
+      {error && <div className="text-red-500">{error}</div>}
     </>
   );
 };
diff --git a/packages/moon-react/src/components/Input/Input.tsx b/packages/moon-react/src/components/Input/Input.tsx
new file mode 100644
index 0000000..5817bd7
--- /dev/null
+++ b/packages/moon-react/src/components/Input/Input.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { useMoonSDK } from "../..";
+
+type InputProps = {
+  label: string;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+
+function Input({ label, ...rest }: InputProps) {
+  const { authConfig } = useMoonSDK();
+  return (
+    <div className="w-full">
+      <label
+        htmlFor={label}
+        className="block text-sm font-medium leading-6 text-text-secondary"
+      >
+        {label}
+      </label>
+      <input
+        id={label}
+        name={label}
+        {...rest}
+        style={{
+          borderRadius: authConfig.appearance.input.borderRadius || "3px",
+        }}
+        className={`block w-full border-0 py-1.5 pl-2 pr-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
+      />
+    </div>
+  );
+}
+
+export default Input;
diff --git a/packages/moon-react/src/components/Input/index.ts b/packages/moon-react/src/components/Input/index.ts
new file mode 100644
index 0000000..be66d76
--- /dev/null
+++ b/packages/moon-react/src/components/Input/index.ts
@@ -0,0 +1 @@
+export * from "./Input";
diff --git a/packages/moon-react/src/components/Modal/Modal.tsx b/packages/moon-react/src/components/Modal/Modal.tsx
index ce9f958..c5808f9 100644
--- a/packages/moon-react/src/components/Modal/Modal.tsx
+++ b/packages/moon-react/src/components/Modal/Modal.tsx
@@ -26,22 +26,36 @@ export const ModalContent = ({ children, config }: ModalProps) => {
         !textInside && "mb-4"
       } `}
     >
-      <div className={`text-2xl font-bold text-text-primary`}>
+      <div
+        style={{ color: config.theming.textColor }}
+        className={`text-2xl font-bold`}
+      >
         {config.appearance.welcomeMessage?.title}
       </div>
-      <div className={`text-lg text-text-secondary`}>
+      <div
+        style={{ color: config.theming.textColorSecondary }}
+        className={`text-lg`}
+      >
         {config.appearance.welcomeMessage?.subtitle}
       </div>
     </div>
   );
 
   return (
-    <div className={`bg-[${config.theming.backgroundColor}] justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none`}>
+    <div
+      style={{ backgroundColor: config.theming.backgroundColor }}
+      className={`justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none`}
+    >
       <div className="relative w-auto my-6 mx-auto flex flex-col justify-center items-center">
         {!textInside && title}
         <div className="text-white w-full flex items-center justify-center">
           <div
-            className={`relative bg-[${config.theming.backgroundColorSecondary}] rounded-${config.appearance.modal.borderRadius} justify-center items-center w-${config.appearance.modal.width}`}
+            style={{
+              backgroundColor: config.theming.backgroundColorSecondary,
+              width: config.appearance.modal.width,
+              borderRadius: config.appearance.modal.borderRadius,
+            }}
+            className={`relative justify-center items-center`}
           >
             {textInside && title}
             {children}
diff --git a/packages/moon-react/src/components/Oauth2Button/Oauth2Button.tsx b/packages/moon-react/src/components/Oauth2Button/Oauth2Button.tsx
index ae238e0..195db4b 100644
--- a/packages/moon-react/src/components/Oauth2Button/Oauth2Button.tsx
+++ b/packages/moon-react/src/components/Oauth2Button/Oauth2Button.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import getEnvVariables from "../../utils/getEnvVariables";
 
 function Oauth2Button() {
diff --git a/packages/moon-react/src/components/SignInAnonymously/SignInAnonymously.tsx b/packages/moon-react/src/components/SignInAnonymously/SignInAnonymously.tsx
index a7f0128..8659399 100644
--- a/packages/moon-react/src/components/SignInAnonymously/SignInAnonymously.tsx
+++ b/packages/moon-react/src/components/SignInAnonymously/SignInAnonymously.tsx
@@ -3,7 +3,7 @@ import { FaChevronRight, FaUser } from "react-icons/fa";
 import Button from "../Button/Button";
 import React from "react";
 function SignInAnonymously() {
-  const { supabase, authConfig } = useMoonSDK();
+  const { supabase } = useMoonSDK();
 
   const signInAnonymously = async () => {
     const auth = await supabase?.auth.signInAnonymously();
diff --git a/packages/moon-react/src/components/SocialLogins/SocialLogins.tsx b/packages/moon-react/src/components/SocialLogins/SocialLogins.tsx
index 1a82997..1cb14bd 100644
--- a/packages/moon-react/src/components/SocialLogins/SocialLogins.tsx
+++ b/packages/moon-react/src/components/SocialLogins/SocialLogins.tsx
@@ -4,7 +4,7 @@ import {
   FaGithub,
 } from "react-icons/fa";
 import { FcGoogle } from "react-icons/fc";
-import { useMoonSDK } from "../../context";
+// import { useMoonSDK } from "../../context";
 import { SocialLogins as SocialLoginsType } from "../../types";
 import getEnvVariables from "../../utils/getEnvVariables";
 import React from "react";
@@ -14,48 +14,48 @@ interface SocialLoginsProps {
 }
 
 function SocialLogins({ socialLogins }: SocialLoginsProps) {
-  const { supabase } = useMoonSDK();
+  // const { supabase } = useMoonSDK();
 
-  const monitorPopup = (authWindow: Window) => {
-    return new Promise<any>((resolve, reject) => {
-      if (!authWindow) {
-        reject(new Error("Failed to open authentication window."));
-      }
-      const handleGoogleAuthEvent = (event: MessageEvent) => {
-        console.log("event", event?.origin, event?.data);
-        if (
-          event.origin !== "https://vault-api.usemoon.ai" &&
-          event.origin !== "http://localhost:3000" &&
-          event.origin !== "https://dev580.d3b5lq7bvakykm.amplifyapp.com"
-        ) {
-          authWindow.close();
-          reject(
-            new Error(
-              "Failed to authenticate with Google. WRONG ORIGIN" + event.origin
-            )
-          );
-          return;
-        }
-        // check if event.data is string and contains code
-        if (typeof event?.data !== "string" || !event?.data.includes("code=")) {
-          return;
-        }
+  // const monitorPopup = (authWindow: Window) => {
+  //   return new Promise<any>((resolve, reject) => {
+  //     if (!authWindow) {
+  //       reject(new Error("Failed to open authentication window."));
+  //     }
+  //     const handleGoogleAuthEvent = (event: MessageEvent) => {
+  //       console.log("event", event?.origin, event?.data);
+  //       if (
+  //         event.origin !== "https://vault-api.usemoon.ai" &&
+  //         event.origin !== "http://localhost:3000" &&
+  //         event.origin !== "https://dev580.d3b5lq7bvakykm.amplifyapp.com"
+  //       ) {
+  //         authWindow.close();
+  //         reject(
+  //           new Error(
+  //             "Failed to authenticate with Google. WRONG ORIGIN" + event.origin
+  //           )
+  //         );
+  //         return;
+  //       }
+  //       // check if event.data is string and contains code
+  //       if (typeof event?.data !== "string" || !event?.data.includes("code=")) {
+  //         return;
+  //       }
 
-        const url = `https://vault-api.usemoon.ai/auth/oauth/google/callback${event.data}}`;
-        window.removeEventListener("message", handleGoogleAuthEvent);
-        fetch(url)
-          .then((response) => response.json())
-          .then((data) => {
-            resolve(data);
-          })
-          .catch((error) => {
-            console.error(error);
-            reject(new Error("Failed to authenticate with Google."));
-          });
-      };
-      window.addEventListener("message", handleGoogleAuthEvent);
-    });
-  };
+  //       const url = `https://vault-api.usemoon.ai/auth/oauth/google/callback${event.data}}`;
+  //       window.removeEventListener("message", handleGoogleAuthEvent);
+  //       fetch(url)
+  //         .then((response) => response.json())
+  //         .then((data) => {
+  //           resolve(data);
+  //         })
+  //         .catch((error) => {
+  //           console.error(error);
+  //           reject(new Error("Failed to authenticate with Google."));
+  //         });
+  //     };
+  //     window.addEventListener("message", handleGoogleAuthEvent);
+  //   });
+  // };
 
   const signInOAuth = async () => {
     const env = getEnvVariables();
diff --git a/packages/moon-react/src/components/WalletConnectorList/WalletConnectorList.tsx b/packages/moon-react/src/components/WalletConnectorList/WalletConnectorList.tsx
index bb197c9..64ab38a 100644
--- a/packages/moon-react/src/components/WalletConnectorList/WalletConnectorList.tsx
+++ b/packages/moon-react/src/components/WalletConnectorList/WalletConnectorList.tsx
@@ -1,11 +1,11 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { FaArrowLeft } from "react-icons/fa";
-import coinbase from "../../assets/coinbase.svg";
-import metamask from "../../assets/metamask.svg";
-import rabby from "../../assets/rabby.png";
-import trustwallet from "../../assets/trustwallet.png";
-import moonLogoLight from "../../assets/moon-logo-light.png";
-import walletconnect from "../../assets/walletconnect.svg";
+// import coinbase from "../../assets/coinbase.svg";
+// import metamask from "../../assets/metamask.svg";
+// import rabby from "../../assets/rabby.png";
+// import trustwallet from "../../assets/trustwallet.png";
+// import moonLogoLight from "../../assets/moon-logo-light.png";
+// import walletconnect from "../../assets/walletconnect.svg";
 import { FaWallet } from "react-icons/fa";
 import { useAccount, useConnect, useSignMessage } from "wagmi";
 import { useConnectToMoon } from "../../hooks/useConnectToMoon";
@@ -16,7 +16,7 @@ interface WalletConnectorsListProps {
 
 const WalletConnectorsList = ({ onBack }: WalletConnectorsListProps) => {
   const { connectors, connect } = useConnect();
-  const { isConnected, address } = useAccount();
+  const { address } = useAccount();
   const { signMessageAsync } = useSignMessage();
   const walletAddress = address ? address : "";
   const { connectToMoonSiwe } = useConnectToMoon({
@@ -24,18 +24,18 @@ const WalletConnectorsList = ({ onBack }: WalletConnectorsListProps) => {
     signMessageAsync,
   });
 
-  const walletIcons: any = useMemo(
-    () => ({
-      MetaMask: <img src={metamask} />,
-      "Coinbase Wallet": <img src={coinbase} width={60} />,
-      "Rabby Wallet": <img src={rabby} width={60} />,
-      Safe: <img src={trustwallet} width={60} />,
-      Moon: <img src={moonLogoLight} width={60} />,
-      WalletConnect: <img src={walletconnect} width={60} />,
-      "Browser Wallet": <FaWallet />,
-    }),
-    []
-  );
+  // const walletIcons: any = useMemo(
+  //   () => ({
+  //     MetaMask: <img src={metamask} />,
+  //     "Coinbase Wallet": <img src={coinbase} width={60} />,
+  //     "Rabby Wallet": <img src={rabby} width={60} />,
+  //     Safe: <img src={trustwallet} width={60} />,
+  //     Moon: <img src={moonLogoLight} width={60} />,
+  //     WalletConnect: <img src={walletconnect} width={60} />,
+  //     "Browser Wallet": <FaWallet />,
+  //   }),
+  //   []
+  // );
 
   const handleConnect = async (connector: any) => {
     connect({ connector });
diff --git a/packages/moon-react/src/components/WebAuthnComponent/WebAuthnComponent.tsx b/packages/moon-react/src/components/WebAuthnComponent/WebAuthnComponent.tsx
index b350d70..cc5d560 100644
--- a/packages/moon-react/src/components/WebAuthnComponent/WebAuthnComponent.tsx
+++ b/packages/moon-react/src/components/WebAuthnComponent/WebAuthnComponent.tsx
@@ -5,6 +5,7 @@ import {
 import { useState } from "react";
 import { useMoonSDK } from "../../context";
 import "../../index.css";
+import React from "react";
 
 function WebAuthnComponent() {
   const [email, setEmail] = useState("");
diff --git a/packages/moon-react/src/constants.ts b/packages/moon-react/src/constants.ts
index 4fc1fce..b408299 100644
--- a/packages/moon-react/src/constants.ts
+++ b/packages/moon-react/src/constants.ts
@@ -24,20 +24,20 @@ export const DEFAULT_AUTH_CONFIG: AuthModalConfig = {
     },
     modal: {
       //done
-      borderRadius: "sm",
+      borderRadius: "3px",
       padding: "8",
-      width: "[400px]",
+      width: "450px",
     },
     input: {
       //done
-      borderRadius: "sm",
+      borderRadius: "3px",
       placeholders: {
         email: "eg. ILoveMoon@gmail.com",
         password: "******",
       },
     },
     button: {
-      borderRadius: "sm",
+      borderRadius: "3px",
       padding: "2",
     },
     // splashImage: {
diff --git a/packages/moon-react/src/context/Context.tsx b/packages/moon-react/src/context/Context.tsx
index fa5e264..5284b1b 100644
--- a/packages/moon-react/src/context/Context.tsx
+++ b/packages/moon-react/src/context/Context.tsx
@@ -1,10 +1,4 @@
-import React, {
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useReducer,
-} from "react";
+import React, { createContext, ReactNode, useEffect, useReducer } from "react";
 
 import { MoonProvider } from "@moonup/ethers";
 import { MoonSDK } from "@moonup/moon-sdk";
@@ -15,19 +9,20 @@ import {
   rainbowWallet,
   safeWallet,
   walletConnectWallet,
-} from '@rainbow-me/rainbowkit/wallets';
-import { createClient, Session, SupabaseClient } from '@supabase/supabase-js';
-import { QueryClientProvider, useQueryClient } from '@tanstack/react-query';
-import { announceProvider, EIP1193Provider, Store } from 'mipd';
-import { createConfig, custom, WagmiProvider } from 'wagmi';
-import { mainnet, mode, optimism, polygon, sepolia } from 'wagmi/chains';
-import '../index.css';
+} from "@rainbow-me/rainbowkit/wallets";
+import { createClient, Session, SupabaseClient } from "@supabase/supabase-js";
+import { QueryClientProvider, useQueryClient } from "@tanstack/react-query";
+import { QueryClient } from "@tanstack/query-core";
+import { announceProvider, EIP1193Provider, Store } from "mipd";
+import { createConfig, custom, WagmiProvider } from "wagmi";
+import { mainnet, mode, optimism, polygon, sepolia } from "wagmi/chains";
+import "../index.css";
 
 import { createStore } from "mipd";
 import AuthModal from "../components/AuthModal/AuthModal";
 import { AuthModalConfig } from "../types";
 import { DEFAULT_AUTH_CONFIG } from "../constants";
-
+import { Chains } from "@moonup/moon-sdk";
 const walletsRainbowkit = [
   injectedWallet,
   coinbaseWallet,
@@ -54,6 +49,7 @@ export type State = {
   session: Session | null;
   supabase: SupabaseClient | null;
   wallets: string[];
+  chains: Chains[];
   ethers?: MoonProvider | null;
   loading: boolean;
   wallet?: string;
@@ -73,6 +69,7 @@ export type State = {
   disconnectEthers: () => Promise<void>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   request: (args: any) => Promise<any>;
+  getChains: () => Promise<void>;
 };
 
 type Action =
@@ -83,6 +80,7 @@ type Action =
   | { type: "SET_ETHERS"; ethers: MoonProvider | null }
   | { type: "SET_LOADING"; loading: boolean }
   | { type: "SET_WALLET"; wallet: string }
+  | { type: "SET_CHAINS"; chains: Chains[] }
   | { type: "SET_STORE"; store: Store };
 
 // Define the reducer
@@ -104,6 +102,8 @@ function reducer(state: State, action: Action): State {
       return { ...state, wallet: action.wallet };
     case "SET_STORE":
       return { ...state, store: action.store };
+    case "SET_CHAINS":
+      return { ...state, chains: action.chains };
     default:
       return state;
   }
@@ -160,6 +160,7 @@ export const MoonSDKProvider: React.FC<MoonSDKProviderProps> = ({
     session: null,
     supabase: supabase,
     wallets: [],
+    chains: [],
     wallet: "",
     ethers: provider,
     store: store,
@@ -173,7 +174,7 @@ export const MoonSDKProvider: React.FC<MoonSDKProviderProps> = ({
         await state.moon.disconnect();
       }
     },
-    getUserSession: async () => {
+    getUserSession: async (): Promise<any> => {
       if (state.supabase) {
         const { data, error } = await state.supabase.auth.getSession();
         return { data, error };
@@ -236,6 +237,15 @@ export const MoonSDKProvider: React.FC<MoonSDKProviderProps> = ({
       });
       dispatch({ type: "SET_WALLET", wallet });
     },
+    getChains: async () => {
+      console.log("getChains");
+      const chains = await state.moon?.getChains();
+      console.log("chains", chains);
+      dispatch({
+        type: "SET_CHAINS",
+        chains: [...state.chains, ...(chains || [])],
+      });
+    },
   });
 
   useEffect(() => {
@@ -271,7 +281,7 @@ export const MoonSDKProvider: React.FC<MoonSDKProviderProps> = ({
       subscription.unsubscribe();
     };
   }, []);
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient(new QueryClient());
 
   return (
     <MoonSDKContext.Provider value={state}>
@@ -283,11 +293,3 @@ export const MoonSDKProvider: React.FC<MoonSDKProviderProps> = ({
     </MoonSDKContext.Provider>
   );
 };
-
-export const useMoonSDK = (): State => {
-  const context = useContext(MoonSDKContext);
-  if (context === undefined) {
-    throw new Error("useMoonSDK must be used within a MoonSDKProvider");
-  }
-  return context;
-};
diff --git a/packages/moon-react/src/hooks/useConnectToMoon.ts b/packages/moon-react/src/hooks/useConnectToMoon.ts
index 4afccd1..446b09a 100644
--- a/packages/moon-react/src/hooks/useConnectToMoon.ts
+++ b/packages/moon-react/src/hooks/useConnectToMoon.ts
@@ -1,6 +1,4 @@
-import { useEffect } from "react";
 import { SiweMessage } from "siwe";
-import { useAccount, useSignMessage } from "wagmi";
 import { useMoonSDK } from "../context";
 
 interface ConnectToMoonProps {
@@ -54,6 +52,8 @@ export const useConnectToMoon = ({
           }),
         }
       ).then((res) => res.json());
+      
+        console.log("response", response);
 
       await supabase?.auth.setSession({
         access_token: response.token.access_token,
diff --git a/packages/moon-react/src/hooks/useWalletConnectors.tsx b/packages/moon-react/src/hooks/useWalletConnectors.tsx
index 066f8b7..cacf181 100644
--- a/packages/moon-react/src/hooks/useWalletConnectors.tsx
+++ b/packages/moon-react/src/hooks/useWalletConnectors.tsx
@@ -8,10 +8,11 @@ import moonLogoLight from "../assets/moon-logo-light.png";
 import walletconnect from "../assets/walletconnect.svg";
 import { useAccount, useConnect, useSignMessage } from "wagmi";
 import { useConnectToMoon } from "./useConnectToMoon";
+import React from "react";
 
 export const useWalletConnectors = () => {
   const { connectors, connect } = useConnect();
-  const { isConnected, address } = useAccount();
+  const { address } = useAccount();
   const { signMessageAsync } = useSignMessage();
   const walletAddress = address ? address : "";
   const { connectToMoonSiwe } = useConnectToMoon({