fix: cache config and use row() in UI

- config confirmation only happens the first time or if is different from the cache version
- all UI view are much clean using row()

closes #173

packages/snap/package.json

@@ -79,6 +79,7 @@
   "dependencies": {
     "@metamask/key-tree": "^9.0.0",
     "@metamask/snaps-sdk": "^4.4.2",
+    "dequal": "^2.0.3",
     "iso-base": "^4.0.0",
     "iso-filecoin": "^4.0.3",
     "merge-options": "^3.0.4",

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/filecoin-project/filsnap.git"
   },
   "source": {
-    "shasum": "6GovfZSiJnq/MqMiHmWG0BUHzaHMIvX/Vn//OEZ3KbQ=",
+    "shasum": "BvoNtEWXXrUB6io5wWNjce7xF4BqMeAkSC7sMbgJeMc=",
     "location": {
       "npm": {
         "filePath": "dist/snap.js",
@@ -17,6 +17,9 @@
       }
     }
   },
+  "initialConnections": {
+    "http://localhost:5173": {}
+  },
   "initialPermissions": {
     "endowment:network-access": {},
     "endowment:rpc": {

packages/snap/src/index.ts

@@ -23,6 +23,7 @@ export type {
   Network,
   RequestWithFilSnap,
   SnapConfig,
+  Snap,
 } from './types'
 
 // Disable transaction insight for now

packages/snap/src/rpc/configure.ts

@@ -1,6 +1,15 @@
-import { copyable, panel, text } from '@metamask/snaps-sdk'
+import {
+  address,
+  copyable,
+  heading,
+  panel,
+  row,
+  text,
+} from '@metamask/snaps-sdk'
+import { dequal } from 'dequal/lite'
 import { RPC } from 'iso-filecoin/rpc'
 import { parseDerivationPath } from 'iso-filecoin/utils'
+
 // @ts-expect-error - no types for this package
 import merge from 'merge-options'
 import { getAccountSafe } from '../account'
@@ -71,26 +80,36 @@ export async function configure(
     )
   }
 
+  const config = await ctx.state.get(ctx.origin)
+
+  if (config && dequal(config, _params.data)) {
+    return { result: _params.data, error: null }
+  }
+
   const account = await getAccountSafe(snap, _params.data)
 
   const conf = await snapDialog(ctx.snap, {
     type: 'confirmation',
     content: panel([
-      text(
-        `Do you want to connect **Account ${accountNumber}** _${account.address.toString()}_ to **${
-          ctx.origin
-        }**?`
-      ),
-      text('Derivation Path:'),
-      copyable(derivationPath),
-      text('API:'),
-      copyable(url),
-      text('Network:'),
-      copyable(network),
-      text('Unit Decimals:'),
-      copyable(unit?.decimals.toString() ?? 'N/A'),
-      text('Unit Symbol:'),
-      copyable(unit?.symbol ?? 'N/A'),
+      heading('Connection request'),
+      text(`**${ctx.origin}** wants to connect with your Filecoin account.`),
+      text(`Account ${accountNumber}`),
+      copyable(`${account.address.toString()}`),
+      row('Derivation Path:', text(derivationPath)),
+      row('API:', text(url)),
+      row('Network:', text(network)),
+      row('Unit Decimals:', text(unit?.decimals.toString() ?? 'N/A')),
+      row('Unit Symbol:', text(unit?.symbol ?? 'N/A')),
+      // text('Derivation Path:'),
+      // copyable(derivationPath),
+      // text('API:'),
+      // copyable(url),
+      // text('Network:'),
+      // copyable(network),
+      // text('Unit Decimals:'),
+      // copyable(unit?.decimals.toString() ?? 'N/A'),
+      // text('Unit Symbol:'),
+      // copyable(unit?.symbol ?? 'N/A'),
     ]),
   })
 

packages/snap/src/rpc/sign-message.ts

@@ -1,4 +1,11 @@
-import { copyable, divider, heading, panel, text } from '@metamask/snaps-sdk'
+import {
+  copyable,
+  divider,
+  heading,
+  panel,
+  row,
+  text,
+} from '@metamask/snaps-sdk'
 import { base64pad } from 'iso-base/rfc4648'
 import * as Address from 'iso-filecoin/address'
 import { Message, Schemas } from 'iso-filecoin/message'
@@ -96,22 +103,25 @@ export async function signMessage(
       copyable(message.to),
       divider(),
       heading('Details'),
-      text(`Gas _(estimated ${config.unit?.symbol ?? 'FIL'})_:`),
-      copyable(
-        gas.toFIL().toFormat({
-          decimalPlaces: config.unit?.decimals,
-        })
+      row(
+        'Estimated gas:',
+        text(
+          `${gas.toFIL().toFormat({
+            decimalPlaces: config.unit?.decimals,
+          })} ${config.unit?.symbol ?? 'FIL'}`
+        )
       ),
-      text(`Total _(amount + gas ${config.unit?.symbol ?? 'FIL'})_:`),
-      copyable(
-        total.toFIL().toFormat({
-          decimalPlaces: config.unit?.decimals,
-        })
+
+      row(
+        'Estimated total (amount + gas):',
+        text(
+          `${total.toFIL().toFormat({
+            decimalPlaces: config.unit?.decimals,
+          })} ${config.unit?.symbol ?? 'FIL'}`
+        )
       ),
-      text('API:'),
-      copyable(config.rpc.url),
-      text('Network:'),
-      copyable(config.network),
+      row('API:', text(config.rpc.url)),
+      row('Network:', text(config.network)),
     ]),
   })
 

packages/snap/src/types.ts

@@ -27,6 +27,7 @@ export type Json = Literal | { [key: string]: Json } | Json[]
 export type SnapConfig = z.infer<typeof snapConfig>
 export type MessageStatus = z.infer<typeof messageStatus>
 export type Account = ReturnType<typeof accountFromPrivateKey>
+export type { Snap } from '@metamask/snaps-sdk'
 
 // Snap types
 export interface AccountInfo {