feature(ui): move states to context (#31)

* feat: move states to context * chore: prettier
ordzaar · Jul 19, 2023 · 5c5e7ba · 5c5e7ba
1 parent 6f989e1
commit 5c5e7ba
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/packages/sado-connect/src/components/SadoConnectKit.tsx b/packages/sado-connect/src/components/SadoConnectKit.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import "./style.css";
 import { useSadoContext } from "../providers/SadoContext";
 import { PreConnectButton } from "./PreConnectButton";
@@ -24,16 +23,8 @@ export function SadoConnectKit({
   customStyle,
   onViewWallet,
 }: SadoConnectKitProp) {
-  const [isOpen, setIsOpen] = useState(false);
-  const { address, network } = useSadoContext();
-
-  function closeModal() {
-    setIsOpen(false);
-  }
-
-  async function openModal() {
-    setIsOpen(true);
-  }
+  const { address, network, isModalOpen, openModal, closeModal } =
+    useSadoContext();
 
   return (
     <>
@@ -47,7 +38,7 @@ export function SadoConnectKit({
         />
       )}
 
-      <SelectWalletModal isOpen={isOpen} closeModal={closeModal} />
+      <SelectWalletModal isOpen={isModalOpen} closeModal={closeModal} />
     </>
   );
 }
diff --git a/packages/sado-connect/src/providers/SadoContext.tsx b/packages/sado-connect/src/providers/SadoContext.tsx
@@ -20,6 +20,9 @@ interface SadoContextI {
   updateNetwork: (network: Network) => void;
   wallet: Wallet | null;
   updateWallet: (wallet: Wallet | null) => void;
+  isModalOpen: boolean;
+  openModal: () => void;
+  closeModal: () => void;
 }
 
 const SadoContext = createContext<SadoContextI>({
@@ -31,6 +34,9 @@ const SadoContext = createContext<SadoContextI>({
   updateNetwork: () => {},
   wallet: null,
   updateWallet: () => {},
+  isModalOpen: false,
+  openModal: () => {},
+  closeModal: () => {},
 });
 
 const ADDRESS = "address";
@@ -66,6 +72,7 @@ export function SadoConnectProvider({
   const [network, setNetwork] = useState<Network>(Network.TESTNET);
   const [wallet, setWallet] = useState<Wallet | null>(null);
   const [publicKey, setPublicKey] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   useEffect(() => {
     try {
@@ -133,6 +140,9 @@ export function SadoConnectProvider({
     updateNetwork: setNetwork,
     wallet,
     updateWallet: setWallet,
+    isModalOpen,
+    openModal: () => setIsModalOpen(true),
+    closeModal: () => setIsModalOpen(false),
   };
 
   return (