From 526ce39b8cdaec740df81e874ef79eeacb3ce671 Mon Sep 17 00:00:00 2001 From: Peter Smith Date: Mon, 15 Apr 2024 11:58:19 +0100 Subject: [PATCH 1/8] chore: use latest fuel frontend packages --- apps/create-fuels-counter-guide/package.json | 6 +- .../src/components/Layout.tsx | 2 +- .../src/hooks/useBrowserWallet.tsx | 6 +- apps/create-fuels-counter-guide/src/lib.ts | 10 ++- .../src/pages/_app.tsx | 28 +++++-- pnpm-lock.yaml | 76 ++++++++++++++++--- templates/nextjs/package.json | 6 +- templates/nextjs/src/components/Layout.tsx | 2 +- .../nextjs/src/hooks/useBrowserWallet.tsx | 6 +- templates/nextjs/src/lib.ts | 10 ++- templates/nextjs/src/pages/_app.tsx | 28 +++++-- 11 files changed, 140 insertions(+), 40 deletions(-) diff --git a/apps/create-fuels-counter-guide/package.json b/apps/create-fuels-counter-guide/package.json index a8806c1df49..0f3ce57a25d 100644 --- a/apps/create-fuels-counter-guide/package.json +++ b/apps/create-fuels-counter-guide/package.json @@ -12,9 +12,11 @@ "postbuild": "run-s fuels:build original:build" }, "dependencies": { - "@fuel-wallet/react": "0.15.2", - "dotenv": "^16.4.5", + "@fuels/connectors": "^0.2.2", + "@fuels/react": "^0.18.1", "fuels": "workspace:*", + "@tanstack/react-query": "^5.29.2", + "dotenv": "^16.4.5", "next": "14.0.1", "react": "^18.2", "react-dom": "^18.2", diff --git a/apps/create-fuels-counter-guide/src/components/Layout.tsx b/apps/create-fuels-counter-guide/src/components/Layout.tsx index 86271d5153e..b16107886c9 100644 --- a/apps/create-fuels-counter-guide/src/components/Layout.tsx +++ b/apps/create-fuels-counter-guide/src/components/Layout.tsx @@ -2,7 +2,7 @@ import toast, { Toaster } from "react-hot-toast"; import { Link } from "./Link"; import { Button } from "./Button"; import { NODE_URL } from "@/lib"; -import { useConnectUI, useDisconnect } from "@fuel-wallet/react"; +import { useConnectUI, useDisconnect } from "@fuels/react"; import { WalletDisplay } from "./WalletDisplay"; import { useBrowserWallet } from "@/hooks/useBrowserWallet"; import { useActiveWallet } from "@/hooks/useActiveWallet"; diff --git a/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx b/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx index 1a88de14fd7..051dc95849e 100644 --- a/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx +++ b/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx @@ -1,6 +1,6 @@ import { AppWallet } from "@/lib"; -import { useIsConnected, useNetwork, useWallet } from "@fuel-wallet/react"; -import { BN, WalletLocked } from "fuels"; +import { useIsConnected, useNetwork, useWallet } from "@fuels/react"; +import { Account, BN, WalletLocked } from "fuels"; import { useCallback, useState } from "react"; import useAsync from "react-use/lib/useAsync"; @@ -10,7 +10,7 @@ interface BrowserWallet extends AppWallet { } export const useBrowserWallet: () => BrowserWallet = () => { - const { wallet }: { wallet: WalletLocked } = useWallet(); + const { wallet }: { wallet: Account | null | undefined } = useWallet(); const [browserWalletBalance, setBrowserWalletBalance] = useState(); const { isConnected } = useIsConnected(); const { network } = useNetwork(); diff --git a/apps/create-fuels-counter-guide/src/lib.ts b/apps/create-fuels-counter-guide/src/lib.ts index e39d7011cef..eabba6d3319 100644 --- a/apps/create-fuels-counter-guide/src/lib.ts +++ b/apps/create-fuels-counter-guide/src/lib.ts @@ -1,11 +1,17 @@ -import { BN, WalletLocked, WalletUnlocked } from 'fuels'; +import { Account, BN, WalletLocked, WalletUnlocked } from 'fuels'; export const NODE_URL = `http://127.0.0.1:${ process.env.NEXT_PUBLIC_FUEL_NODE_PORT || 4000 }/graphql`; +/** + * Enable the Fuel dev connector. + * @see {@link https://docs.fuel.network/docs/wallet/dev/getting-started/#using-default-connectors} + */ +export const ENABLE_FUEL_DEV_CONNECTOR = process.env.NEXT_PUBLIC_ENABLE_FUEL_DEV_CONNECTOR === 'true'; + export interface AppWallet { - wallet?: WalletLocked | WalletUnlocked; + wallet?: Account | null | undefined; walletBalance?: BN; refreshWalletBalance?: () => Promise; } diff --git a/apps/create-fuels-counter-guide/src/pages/_app.tsx b/apps/create-fuels-counter-guide/src/pages/_app.tsx index 3fbb5a4c0f2..3ec9d2f9283 100644 --- a/apps/create-fuels-counter-guide/src/pages/_app.tsx +++ b/apps/create-fuels-counter-guide/src/pages/_app.tsx @@ -1,14 +1,30 @@ import { Layout } from "@/components/Layout"; import "@/styles/globals.css"; -import { FuelProvider } from "@fuel-wallet/react"; +import { FuelProvider } from "@fuels/react"; import type { AppProps } from "next/app"; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import type { FuelConfig } from "fuels"; +import { defaultConnectors } from "@fuels/connectors"; +import { ENABLE_FUEL_DEV_CONNECTOR } from "@/lib"; +import React from "react"; + +export const queryClient: QueryClient = new QueryClient() +export const fuelConfig: FuelConfig = { + connectors: defaultConnectors({ + devMode: ENABLE_FUEL_DEV_CONNECTOR, + }) +} export default function App({ Component, pageProps }: AppProps) { return ( - - - - - + + + + + + + + + ); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index df65df41183..4429950842d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -176,9 +176,15 @@ importers: apps/create-fuels-counter-guide: dependencies: - '@fuel-wallet/react': - specifier: 0.15.2 - version: 0.15.2(@types/react-dom@18.2.4)(@types/react@18.2.9)(fuels@packages+fuels)(react-dom@18.2.0)(react@18.2.0) + '@fuels/connectors': + specifier: ^0.2.2 + version: 0.2.2(fuels@packages+fuels) + '@fuels/react': + specifier: ^0.18.1 + version: 0.18.1(@tanstack/react-query@5.29.2)(@types/react-dom@18.2.4)(@types/react@18.2.9)(fuels@packages+fuels)(react-dom@18.2.0)(react@18.2.0) + '@tanstack/react-query': + specifier: ^5.29.2 + version: 5.29.2(react@18.2.0) dotenv: specifier: ^16.4.5 version: 16.4.5 @@ -1181,9 +1187,15 @@ importers: templates/nextjs: dependencies: - '@fuel-wallet/react': - specifier: 0.15.2 - version: 0.15.2(@types/react-dom@18.2.4)(@types/react@18.2.9)(fuels@packages+fuels)(react-dom@18.2.0)(react@18.2.0) + '@fuels/connectors': + specifier: ^0.2.2 + version: 0.2.2(fuels@packages+fuels) + '@fuels/react': + specifier: ^0.18.1 + version: 0.18.1(@tanstack/react-query@5.29.2)(@types/react-dom@18.2.4)(@types/react@18.2.9)(fuels@packages+fuels)(react-dom@18.2.0)(react@18.2.0) + '@tanstack/react-query': + specifier: ^5.29.2 + version: 5.29.2(react@18.2.0) dotenv: specifier: ^16.4.5 version: 16.4.5 @@ -1436,7 +1448,7 @@ packages: '@babel/core': 7.22.5 '@babel/generator': 7.23.4 '@babel/parser': 7.23.9 - '@babel/runtime': 7.22.5 + '@babel/runtime': 7.23.4 '@babel/traverse': 7.22.5 '@babel/types': 7.23.9 babel-preset-fbjs: 3.4.0(@babel/core@7.22.5) @@ -4393,6 +4405,32 @@ packages: resolution: {integrity: sha512-6rSbzxxDlDkoW9u4vvSbTfnA4Cy9WjZ1ajBOuKTnvoQ9EzQKvrP4lYpN2SjqdfJkdhRfCItaf1aQq/avaN51BQ==} dev: false + /@fuels/connectors@0.2.2(fuels@packages+fuels): + resolution: {integrity: sha512-TbyJjK3GgyeF6ERZyoh8GfECAVBoI69w4Ee/Osw2Q1zzGIY5/oWwPJxCUzOzd+47eIRWlvtItl1mvkyDyn3aVA==} + peerDependencies: + fuels: '>=0.78.0' + dependencies: + fuels: link:packages/fuels + dev: false + + /@fuels/react@0.18.1(@tanstack/react-query@5.29.2)(@types/react-dom@18.2.4)(@types/react@18.2.9)(fuels@packages+fuels)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Hduy5GcHcY7I112JjPOVYu/4xGMKuMNqD/YO0c2D401RAA9nlh6G14yMFNZ3G/LJx4gJ/Ayx7rlVRh1z43cP/A==} + peerDependencies: + '@tanstack/react-query': '>=5.0.0' + fuels: '>=0.74.0' + react: ^18.2.0 + dependencies: + '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.4)(@types/react@18.2.9)(react-dom@18.2.0)(react@18.2.0) + '@tanstack/react-query': 5.29.2(react@18.2.0) + events: 3.3.0 + fuels: link:packages/fuels + react: 18.2.0 + transitivePeerDependencies: + - '@types/react' + - '@types/react-dom' + - react-dom + dev: false + /@fuels/vm-asm@0.42.1: resolution: {integrity: sha512-5e0IDHen26hrKc93ejYNDhQFbqi+EQ7xPpFJcUnSrz0+6zPdPhA2dtwh5UqN0fYDM5AcEFd0wpq+r7Pd2XS5AQ==} dev: false @@ -5356,7 +5394,7 @@ packages: /@manypkg/find-root@1.1.0: resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==} dependencies: - '@babel/runtime': 7.22.5 + '@babel/runtime': 7.23.4 '@types/node': 12.20.55 find-up: 4.1.0 fs-extra: 8.1.0 @@ -5365,7 +5403,7 @@ packages: /@manypkg/get-packages@1.1.3: resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==} dependencies: - '@babel/runtime': 7.22.5 + '@babel/runtime': 7.23.4 '@changesets/types': 4.1.0 '@manypkg/find-root': 1.1.0 fs-extra: 8.1.0 @@ -6684,6 +6722,10 @@ packages: resolution: {integrity: sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==} dev: false + /@tanstack/query-core@5.29.0: + resolution: {integrity: sha512-WgPTRs58hm9CMzEr5jpISe8HXa3qKQ8CxewdYZeVnA54JrPY9B1CZiwsCoLpLkf0dGRZq+LcX5OiJb0bEsOFww==} + dev: false + /@tanstack/react-query@4.36.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==} peerDependencies: @@ -6702,6 +6744,15 @@ packages: use-sync-external-store: 1.2.0(react@18.2.0) dev: false + /@tanstack/react-query@5.29.2(react@18.2.0): + resolution: {integrity: sha512-nyuWILR4u7H5moLGSiifLh8kIqQDLNOHGuSz0rcp+J75fNc8aQLyr5+I2JCHU3n+nJrTTW1ssgAD8HiKD7IFBQ==} + peerDependencies: + react: ^18.0.0 + dependencies: + '@tanstack/query-core': 5.29.0 + react: 18.2.0 + dev: false + /@testing-library/dom@8.20.1: resolution: {integrity: sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==} engines: {node: '>=12'} @@ -8666,7 +8717,7 @@ packages: resolution: {integrity: sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==} engines: {node: '>=6.0'} dependencies: - '@babel/runtime': 7.22.5 + '@babel/runtime': 7.23.4 '@babel/runtime-corejs3': 7.22.5 dev: false @@ -9024,7 +9075,7 @@ packages: resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} engines: {node: '>=10', npm: '>=6'} dependencies: - '@babel/runtime': 7.22.5 + '@babel/runtime': 7.23.4 cosmiconfig: 7.1.0 resolve: 1.22.8 dev: false @@ -18545,6 +18596,7 @@ packages: /react-remove-scroll-bar@2.3.5(@types/react@18.2.9)(react@18.2.0): resolution: {integrity: sha512-3cqjOqg6s0XbOjWvmasmqHch+RLxIEk2r/70rzGXuz3iIGQsQheEQyqYCBb5EECoD01Vo2SIbDqW4paLeLTASw==} engines: {node: '>=10'} + deprecated: please update to the following version as this contains a bug (https://github.com/theKashey/react-remove-scroll-bar/issues/57) peerDependencies: '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -22172,7 +22224,7 @@ packages: '@apideck/better-ajv-errors': 0.3.6(ajv@8.12.0) '@babel/core': 7.22.5 '@babel/preset-env': 7.22.5(@babel/core@7.22.5) - '@babel/runtime': 7.22.5 + '@babel/runtime': 7.23.4 '@rollup/plugin-babel': 5.3.1(@babel/core@7.22.5)(rollup@2.79.1) '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1) '@rollup/plugin-replace': 2.4.2(rollup@2.79.1) diff --git a/templates/nextjs/package.json b/templates/nextjs/package.json index 57a8801d431..33c81e1a244 100644 --- a/templates/nextjs/package.json +++ b/templates/nextjs/package.json @@ -11,9 +11,11 @@ "lint": "next lint" }, "dependencies": { - "@fuel-wallet/react": "0.15.2", - "dotenv": "^16.4.5", + "@fuels/connectors": "^0.2.2", + "@fuels/react": "^0.18.1", "fuels": "workspace:*", + "@tanstack/react-query": "^5.29.2", + "dotenv": "^16.4.5", "next": "14.0.1", "react": "^18.2", "react-dom": "^18.2", diff --git a/templates/nextjs/src/components/Layout.tsx b/templates/nextjs/src/components/Layout.tsx index 86271d5153e..b16107886c9 100644 --- a/templates/nextjs/src/components/Layout.tsx +++ b/templates/nextjs/src/components/Layout.tsx @@ -2,7 +2,7 @@ import toast, { Toaster } from "react-hot-toast"; import { Link } from "./Link"; import { Button } from "./Button"; import { NODE_URL } from "@/lib"; -import { useConnectUI, useDisconnect } from "@fuel-wallet/react"; +import { useConnectUI, useDisconnect } from "@fuels/react"; import { WalletDisplay } from "./WalletDisplay"; import { useBrowserWallet } from "@/hooks/useBrowserWallet"; import { useActiveWallet } from "@/hooks/useActiveWallet"; diff --git a/templates/nextjs/src/hooks/useBrowserWallet.tsx b/templates/nextjs/src/hooks/useBrowserWallet.tsx index 1a88de14fd7..051dc95849e 100644 --- a/templates/nextjs/src/hooks/useBrowserWallet.tsx +++ b/templates/nextjs/src/hooks/useBrowserWallet.tsx @@ -1,6 +1,6 @@ import { AppWallet } from "@/lib"; -import { useIsConnected, useNetwork, useWallet } from "@fuel-wallet/react"; -import { BN, WalletLocked } from "fuels"; +import { useIsConnected, useNetwork, useWallet } from "@fuels/react"; +import { Account, BN, WalletLocked } from "fuels"; import { useCallback, useState } from "react"; import useAsync from "react-use/lib/useAsync"; @@ -10,7 +10,7 @@ interface BrowserWallet extends AppWallet { } export const useBrowserWallet: () => BrowserWallet = () => { - const { wallet }: { wallet: WalletLocked } = useWallet(); + const { wallet }: { wallet: Account | null | undefined } = useWallet(); const [browserWalletBalance, setBrowserWalletBalance] = useState(); const { isConnected } = useIsConnected(); const { network } = useNetwork(); diff --git a/templates/nextjs/src/lib.ts b/templates/nextjs/src/lib.ts index e39d7011cef..eabba6d3319 100644 --- a/templates/nextjs/src/lib.ts +++ b/templates/nextjs/src/lib.ts @@ -1,11 +1,17 @@ -import { BN, WalletLocked, WalletUnlocked } from 'fuels'; +import { Account, BN, WalletLocked, WalletUnlocked } from 'fuels'; export const NODE_URL = `http://127.0.0.1:${ process.env.NEXT_PUBLIC_FUEL_NODE_PORT || 4000 }/graphql`; +/** + * Enable the Fuel dev connector. + * @see {@link https://docs.fuel.network/docs/wallet/dev/getting-started/#using-default-connectors} + */ +export const ENABLE_FUEL_DEV_CONNECTOR = process.env.NEXT_PUBLIC_ENABLE_FUEL_DEV_CONNECTOR === 'true'; + export interface AppWallet { - wallet?: WalletLocked | WalletUnlocked; + wallet?: Account | null | undefined; walletBalance?: BN; refreshWalletBalance?: () => Promise; } diff --git a/templates/nextjs/src/pages/_app.tsx b/templates/nextjs/src/pages/_app.tsx index 3fbb5a4c0f2..3ec9d2f9283 100644 --- a/templates/nextjs/src/pages/_app.tsx +++ b/templates/nextjs/src/pages/_app.tsx @@ -1,14 +1,30 @@ import { Layout } from "@/components/Layout"; import "@/styles/globals.css"; -import { FuelProvider } from "@fuel-wallet/react"; +import { FuelProvider } from "@fuels/react"; import type { AppProps } from "next/app"; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import type { FuelConfig } from "fuels"; +import { defaultConnectors } from "@fuels/connectors"; +import { ENABLE_FUEL_DEV_CONNECTOR } from "@/lib"; +import React from "react"; + +export const queryClient: QueryClient = new QueryClient() +export const fuelConfig: FuelConfig = { + connectors: defaultConnectors({ + devMode: ENABLE_FUEL_DEV_CONNECTOR, + }) +} export default function App({ Component, pageProps }: AppProps) { return ( - - - - - + + + + + + + + + ); } From 74f7236cbb1dc99f8a5c27f7503dd5031d793e51 Mon Sep 17 00:00:00 2001 From: Peter Smith Date: Tue, 16 Apr 2024 19:12:13 +0100 Subject: [PATCH 2/8] chore: set fuelConfig on page load --- .../src/pages/_app.tsx | 19 ++++++++++++------- templates/nextjs/src/pages/_app.tsx | 19 ++++++++++++------- 2 files changed, 24 insertions(+), 14 deletions(-) diff --git a/apps/create-fuels-counter-guide/src/pages/_app.tsx b/apps/create-fuels-counter-guide/src/pages/_app.tsx index 3ec9d2f9283..99e81a4a584 100644 --- a/apps/create-fuels-counter-guide/src/pages/_app.tsx +++ b/apps/create-fuels-counter-guide/src/pages/_app.tsx @@ -6,16 +6,21 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import type { FuelConfig } from "fuels"; import { defaultConnectors } from "@fuels/connectors"; import { ENABLE_FUEL_DEV_CONNECTOR } from "@/lib"; -import React from "react"; +import React, { useEffect } from "react"; -export const queryClient: QueryClient = new QueryClient() -export const fuelConfig: FuelConfig = { - connectors: defaultConnectors({ - devMode: ENABLE_FUEL_DEV_CONNECTOR, - }) -} +const queryClient: QueryClient = new QueryClient() export default function App({ Component, pageProps }: AppProps) { + let fuelConfig: FuelConfig = {}; + + useEffect(() => { + fuelConfig = { + connectors: defaultConnectors({ + devMode: ENABLE_FUEL_DEV_CONNECTOR + }) + } + }, []) + return ( diff --git a/templates/nextjs/src/pages/_app.tsx b/templates/nextjs/src/pages/_app.tsx index 3ec9d2f9283..99e81a4a584 100644 --- a/templates/nextjs/src/pages/_app.tsx +++ b/templates/nextjs/src/pages/_app.tsx @@ -6,16 +6,21 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import type { FuelConfig } from "fuels"; import { defaultConnectors } from "@fuels/connectors"; import { ENABLE_FUEL_DEV_CONNECTOR } from "@/lib"; -import React from "react"; +import React, { useEffect } from "react"; -export const queryClient: QueryClient = new QueryClient() -export const fuelConfig: FuelConfig = { - connectors: defaultConnectors({ - devMode: ENABLE_FUEL_DEV_CONNECTOR, - }) -} +const queryClient: QueryClient = new QueryClient() export default function App({ Component, pageProps }: AppProps) { + let fuelConfig: FuelConfig = {}; + + useEffect(() => { + fuelConfig = { + connectors: defaultConnectors({ + devMode: ENABLE_FUEL_DEV_CONNECTOR + }) + } + }, []) + return ( From c47416d70118cdf57a09ece9f07302b55df35369 Mon Sep 17 00:00:00 2001 From: Peter Smith Date: Tue, 16 Apr 2024 19:12:53 +0100 Subject: [PATCH 3/8] chore: release to npm --- .github/workflows/pr-release.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/pr-release.yaml b/.github/workflows/pr-release.yaml index 9b48fc2352a..34ad25146b1 100644 --- a/.github/workflows/pr-release.yaml +++ b/.github/workflows/pr-release.yaml @@ -8,7 +8,7 @@ jobs: name: "Release PR to npm" runs-on: ubuntu-latest # comment out if:false to enable release PR to npm - if: false + # if: false permissions: write-all steps: - name: Checkout From c1eaf6be9caa87cd5a14fb74971c2044afc541b8 Mon Sep 17 00:00:00 2001 From: Peter Smith Date: Tue, 16 Apr 2024 19:39:10 +0100 Subject: [PATCH 4/8] chore: updated fuel FE packages for demo-wallet-sdk-react --- apps/demo-wallet-sdk-react/package.json | 4 +- apps/demo-wallet-sdk-react/pages/_app.tsx | 21 +++++-- apps/demo-wallet-sdk-react/pages/index.tsx | 2 +- .../cookbook/wallet-sdk-and-react-hooks.md | 4 +- pnpm-lock.yaml | 60 +++---------------- 5 files changed, 31 insertions(+), 60 deletions(-) diff --git a/apps/demo-wallet-sdk-react/package.json b/apps/demo-wallet-sdk-react/package.json index aacd3b22b18..5e26d996ed2 100644 --- a/apps/demo-wallet-sdk-react/package.json +++ b/apps/demo-wallet-sdk-react/package.json @@ -9,7 +9,9 @@ "lint": "next lint" }, "dependencies": { - "@fuel-wallet/react": "0.15.2", + "@fuels/connectors": "^0.2.2", + "@fuels/react": "^0.18.1", + "@tanstack/react-query": "^5.29.2", "fuels": "workspace:*", "next": "14.1.0", "react": "^18", diff --git a/apps/demo-wallet-sdk-react/pages/_app.tsx b/apps/demo-wallet-sdk-react/pages/_app.tsx index 72058fd9965..620a2a8e57c 100644 --- a/apps/demo-wallet-sdk-react/pages/_app.tsx +++ b/apps/demo-wallet-sdk-react/pages/_app.tsx @@ -1,13 +1,24 @@ import "@/styles/globals.css"; -import { FuelProvider } from "@fuel-wallet/react"; +// #region wallet-sdk-react-provider +import { defaultConnectors } from '@fuels/connectors'; +import { FuelProvider } from "@fuels/react"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import type { AppProps } from "next/app"; +import React from "react"; + +const queryClient = new QueryClient(); -// #region wallet-sdk-react-provider export default function App({ Component, pageProps }: AppProps) { return ( - - - + + + + + + + ); } // #endregion wallet-sdk-react-provider + + diff --git a/apps/demo-wallet-sdk-react/pages/index.tsx b/apps/demo-wallet-sdk-react/pages/index.tsx index ef8fdfa21eb..506fe729437 100644 --- a/apps/demo-wallet-sdk-react/pages/index.tsx +++ b/apps/demo-wallet-sdk-react/pages/index.tsx @@ -6,7 +6,7 @@ import { useConnectors, useDisconnect, useIsConnected, -} from "@fuel-wallet/react"; +} from "@fuels/react"; import { useState } from "react"; export default function Home() { diff --git a/apps/docs/src/guide/cookbook/wallet-sdk-and-react-hooks.md b/apps/docs/src/guide/cookbook/wallet-sdk-and-react-hooks.md index 904de8a1707..e3a720e990d 100644 --- a/apps/docs/src/guide/cookbook/wallet-sdk-and-react-hooks.md +++ b/apps/docs/src/guide/cookbook/wallet-sdk-and-react-hooks.md @@ -23,11 +23,11 @@ Next, we will install the Fuel Wallet React SDK and the Fuel TypeScript SDK. ::: code-group ```sh [npm] -npm install @fuel-wallet/react fuels@0.73.0 +npm install fuels @fuels/connectors @fuels/react @tanstack/react-query ``` ```sh [pnpm] -pnpm add @fuel-wallet/react fuels@0.73.0 +pnpm add fuels @fuels/connectors @fuels/react @tanstack/react-query ``` ::: diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4429950842d..45b74d266d2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -398,9 +398,15 @@ importers: apps/demo-wallet-sdk-react: dependencies: - '@fuel-wallet/react': - specifier: 0.15.2 - version: 0.15.2(@types/react-dom@18.2.4)(@types/react@18.2.9)(fuels@packages+fuels)(react-dom@18.2.0)(react@18.2.0) + '@fuels/connectors': + specifier: ^0.2.2 + version: 0.2.2(fuels@packages+fuels) + '@fuels/react': + specifier: ^0.18.1 + version: 0.18.1(@tanstack/react-query@5.29.2)(@types/react-dom@18.2.4)(@types/react@18.2.9)(fuels@packages+fuels)(react-dom@18.2.0)(react@18.2.0) + '@tanstack/react-query': + specifier: ^5.29.2 + version: 5.29.2(react@18.2.0) fuels: specifier: workspace:* version: link:../../packages/fuels @@ -4383,24 +4389,6 @@ packages: engines: {node: '>=14'} dev: true - /@fuel-wallet/react@0.15.2(@types/react-dom@18.2.4)(@types/react@18.2.9)(fuels@packages+fuels)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-cJPidiRSSZM2jV4bHgvQl7EOTnNde7Lx7+49Hxs7hr53eleS5Otd8yY3grgWDWL0D4wiSLZkrUM+U2SH9ScENg==} - peerDependencies: - fuels: '>=0.73.0' - react: ^18.2.0 - dependencies: - '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.4)(@types/react@18.2.9)(react-dom@18.2.0)(react@18.2.0) - '@tanstack/react-query': 4.36.1(react-dom@18.2.0)(react@18.2.0) - events: 3.3.0 - fuels: link:packages/fuels - react: 18.2.0 - transitivePeerDependencies: - - '@types/react' - - '@types/react-dom' - - react-dom - - react-native - dev: false - /@fuels/assets@0.1.4: resolution: {integrity: sha512-6rSbzxxDlDkoW9u4vvSbTfnA4Cy9WjZ1ajBOuKTnvoQ9EzQKvrP4lYpN2SjqdfJkdhRfCItaf1aQq/avaN51BQ==} dev: false @@ -6718,32 +6706,10 @@ packages: defer-to-connect: 2.0.1 dev: true - /@tanstack/query-core@4.36.1: - resolution: {integrity: sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==} - dev: false - /@tanstack/query-core@5.29.0: resolution: {integrity: sha512-WgPTRs58hm9CMzEr5jpISe8HXa3qKQ8CxewdYZeVnA54JrPY9B1CZiwsCoLpLkf0dGRZq+LcX5OiJb0bEsOFww==} dev: false - /@tanstack/react-query@4.36.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-native: '*' - peerDependenciesMeta: - react-dom: - optional: true - react-native: - optional: true - dependencies: - '@tanstack/query-core': 4.36.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - use-sync-external-store: 1.2.0(react@18.2.0) - dev: false - /@tanstack/react-query@5.29.2(react@18.2.0): resolution: {integrity: sha512-nyuWILR4u7H5moLGSiifLh8kIqQDLNOHGuSz0rcp+J75fNc8aQLyr5+I2JCHU3n+nJrTTW1ssgAD8HiKD7IFBQ==} peerDependencies: @@ -21376,14 +21342,6 @@ packages: tslib: 2.6.0 dev: false - /use-sync-external-store@1.2.0(react@18.2.0): - resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - react: 18.2.0 - dev: false - /userhome@1.0.0: resolution: {integrity: sha512-ayFKY3H+Pwfy4W98yPdtH1VqH4psDeyW8lYYFzfecR9d6hqLpqhecktvYR3SEEXt7vG0S1JEpciI3g94pMErig==} engines: {node: '>= 0.8.0'} From d7a06c25f480c0b387a001760d52ddefcf68395b Mon Sep 17 00:00:00 2001 From: Peter Smith Date: Tue, 16 Apr 2024 19:44:06 +0100 Subject: [PATCH 5/8] chore: added changeset --- .changeset/lemon-rules-chew.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/lemon-rules-chew.md diff --git a/.changeset/lemon-rules-chew.md b/.changeset/lemon-rules-chew.md new file mode 100644 index 00000000000..2575e7de6e0 --- /dev/null +++ b/.changeset/lemon-rules-chew.md @@ -0,0 +1,6 @@ +--- +"demo-wallet-sdk-react": minor +"create-fuels": minor +--- + +chore: upgrade Fuel frontend packages From dd49581e0357e0a697fe50ed9bff6058e1faa406 Mon Sep 17 00:00:00 2001 From: Peter Smith Date: Wed, 17 Apr 2024 09:25:41 +0100 Subject: [PATCH 6/8] chore: fixed signature for wallet --- .../create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx | 4 ++-- apps/create-fuels-counter-guide/src/lib.ts | 4 ++-- templates/nextjs/src/hooks/useBrowserWallet.tsx | 2 +- templates/nextjs/src/lib.ts | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx b/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx index 051dc95849e..99df04655ca 100644 --- a/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx +++ b/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx @@ -1,6 +1,6 @@ import { AppWallet } from "@/lib"; import { useIsConnected, useNetwork, useWallet } from "@fuels/react"; -import { Account, BN, WalletLocked } from "fuels"; +import { Account, BN } from "fuels"; import { useCallback, useState } from "react"; import useAsync from "react-use/lib/useAsync"; @@ -29,7 +29,7 @@ export const useBrowserWallet: () => BrowserWallet = () => { }, [wallet]); return { - wallet, + wallet: wallet || undefined, walletBalance: browserWalletBalance, refreshWalletBalance: refreshBrowserWalletBalance, isConnected, diff --git a/apps/create-fuels-counter-guide/src/lib.ts b/apps/create-fuels-counter-guide/src/lib.ts index eabba6d3319..2c3b40203f4 100644 --- a/apps/create-fuels-counter-guide/src/lib.ts +++ b/apps/create-fuels-counter-guide/src/lib.ts @@ -1,4 +1,4 @@ -import { Account, BN, WalletLocked, WalletUnlocked } from 'fuels'; +import { Account, BN } from 'fuels'; export const NODE_URL = `http://127.0.0.1:${ process.env.NEXT_PUBLIC_FUEL_NODE_PORT || 4000 @@ -11,7 +11,7 @@ export const NODE_URL = `http://127.0.0.1:${ export const ENABLE_FUEL_DEV_CONNECTOR = process.env.NEXT_PUBLIC_ENABLE_FUEL_DEV_CONNECTOR === 'true'; export interface AppWallet { - wallet?: Account | null | undefined; + wallet?: Account; walletBalance?: BN; refreshWalletBalance?: () => Promise; } diff --git a/templates/nextjs/src/hooks/useBrowserWallet.tsx b/templates/nextjs/src/hooks/useBrowserWallet.tsx index 051dc95849e..a6f96198aa5 100644 --- a/templates/nextjs/src/hooks/useBrowserWallet.tsx +++ b/templates/nextjs/src/hooks/useBrowserWallet.tsx @@ -29,7 +29,7 @@ export const useBrowserWallet: () => BrowserWallet = () => { }, [wallet]); return { - wallet, + wallet: wallet || undefined, walletBalance: browserWalletBalance, refreshWalletBalance: refreshBrowserWalletBalance, isConnected, diff --git a/templates/nextjs/src/lib.ts b/templates/nextjs/src/lib.ts index eabba6d3319..2c3b40203f4 100644 --- a/templates/nextjs/src/lib.ts +++ b/templates/nextjs/src/lib.ts @@ -1,4 +1,4 @@ -import { Account, BN, WalletLocked, WalletUnlocked } from 'fuels'; +import { Account, BN } from 'fuels'; export const NODE_URL = `http://127.0.0.1:${ process.env.NEXT_PUBLIC_FUEL_NODE_PORT || 4000 @@ -11,7 +11,7 @@ export const NODE_URL = `http://127.0.0.1:${ export const ENABLE_FUEL_DEV_CONNECTOR = process.env.NEXT_PUBLIC_ENABLE_FUEL_DEV_CONNECTOR === 'true'; export interface AppWallet { - wallet?: Account | null | undefined; + wallet?: Account; walletBalance?: BN; refreshWalletBalance?: () => Promise; } From 4ca5086820162e8bb41d079957b17254a88ee7d8 Mon Sep 17 00:00:00 2001 From: Peter Smith Date: Wed, 17 Apr 2024 13:28:55 +0100 Subject: [PATCH 7/8] chore: ignore `demo-wallet-sdk-react` in changeset --- .changeset/config.json | 3 ++- .changeset/lemon-rules-chew.md | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/config.json b/.changeset/config.json index 4e4bb2a685c..c3542254204 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -17,6 +17,7 @@ "demo-typegen", "@fuel-ts/docs-snippets", "template-nextjs", - "create-fuels-counter-guide" + "create-fuels-counter-guide", + "demo-wallet-sdk-react" ] } diff --git a/.changeset/lemon-rules-chew.md b/.changeset/lemon-rules-chew.md index 2575e7de6e0..c4b66143d3c 100644 --- a/.changeset/lemon-rules-chew.md +++ b/.changeset/lemon-rules-chew.md @@ -1,5 +1,4 @@ --- -"demo-wallet-sdk-react": minor "create-fuels": minor --- From 3b3f43883bfd33a73d690a778bf04495e4e6c74a Mon Sep 17 00:00:00 2001 From: Peter Smith Date: Thu, 18 Apr 2024 10:31:01 +0100 Subject: [PATCH 8/8] chore: removed type hint from `useWallet` --- apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx | 2 +- templates/nextjs/src/hooks/useBrowserWallet.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx b/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx index 99df04655ca..4a69d501e11 100644 --- a/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx +++ b/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx @@ -10,7 +10,7 @@ interface BrowserWallet extends AppWallet { } export const useBrowserWallet: () => BrowserWallet = () => { - const { wallet }: { wallet: Account | null | undefined } = useWallet(); + const { wallet } = useWallet(); const [browserWalletBalance, setBrowserWalletBalance] = useState(); const { isConnected } = useIsConnected(); const { network } = useNetwork(); diff --git a/templates/nextjs/src/hooks/useBrowserWallet.tsx b/templates/nextjs/src/hooks/useBrowserWallet.tsx index a6f96198aa5..dc8f68adbf6 100644 --- a/templates/nextjs/src/hooks/useBrowserWallet.tsx +++ b/templates/nextjs/src/hooks/useBrowserWallet.tsx @@ -10,7 +10,7 @@ interface BrowserWallet extends AppWallet { } export const useBrowserWallet: () => BrowserWallet = () => { - const { wallet }: { wallet: Account | null | undefined } = useWallet(); + const { wallet } = useWallet(); const [browserWalletBalance, setBrowserWalletBalance] = useState(); const { isConnected } = useIsConnected(); const { network } = useNetwork();