feat: new popups and snaps 0.28.0 (#131)

* fix: update SnapConfirm * fix: add prompt to setVCStore * fix: tests & friendly dApps * fix: queryVCs confirmation * fix: changes panel for VP creation * chore: small fix * fix: confirmation text --------- Co-authored-by: martines3000 <domajnko.martin@gmail.com>
blockchain-lab-um · Mar 20, 2023 · aae6312 · aae6312
1 parent 8f4dab8
commit aae6312
Show file tree

Hide file tree

Showing 21 changed files with 313 additions and 243 deletions.
diff --git a/packages/snap/package.json b/packages/snap/package.json
@@ -61,6 +61,7 @@
     "@metamask/key-tree": "^6.0.0",
     "@metamask/providers": "10.2.1",
     "@metamask/snaps-types": "^0.27.1",
+    "@metamask/snaps-ui": "^0.27.1",
     "@types/uuid": "^9.0.1",
     "@veramo/core": "5.0.0",
     "@veramo/credential-eip712": "5.0.0",

diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/blockchain-lab-um/ssi-snap.git"
   },
   "source": {
-    "shasum": "G298n15J/o5OYCTwpitWR2cSqr8jqgL5OFCCwe5UvlI=",
+    "shasum": "AhLf1Wq0oWwRzu4BZ1i5ggojPKV9EtGvp5QRfaqaQ8E=",
     "location": {
       "npm": {
         "filePath": "dist/snap.js",

diff --git a/packages/snap/src/did/key/keyDidResolver.ts b/packages/snap/src/did/key/keyDidResolver.ts
@@ -22,6 +22,7 @@ export const resolveSecp256k1 = async (
     state,
     account,
     ethereum,
+    origin: '',
   });
 
   // TODO: Change id ?

diff --git a/packages/snap/src/index.ts b/packages/snap/src/index.ts
@@ -34,6 +34,7 @@ import {
 
 export const onRpcRequest: OnRpcRequestHandler = async ({
   request,
+  origin,
 }): Promise<Result<unknown>> => {
   try {
     let state = await getSnapStateUnchecked(snap);
@@ -46,6 +47,7 @@ export const onRpcRequest: OnRpcRequestHandler = async ({
       snap,
       ethereum,
       account,
+      origin,
     };
 
     if (!(account in state.accountState)) {

diff --git a/packages/snap/src/interfaces.ts b/packages/snap/src/interfaces.ts
@@ -72,4 +72,5 @@ export interface ApiParams {
   ethereum: MetaMaskInpageProvider;
   account: string;
   bip44CoinTypeNode?: BIP44CoinTypeNode;
+  origin: string;
 }
diff --git a/packages/snap/src/rpc/did/switchMethod.ts b/packages/snap/src/rpc/did/switchMethod.ts
@@ -1,4 +1,5 @@
 import { SwitchMethodRequestParams } from '@blockchain-lab-um/ssi-snap-types';
+import { divider, heading, panel, text } from '@metamask/snaps-ui';
 
 import { ApiParams } from '../../interfaces';
 import { changeCurrentMethod } from '../../utils/didUtils';
@@ -11,13 +12,14 @@ export async function switchMethod(
   const { state, snap, ethereum, account } = params;
   const method = state.accountState[account].accountConfig.ssi.didMethod;
   if (didMethod !== method) {
-    const promptObj = {
-      prompt: 'Change DID method',
-      description: 'Would you like to change did method to the following?',
-      textAreaContent: didMethod,
-    };
+    const content = panel([
+      heading('Switch Method'),
+      text('Would you like to switch your DID method?'),
+      divider(),
+      text(`Switching to: ${didMethod}`),
+    ]);
 
-    if (snapConfirm(snap, promptObj)) {
+    if (await snapConfirm(snap, content)) {
       const res = await changeCurrentMethod(
         snap,
         ethereum,
@@ -28,7 +30,8 @@ export async function switchMethod(
       return res;
     }
 
-    return '';
+    throw new Error('User rejected method switch');
   }
-  return '';
+
+  throw new Error('Method already set');
 }
diff --git a/packages/snap/src/rpc/snap/configure.ts b/packages/snap/src/rpc/snap/configure.ts
@@ -1,3 +1,5 @@
+import { divider, heading, panel, text } from '@metamask/snaps-ui';
+
 import { ApiParams } from '../../interfaces';
 import {
   snapConfirm,
@@ -8,17 +10,18 @@ export async function togglePopups(params: ApiParams): Promise<boolean> {
   const { state, snap } = params;
   const { disablePopups } = state.snapConfig.dApp;
 
-  const promptObj = {
-    prompt: 'Toggle Popups',
-    description: 'Would you like to toggle the popups to following?',
-    textAreaContent: disablePopups
-      ? 'Current setting: True\nNew setting: False'
-      : 'Current setting: False\nNew setting: True',
-  };
-  const result = disablePopups || snapConfirm(snap, promptObj);
+  const content = panel([
+    heading('Disable Popups'),
+    text('Would you like to disable popups?'),
+    divider(),
+    text('If popups are disabled, you will see less confirmation popups'),
+  ]);
+
+  const result = disablePopups || (await snapConfirm(snap, content));
   if (result) {
     await updatePopups(snap, state);
     return true;
   }
-  return false;
+
+  throw new Error('User rejected disabling popups');
 }
diff --git a/packages/snap/src/rpc/vc/createVP.ts b/packages/snap/src/rpc/vc/createVP.ts
@@ -7,7 +7,7 @@ import { veramoCreateVP } from '../../utils/veramoUtils';
 export async function createVP(
   params: ApiParams,
   createVPParams: CreateVPRequestParams
-): Promise<VerifiablePresentation | null> {
+): Promise<VerifiablePresentation> {
   const { vcs, proofFormat = 'jwt', proofOptions } = createVPParams;
   const res = await veramoCreateVP(params, { vcs, proofFormat, proofOptions });
   return res;

diff --git a/packages/snap/src/rpc/vc/deleteVC.ts b/packages/snap/src/rpc/vc/deleteVC.ts
@@ -1,8 +1,9 @@
 import { DeleteVCsRequestParams } from '@blockchain-lab-um/ssi-snap-types';
+import { divider, heading, panel, text } from '@metamask/snaps-ui';
 
 import { ApiParams } from '../../interfaces';
 import { snapConfirm } from '../../utils/snapUtils';
-import { veramoDeleteVC } from '../../utils/veramoUtils';
+import { veramoDeleteVC, veramoQueryVCs } from '../../utils/veramoUtils';
 
 export async function deleteVC(
   params: ApiParams,
@@ -11,13 +12,28 @@ export async function deleteVC(
   const { id, options } = args || {};
   const { snap, ethereum } = params;
   const store = options?.store;
-  const promptObj = {
-    prompt: 'Delete VC',
-    description: `Would you like to delete the following VC?`,
-    textAreaContent: `Content`,
-  };
 
-  if (snapConfirm(snap, promptObj)) {
+  const vcs = await veramoQueryVCs({
+    snap,
+    ethereum,
+    options: { store },
+    filter: { type: 'id', filter: id },
+  });
+
+  let stores = 'All';
+  if (store) {
+    if (typeof store === 'string') stores = store;
+    else stores = store.join(', ');
+  }
+  const content = panel([
+    heading('Delete VC'),
+    text('Are you sure you want to delete this VC?'),
+    divider(),
+    text(`Store: ${stores}`),
+    text(`VCs: ${JSON.stringify(vcs, null, 2)}`),
+  ]);
+
+  if (await snapConfirm(snap, content)) {
     const res = await veramoDeleteVC({
       snap,
       ethereum,

diff --git a/packages/snap/src/rpc/vc/queryVCs.ts b/packages/snap/src/rpc/vc/queryVCs.ts
@@ -2,9 +2,10 @@ import {
   QueryVCsRequestParams,
   QueryVCsRequestResult,
 } from '@blockchain-lab-um/ssi-snap-types';
+import { divider, heading, panel, text } from '@metamask/snaps-ui';
 
 import { ApiParams } from '../../interfaces';
-import { snapConfirm } from '../../utils/snapUtils';
+import { addFriendlyDapp, snapConfirm } from '../../utils/snapUtils';
 import { veramoQueryVCs } from '../../utils/veramoUtils';
 
 export async function queryVCs(
@@ -13,7 +14,7 @@ export async function queryVCs(
 ): Promise<QueryVCsRequestResult[]> {
   const { filter, options } = args || {};
   const { store, returnStore = true } = options || {};
-  const { state, snap, ethereum } = params;
+  const { state, snap, ethereum, origin } = params;
 
   const vcs = await veramoQueryVCs({
     snap,
@@ -22,13 +23,21 @@ export async function queryVCs(
     filter,
   });
 
-  const promptObj = {
-    prompt: 'Send VCs',
-    description: 'Are you sure you want to send VCs to the dApp?',
-    textAreaContent: `Some dApps are less secure than others and could save data from VCs against your will. Be careful where you send your private VCs! Number of VCs submitted is ${vcs.length.toString()}`,
-  };
+  const content = panel([
+    heading('Share VCs'),
+    text('Are you sure you want to share VCs with this dApp?'),
+    divider(),
+    text(
+      `Some dApps are less secure than others and could save data from VCs against your will. Be careful where you send your VCs! Number of VCs submitted is ${vcs.length.toString()}`
+    ),
+    text('This popup will not appear again for this dApp.'),
+  ]);
 
-  if (state.snapConfig.dApp.disablePopups || snapConfirm(snap, promptObj)) {
+  if (
+    state.snapConfig.dApp.friendlyDapps.includes(origin) ||
+    (await snapConfirm(snap, content))
+  ) {
+    await addFriendlyDapp(snap, state, origin);
     return vcs;
   }
 

diff --git a/packages/snap/src/rpc/vc/saveVC.ts b/packages/snap/src/rpc/vc/saveVC.ts
@@ -1,5 +1,6 @@
 import { SaveVCRequestParams } from '@blockchain-lab-um/ssi-snap-types';
 import { IDataManagerSaveResult } from '@blockchain-lab-um/veramo-vc-manager';
+import { copyable, divider, heading, panel, text } from '@metamask/snaps-ui';
 
 import { ApiParams } from '../../interfaces';
 import { snapConfirm } from '../../utils/snapUtils';
@@ -11,15 +12,17 @@ export async function saveVC(
 ): Promise<IDataManagerSaveResult[]> {
   const { store = 'snap' } = options || {};
   const { snap, ethereum } = params;
-  const promptObj = {
-    prompt: 'Save VC',
-    description: `Would you like to save the following VC in ${
-      typeof store === 'string' ? store : store.join(', ')
-    }?`,
-    textAreaContent: JSON.stringify(verifiableCredential).substring(0, 100),
-  };
 
-  if (snapConfirm(snap, promptObj)) {
+  const content = panel([
+    heading('Save VC'),
+    text('Would you like to save following VC?'),
+    divider(),
+    text(`Store(s): ${typeof store === 'string' ? store : store.join(', ')}`),
+    text(`VC:`),
+    copyable(JSON.stringify(verifiableCredential, null, 2)),
+  ]);
+
+  if (await snapConfirm(snap, content)) {
     const res = await veramoSaveVC({
       snap,
       ethereum,

diff --git a/packages/snap/src/rpc/vcStore/setVCStore.ts b/packages/snap/src/rpc/vcStore/setVCStore.ts
@@ -1,4 +1,5 @@
 import { SetVCStoreRequestParams } from '@blockchain-lab-um/ssi-snap-types';
+import { heading, panel, text } from '@metamask/snaps-ui';
 
 import { ApiParams } from '../../interfaces';
 import { snapConfirm } from '../../utils/snapUtils';
@@ -10,14 +11,11 @@ export async function setVCStore(
 ): Promise<boolean> {
   const { state, snap, account } = params;
   if (store !== 'snap') {
-    const promptObj = {
-      prompt: 'Change vcStore plugin',
-      description: `Would you like to ${
-        value ? 'enable' : 'disable'
-      } ${store} vcStore plugin?`,
-      textAreaContent: `Content`,
-    };
-    if (snapConfirm(snap, promptObj)) {
+    const content = panel([
+      heading('Manage VCStore Plugin'),
+      text(`Would you like to ${value ? 'enable' : 'disable'} ${store}?`),
+    ]);
+    if (await snapConfirm(snap, content)) {
       state.accountState[account].accountConfig.ssi.vcStore[store] = value;
       await updateSnapState(snap, state);
       return true;

diff --git a/packages/snap/src/utils/didUtils.ts b/packages/snap/src/utils/didUtils.ts
@@ -52,14 +52,11 @@ export async function changeCurrentMethod(
   account: string,
   didMethod: AvailableMethods
 ): Promise<string> {
-  if (state.accountState[account].accountConfig.ssi.didMethod !== didMethod) {
-    // eslint-disable-next-line no-param-reassign
-    state.accountState[account].accountConfig.ssi.didMethod = didMethod;
-    await updateSnapState(snap, state);
-    const did = await getCurrentDid(ethereum, state, account);
-    return did;
-  }
-  return '';
+  // eslint-disable-next-line no-param-reassign
+  state.accountState[account].accountConfig.ssi.didMethod = didMethod;
+  await updateSnapState(snap, state);
+  const did = await getCurrentDid(ethereum, state, account);
+  return did;
 }
 
 export async function resolveDid(did: string): Promise<DIDResolutionResult> {

diff --git a/packages/snap/src/utils/snapUtils.ts b/packages/snap/src/utils/snapUtils.ts
@@ -4,9 +4,10 @@ import { AvailableVCStores } from '@blockchain-lab-um/ssi-snap-types';
 import { BIP44CoinTypeNode } from '@metamask/key-tree';
 import { MetaMaskInpageProvider } from '@metamask/providers';
 import { SnapsGlobalObject } from '@metamask/snaps-types';
+import { Component } from '@metamask/snaps-ui';
 import { publicKeyConvert } from 'secp256k1';
 
-import { ApiParams, SSISnapState, SnapConfirmParams } from '../interfaces';
+import { ApiParams, SSISnapState } from '../interfaces';
 import { snapGetKeysFromAddress } from './keyPair';
 import { updateSnapState } from './stateUtils';
 
@@ -78,6 +79,7 @@ export async function addFriendlyDapp(
   state: SSISnapState,
   dapp: string
 ) {
+  if (state.snapConfig.dApp.friendlyDapps.includes(dapp)) return;
   state.snapConfig.dApp.friendlyDapps.push(dapp);
   await updateSnapState(snap, state);
 }
@@ -139,22 +141,18 @@ export function getCompressedPublicKey(publicKey: string): string {
   );
 }
 
-export function snapConfirm(
+export async function snapConfirm(
   snap: SnapsGlobalObject,
-  params: SnapConfirmParams
-): boolean {
-  // return (await snap.request({
-  //   method: 'snap_dialog',
-  //   params: {
-  //     type: 'Confirmation',
-  //     fields: {
-  //       title: params.prompt,
-  //       description: params.description,
-  //       textAreaContent: params.textAreaContent,
-  //     },
-  //   },
-  // })) as boolean;
-  return true;
+  content: Component
+): Promise<boolean> {
+  const res = await snap.request({
+    method: 'snap_dialog',
+    params: {
+      type: 'Confirmation',
+      content,
+    },
+  });
+  return res as boolean;
 }
 
 export function getEnabledVCStores(