fix: add capsule client check before rendering provider-ui components…

… inside examples
graz-sh · Sep 27, 2024 · a2a386d · a2a386d
1 parent 2b01d7f
commit a2a386d
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 55 deletions.
diff --git a/example/next/pages/index.tsx b/example/next/pages/index.tsx
@@ -1,25 +1,20 @@
-import { Center, HStack, Spacer, Stack, Text, useColorMode } from "@chakra-ui/react";
-import { useAccount, useCapsule } from "graz";
+import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
+
+import { Center, HStack, Spacer, Stack, Text } from "@chakra-ui/react";
+import { useAccount } from "graz";
 import type { NextPage } from "next";
-import dynamic from "next/dynamic";
 import { BalanceList } from "ui/balance-list";
+import CapsuleModals from "ui/capsule-modals";
 import { ChainSwitcher } from "ui/chain-switcher";
 import { ConnectButton } from "ui/connect-button";
 import { ConnectStatus } from "ui/connect-status";
 import { ToggleTheme } from "ui/toggle-theme";
-import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
-
-const LeapSocialLogin = dynamic(
-  () => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
-  { ssr: false },
-);
 
 const HomePage: NextPage = () => {
   const { data: accountData } = useAccount({
     chainId: "cosmoshub-4",
   });
-  const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
-  const { colorMode } = useColorMode();
+
   return (
     <Center minH="100vh">
       <Stack bgColor="whiteAlpha.100" boxShadow="md" maxW="md" p={4} rounded="md" spacing={4} w="full">
@@ -45,22 +40,7 @@ const HomePage: NextPage = () => {
           <ConnectButton />
         </HStack>
       </Stack>
-      <div className='leap-ui'>
-        <LeapSocialLogin
-          capsule={client?.getClient() || undefined}
-          // @ts-expect-error - type error
-          oAuthMethods={["GOOGLE", "FACEBOOK", "TWITTER", "DISCORD", "APPLE"]}
-          onAfterLoginSuccessful={() => {
-            void onAfterLoginSuccessful?.();
-          }}
-          onLoginFailure={() => {
-            onLoginFailure();
-          }}
-          setShowCapsuleModal={setModalState}
-          showCapsuleModal={modalState}
-          theme={colorMode}
-        />
-      </div>
+      <CapsuleModals />
     </Center>
   );
 };

diff --git a/example/next/ui/capsule-modals.tsx b/example/next/ui/capsule-modals.tsx
@@ -0,0 +1,44 @@
+import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
+
+import { useColorMode } from "@chakra-ui/react";
+import { useCapsule } from "graz";
+import dynamic from "next/dynamic";
+import React from "react";
+
+const LeapSocialLogin = dynamic(
+  () => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
+  { ssr: false },
+);
+
+const TransactionSigningModal = dynamic(
+  () => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.TransactionSigningModal),
+  { ssr: false },
+);
+
+const CapsuleModals = () => {
+  const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
+  const { colorMode } = useColorMode();
+
+  return client ? (
+    <div className="leap-ui">
+      <LeapSocialLogin
+        // @ts-expect-error - use capsule version mismatch error
+        capsule={client.getClient()}
+        // @ts-expect-error - type error
+        oAuthMethods={["GOOGLE", "FACEBOOK", "TWITTER", "DISCORD", "APPLE"]}
+        onAfterLoginSuccessful={() => {
+          void onAfterLoginSuccessful?.();
+        }}
+        onLoginFailure={() => {
+          onLoginFailure();
+        }}
+        setShowCapsuleModal={setModalState}
+        showCapsuleModal={modalState}
+        theme={colorMode}
+      />
+      <TransactionSigningModal dAppInfo={{ name: "Graz Example" }} />
+    </div>
+  ) : null;
+};
+
+export default CapsuleModals;
diff --git a/example/starter/src/pages/index.tsx b/example/starter/src/pages/index.tsx
@@ -1,42 +1,17 @@
-import { Stack, useColorMode } from "@chakra-ui/react";
-import { useCapsule } from "graz";
-import dynamic from "next/dynamic";
+import { Stack } from "@chakra-ui/react";
 import { Card } from "src/ui/card/chain";
+import CapsuleModals from "src/ui/modal/capsule-modals";
 import { mainnetChains } from "src/utils/graz";
