chore(examples): switch browser wallets to mumbai testnet

examples/nextjs/README.md

@@ -1,48 +1,10 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with
-[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# `nextjs` integration example
 
-## Getting Started
+Shows how to use `@nucypher/pre` in Next.js.
 
-First, run the development server:
+## Usage
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
+pnpm install
 pnpm dev
-# or
-bun dev
 ```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the
-result.
-
-You can start editing the page by modifying `app/page.tsx`. The page
-auto-updates as you edit the file.
-
-This project uses
-[`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to
-automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
-  features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out
-[the Next.js GitHub repository](https://github.com/vercel/next.js/) - your
-feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the
-[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
-from the creators of Next.js.
-
-Check out our
-[Next.js deployment documentation](https://nextjs.org/docs/deployment) for more
-details.

examples/nextjs/src/app/page.tsx

@@ -8,8 +8,8 @@ import {
   SecretKey,
   toHexString,
 } from '@nucypher/shared';
-import { ethers } from 'ethers';
-import { useEffect, useState } from 'react';
+import {ethers} from 'ethers';
+import {useEffect, useState} from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare const window: any;
@@ -34,9 +34,13 @@ function App() {
     }
     const provider = new ethers.providers.Web3Provider(window.ethereum, 'any');
 
-    const { chainId } = await provider.getNetwork();
-    if (![137, 80001].includes(chainId)) {
-      console.error('You need to connect to the Mumbai or Polygon network');
+    const {chainId} = await provider.getNetwork();
+    if (chainId !== 80001) {
+      // Switch to Matic Mumbai testnet
+      await window.ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{chainId: '0x13881'}],
+      });
     }
 
     await provider.send('eth_requestAccounts', []);
@@ -52,7 +56,7 @@ function App() {
     return <div>Loading...</div>;
   }
 
-  console.log({ Alice, Bob, getPorterUri, SecretKey, toHexString });
+  console.log({Alice, Bob, getPorterUri, SecretKey, toHexString});
 
   const makeAlice = () => {
     const alice = Alice.fromSecretKey(SecretKey.random());
@@ -65,8 +69,8 @@ function App() {
   };
 
   const makeRemoteBob = (bob: Bob) => {
-    const { decryptingKey, verifyingKey } = bob;
-    return { decryptingKey, verifyingKey };
+    const {decryptingKey, verifyingKey} = bob;
+    return {decryptingKey, verifyingKey};
   };
 
   const makeCharacters = () => {
@@ -78,7 +82,7 @@ function App() {
 
   const runExample = async () => {
     if (!provider) {
-      console.error('You need to connect to the MetaMask extension');
+      console.error('You need to connect to your wallet first');
       return;
     }
 

examples/react/src/App.tsx

@@ -30,9 +30,13 @@ function App() {
     }
     const provider = new ethers.providers.Web3Provider(window.ethereum, 'any');
 
-    const { chainId } = await provider.getNetwork();
-    if (![137, 80001].includes(chainId)) {
-      console.error('You need to connect to the Mumbai or Polygon network');
+    const {chainId} = await provider.getNetwork();
+    if (chainId !== 80001) {
+      // Switch to Matic Mumbai testnet
+      await window.ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{chainId: '0x13881'}],
+      });
     }
 
     await provider.send('eth_requestAccounts', []);

examples/webpack-5/src/index.ts

@@ -51,6 +51,15 @@ const runExample = async () => {
   const provider = new ethers.providers.Web3Provider(window.ethereum!, 'any');
   await provider.send('eth_requestAccounts', []);
 
+  const { chainId } = await provider.getNetwork();
+  if (chainId !== 80001) {
+    // Switch to Matic Mumbai testnet
+    await window.ethereum!.request!({
+      method: 'wallet_switchEthereumChain',
+      params: [{ chainId: '0x13881' }],
+    });
+  }
+
   const remoteBob = makeRemoteBob();
   const threshold = 2;
   const shares = 3;

packages/shared/test/integration/pre.test.ts

@@ -1,5 +1,10 @@
 import { CapsuleFrag, reencrypt } from '@nucypher/nucypher-core';
-import {fakeAlice, fakeBob, fakeUrsulas, reencryptKFrags} from '@nucypher/test-utils';
+import {
+  fakeAlice,
+  fakeBob,
+  fakeUrsulas,
+  reencryptKFrags,
+} from '@nucypher/test-utils';
 import { beforeAll, expect, test } from 'vitest';
 
 import {

packages/shared/test/unit/conditions/base/contract.test.ts

@@ -168,7 +168,8 @@ test('supports custom function abi', () => {
   });
 
   test('accepts custom function abi with a custom parameter', async () => {
-    const asJson = await conditionExpr.buildContext(fakeProvider(), {}, fakeSigner())
+    const asJson = await conditionExpr
+      .buildContext(fakeProvider(), {}, fakeSigner())
       .withCustomParams(customParams)
       .toJson();