Skip to content

Commit a2a386d

Browse files
karancoderkarancoder
committed
fix: add capsule client check before rendering provider-ui components inside examples
1 parent 2b01d7f commit a2a386d

File tree

6 files changed

+131
-55
lines changed

6 files changed

+131
-55
lines changed

‎example/next/pages/index.tsx

+7-27
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
1-
import { Center, HStack, Spacer, Stack, Text, useColorMode } from "@chakra-ui/react";
2-
import { useAccount, useCapsule } from "graz";
1+
import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
2+
3+
import { Center, HStack, Spacer, Stack, Text } from "@chakra-ui/react";
4+
import { useAccount } from "graz";
35
import type { NextPage } from "next";
4-
import dynamic from "next/dynamic";
56
import { BalanceList } from "ui/balance-list";
7+
import CapsuleModals from "ui/capsule-modals";
68
import { ChainSwitcher } from "ui/chain-switcher";
79
import { ConnectButton } from "ui/connect-button";
810
import { ConnectStatus } from "ui/connect-status";
911
import { ToggleTheme } from "ui/toggle-theme";
10-
import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
11-
12-
const LeapSocialLogin = dynamic(
13-
() => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
14-
{ ssr: false },
15-
);
1612

1713
const HomePage: NextPage = () => {
1814
const { data: accountData } = useAccount({
1915
chainId: "cosmoshub-4",
2016
});
21-
const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
22-
const { colorMode } = useColorMode();
17+
2318
return (
2419
<Center minH="100vh">
2520
<Stack bgColor="whiteAlpha.100" boxShadow="md" maxW="md" p={4} rounded="md" spacing={4} w="full">
@@ -45,22 +40,7 @@ const HomePage: NextPage = () => {
4540
<ConnectButton />
4641
</HStack>
4742
</Stack>
48-
<div className='leap-ui'>
49-
<LeapSocialLogin
50-
capsule={client?.getClient() || undefined}
51-
// @ts-expect-error - type error
52-
oAuthMethods={["GOOGLE", "FACEBOOK", "TWITTER", "DISCORD", "APPLE"]}
53-
onAfterLoginSuccessful={() => {
54-
void onAfterLoginSuccessful?.();
55-
}}
56-
onLoginFailure={() => {
57-
onLoginFailure();
58-
}}
59-
setShowCapsuleModal={setModalState}
60-
showCapsuleModal={modalState}
61-
theme={colorMode}
62-
/>
63-
</div>
43+
<CapsuleModals />
6444
</Center>
6545
);
6646
};

‎example/next/ui/capsule-modals.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
2+
3+
import { useColorMode } from "@chakra-ui/react";
4+
import { useCapsule } from "graz";
5+
import dynamic from "next/dynamic";
6+
import React from "react";
7+
8+
const LeapSocialLogin = dynamic(
9+
() => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
10+
{ ssr: false },
11+
);
12+
13+
const TransactionSigningModal = dynamic(
14+
() => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.TransactionSigningModal),
15+
{ ssr: false },
16+
);
17+
18+
const CapsuleModals = () => {
19+
const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
20+
const { colorMode } = useColorMode();
21+
22+
return client ? (
23+
<div className="leap-ui">
24+
<LeapSocialLogin
25+
// @ts-expect-error - use capsule version mismatch error
26+
capsule={client.getClient()}
27+
// @ts-expect-error - type error
28+
oAuthMethods={["GOOGLE", "FACEBOOK", "TWITTER", "DISCORD", "APPLE"]}
29+
onAfterLoginSuccessful={() => {
30+
void onAfterLoginSuccessful?.();
31+
}}
32+
onLoginFailure={() => {
33+
onLoginFailure();
34+
}}
35+
setShowCapsuleModal={setModalState}
36+
showCapsuleModal={modalState}
37+
theme={colorMode}
38+
/>
39+
<TransactionSigningModal dAppInfo={{ name: "Graz Example" }} />
40+
</div>
41+
) : null;
42+
};
43+
44+
export default CapsuleModals;

‎example/starter/src/pages/index.tsx

+3-28
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,17 @@
1-
import { Stack, useColorMode } from "@chakra-ui/react";
2-
import { useCapsule } from "graz";
3-
import dynamic from "next/dynamic";
1+
import { Stack } from "@chakra-ui/react";
42
import { Card } from "src/ui/card/chain";
3+
import CapsuleModals from "src/ui/modal/capsule-modals";
54
import { mainnetChains } from "src/utils/graz";
6-
import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
7-
8-
const LeapSocialLogin = dynamic(
9-
() => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
10-
{ ssr: false },
11-
);
125

