Improved Snap code and flow

packages/site/src/pages/index.tsx

@@ -135,10 +135,7 @@ const Index = () => {
         params: {
           snapId: defaultSnapOrigin,
           request: {
-            method: 'setLxpAddress',
-            params: {
-              lxpAddress: lxpAddressValue,
-            },
+            method: 'watchLxpAddress',
           },
         },
       });
@@ -299,15 +296,11 @@ const Index = () => {
         )}
         <Card
           content={{
-            title: 'Get LXP Address',
-            description: `${
-              snapLxpAddress
-                ? truncateAddress(snapLxpAddress)
-                : 'Check the wallet address linked to your LXP'
-            }`,
+            title: 'Set LXP Address',
+            description: 'Please enter the wallet address where you hold LXP.',
             button: (
-              <GetLxpAddressButton
-                onClick={handleGetLxpAddress}
+              <SetLxpAddressButton
+                onClick={handleSetLxpAddress}
                 disabled={!state.installedSnap}
               />
             ),
@@ -316,12 +309,15 @@ const Index = () => {
         />
         <Card
           content={{
-            title: 'Set LXP Address',
-            description: 'Please enter the wallet address holding your LXP',
-            input: <LxpAddressInput onChangeHandler={setLxpAddressValue} />,
+            title: 'Get LXP Address',
+            description: `${
+              snapLxpAddress
+                ? truncateAddress(snapLxpAddress)
+                : 'Check the wallet address linked to your LXP.'
+            }`,
             button: (
-              <SetLxpAddressButton
-                onClick={handleSetLxpAddress}
+              <GetLxpAddressButton
+                onClick={handleGetLxpAddress}
                 disabled={!state.installedSnap}
               />
             ),

packages/snap/locales/en.json

@@ -15,15 +15,23 @@
     "one": "There is {count} active LXP activation"
   },
   "lxpAddress": {
-    "heading": "LXP wallet address",
+    "heading": "Linea XP wallet address",
     "prompt": "Please enter the wallet address linked to your LXP"
   },
+  "nextSteps": { 
+    "heading": "Thank you for installing the LXP Snap",
+    "body": "Next, set your address with the [companion site](https://lxp-snap.linea.build/) to track your Linea XP balance. At any time you can open the Snaps menu and click on LXP to view your balance, Proof of Humanity status, and current activations."
+  },
   "noAddress": {
     "toSetText": "To view your LXP balance and POH status,",
     "toSetLink": "first set your address"
   },
   "help": "LXP earned in activations may not arrive in your wallet until the activation is complete.",
   "viewBalance": "View balance on Lineascan",
   "completePOH": "Complete Proof of Humanity",
-  "exploreAll": "Explore All Linea Activations"
+  "exploreAll": "Explore All Linea Activations",
+  "errors": { 
+    "heading": "Error",
+    "invalidLxpAddress": "{address} is not a valid address. Please try again."
+  }
 }

packages/snap/locales/es.json

@@ -15,15 +15,23 @@
     "one": "Hay {count} activacion de LXP activa"
   },
   "lxpAddress": {
-    "heading": "Cuenta que usas para LXP",
+    "heading": "Cuenta que usas para Linea XP",
     "prompt": "Ingresa tu cuenta para ver tu balance"
   },
+  "nextSteps": { 
+    "heading": "Gracias por instalar LXP Snap",
+    "body": "Para ver tu balance de LXP y estado de POH, [ingresa tu cuenta por el sitio web](https://lxp-snap.linea.build/). A cualquier tiempo puedes abrir el menu y seleccionar el Snap para ver tu balance, estado de POH, y activaciones de LXP activas."
+  },
   "noAddress": {
     "toSetText": "Para ver tu balance de LXP y estado de POH,",
     "toSetLink": "primero ingresa tu cuenta"
   },
   "help": "Es posible que LXP obtenido en activaciones no llegue a su cuenta hasta que se complete la activación.",
   "viewBalance": "Ve tu balance de LXP en Lineascan",
   "completePOH": "Verfica tu estado de POH",
-  "exploreAll": "Explora todas las activaciones"
+  "exploreAll": "Explora todas las activaciones",
+  "errors": { 
+    "heading": "Error",
+    "invalidLxpAddress": "{address} no es una cuenta valido. Por favor, inténtelo de nuevo más tarde."
+  }
 }

packages/snap/locales/fr.json

@@ -15,15 +15,23 @@
     "one": "Il y a {count} activation LXP active"
   },
   "lxpAddress": {
-    "heading": "fr-LXP wallet address",
+    "heading": "fr-Linea XP wallet address",
     "prompt": "fr-Please enter the wallet address linked to your LXP"
   },
