Merge pull request #471 from MeshJS/remove-nufi-from-wallet

Remove nufi from wallet
MeshJS · Dec 30, 2024 · 7204884 · 7204884
2 parents aa5d510 + cc2e3ea
commit 7204884
Show file tree

Hide file tree

Showing 30 changed files with 126 additions and 203 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -1,6 +1,6 @@
-Thank you for contributing to Mesh! We appreciate your effort and dedication to improving this project. To ensure that your contribution is in line with the project's guidelines and can be reviewed efficiently, please fill out the template below.
+> Thank you for contributing to Mesh! We appreciate your effort and dedication to improving this project. To ensure that your contribution is in line with the project's guidelines and can be reviewed efficiently, please fill out the template below.
 
-Remember to follow our [Contributing Guide](CONTRIBUTING.md) before submitting your pull request.
+> Remember to follow our [Contributing Guide](CONTRIBUTING.md) before submitting your pull request.
 
 ## Summary
 
@@ -35,9 +35,7 @@ Remember to follow our [Contributing Guide](CONTRIBUTING.md) before submitting y
 
 ## Related Issues
 
-> Please add the related issue here if any, e.g.:
->
-> - Issue - [#329](https://github.com/MeshJS/mesh/issues/329)
+> Please add the related issue here if any
 
 ## Checklist
 

diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -20,6 +20,8 @@
     "@meshsdk/react": "*",
     "@next/mdx": "^14.2.3",
     "@next/third-parties": "^14.2.5",
+    "@nufi/dapp-client-cardano": "0.3.5",
+    "@nufi/dapp-client-core": "0.3.5",
     "@vercel/og": "^0.6.3",
     "copy-to-clipboard": "^3.3.3",
     "flowbite": "^2.5.1",

diff --git a/...onents/cardano/connect-browser-wallet.tsx → .../cardano/connect-browser-wallet/index.tsx b/...onents/cardano/connect-browser-wallet.tsx → .../cardano/connect-browser-wallet/index.tsx
@@ -1,8 +1,7 @@
-import { useEffect, useRef } from "react";
+import { CardanoWallet, useWalletList } from "@meshsdk/react";
 
-import { CardanoWallet, useWallet, useWalletList } from "@meshsdk/react";
-
-import { getProvider } from "./mesh-wallet";
+import { getProvider } from "../mesh-wallet";
+import { checkIfMetamaskInstalled } from "./metamask";
 
 export default function ConnectBrowserWallet() {
   const wallets = useWalletList();
@@ -26,7 +25,6 @@ export function CommonCardanoWallet() {
     <CardanoWallet
       label={"Connect a Wallet"}
       extensions={[95]}
-      metamask={{ network: "preprod" }}
       cardanoPeerConnect={{
         dAppInfo: {
           name: "Mesh SDK",
@@ -50,6 +48,7 @@ export function CommonCardanoWallet() {
       //   provider: provider,
       //   url: "http://localhost:3000",
       // }}
+      injectFn={async () => await checkIfMetamaskInstalled("preprod")}
     />
   );
 }
diff --git a/packages/mesh-wallet/src/types/nufisnap.ts → ...ardano/connect-browser-wallet/metamask.ts b/packages/mesh-wallet/src/types/nufisnap.ts → ...ardano/connect-browser-wallet/metamask.ts
@@ -1,3 +1,35 @@
+import { initNufiDappCardanoSdk } from "@nufi/dapp-client-cardano";
+import nufiCoreSdk from "@nufi/dapp-client-core";
+
+const nufiDomain: { [key: string]: string } = {
+  production: "https://wallet.nu.fi",
+  mainnet: "https://wallet-staging.nu.fi",
+  preprod: "https://wallet-testnet-staging.nu.fi",
+  preview: "https://wallet-preview-staging.nu.fi",
+};
+
+export async function checkIfMetamaskInstalled(
+  network = "preprod",
+): Promise<void> {
+  try {
+    if (Object.keys(nufiDomain).includes(network)) {
+      nufiCoreSdk.init(nufiDomain[network]);
+    } else {
+      nufiCoreSdk.init(network);
+    }
+
+    const metamask = (window as any).ethereum._metamask;
+    if (metamask) {
+      initNufiDappCardanoSdk(nufiCoreSdk, "snap");
+      return;
+    }
+
+    return undefined;
+  } catch (err) {
+    return Promise.resolve(undefined);
+  }
+}
+
 export const nufiSnap = {
   id: "nufiSnap",
   name: "MetaMask",

diff --git a/apps/playground/src/pages/apis/wallets/browserwallet/get-available-wallets.tsx b/apps/playground/src/pages/apis/wallets/browserwallet/get-available-wallets.tsx
@@ -19,12 +19,6 @@ function Left() {
   let example = ``;
   example += `[\n`;
   example += `  {\n`;
-  example += `    "id": "nufiSnap",\n`;
-  example += `    "name": "MetaMask",\n`;
-  example += `    "icon": "data:image/svg+xml;base64,ICONBASE64HERE",\n`;
-  example += `    "version": "1.1.0"\n`;
-  example += `  },\n`;
-  example += `  {\n`;
   example += `    "name": "eternl",\n`;
   example += `    "icon": "data:image/png;base64,ICONBASE64HERE",\n`;
   example += `    "version": "0.1.0"\n`;
@@ -51,25 +45,6 @@ function Left() {
       </ul>
       <p>Example:</p>
       <Codeblock data={example} />
-
-      <p>
-        With NuFi's support, you can specify the network to connect to. By
-        default, it is set to "preprod". To define the <code>network</code>:
-      </p>
-      <Codeblock
-        data={`await BrowserWallet.getAvailableWallets({ metamask:{ network: "mainnet"} })`}
-      />
-      <p>Available networks are:</p>
-      <ul>
-        <li>production: https://wallet.nu.fi</li>
-        <li>mainnet: https://wallet-staging.nu.fi</li>
-        <li>preprod: https://wallet-testnet-staging.nu.fi</li>
-        <li>preview: https://wallet-preview-staging.nu.fi</li>
-      </ul>
-      <p>You can also specify the network by providing the URL:</p>
-      <Codeblock
-        data={`await BrowserWallet.getAvailableWallets({ metamask:{ network: "https://wallet.nu.fi"} })`}
-      />
     </>
   );
 }

diff --git a/apps/playground/src/pages/react/ui-components/connect-wallet.tsx b/apps/playground/src/pages/react/ui-components/connect-wallet.tsx
@@ -38,10 +38,6 @@ function Left() {
   codeRunCode += `  );\n`;
   codeRunCode += `}\n`;
 
-  let codeMetamask = `<CardanoWallet\n`;
-  codeMetamask += `  metamask={{network: "preprod"}}\n`;
-  codeMetamask += `/>\n`;
-
   let codeCip95 = `<CardanoWallet\n`;
   codeCip95 += `  extensions={[95]}\n`;
   codeCip95 += `/>\n`;
@@ -53,6 +49,10 @@ function Left() {
   codeBurner += `  }}\n`;
   codeBurner += `/>\n`;
 
+  let codeMetamask = `<CardanoWallet\n`;
+  codeMetamask += `  injectFn={async () => await checkIfMetamaskInstalled("preprod")}\n`;
+  codeMetamask += `/>\n`;
+
   return (
     <>
       <p>
@@ -101,21 +101,6 @@ function Left() {
         is connected.
       </p>
 
-      <h3>MetaMask Snaps</h3>
-      <p>
-        You can define the NuFi network to connect to by adding the{" "}
-        <code>network</code> prop.
-      </p>
-      <Codeblock data={codeMetamask} />
-      <p>
-        This will connect to the preprod network. For the mainnet network, use{" "}
-        <code>mainnet</code>.
-      </p>
-      <p>
-        You can also define a custom network by passing a URL string to the{" "}
-        <code>network</code> prop.
-      </p>
-
       <h3>CIP 95</h3>
       <p>
         You can also provide an <code>extensions</code> object to enable
@@ -140,6 +125,21 @@ function Left() {
         private keys are generated and stored on the user's device.
       </p>
       <Codeblock data={codeBurner} />
+
+      <h3>MetaMask Snaps</h3>
+      <p>
+        MetaMask Snaps are a new way to extend MetaMask with custom
+        functionality and integrations. You can check the implementation to
+        integrate NuFi from the{" "}
+        <Link href="https://github.com/MeshJS/mesh/tree/main/apps/playground/src/components/cardano/connect-browser-wallet">
+          GitHub repository
+        </Link>
+        .
+      </p>
+      <p>
+        Use the <code>injectFn</code> prop to add custom functionality.
+      </p>
+      <Codeblock data={codeMetamask} />
     </>
   );
 }
@@ -159,7 +159,6 @@ function Right() {
   example += `      <CardanoWallet\n`;
   example += `        label={"Connect a Wallet"}\n`;
   example += `        onConnected={afterConnectedWallet}\n`;
-  example += `        metamask={{ network: "preprod" }}\n`;
   example += `        cardanoPeerConnect={{\n`;
   example += `          dAppInfo: {\n`;
   example += `            name: "Mesh SDK",\n`;

diff --git a/apps/playground/src/pages/react/wallet-hooks/use-wallet-list.tsx b/apps/playground/src/pages/react/wallet-hooks/use-wallet-list.tsx
@@ -21,18 +21,19 @@ function Left() {
       <p>Returns a list of wallets installed on user's device.</p>
       <Codeblock data={`const wallets = useWalletList();`} />
       <p>
-        You can define the NuFi network to connect to by adding the{" "}
-        <code>network</code> prop.
+        You can define a function to be injected into the wallet provider by
+        passing it as the
+        <code>injectFn</code> prop.
       </p>
       <Codeblock
-        data={`const wallets = useWalletList({ metamask:{ network: "preprod"} });`}
+        data={`const wallets = useWalletList({injectFn={async () => await checkIfMetamaskInstalled("preprod")})}`}
       />
     </>
   );
 }
 
 function Right() {
-  const wallets = useWalletList({ metamask:{ network: "preprod"} });
+  const wallets = useWalletList();
 
   let code3 = `import { useWalletList } from '@meshsdk/react';\n\n`;
   code3 += `export default function Page() {\n`;

diff --git a/apps/playground/src/pages/svelte/ui-components/connect-wallet.tsx b/apps/playground/src/pages/svelte/ui-components/connect-wallet.tsx
@@ -35,10 +35,6 @@ function Left() {
   codeRunCode += `  );\n`;
   codeRunCode += `}\n`;
 
-  let codeMetamask = `<CardanoWallet\n`;
-  codeMetamask += `  metamask={{network: "preprod"}}\n`;
-  codeMetamask += `/>\n`;
-
   let codeCip95 = `<CardanoWallet\n`;
   codeCip95 += `  extensions={[95]}\n`;
   codeCip95 += `/>\n`;
@@ -89,28 +85,6 @@ function Left() {
         The above code will log "Hello, World!" to the console when the wallet
         is connected.
       </p>
-
-      {/* <h3>MetaMask Snaps</h3>
-      <p>
-        You can define the NuFi network to connect to by adding the{" "}
-        <code>network</code> prop.
-      </p>
-      <Codeblock data={codeMetamask} />
-      <p>
-        This will connect to the preprod network. For the mainnet network, use{" "}
-        <code>mainnet</code>.
-      </p>
-      <p>
-        You can also define a custom network by passing a URL string to the{" "}
-        <code>network</code> prop.
-      </p>
-
-      <h3>CIP 95</h3>
-      <p>
-        You can also provide an <code>extensions</code> object to enable
-        specific CIPs. For example, to enable CIP95, you would pass:
-      </p>
-      <Codeblock data={codeCip95} /> */}
     </>
   );
 }

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/mesh-common/package.json b/packages/mesh-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/common",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "description": "Contains constants, types and interfaces used across the SDK and different serialization libraries",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",

diff --git a/packages/mesh-contract/package.json b/packages/mesh-contract/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/contract",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "description": "List of open-source smart contracts, complete with documentation, live demos, and end-to-end source code. https://meshjs.dev/smart-contracts",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -34,9 +34,9 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@meshsdk/common": "1.8.7",
-    "@meshsdk/core": "1.8.7",
-    "@meshsdk/core-csl": "1.8.7"
+    "@meshsdk/common": "1.8.8",
+    "@meshsdk/core": "1.8.8",
+    "@meshsdk/core-csl": "1.8.8"
   },
   "prettier": "@meshsdk/configs/prettier",
   "publishConfig": {

diff --git a/packages/mesh-core-csl/package.json b/packages/mesh-core-csl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/core-csl",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "description": "Types and utilities functions between Mesh and cardano-serialization-lib",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -31,15 +31,15 @@
   },
   "devDependencies": {
     "@meshsdk/configs": "*",
-    "@meshsdk/provider": "1.8.7",
+    "@meshsdk/provider": "1.8.8",
     "@types/json-bigint": "^1.0.4",
     "eslint": "^8.57.0",
     "ts-jest": "^29.1.4",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@meshsdk/common": "1.8.7",
+    "@meshsdk/common": "1.8.8",
     "@sidan-lab/sidan-csl-rs-browser": "0.9.16",
     "@sidan-lab/sidan-csl-rs-nodejs": "0.9.16",
     "@types/base32-encoding": "^1.0.2",

diff --git a/packages/mesh-core-cst/package.json b/packages/mesh-core-cst/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/core-cst",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "description": "Types and utilities functions between Mesh and cardano-js-sdk",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -45,7 +45,7 @@
     "@harmoniclabs/crypto": "0.2.4",
     "@harmoniclabs/pair": "1.0.0",
     "@harmoniclabs/bytestring": "1.0.0",
-    "@meshsdk/common": "1.8.7",
+    "@meshsdk/common": "1.8.8",
     "@stricahq/bip32ed25519": "^1.1.0",
     "@stricahq/cbors": "^1.0.3",
     "pbkdf2": "^3.1.2"

diff --git a/packages/mesh-core/package.json b/packages/mesh-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/core",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "description": "Mesh SDK Core - https://meshjs.dev/",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -33,13 +33,13 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@meshsdk/common": "1.8.7",
-    "@meshsdk/core-csl": "1.8.7",
-    "@meshsdk/core-cst": "1.8.7",
-    "@meshsdk/provider": "1.8.7",
-    "@meshsdk/react": "1.8.7",
-    "@meshsdk/transaction": "1.8.7",
-    "@meshsdk/wallet": "1.8.7"
+    "@meshsdk/common": "1.8.8",
+    "@meshsdk/core-csl": "1.8.8",
+    "@meshsdk/core-cst": "1.8.8",
+    "@meshsdk/provider": "1.8.8",
+    "@meshsdk/react": "1.8.8",
+    "@meshsdk/transaction": "1.8.8",
+    "@meshsdk/wallet": "1.8.8"
   },
   "prettier": "@meshsdk/configs/prettier",
   "publishConfig": {