Handle breaking changes

README.md

@@ -76,9 +76,3 @@ The project follows the same release process as the other libraries in the MetaM
 
 - Babel is used for transpiling TypeScript to JavaScript, so when building with the CLI,
   `transpilationMode` must be set to `localOnly` (default) or `localAndDeps`.
-- For the global `wallet` type to work, you have to add the following to your `tsconfig.json`:
-  ```json
-  {
-    "files": ["./node_modules/@metamask/snap-types/global.d.ts"]
-  }
-  ```

packages/site/src/utils/snap.ts

@@ -23,16 +23,10 @@ export const connectSnap = async (
   params: Record<'version' | string, unknown> = {},
 ) => {
   await window.ethereum.request({
-    method: 'wallet_enable',
-    params: [
-      {
-        wallet_snap: {
-          [snapId]: {
-            ...params,
-          },
-        },
-      },
-    ],
+    method: 'wallet_requestSnaps',
+    params: {
+      [snapId]: params,
+    },
   });
 };
 
@@ -63,12 +57,7 @@ export const getSnap = async (version?: string): Promise<Snap | undefined> => {
 export const sendHello = async () => {
   await window.ethereum.request({
     method: 'wallet_invokeSnap',
-    params: [
-      defaultSnapOrigin,
-      {
-        method: 'hello',
-      },
-    ],
+    params: { snapId: defaultSnapOrigin, request: { method: 'hello' } },
   });
 };
 

packages/site/tsconfig.json

@@ -7,6 +7,5 @@
     "noEmit": true,
     "jsx": "preserve"
   },
-  "files": ["../../node_modules/@metamask/snap-types/global.d.ts"],
   "include": ["src"]
 }

packages/snap/README.md

@@ -6,9 +6,3 @@ This Snap demonstrates how to develop a Snap with TypeScript.
 
 - Babel is used for transpiling TypeScript to JavaScript, so when building with the CLI,
   `transpilationMode` must be set to `localOnly` (default) or `localAndDeps`.
-- For the global `wallet` type to work, you have to add the following to your `tsconfig.json`:
-  ```json
-  {
-    "files": ["./node_modules/@metamask/snap-types/global.d.ts"]
-  }
-  ```

packages/snap/package.json

@@ -33,8 +33,9 @@
     "@metamask/eslint-config-jest": "^10.0.0",
     "@metamask/eslint-config-nodejs": "^10.0.0",
     "@metamask/eslint-config-typescript": "^10.0.0",
-    "@metamask/snap-types": "^0.22.0",
-    "@metamask/snaps-cli": "^0.22.0",
+    "@metamask/snaps-cli": "^0.27.1",
+    "@metamask/snaps-types": "^0.27.1",
+    "@metamask/snaps-ui": "^0.27.1",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "eslint": "^8.21.0",

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/template-snap-monorepo.git"
   },
   "source": {
-    "shasum": "naL9tJT7QHAFER/TGfTcjwUFZUMhrsWY5f8XqX28M/g=",
+    "shasum": "IgmLa9j7q8fAStRzmp9l/r1to0jAA9TxWRQjf3ghA+Y=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
@@ -18,7 +18,11 @@
     }
   },
   "initialPermissions": {
-    "snap_confirm": {}
+    "snap_dialog": {},
+    "endowment:rpc": {
+      "dapps": true,
+      "snaps": false
+    }
   },
   "manifestVersion": "0.1"
 }

packages/snap/src/index.ts

@@ -1,13 +1,5 @@
-import { OnRpcRequestHandler } from '@metamask/snap-types';
-
-/**
- * Get a message from the origin. For demonstration purposes only.
- *
- * @param originString - The origin string.
- * @returns A message based on the origin.
- */
-export const getMessage = (originString: string): string =>
-  `Hello, ${originString}!`;
+import { OnRpcRequestHandler } from '@metamask/snaps-types';
+import { panel, text } from '@metamask/snaps-ui';
 
 /**
  * Handle incoming JSON-RPC requests, sent through `wallet_invokeSnap`.
@@ -16,24 +8,24 @@ export const getMessage = (originString: string): string =>
  * @param args.origin - The origin of the request, e.g., the website that
  * invoked the snap.
  * @param args.request - A validated JSON-RPC request object.
- * @returns `null` if the request succeeded.
+ * @returns The result of `snap_dialog`.
  * @throws If the request method is not valid for this snap.
- * @throws If the `snap_confirm` call failed.
  */
 export const onRpcRequest: OnRpcRequestHandler = ({ origin, request }) => {
   switch (request.method) {
     case 'hello':
-      return wallet.request({
-        method: 'snap_confirm',
-        params: [
-          {
-            prompt: getMessage(origin),
-            description:
-              'This custom confirmation is just for display purposes.',
-            textAreaContent:
+      return snap.request({
+        method: 'snap_dialog',
+        params: {
+          type: 'Confirmation',
+          content: panel([
+            text(`Hello, **${origin}**!`),
+            text('This custom confirmation is just for display purposes.'),
+            text(
               'But you can edit the snap source code to make it do something, if you want to!',
-          },
-        ],
+            ),
+          ]),
+        },
       });
     default:
       throw new Error('Method not found.');

packages/snap/tsconfig.json

@@ -1,5 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "files": ["../../node_modules/@metamask/snap-types/global.d.ts"],
   "include": ["src"]
 }