feat(app): derive bech32 address

unionlabs · Jun 7, 2024 · c755ddc · c755ddc
1 parent db6681d
commit c755ddc
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 5 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -27,6 +27,7 @@
     "@union/client": "npm:@jsr/union__client@^0.0.1-rc.17",
     "@wagmi/connectors": "^5.0.8",
     "@wagmi/core": "^2.10.5",
+    "bech32": "^2.0.0",
     "bits-ui": "^0.21.10",
     "cmdk-sv": "^0.0.17",
     "formsnap": "^1.0.0",

diff --git a/app/src/lib/utilities/format.ts b/app/src/lib/utilities/format.ts
@@ -68,7 +68,7 @@ export function urlSearchParams(
 
 export function summarizeString(str: string, show: number): string {
   // Don't summarize short strings
-  if (str.length < show*2+2)  return str;
+  if (str.length === 0 || str.length < show*2+2)  return str;
 
   // Extract the first 6 characters and the last 6 characters
   const firstPart: string = str.slice(0, show);

diff --git a/app/src/lib/wallet/cosmos/config.ts b/app/src/lib/wallet/cosmos/config.ts
@@ -28,6 +28,7 @@ function createCosmosStore(
     chain: "cosmos",
     hoverState: "none",
     address: undefined,
+    rawAddress: undefined,
     connectedWallet: "keplr",
     connectionStatus: "disconnected"
   }
@@ -69,6 +70,7 @@ function createCosmosStore(
         ...v,
         connectionStatus: "connected",
         address: account?.bech32Address,
+        rawAddress: account?.address,
         connectedWallet: walletId
       }))
       await sleep(2_000)

diff --git a/app/src/lib/wallet/types.ts b/app/src/lib/wallet/types.ts
@@ -19,6 +19,7 @@ export type ChainWalletStore<TChainSource extends "cosmos" | "evm"> = {
   chain: (TChainSource extends "evm" ? "sepolia" : "cosmos") | String
   hoverState: "hover" | "none"
   address: TChainSource extends "evm" ? EvmAddress | undefined : string | undefined
+  rawAddress: TChainSource extends "evm" ? undefined : Uint8Array | undefined
   connectionStatus: State["status"]
   connectedWallet: string | undefined
 }

diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import * as Card from "$lib/components/ui/card/index.ts"
+  import { derived, type Readable } from 'svelte/store';
 
   import { cosmosBalancesQuery, evmBalancesQuery } from '$lib/queries/balance'
   import { sepoliaStore } from "$lib/wallet/evm/config.ts"
   import { cosmosStore } from "$lib/wallet/cosmos"
   import { summarizeString } from '$lib/utilities/format'; 
+  import { bech32 } from 'bech32';
 
   let evmBalances: null | ReturnType<typeof evmBalancesQuery>;
   $: if($sepoliaStore.address) evmBalances = evmBalancesQuery({
@@ -19,6 +21,12 @@
     address: $cosmosStore.address
   })
 
+  let derivedAddress: Readable<null | string> = derived(cosmosStore, ($cosmosStore) => {
+    if (!$cosmosStore.rawAddress) return null;
+    const words = bech32.toWords($cosmosStore.rawAddress);
+    return bech32.encode('union', words)
+  });
+
 </script>
 
 <main class="flex flex-col items-center w-full p-4 mt-16 gap-6">
@@ -38,7 +46,7 @@
       </div>
 
       <div>
-        {#if $cosmosStore.address }
+        {#if $cosmosStore.address && $cosmosStore.rawAddress }
           ✅ Cosmos wallet <span class="font-mono">{summarizeString($cosmosStore.address, 6)}</span> connected
         {:else}
           Connect cosmos wallet