add signArbitrary support for leap-capsule and update leap-capsule pa…

…ckages (#167)
graz-sh · Sep 25, 2024 · 340787e · 340787e
2 parents d2623c6 + bf5ac60
commit 340787e
Show file tree

Hide file tree

Showing 7 changed files with 2,956 additions and 1,074 deletions.
diff --git a/example/next/package.json b/example/next/package.json
@@ -12,7 +12,7 @@
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.50",
+    "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.58",
     "framer-motion": "^10.16.4",
     "graz": "*",
     "next": "^13.4.19",

diff --git a/example/next/pages/index.tsx b/example/next/pages/index.tsx
@@ -7,6 +7,7 @@ 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),
@@ -44,20 +45,22 @@ const HomePage: NextPage = () => {
           <ConnectButton />
         </HStack>
       </Stack>
-      <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 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>
     </Center>
   );
 };

diff --git a/example/starter/package.json b/example/starter/package.json
@@ -15,7 +15,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@graz-sh/types": "^0.0.4",
-    "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.50",
+    "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.58",
     "bignumber.js": "^9.1.2",
     "framer-motion": "^10.16.4",
     "graz": "*",

diff --git a/example/starter/src/pages/index.tsx b/example/starter/src/pages/index.tsx
@@ -3,6 +3,7 @@ import { useCapsule } from "graz";
 import dynamic from "next/dynamic";
 import { Card } from "src/ui/card/chain";
 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),
@@ -20,20 +21,22 @@ const HomePage = () => {
           <Card key={chain.chainId} chain={chain} />
         ))}
       </Stack>
-      <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 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>
     </>
   );
 };

diff --git a/packages/graz/package.json b/packages/graz/package.json
@@ -48,7 +48,7 @@
     "@cosmjs/proto-signing": "*",
     "@cosmjs/stargate": "*",
     "@cosmjs/tendermint-rpc": "*",
-    "@leapwallet/cosmos-social-login-capsule-provider": "^0.0.39",
+    "@leapwallet/cosmos-social-login-capsule-provider": "^0.0.41",
     "react": ">=17"
   },
   "dependencies": {

diff --git a/packages/graz/src/actions/wallet/capsule.ts b/packages/graz/src/actions/wallet/capsule.ts
@@ -1,4 +1,10 @@
-import type { AminoSignResponse } from "@cosmjs/amino";
+import {
+  type AminoSignResponse,
+  encodeEd25519Pubkey,
+  encodeSecp256k1Pubkey,
+  pubkeyType,
+  StdSignature,
+} from "@cosmjs/amino";
 import { fromBech32 } from "@cosmjs/encoding";
 import type { DirectSignResponse } from "@cosmjs/proto-signing";
 import type { Keplr, Key } from "@keplr-wallet/types";
@@ -146,6 +152,35 @@ export const getCapsule = (): Wallet => {
     return client.signAmino(chainId, signer, signDoc, signOptions) as Promise<AminoSignResponse>;
   };
 
+  const signArbitrary = async (chainId: string, signer: string, data: string | Uint8Array): Promise<StdSignature> => {
+    const client = useGrazSessionStore.getState().capsuleClient;
+    if (!client) throw new Error("Capsule client is not initialized");
+    const account = await client.getAccount(chainId);
+    if (!account) {
+      throw new Error(`Wallet not connected to account ${signer}`);
+    }
+    const pubkey = (() => {
+      switch (account.algo) {
+        case "secp256k1":
+          return encodeSecp256k1Pubkey(account.pubkey);
+        case "ed25519":
+          return encodeEd25519Pubkey(account.pubkey);
+        default:
+          throw new Error("sr25519 public key algorithm is not supported");
+      }
+    })();
+
+    const signature = await client.signArbitrary(chainId, signer, data);
+
+    return {
+      signature,
+      pub_key: {
+        type: account.algo === "secp256k1" ? pubkeyType.secp256k1 : pubkeyType.ed25519,
+        value: pubkey.value,
+      },
+    };
+  };
+
   const experimentalSuggestChain = async (..._args: Parameters<Keplr["experimentalSuggestChain"]>) => {
     await Promise.reject(new Error("Capsule does not support experimentalSuggestChain"));
   };
@@ -159,6 +194,7 @@ export const getCapsule = (): Wallet => {
     getOfflineSignerDirect,
     signDirect,
     signAmino,
+    signArbitrary,
     experimentalSuggestChain,
     // @ts-expect-error - CapsuleAminoSigner | OfflineDirectSigner
     getOfflineSigner,