feat(docs): 0.1.6

docs/docs/change-log.md

@@ -4,6 +4,13 @@ sidebar_position: 8
 
 # Changelog
 
+## Version 0.1.6
+
+- Added capsule wallet integration
+- `walletDefaultOptions` param in `GrazProvider` for setting default options for wallet.
+- Added `useCapsule` hook for leap login capsule ui
+- `denom` in `useBalance` param is now optional
+
 ## Version 0.1.5
 
 - Fix typing on SigningClient hooks for single chain `opts` param

docs/docs/guides/integrate-capsule.md

@@ -0,0 +1,40 @@
+# Integrate Capsule
+
+## Install Leap Login Capsule UI
+
+```bash
+yarn add @leapwallet/cosmos-social-login-capsule-provider-ui
+```
+
+## Example Next JS
+
+For Next JS we recommend to load the module dynamically to avoid SSR issues. And use `useCapsule` hook to get the client and other capsule related states.
+
+```javascript
+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();
+
+  return (
+    <div>
+      <LeapSocialLogin
+        capsule={client?.getClient() || undefined}
+        onAfterLoginSuccessful={() => {
+          onAfterLoginSuccessful?.();
+        }}
+        onLoginFailure={() => {
+          onLoginFailure();
+        }}
+        setShowCapsuleModal={setModalState}
+        showCapsuleModal={modalState}
+      />
+    </div>
+  );
+};
+```
+
+Thats it, now you can use capsule as your wallet provider.

docs/docs/hooks/useCapsule.md

@@ -0,0 +1,44 @@
+# useCapsule
+
+Hook to interact with [@leapwallet/cosmos-social-login-capsule-provider-ui](https://www.npmjs.com/package/@leapwallet/cosmos-social-login-capsule-provider-ui)
+
+#### Usage
+
+```javascript
+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();
+
+  return (
+    <div>
+      <LeapSocialLogin
+        capsule={client?.getClient() || undefined}
+        onAfterLoginSuccessful={() => {
+          onAfterLoginSuccessful?.();
+        }}
+        onLoginFailure={() => {
+          onLoginFailure();
+        }}
+        setShowCapsuleModal={setModalState}
+        showCapsuleModal={modalState}
+      />
+    </div>
+  );
+};
+```
+
+#### Return Value
+
+```tsx
+{
+  setModalState: (state: boolean) => void;
+  modalState: boolean;
+  client: CapsuleProvider | null;
+  onAfterLoginSuccessful: (() => Promise<void>) | undefined;
+  onLoginFailure: () => void;
+}
+```