Caching and optimizations

packages/snap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmsnap/snap",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "The Cosmos extension for your Metamask wallet.",
   "repository": {
     "type": "git",

packages/snap/snap.manifest.json

@@ -1,13 +1,13 @@
 {
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Cosmos Extension that adds Cosmos support to Metamask.",
   "proposedName": "Cosmos Extension",
   "repository": {
     "type": "git",
     "url": "https://github.com/cosmos/snap.git"
   },
   "source": {
-    "shasum": "vTr7wXctqn/NZmTVkjwj2nJYkPM9GEYvrnRAswshDxY=",
+    "shasum": "KNST9WGZQuCvwWjJ/CJ4LcwpRIurasP4f6muX+8Sugk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/index.ts

@@ -107,7 +107,7 @@ export const onRpcRequest: OnRpcRequestHandler = async ({
       });
 
       return {
-        data: res,
+        data: chains.chains,
         success: true,
         statusCode: 201,
       };
@@ -615,6 +615,17 @@ export const onRpcRequest: OnRpcRequestHandler = async ({
         statusCode: 200,
       };
 
+    case "getPublicKey":  
+      let key = await ChainState.getPublicKey();
+
+      return {
+        data: {
+          public_key: key
+        },
+        success: true,
+        statusCode: 200,
+      };
+
     default:
       throw new Error("Method not found.");
   }

packages/snap/src/state.ts

@@ -69,6 +69,27 @@ export class ChainState {
       chain_id,
     };
   }
+  /**
+   * Gets the public key for this wallet.
+   *
+   * @returns The public key in hex string.
+   * @throws If an error occurs.
+   */
+  public static async getPublicKey(): Promise<string> {
+    // get signer info
+    let node = await snap.request({
+      method: "snap_getBip44Entropy",
+      params: {
+        coinType: DEFAULT_SLIP44,
+      },
+    });
+
+    if (typeof node.publicKey === "undefined") {
+      throw Error("Public key from node is undefined");
+    }
+
+    return node.publicKey;
+  }
   /**
    * Gets all Cosmos chains from Metamask snap state.
    *

packages/ui/src/components/Balance.svelte

@@ -1,18 +1,29 @@
-<script>
-	import { state } from "../store/state";
+<script lang="ts">
 	import { copyToClipboard } from "../utils/general";
+  import { directory } from "../store/directory";
 
+  export let chain_id = "osmosis-1";
   export let name = "Osmosis";
-  export let dollarAmount = 16.75;
+  export let dollarAmount = 0;
   export let tokenAmount = 48.77;
-  export let tokenDenom = "osmo";
+  export let tokenDenom = "uosmo";
   export let chainAddress = "osmo1m9l358xunhdhqp0568dj37mzhvuxx9uxtz4vt7";
   export let logo = "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/mask-group-18@2x.png";
+  let copied = false;
+
+  $: {
+    let chainDir = $directory.filter(chain => chain.chain_id == chain_id);
+    const tokenKey = tokenDenom.substring(1).toLowerCase();
+    const price = chainDir[0]?.prices?.coingecko?.[tokenKey];
+    dollarAmount = price ? tokenAmount * price.usd : dollarAmount;
+  };
 
   const copyAddress = async () => {
     await copyToClipboard(chainAddress);
-    $state.showAlert = true;
-    $state.alertText = "Address Copied to Clipboard"
+    copied = true;
+    setTimeout(() => {
+      copied = false;
+    }, 1000)
   }
 </script>
 
@@ -38,7 +49,7 @@
             ${dollarAmount}
           </div>
           <div class="percent inter-medium-white-14px">
-            {tokenAmount} {tokenDenom.toUpperCase()}
+            {tokenAmount} {tokenDenom.substring(1).toUpperCase()}
           </div>
       </div>
   </div>
@@ -48,13 +59,20 @@
   <div class="cosmos1vhw82tqftrg-1 inter-medium-white-14px">
       {chainAddress}
   </div>
-  <img class="content_copy-1" src="https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/content-copy-1.svg" alt="content_copy">
+  {#if copied}
+    <svg class="text-[#594bff] w-5 h-5 text-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 20">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 1v4a1 1 0 0 1-1 1H1m4 6 2 2 4-4m4-8v16a.97.97 0 0 1-.933 1H1.933A.97.97 0 0 1 1 18V5.828a2 2 0 0 1 .586-1.414l2.828-2.828A2 2 0 0 1 5.828 1h8.239A.97.97 0 0 1 15 2Z"/>
+    </svg>
+  {:else}
+    <svg class="text-[#594bff] w-5 h-5 text-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 20">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5a1 1 0 0 0-1 1v12a.969.969 0 0 0 .933 1h8.1a1 1 0 0 0 1-1.033M10 1v4a1 1 0 0 1-1 1H5m10-4v12a.97.97 0 0 1-.933 1H5.933A.97.97 0 0 1 5 14V5.828a2 2 0 0 1 .586-1.414l2.828-2.828A2 2 0 0 1 9.828 1h4.239A.97.97 0 0 1 15 2Z"/>
+    </svg>
+  {/if}
 </div>
 </div>
 
 <style>
 .group-55 {
-  -webkit-backdrop-filter: blur(15px) brightness(100%);
   align-items: flex-start;
   backdrop-filter: blur(15px) brightness(100%);
   background-color: var(--licorice);
@@ -201,10 +219,4 @@
   font-style: normal;
   font-weight: 500;
 }
-
-.content_copy-1 {
-  height: 18px;
-  min-width: 18px;
-  margin-left: 15px;
-}
 </style>

packages/ui/src/components/Header.svelte

@@ -11,7 +11,7 @@
 {#if connected}
     <div class="navbar">
         <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="logo-container" on:click={() => goto("/dashboard")}>
+        <div class="logo-container" on:click={() => goto("/balances")}>
             <img class="logo-image" src={logoSrc} alt={logoText} />
             <div class="logo-text">{logoText}</div>
         </div>

packages/ui/src/components/Menu.svelte

@@ -3,7 +3,7 @@
   import { page } from '$app/stores';
 
     let menu_items = [
-        { route: "/dashboard", title: "Dashboard", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/dashboard.svg", path: "/dashboard" },
+        { route: "/balances", title: "Balances", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/dashboard.svg", path: "/balances" },
         { route: "/transactions", title: "History", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/dns.svg", path: "/transactions" },
         { route: "/address", title: "Address Book", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/account-box.svg", path: "/address" },
         { route: "/settings", title: "Settings", icon: "https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64a70dda287bc6479f0ac9fd/img/settings.svg", path: "/settings" }

packages/ui/src/components/Transfer.svelte

@@ -1,10 +1,27 @@
-<script>
+<script lang="ts">
   import { chains } from "../store/chains";
 	import Info from "./Info.svelte";
+	import { balances } from "../store/balances";
+	import type { Coin } from "@cosmjs/stargate";
 
   let source = "cosmoshub-4";
   let destination = "cosmoshub-4";
-  let denom = "atom"
+  let denom = "uatom";
+  let available: Coin = {amount: "0", denom};
+
+  $: {
+      let filtBal = $balances.filter(item => item.chain_id == source);
+      if (filtBal.length > 0) {
+        let filtTokens = filtBal[0].balances.filter(item => item.denom == denom);
+        if (filtTokens.length > 0) {
+          available = filtTokens[0]
+        } else {
+          available = { amount: "0", denom };
+        }
+      } else {
+        available = { amount: "0", denom };
+      }
+  }
 </script>
 
 <div class="overlap-group1">
@@ -24,8 +41,8 @@
             Asset
         </div>
         <select bind:value={denom} id="denom" name="denom" class="group-32-1 source-chain-osmosis inter-medium-white-14px">
-            <option class="source-chain-osmosis inter-medium-white-14px" value="osmo">OSMO</option>
-            <option class="source-chain-osmosis inter-medium-white-14px" value="atom">ATOM</option>
+            <option class="source-chain-osmosis inter-medium-white-14px" value="uosmo">OSMO</option>
+            <option class="source-chain-osmosis inter-medium-white-14px" value="uatom">ATOM</option>
         </select>
     </div>
     <input type="number" placeholder="Enter amount" class="enter-amount inter-medium-white-14px overlap-group-7"/>
@@ -40,7 +57,7 @@
     </select>
     <input type="text" placeholder="Enter recipient address" class="enter-amount inter-medium-white-14px overlap-group-7"/>
     <div class="available-balance-1454789 inter-medium-blueberry-14px">
-        Available balance: 14.54789
+        Available: {available.amount} {available.denom.substring(1).toUpperCase()}
     </div>
     <button class="frame-1-2 frame-1-4 button-send">
         <div class="send-amount-1 inter-medium-white-12px">
@@ -220,31 +237,31 @@
 }
 
 .button-send {
-    letter-spacing: -0.36px;
-    line-height: normal;
-    margin-top: 15px;
-    position: relative;
-    width: fit-content;
-    height: 40px;
-    min-width: 100px;
-    width: 100%;
-  }
+  letter-spacing: -0.36px;
+  line-height: normal;
+  margin-top: 15px;
+  position: relative;
+  width: fit-content;
+  height: 40px;
+  min-width: 100px;
+  width: 100%;
+}
 
 .button-send:hover {
-    background-color: var(--blueberry);
-    filter: brightness(1.1);
+  background-color: var(--blueberry);
+  filter: brightness(1.1);
 }
 
 select {
-    border-radius: 5px;
-    padding: 10px;
+  border-radius: 5px;
+  padding: 10px;
 }
 
 option {
-    font-size: 16px;
-    padding: 10px;
-    background-color: #141414;
-    border-radius: 5px;
-    border: 1px;
+  font-size: 16px;
+  padding: 10px;
+  background-color: #141414;
+  border-radius: 5px;
+  border: 1px;
 }
 </style>