136
const HomePage = () => {
14-
const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
15-
16-
const { colorMode } = useColorMode();
177
return (
188
<>
199
<Stack spacing={4}>
2010
{mainnetChains.map((chain) => (
2111
<Card key={chain.chainId} chain={chain} />
2212
))}
2313
</Stack>
24-
<div className='leap-ui'>
25-
<LeapSocialLogin
26-
capsule={client?.getClient() || undefined}
27-
// @ts-expect-error - type error
28-
oAuthMethods={["GOOGLE", "FACEBOOK", "TWITTER", "DISCORD", "APPLE"]}
29-
onAfterLoginSuccessful={() => {
30-
void onAfterLoginSuccessful?.();
31-
}}
32-
onLoginFailure={() => {
33-
onLoginFailure();
34-
}}
35-
setShowCapsuleModal={setModalState}
36-
showCapsuleModal={modalState}
37-
theme={colorMode}
38-
/>
39-
</div>
14+
<CapsuleModals />
4015
</>
4116
);
4217
};

‎example/starter/src/ui/modal/capsule-modals.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
2+
3+
import { useColorMode } from "@chakra-ui/react";
4+
import { useCapsule } from "graz";
5+
import dynamic from "next/dynamic";
6+
import React from "react";
7+
8+
const LeapSocialLogin = dynamic(
9+
() => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
10+
{ ssr: false },
11+
);
12+
13+
const TransactionSigningModal = dynamic(
14+
() => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.TransactionSigningModal),
15+
{ ssr: false },
16+
);
17+
18+
const CapsuleModals = () => {
19+
const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
20+
const { colorMode } = useColorMode();
21+
22+
return client ? (
23+
<div className="leap-ui">
24+
<LeapSocialLogin
25+
// @ts-expect-error - use capsule version mismatch error
26+
capsule={client.getClient()}
27+
// @ts-expect-error - type error
28+
oAuthMethods={["GOOGLE", "FACEBOOK", "TWITTER", "DISCORD", "APPLE"]}
29+
onAfterLoginSuccessful={() => {
30+
void onAfterLoginSuccessful?.();
31+
}}
32+
onLoginFailure={() => {
33+
onLoginFailure();
34+
}}
35+
setShowCapsuleModal={setModalState}
36+
showCapsuleModal={modalState}
37+
theme={colorMode}
38+
/>
39+
<TransactionSigningModal dAppInfo={{ name: "Graz Example" }} />
40+
</div>
41+
) : null;
42+
};
43+
44+
export default CapsuleModals;

‎example/vite/src/App.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import "./App.css";
33
import { useAccount, useActiveChainIds, useConnect, useDisconnect } from "graz";
44

55
import reactLogo from "./assets/react.svg";
6+
import CapsuleModals from "./components/CapsuleModals";
67

78
// eslint-disable-next-line prefer-arrow-functions/prefer-arrow-functions, react/function-component-definition
89
export default function App() {
@@ -47,6 +48,7 @@ export default function App() {
4748
{isDisconnected ? "Connect Wallet" : null}
4849
</button>
4950
</div>
51+
<CapsuleModals />
5052
</div>
5153
);
5254
}

‎example/vite/src/components/CapsuleModals.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
2+
3+
import { CustomCapsuleModalView, TransactionSigningModal } from "@leapwallet/cosmos-social-login-capsule-provider-ui";
4+
import { useCapsule } from "graz";
5+
import React from "react";
6+
7+
const CapsuleModals = () => {
8+
const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
9+
return client ? (
10+
<div className="leap-ui">
11+
<CustomCapsuleModalView
12+
// @ts-expect-error - use capsule version mismatch error
13+
capsule={client.getClient()}
14+
// @ts-expect-error - type error
15+
oAuthMethods={["GOOGLE", "FACEBOOK", "TWITTER", "DISCORD", "APPLE"]}
16+
onAfterLoginSuccessful={() => {
17+
void onAfterLoginSuccessful?.();
18+
}}
19+
onLoginFailure={() => {
20+
onLoginFailure();
21+
}}
22+
setShowCapsuleModal={setModalState}
23+
showCapsuleModal={modalState}
24+
theme="light"
25+
/>
26+
<TransactionSigningModal dAppInfo={{ name: "Graz Example" }} />
27+
</div>
28+
) : null;
29+
};
30+
31+
export default CapsuleModals;

0 commit comments

Comments
 (0)