-
Notifications
You must be signed in to change notification settings - Fork 149
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'leapsamvel-feature/add-leap-social-login'
- Loading branch information
Showing
31 changed files
with
6,206 additions
and
2,898 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
118 changes: 118 additions & 0 deletions
118
packages/docs/pages/integrating-wallets/leap-capsule-social-login.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| # @cosmos-kit/leap-capsule-social-login | ||
|
|
||
|
|
||
| `@cosmos-kit/leap-capsule-social-login` is the social login integration for CosmosKit using `@leapwallet/cosmos-social-login-capsule-provider` | ||
|
|
||
| > You need install [@leapwallet/cosmos-social-login-capsule-provider-ui](https://www.npmjs.com/package/@leapwallet/cosmos-social-login-capsule-provider-ui) package for UI. | ||
| > When you build it kindly have the environment vairables `CAPSULE_API_KEY` and `CAPSULE_ENV` you can get it from [UseCapsule.com](https://usecapsule.com/) | ||
| ## NextJS | ||
|
|
||
| For nextjs we recommend to load the module dynamic or async as it is not yet supporting SSR. | ||
|
|
||
| > When you build it kindly have the environment vairables `NEXT_PUBLIC_CAPSULE_API_KEY` and `NEXT_PUBLIC_CAPSULE_ENV` you can get it from [UseCapsule.com](https://usecapsule.com/) | ||
| ### In next.config.js | ||
|
|
||
| > transpilePackages: ["@cosmos-kit/leap-social-login", "@leapwallet/capsule-web-sdk-lite", "@leapwallet/cosmos-social-login-capsule-provider"], | ||
|
|
||
| ### For example | ||
|
|
||
| ```jsx | ||
|
|
||
| function MyApp({ Component, pageProps }: AppProps) { | ||
| const defaultWallets: MainWalletBase[] = [...keplrWallets, ...leapWallets]; | ||
| const [wallets, setWallets] = useState<MainWalletBase[]>(defaultWallets) | ||
| const [loadingWallets, setLoadingWallet] = useState<boolean>(false); | ||
|
|
||
| useEffect(() => { | ||
| setLoadingWallet(true) | ||
| import("@cosmos-kit/leap-capsule-social-login").then( | ||
| (CapsuleModule) => { | ||
| return CapsuleModule.wallets; | ||
| }, | ||
| ).then((leapSocialLogin) => { | ||
| setWallets([...keplrWallets, ...leapWallets, ...leapSocialLogin]) | ||
| setLoadingWallet(false); | ||
| }) | ||
| }, []) | ||
|
|
||
|
|
||
| if (loadingWallets) { | ||
| return <>Loading...</> | ||
| } | ||
|
|
||
|
|
||
| return ( | ||
| <RootLayout> | ||
| <ChainProvider | ||
| chains={chains} | ||
| assetLists={[...assets]} | ||
| wallets={wallets} | ||
| throwErrors={false} | ||
| subscribeConnectEvents={false} | ||
| defaultNameService={"stargaze"} | ||
| logLevel={"DEBUG"} | ||
| endpointOptions={{ | ||
| isLazy: true, | ||
| endpoints: { | ||
| cosmoshub: { | ||
| rpc: [ | ||
| { | ||
| url: "https://rpc.cosmos.directory/cosmoshub", | ||
| headers: {}, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }} | ||
| disableIframe={false} | ||
| > | ||
| <Component {...pageProps} /> | ||
| </ChainProvider> | ||
| <CustomCapsuleModalViewX /> | ||
| </RootLayout> | ||
| ); | ||
| } | ||
|
|
||
| export default MyApp; | ||
|
|
||
|
|
||
| const LeapSocialLogin = dynamic( | ||
| () => | ||
| import("@leapwallet/cosmos-social-login-capsule-provider-ui").then( | ||
| (m) => m.CustomCapsuleModalView, | ||
| ), | ||
| { ssr: false }, | ||
| ); | ||
|
|
||
| export function CustomCapsuleModalViewX() { | ||
| const [showCapsuleModal, setShowCapsuleModal] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| window.openCapsuleModal = () => { | ||
| setShowCapsuleModal(true); | ||
| } | ||
| }, []) | ||
|
|
||
| return ( | ||
| <> | ||
| <LeapSocialLogin | ||
| showCapsuleModal={showCapsuleModal} | ||
| setShowCapsuleModal={setShowCapsuleModal} | ||
| theme={'dark'} | ||
| onAfterLoginSuccessful={() => { | ||
| window.successFromCapsuleModal(); | ||
| }} | ||
| onLoginFailure={ | ||
| () => { | ||
| window.failureFromCapsuleModal(); | ||
| } | ||
| } | ||
| /> | ||
| </> | ||
| ); | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.