-import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
-
-const LeapSocialLogin = dynamic(
-  () => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
-  { ssr: false },
-);
 
 const HomePage = () => {
-  const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
-
-  const { colorMode } = useColorMode();
   return (
     <>
       <Stack spacing={4}>
         {mainnetChains.map((chain) => (
           <Card key={chain.chainId} chain={chain} />
         ))}
       </Stack>
-      <div className='leap-ui'>
-        <LeapSocialLogin
-          capsule={client?.getClient() || undefined}
-          // @ts-expect-error - type error
-          oAuthMethods={["GOOGLE", "FACEBOOK", "TWITTER", "DISCORD", "APPLE"]}
-          onAfterLoginSuccessful={() => {
-            void onAfterLoginSuccessful?.();
-          }}
-          onLoginFailure={() => {
-            onLoginFailure();
-          }}
-          setShowCapsuleModal={setModalState}
-          showCapsuleModal={modalState}
-          theme={colorMode}
-        />
-      </div>
+      <CapsuleModals />
     </>
   );
 };

diff --git a/example/starter/src/ui/modal/capsule-modals.tsx b/example/starter/src/ui/modal/capsule-modals.tsx
@@ -0,0 +1,44 @@
+import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
+
+import { useColorMode } from "@chakra-ui/react";
+import { useCapsule } from "graz";
+import dynamic from "next/dynamic";
+import React from "react";
+
+const LeapSocialLogin = dynamic(
+  () => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
+  { ssr: false },
+);
+
+const TransactionSigningModal = dynamic(
+  () => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.TransactionSigningModal),
+  { ssr: false },
+);
+
+const CapsuleModals = () => {
+  const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
+  const { colorMode } = useColorMode();
+
+  return client ? (
+    <div className="leap-ui">
+      <LeapSocialLogin
+        // @ts-expect-error - use capsule version mismatch error
+        capsule={client.getClient()}
+        // @ts-expect-error - type error
+        oAuthMethods={["GOOGLE", "FACEBOOK", "TWITTER", "DISCORD", "APPLE"]}
+        onAfterLoginSuccessful={() => {
+          void onAfterLoginSuccessful?.();
+        }}
+        onLoginFailure={() => {
+          onLoginFailure();
+        }}
+        setShowCapsuleModal={setModalState}
+        showCapsuleModal={modalState}
+        theme={colorMode}
+      />
+      <TransactionSigningModal dAppInfo={{ name: "Graz Example" }} />
+    </div>
+  ) : null;
+};
+
+export default CapsuleModals;
diff --git a/example/vite/src/App.tsx b/example/vite/src/App.tsx
@@ -3,6 +3,7 @@ import "./App.css";
 import { useAccount, useActiveChainIds, useConnect, useDisconnect } from "graz";
 
 import reactLogo from "./assets/react.svg";
+import CapsuleModals from "./components/CapsuleModals";
 
 // eslint-disable-next-line prefer-arrow-functions/prefer-arrow-functions, react/function-component-definition
 export default function App() {
@@ -47,6 +48,7 @@ export default function App() {
           {isDisconnected ? "Connect Wallet" : null}
         </button>
       </div>
+      <CapsuleModals />
     </div>
   );
 }

diff --git a/example/vite/src/components/CapsuleModals.tsx b/example/vite/src/components/CapsuleModals.tsx
@@ -0,0 +1,31 @@
+import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
+
+import { CustomCapsuleModalView, TransactionSigningModal } from "@leapwallet/cosmos-social-login-capsule-provider-ui";
+import { useCapsule } from "graz";
+import React from "react";
+
+const CapsuleModals = () => {
+  const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
+  return client ? (
+    <div className="leap-ui">
+      <CustomCapsuleModalView
+        // @ts-expect-error - use capsule version mismatch error
+        capsule={client.getClient()}
+        // @ts-expect-error - type error
+        oAuthMethods={["GOOGLE", "FACEBOOK", "TWITTER", "DISCORD", "APPLE"]}
+        onAfterLoginSuccessful={() => {
+          void onAfterLoginSuccessful?.();
+        }}
+        onLoginFailure={() => {
+          onLoginFailure();
+        }}
+        setShowCapsuleModal={setModalState}
+        showCapsuleModal={modalState}
+        theme="light"
+      />
+      <TransactionSigningModal dAppInfo={{ name: "Graz Example" }} />
+    </div>
+  ) : null;
+};
+
+export default CapsuleModals;