+  "nextSteps": { 
+    "heading": "fr-Thank you for installing the LXP Snap",
+    "body": "fr-Next, set your address with the [companion site](https://lxp-snap.linea.build/) to track your Linea XP balance. At any time you can open the Snaps menu and click on LXP to view your balance, Proof of Humanity status, and current activations."
+  },
   "noAddress": {
     "toSetText": "fr-To view your LXP balance and POH status,",
     "toSetLink": "fr-first set your address"
   },
   "help": "fr-LXP earned in activations may not arrive in your wallet until the activation is complete.",
   "viewBalance": "fr-View balance on Lineascan",
   "completePOH": "fr-Complete Proof of Humanity",
-  "exploreAll": "fr-Explore All Linea Activations"
+  "exploreAll": "fr-Explore All Linea Activations",
+  "errors": { 
+    "heading": "fr-Error",
+    "invalidLxpAddress": "fr-{address} is not a valid address. Please try again."
+  }
 }

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/Consensys/lxp-snap"
   },
   "source": {
-    "shasum": "UoOlIKigX7EpEbieg+P2xZDlsiq2m64xQSWSjVQEk2o=",
+    "shasum": "J7CKoYhgYm7nmRgfcnLRzWRRcavzXQvpyUlJ+oA/AlI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/index.ts

@@ -12,42 +12,35 @@ import {
   getPohStatus,
   registerAddress,
 } from './service';
-import { renderMainUi, renderPromptLxpAddress } from './ui';
+import { renderMainUi, renderPromptLxpAddress, renderPromptLxpAddressError, renderPromptNextSteps } from './ui';
 import { getChainId, getState, loadCaptions, setState } from './utils';
 
 export const onInstall: OnInstallHandler = async () => {
   await loadCaptions(true);
-  const lxpAddress = await snap.request({
+  await snap.request({
     method: 'snap_dialog',
-    params: await renderPromptLxpAddress(),
+    params: await renderPromptNextSteps(),
   });
-
-  if (lxpAddress) {
-    const lxpAddressStr = lxpAddress as `0x${string}`;
-    if (isValidHexAddress(lxpAddressStr)) {
-      await setState({
-        lxpAddress: lxpAddressStr,
-      });
-    } else {
-      console.error(`${lxpAddressStr} is not a valid address`);
-    }
-  }
 };
 
 export const onUpdate: OnUpdateHandler = async () => {
   await loadCaptions(true);
 };
 
 export const onHomePage: OnHomePageHandler = async () => {
-  await loadCaptions(true);
-  const chainId = await getChainId();
-  const snapState = await getState();
+  await loadCaptions();
+
+  /* make calls in parallel */ 
+  const [chainId, snapState] = await Promise.all([getChainId(), getState()]); 
+
   const myAccount = snapState.lxpAddress as string;
-  const myLxpBalance = myAccount
-    ? await getLxpBalanceForAddress(myAccount, chainId)
-    : 0;
-  const myPohStatus = myAccount ? await getPohStatus(myAccount) : false;
-  const activations = await getCurrentActivations();
+
+  /* make calls in parallel */
+  const [myLxpBalance, myPohStatus, activations] = await Promise.all([
+    getLxpBalanceForAddress(myAccount, chainId),
+    getPohStatus(myAccount),
+    getCurrentActivations(),
+  ]); 
 
   await setState({
     myLxpBalance,
@@ -90,6 +83,28 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
       return registerAddress(signature, payload);
     }
 
+    case 'watchLxpAddress': { 
+      await loadCaptions();
+      const lxpAddress = await snap.request({
+        method: 'snap_dialog',
+        params: await renderPromptLxpAddress(),
+      });
+
+      if (lxpAddress) {
+        const lxpAddressStr = lxpAddress as `0x${string}`;
+        if (isValidHexAddress(lxpAddressStr)) {
+          await setState({
+            lxpAddress: lxpAddressStr,
+          });
+        } else {
+          await snap.request({
+            method: 'snap_dialog',
+            params: await renderPromptLxpAddressError(lxpAddressStr),
+          });
+        }
+      }
+    }
+
     default:
       throw new Error('Method not found.');
   }

packages/snap/src/types/index.ts

@@ -20,6 +20,10 @@ export type Captions = {
     heading: string;
     prompt: string;
   };
+  nextSteps: {
+    heading: string;
+    body: string;
+  };
   noAddress: {
     toSetText: string;
     toSetLink: string;
@@ -28,6 +32,10 @@ export type Captions = {
   viewBalance: string;
   completePOH: string;
   exploreAll: string;
+  errors: { 
+    heading: string,
+    invalidLxpAddress: string; 
+  };
 };
 
 export type Tag = {

packages/snap/src/ui.ts

@@ -11,6 +11,7 @@ import {
 
 import banner from '../img/banner.svg';
 import { getState, truncateString } from './utils';
+import { error } from '@metamask/snaps-cli/dist/types/utils';
 
 /**
  * Render the main UI.
@@ -94,8 +95,8 @@ export async function renderMainUi(myAccount: string) {
 }
 
 /**
- * Render the UI in the onInstall hook.
- * @returns DialogParams UI for onInstall.
+ * Render the UI in the onRpcRequest for setting a watch address.
+ * @returns DialogParams UI for onRpcRequest dialog.
  */
 export async function renderPromptLxpAddress() {
   const snapState = await getState();
@@ -110,3 +111,39 @@ export async function renderPromptLxpAddress() {
     placeholder: '0x123...',
   } as DialogParams;
 }
+
+/**
+ * Render the UI in the onInstall hook.
+ * @returns DialogParams UI for onInstall. 
+ */
+export async function renderPromptNextSteps() {
+  const snapState = await getState();
+  const captions = snapState?.captions;
+
+  return {
+    type: 'alert',
+    content: panel([
+      heading(captions?.nextSteps.heading as string),
+      text(captions?.nextSteps.body as string),
+    ]),
+  } as DialogParams;
+}
+
+/**
+ * Render the UI in the onRpcRequest for setting a watch address when an invalid address is provided.
+ * @returns DialogParams UI for onRpcRequest error dialog.
+ */
+export async function renderPromptLxpAddressError(lxpAddressStr:string) {
+  const snapState = await getState();
+  const captions = snapState?.captions;
+
+  const errorMsg = captions?.errors.invalidLxpAddress.replace('{address}', lxpAddressStr); 
+
+  return {
+    type: 'alert',
+    content: panel([
+      heading(captions?.errors.heading as string),
+      text(errorMsg),
+    ]),
+  } as DialogParams;
+}

packages/snap/src/utils.ts

@@ -46,12 +46,13 @@ export async function setState(state: SnapState): Promise<void> {
  * @returns The current chain ID.
  */
 export async function getChainId() {
-  const chainId = await ethereum.request<string>({
+  let chainId = await ethereum.request<string>({
     method: 'eth_chainId',
   });
 
   if (!chainId) {
-    throw new Error('Something went wrong while getting the chain ID.');
+    console.error('Something went wrong while getting the chain ID.');
+    chainId = '1'; 
   }
 
   return chainId;