Chore/update example dapps (#431)

* chore: updates the create-react-app example * chore: updates the create-react-app example * chore: updates the vuejs example dapp * chore: updates the nextjs example dapp * chore: updates the nodejs example * chore: updates the electronjs example * chore: changing wording for chain switch
MetaMask · Oct 25, 2023 · 0c29a93 · 0c29a93
1 parent 023fa52
commit 0c29a93
Show file tree

Hide file tree

Showing 18 changed files with 1,114 additions and 693 deletions.
diff --git a/packages/examples/create-react-app/package.json b/packages/examples/create-react-app/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@metamask/sdk-react": "^0.10.0",
+    "@metamask/sdk-react": "^0.10.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/packages/examples/create-react-app/src/App.css b/packages/examples/create-react-app/src/App.css
@@ -7,6 +7,36 @@
   pointer-events: none;
 }
 
+.Button-Normal {
+  background-color: blueviolet;
+  border: 1px solid blueviolet;
+  color: white;
+  border-radius: 5px;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.Button-Danger {
+  background-color: red;
+  border-color: red;
+  color: white;
+  border-radius: 5px;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.Info-Status {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2rem;
+  border-radius: 5px;
+  border: 1px solid blueviolet;
+  background-color: aliceblue;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;

diff --git a/packages/examples/create-react-app/src/App.tsx b/packages/examples/create-react-app/src/App.tsx
@@ -1,6 +1,7 @@
 import { useSDK } from '@metamask/sdk-react';
 import React, { useState } from 'react';
 import './App.css';
+import { send_eth_signTypedData_v4, send_personal_sign } from './SignHelpers';
 
 export const App = () => {
   const [response, setResponse] = useState<unknown>('');
@@ -27,6 +28,17 @@ export const App = () => {
     });
   };
 
+  const connectAndSign = async () => {
+    try {
+      const signResult = await sdk?.connectAndSign({
+        msg: 'Connect + Sign message'
+      });
+      setResponse(signResult);
+    } catch (err) {
+      console.warn(`failed to connect..`, err);
+    }
+  };
+
   const connect = async () => {
     try {
       await sdk?.connect();
@@ -35,6 +47,24 @@ export const App = () => {
     }
   };
 
+  const readOnlyCalls = async () => {
+     if(!sdk?.hasReadOnlyRPCCalls() && !provider){
+         setResponse('readOnlyCalls are not set and provider is not set. Please set your infuraAPIKey in the SDK Options');
+         return;
+     }
+     try {
+       const result = await provider.request({
+         method: 'eth_blockNumber',
+         params: [],
+       });
+       const gotFrom = sdk.hasReadOnlyRPCCalls() ? 'infura' : 'MetaMask provider';
+       setResponse(`(${gotFrom}) ${result}`);
+     } catch (e) {
+       console.log(`error getting the blockNumber`, e);
+       setResponse('error getting the blockNumber');
+     }
+  };
+
   const addEthereumChain = () => {
     if (!provider) {
       throw new Error(`invalid ethereum provider`);
@@ -79,96 +109,22 @@ export const App = () => {
     }
   };
 
-  const sign = async () => {
-    const msgParams = JSON.stringify({
-      domain: {
-        // Defining the chain aka Rinkeby testnet or Ethereum Main Net
-        chainId: parseInt(provider?.chainId ?? '', 16),
-        // Give a user friendly name to the specific contract you are signing for.
-        name: 'Ether Mail',
-        // If name isn't enough add verifying contract to make sure you are establishing contracts with the proper entity
-        verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
-        // Just let's you know the latest version. Definitely make sure the field name is correct.
-        version: '1',
-      },
-
-      // Defining the message signing data content.
-      message: {
-        /*
-         - Anything you want. Just a JSON Blob that encodes the data you want to send
-         - No required fields
-         - This is DApp Specific
-         - Be as explicit as possible when building out the message schema.
-        */
-        contents: 'Hello, Bob!',
-        attachedMoneyInEth: 4.2,
-        from: {
-          name: 'Cow',
-          wallets: [
-            '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
-            '0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF',
-          ],
-        },
-        to: [
-          {
-            name: 'Bob',
-            wallets: [
-              '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
-              '0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57',
-              '0xB0B0b0b0b0b0B000000000000000000000000000',
-            ],
-          },
-        ],
-      },
-      // Refers to the keys of the *types* object below.
-      primaryType: 'Mail',
-      types: {
-        // TODO: Clarify if EIP712Domain refers to the domain the contract is hosted on
-        EIP712Domain: [
-          { name: 'name', type: 'string' },
-          { name: 'version', type: 'string' },
-          { name: 'chainId', type: 'uint256' },
-          { name: 'verifyingContract', type: 'address' },
-        ],
-        // Not an EIP712Domain definition
-        Group: [
-          { name: 'name', type: 'string' },
-          { name: 'members', type: 'Person[]' },
-        ],
-        // Refer to PrimaryType
-        Mail: [
-          { name: 'from', type: 'Person' },
-          { name: 'to', type: 'Person[]' },
-          { name: 'contents', type: 'string' },
-        ],
-        // Not an EIP712Domain definition
-        Person: [
-          { name: 'name', type: 'string' },
-          { name: 'wallets', type: 'address[]' },
-        ],
-      },
-    });
-
-    let from = provider?.selectedAddress;
-
-    console.debug(`sign from: ${from}`);
-    try {
-      if (!from || from === null) {
-        alert(
-          `Invalid account -- please connect using eth_requestAccounts first`,
-        );
-        return;
-      }
+  const eth_signTypedData_v4 = async () => {
+    if (!provider) {
+      setResponse(`invalid ethereum provider`);
+      return;
+    }
+    const result = await send_eth_signTypedData_v4(provider, provider.chainId);
+    setResponse(result);
+  };
 
-      const params = [from, msgParams];
-      const method = 'eth_signTypedData_v4';
-      console.debug(`ethRequest ${method}`, JSON.stringify(params, null, 4));
-      console.debug(`sign params`, params);
-      const resp = await provider?.request({ method, params });
-      setResponse(resp);
-    } catch (e) {
-      console.log(e);
+  const eth_personal_sign = async () => {
+    if (!provider) {
+      setResponse(`invalid ethereum provider`);
+      return;
     }
+    const result = await send_personal_sign(provider);
+    setResponse(result);
   };
 
   const terminate = () => {
@@ -190,6 +146,15 @@ export const App = () => {
 
   return (
     <div className="App">
+      <h1>Create-React-App Example</h1>
+      <div className={"Info-Status"}>
+        <p>{`Connected chain: ${chainId}`}</p>
+        <p>{`Connected account: ${account}`}</p>
+        <p>{`Account balance: ${balance}`}</p>
+        <p>{`Last request response: ${response}`}</p>
+        <p>{`Connected: ${connected}`}</p>
+      </div>
+
       <div className="sdkConfig">
         {connecting && (
           <div>Waiting for Metamask to link the connection...</div>
@@ -212,59 +177,94 @@ export const App = () => {
 
       {connected ? (
         <div>
-          <button style={{ padding: 10, margin: 10 }} onClick={connect}>
+          <button className={'Button-Normal'} style={{ padding: 10, margin: 10 }} onClick={connect}>
             Request Accounts
           </button>
 
-          <button style={{ padding: 10, margin: 10 }} onClick={sign}>
-            Sign
+          <button
+            className={'Button-Normal'}
+            style={{ padding: 10, margin: 10 }}
+            onClick={eth_signTypedData_v4}
+          >
+            eth_signTypedData_v4
           </button>
 
-          <button style={{ padding: 10, margin: 10 }} onClick={sendTransaction}>
-            Send transaction
+          <button
+            className={'Button-Normal'}
+            style={{ padding: 10, margin: 10 }}
+            onClick={eth_personal_sign}
+          >
+            personal_sign
           </button>
 
           <button
+            className={'Button-Normal'}
             style={{ padding: 10, margin: 10 }}
-            onClick={() => changeNetwork('0x1')}
+            onClick={sendTransaction}
           >
-            Switch Ethereum
+            Send transaction
           </button>
 
+          { provider?.chainId === '0x1' ? (
+            <button
+              className={'Button-Normal'}
+              style={{ padding: 10, margin: 10 }}
+              onClick={() => changeNetwork('0x5')}
+            >
+              Switch to Goerli
+            </button>
+          ) : (
+            <button
+              className={'Button-Normal'}
+              style={{ padding: 10, margin: 10 }}
+              onClick={() => changeNetwork('0x1')}
+            >
+              Switch to Mainnet
+            </button>
+          )}
+
           <button
+            className={'Button-Normal'}
             style={{ padding: 10, margin: 10 }}
             onClick={() => changeNetwork('0x89')}
           >
-            Switch Polygon
+            Switch to Polygon
           </button>
 
           <button
+            className={'Button-Normal'}
             style={{ padding: 10, margin: 10 }}
             onClick={addEthereumChain}
           >
-            Add ethereum chain
+            Add Polygon Chain
+          </button>
+
+          <button
+            className={'Button-Normal'}
+            style={{ padding: 10, margin: 10 }}
+            onClick={readOnlyCalls}
+          >
+            readOnlyCalls
           </button>
         </div>
       ) : (
-        <button style={{ padding: 10, margin: 10 }} onClick={connect}>
-          Connect
-        </button>
+        <div>
+          <button className={'Button-Normal'} style={{ padding: 10, margin: 10 }} onClick={connect}>
+            Connect
+          </button>
+          <button className={'Button-Normal'} style={{ padding: 10, margin: 10 }} onClick={connectAndSign}>
+            Connect w/ Sign
+          </button>
+        </div>
       )}
 
       <button
-        style={{ padding: 10, margin: 10, backgroundColor: 'red' }}
+        className={'Button-Danger'}
+        style={{ padding: 10, margin: 10 }}
         onClick={terminate}
       >
         Terminate
       </button>
-
-        <div>
-          <p>{`Connected chain: ${chainId}`}</p>
-          <p>{`Connected account: ${account}`}</p>
-          <p>{`Account balance: ${balance}`}</p>
-          <p>{`Last request response: ${response}`}</p>
-          <p>{`Connected: ${connected}`}</p>
-        </div>
     </div>
   );
 };