feat: updated demo dapp playground (#743)

* feat: update dapp demo to latest sdk * feat: use node16 for compatibility with metamask-tokens * feat: gh pages deployments automation * chore: cleanup
MetaMask · Mar 7, 2024 · 528e4ef · 528e4ef
1 parent cbd0d63
commit 528e4ef
Show file tree

Hide file tree

Showing 9 changed files with 2,962 additions and 3,461 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -36,19 +36,6 @@ jobs:
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
         force_orphan: true
+        keep_files: true  # Important to keep the rest of the files deployed previously
         publish_dir: ./deployments
 
-    # Prepare index.html in a separate directory to deploy it to the root
-    - name: Prepare index.html
-      run: |
-        mkdir ./root-deploy
-        cp index.html ./root-deploy/
-
-    # Second Deployment - Deploy index.html to root
-    - name: Deploy index.html to GitHub Pages Root
-      uses: peaceiris/actions-gh-pages@068dc23d9710f1ba62e86896f84735d869951305
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        force_orphan: true  # Be cautious with force_orphan to not overwrite your previous deployment
-        publish_dir: ./root-deploy
-        keep_files: true  # Important to keep the rest of the files deployed in the first step
diff --git a/deployments/dapps/sdk-playground/Dockerfile b/deployments/dapps/sdk-playground/Dockerfile
@@ -1,5 +1,5 @@
 # Use the official Node.js 18 image as a parent image
-FROM node:18-alpine
+FROM node:16-alpine
 
 # Set the working directory inside the container
 WORKDIR /app

diff --git a/deployments/dapps/sdk-playground/craco.config.js b/deployments/dapps/sdk-playground/craco.config.js
@@ -31,6 +31,11 @@ module.exports = {
         ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
       );
 
+      webpackConfig.plugins.push(
+        new webpack.ProvidePlugin({
+          process: 'process/browser',
+        })
+      );
       // Inject __DEV__ which is required by some modules
       webpackConfig.plugins.push(
         new webpack.DefinePlugin({
@@ -42,6 +47,7 @@ module.exports = {
         ...webpackConfig.resolve,
         alias: {
           ...webpackConfig.resolve.alias,
+          process: "process/browser",
           'react': require.resolve('react'),
           // 'react-dom': require.resolve('react-dom'),
           'react-native$': require.resolve('react-native-web'),
@@ -52,7 +58,8 @@ module.exports = {
         },
         fallback: {
           "crypto": require.resolve("crypto-browserify"),
-          "stream": require.resolve("stream-browserify")
+          "stream": require.resolve("stream-browserify"),
+          "vm": require.resolve("vm-browserify"),
         },
       };
       webpackConfig.module.rules.push(
@@ -91,6 +98,6 @@ module.exports = {
         includes: packagesToTranspile,
         excludes: [/node_modules/],
       }
-    }
+    },
   ]
 };
diff --git a/deployments/dapps/sdk-playground/package.json b/deployments/dapps/sdk-playground/package.json
@@ -1,16 +1,16 @@
 {
   "name": "sdk-playground",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "private": true,
   "homepage": "./",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@metamask/sdk": "^0.14.1",
+    "@metamask/sdk": "^0.16.0",
     "@metamask/sdk-lab": "^0.1.5",
-    "@metamask/sdk-react": "^0.14.1",
-    "@metamask/sdk-ui": "^0.1.6",
+    "@metamask/sdk-react": "^0.16.0",
+    "@metamask/sdk-ui": "^0.3.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -20,6 +20,7 @@
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.0",
     "next-qrcode": "^2.5.1",
+    "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-device-info": "^10.11.0",
@@ -35,6 +36,7 @@
     "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
     "stream-browserify": "^3.0.0",
+    "vm-browserify": "^1.1.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/deployments/dapps/sdk-playground/src/index.tsx b/deployments/dapps/sdk-playground/src/index.tsx
@@ -119,6 +119,7 @@ root.render(
             onHomePress={() => {
               router.navigate('/');
             }}
+            options={{ showQRCode: true }}
           />
           <RouterProvider router={router} />
         </UIProvider>

diff --git a/deployments/dapps/sdk-playground/src/pages/demo.tsx b/deployments/dapps/sdk-playground/src/pages/demo.tsx
@@ -57,6 +57,31 @@ export const Demo = () => {
     }
   };
 
+  const walletRequest = async () => {
+    try {
+      setRpcError(null);
+      setRequesting(true);
+      setResponse('');
+
+      const hexResponse = await provider?.request({
+        method: 'wallet_requestPermissions',
+        params: [
+          {
+            eth_accounts: {},
+          },
+        ],
+      });
+      // const accounts = window.ethereum?.request({method: 'eth_requestAccounts', params: []});
+      console.debug(`wallet_requestPermissions response:`, hexResponse);
+      setResponse(hexResponse);
+    } catch (err) {
+      console.log('wallet_requestPermissions ERR', err);
+      setRpcError(err);
+    } finally {
+      setRequesting(false);
+    }
+  };
+
   const readOnlyCalls = async () => {
     if (!sdk?.hasReadOnlyRPCCalls() && !provider) {
       setResponse(
@@ -421,6 +446,14 @@ export const Demo = () => {
               Request Accounts
             </button>
 
+            <button
+              className={'Button-Normal'}
+              style={{ padding: 10, margin: 10 }}
+              onClick={walletRequest}
+            >
+              wallet_requestPermissions
+            </button>
+
             <button
               className={'Button-Normal'}
               style={{ padding: 10, margin: 10 }}