Update rn next packages

.codesandbox/tasks.json

@@ -19,18 +19,15 @@
     },
     "build": {
       "name": "build",
-      "command": "pnpm run build",
-      "runAtStart": false
+      "command": "pnpm run build"
     },
     "start": {
       "name": "start",
-      "command": "pnpm run start",
-      "runAtStart": false
+      "command": "pnpm run start"
     },
     "lint": {
       "name": "lint",
-      "command": "pnpm run lint",
-      "runAtStart": false
+      "command": "pnpm run lint"
     }
   }
 }

.devcontainer/devcontainer.json

@@ -0,0 +1,22 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+	"name": "Node.js & TypeScript",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye"
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

app/page.tsx

@@ -25,11 +25,11 @@ enum APP_STATUS {
 }
 
 export default function Home() {
-  const [storageChain, setStorageChain] = useState("5");
-  const [expectedAmount, setExpectedAmount] = useState("");
-  const [currency, setCurrency] = useState(
-    "5_0xBA62BCfcAaFc6622853cca2BE6Ac7d845BC0f2Dc"
+  const [storageChain, setStorageChain] = useState(
+    storageChains.keys().next().value,
   );
+  const [currency, setCurrency] = useState(currencies.keys().next().value);
+  const [expectedAmount, setExpectedAmount] = useState("");
   const [paymentRecipient, setPaymentRecipient] = useState("");
   const [payerIdentity, setPayerIdentity] = useState("");
   const [dueDate, setDueDate] = useState("");
@@ -60,7 +60,7 @@ export default function Home() {
         },
         expectedAmount: parseUnits(
           expectedAmount as `${number}`,
-          currencies.get(currency)!.decimals
+          currencies.get(currency)!.decimals,
         ).toString(),
         payee: {
           type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
@@ -100,7 +100,7 @@ export default function Home() {
     try {
       setStatus(APP_STATUS.PERSISTING_TO_IPFS);
       const request = await requestClient.createRequest(
-        requestCreateParameters
+        requestCreateParameters,
       );
 
       setStatus(APP_STATUS.PERSISTING_ON_CHAIN);

config/currency.ts

@@ -12,26 +12,26 @@ interface ICurrency extends Types.RequestLogic.ICurrency {
 // key: {chainId}_{checksummedAddress}
 export const currencies = new Map<string, ICurrency>([
   [
-    "5_0xBA62BCfcAaFc6622853cca2BE6Ac7d845BC0f2Dc",
+    "11155111_0x370DE27fdb7D1Ff1e1BaA7D11c5820a324Cf623C",
     {
       name: "FaucetToken",
       symbol: "FAU",
-      value: "0xBA62BCfcAaFc6622853cca2BE6Ac7d845BC0f2Dc",
-      chainId: 5,
-      network: "goerli",
+      value: "0x370DE27fdb7D1Ff1e1BaA7D11c5820a324Cf623C",
+      chainId: 11155111,
+      network: "sepolia",
       decimals: 18,
       type: Types.RequestLogic.CURRENCY.ERC20,
     },
   ],
   [
-    "5_0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
+    "11155111_0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238",
     {
       name: "USD Coin",
       symbol: "USDC",
-      value: "0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
-      chainId: 5,
-      network: "goerli",
-      decimals: 18,
+      value: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238",
+      chainId: 11155111,
+      network: "sepolia",
+      decimals: 6,
       type: Types.RequestLogic.CURRENCY.ERC20,
     },
   ],

config/rainbow-kit.ts

@@ -10,7 +10,7 @@ import {
 import { configureChains, createConfig } from "wagmi";
 import {
   mainnet,
-  goerli,
+  sepolia,
   gnosis,
   polygon,
   celo,
@@ -26,10 +26,11 @@ import { publicProvider } from "wagmi/providers/public";
 export const { chains, publicClient, webSocketPublicClient } = configureChains(
   [
     mainnet,
+    sepolia,
     {
       ...gnosis,
       iconUrl:
-        "https://raw.githubusercontent.com/gnosischain/media-kit/main/Logos/01%20Chain/Background/SVG/LogomarkChain-Vertical-Cream_onMoss.svg",
+        "https://raw.githubusercontent.com/gnosischain/media-kit/main/Logos/Owl_Logo%20-%20Mark.svg",
     },
     polygon,
     optimism,
@@ -39,13 +40,12 @@ export const { chains, publicClient, webSocketPublicClient } = configureChains(
     celo,
     fantom,
     moonbeam,
-    goerli,
   ],
-  [publicProvider()]
+  [publicProvider()],
 );
 
-// Project ID from WalletConnect account: david.huntmateo@request.network
-const projectId = "9d9d6953cbcd80c6177a7402d79bfa8b";
+// For details about Wallet Connect Project ID: https://docs.walletconnect.com/cloud/relay#project-id
+const projectId = process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID || "";
 
 const appName = "Request Network Quickstart: Create a request";
 

config/storage-chain.ts

@@ -7,19 +7,19 @@ interface StorageChain {
 // key: {chainId}
 export const storageChains = new Map<string, StorageChain>([
   [
-    "5",
+    "11155111",
     {
-      name: "Goerli",
+      name: "Sepolia",
       type: "testnet",
-      gateway: "https://goerli.gateway.request.network/",
+      gateway: "https://sepolia.gateway.request.network/",
     },
   ],
   [
     "100",
     {
       name: "Gnosis",
       type: "mainnet",
-      gateway: "https://xdai.gateway.request.network/",
+      gateway: "https://gnosis.gateway.request.network/",
     },
   ],
 ]);

package.json

@@ -9,19 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@rainbow-me/rainbowkit": "^1.0.0",
-    "@requestnetwork/request-client.js": "0.40.1-next.1898",
-    "@requestnetwork/web3-signature": "0.4.37-next.1898",
-    "@types/node": "20.1.0",
-    "@types/react": "18.2.6",
-    "@types/react-dom": "18.2.4",
-    "eslint": "8.40.0",
-    "eslint-config-next": "13.4.1",
-    "next": "13.4.1",
+    "@rainbow-me/rainbowkit": "1.3.1",
+    "@requestnetwork/request-client.js": "0.47.1-next.2043",
+    "@requestnetwork/web3-signature": "0.6.1-next.2043",
+    "@types/node": "20.10.4",
+    "@types/react": "18.2.45",
+    "@types/react-dom": "18.2.17",
+    "eslint": "8.55.0",
+    "eslint-config-next": "14.0.4",
+    "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "5.0.4",
-    "viem": "~0.3.35",
-    "wagmi": "~1.0.5"
+    "typescript": "5.3.3",
+    "viem": "1.20.0",
+    "wagmi": "1.4.12"
   }
 }