chore: change deps three (#66)

Co-authored-by: Hélcio Franco <helciofranco@me.com>

.changeset/config.json

@@ -14,7 +14,7 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["react-app"],
+  "ignore": ["react-app", "react-next"],
   "snapshot": {
     "useCalculatedVersion": true,
     "prereleaseTemplate": "{tag}-{commit}"

.changeset/six-drinks-poke.md

@@ -0,0 +1,5 @@
+---
+"@fuels/connectors": minor
+---
+
+fix: add missing dependencies to allow nextjs to build

.github/workflows/pr-tests.yml

@@ -20,7 +20,7 @@ jobs:
         uses: FuelLabs/github-actions/setups/node@master
         with:
           node-version: 20.11.0
-          pnpm-version: 8.9.0
+          pnpm-version: 8.15.7
 
       - uses: FuelLabs/github-actions/setups/docker@master
         with:

.github/workflows/pr.yaml

@@ -45,7 +45,8 @@ jobs:
       - name: CI Setup
         uses: FuelLabs/github-actions/setups/node@master
         with:
-          pnpm-version: 8.9.0
+          node-version: 20.11.0
+          pnpm-version: 8.15.7
 
       - name: Validate Changeset
         run: pnpm changeset status --since=origin/${{ github.base_ref }}
@@ -57,7 +58,8 @@ jobs:
       - uses: actions/checkout@v3
       - uses: FuelLabs/github-actions/setups/node@master
         with:
-          pnpm-version: 8.9.0
+          node-version: 20.11.0
+          pnpm-version: 8.15.7
       - run: pnpm audit --prod
 
   lint:
@@ -74,7 +76,8 @@ jobs:
       - name: Setup Node
         uses: FuelLabs/github-actions/setups/node@master
         with:
-          pnpm-version: 8.9.0
+          node-version: 20.11.0
+          pnpm-version: 8.15.7
 
       - name: Run lint  & ts:check
         run: |

.github/workflows/release-npm-latest.yaml

@@ -21,7 +21,8 @@ jobs:
           fetch-depth: 0
       - uses: FuelLabs/github-actions/setups/node@master
         with:
-          pnpm-version: 8.9.0
+          node-version: 20.11.0
+          pnpm-version: 8.15.7
       - uses: FuelLabs/github-actions/setups/npm@master
         with:
           npm-token: ${{ secrets.NPM_TOKEN }}

.github/workflows/release-npm-preview.yaml

@@ -22,7 +22,8 @@ jobs:
           fetch-depth: 0
       - uses: FuelLabs/github-actions/setups/node@master
         with:
-          pnpm-version: 8.9.0
+          node-version: 20.11.0
+          pnpm-version: 8.15.7
       - uses: FuelLabs/github-actions/setups/npm@master
         with:
           npm-token: ${{ secrets.NPM_TOKEN }}

.github/workflows/release-npm.yaml

@@ -23,7 +23,8 @@ jobs:
           fetch-depth: 0
       - uses: FuelLabs/github-actions/setups/node@master
         with:
-          pnpm-version: 8.9.0
+          node-version: 20.11.0
+          pnpm-version: 8.15.7
       - uses: FuelLabs/github-actions/setups/npm@master
         with:
           npm-token: ${{ secrets.NPM_TOKEN }}

.github/workflows/unpublish-npm.yaml

@@ -20,7 +20,8 @@ jobs:
       - uses: actions/checkout@v3
       - uses: FuelLabs/github-actions/setups/node@master
         with:
-          pnpm-version: 8.9.0
+          node-version: 20.11.0
+          pnpm-version: 8.15.7
       - uses: FuelLabs/github-actions/setups/npm@master
         with:
           npm-token: ${{ secrets.NPM_TOKEN }}

.github/workflows/update-sdk-cron.yaml

@@ -24,7 +24,8 @@ jobs:
       - uses: actions/checkout@v3
       - uses: FuelLabs/github-actions/setups/node@master
         with:
-          pnpm-version: 8.9.0
+          node-version: 20.11.0
+          pnpm-version: 8.15.7
 
       - name: Checking updates
         uses: FuelLabs/github-actions/update-sdk@master

examples/react-app/package.json

@@ -9,25 +9,25 @@
   },
   "dependencies": {
     "@fuels/connectors": "workspace:*",
-    "@fuels/react": "pr-72",
+    "@fuels/react": "0.19.0",
     "@radix-ui/react-toast": "1.1.5",
-    "@tanstack/react-query": "5.28.8",
-    "@wagmi/connectors": "4.1.24",
-    "@wagmi/core": "2.0.1",
-    "clsx": "2.1.0",
+    "@tanstack/react-query": "5.35.1",
+    "@wagmi/connectors": "4.3.3",
+    "@wagmi/core": "2.9.1",
+    "clsx": "2.1.1",
     "fuels": "0.84.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "5.28.8",
-    "@types/react": "18.2.71",
-    "@types/react-dom": "18.2.22",
+    "@tanstack/react-query-devtools": "5.35.1",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "4.2.1",
     "autoprefixer": "10.4.19",
     "postcss": "8.4.38",
-    "tailwindcss": "3.4.1",
-    "typescript": "5.4.3",
-    "vite": "5.2.6"
+    "tailwindcss": "3.4.3",
+    "typescript": "5.4.5",
+    "vite": "5.2.11"
   }
 }

examples/react-next/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/react-next/README.md

@@ -0,0 +1,36 @@
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+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/react-next/next.config.js

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['@fuels/connectors'],
+  webpack: (config) => {
+    // https://github.com/WalletConnect/walletconnect-monorepo/issues/1908
+    // https://docs.walletconnect.com/web3modal/nextjs/about#extra-configuration
+    config.externals.push('pino-pretty', 'lokijs', 'encoding');
+
+    return config;
+  },
+};
+
+module.exports = nextConfig;

examples/react-next/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "react-next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@fuels/connectors": "workspace:*",
+    "@fuels/react": "0.19.0",
+    "@tanstack/react-query": "5.35.1",
+    "@wagmi/connectors": "4.3.3",
+    "fuels": "0.84.0",
+    "next": "14.2.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "wagmi": "2.8.1"
+  },
+  "devDependencies": {
+    "@tanstack/react-query-devtools": "5.35.1",
+    "@types/node": "20.12.11",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
+    "typescript": "5.4.5"
+  }
+}

examples/react-next/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import { Providers } from '@/components/Providers';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

examples/react-next/src/app/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import {
+  useAccounts,
+  useConnectUI,
+  useDisconnect,
+  useIsConnected,
+  useWallet,
+} from '@fuels/react';
+
+export default function Page() {
+  const { connect, error, isError, isConnecting } = useConnectUI();
+  const { disconnect } = useDisconnect();
+  const { isConnected } = useIsConnected();
+  const { accounts } = useAccounts();
+
+  const { wallet } = useWallet();
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          console.log('connect');
+          connect();
+        }}
+      >
+        {isConnecting ? 'Connecting' : 'Connect'}
+      </button>
+      {isConnected && (
+        <button type="button" onClick={() => disconnect()}>
+          Disconnect
+        </button>
+      )}
+
+      {isError && <p className="Error">{error?.message}</p>}
+
+      {wallet && <div>Wallet: {wallet.address.toString()}</div>}
+
+      {isConnected && (
+        <div>
+          <h3>Connected accounts</h3>
+          {accounts?.map((account) => (
+            <div key={account}>
+              <b>Account:</b> {account}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

examples/react-next/src/components/Providers.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+import {
+  FuelWalletConnector,
+  FuelWalletDevelopmentConnector,
+  FueletWalletConnector,
+  WalletConnectConnector,
+} from '@fuels/connectors';
+import { FuelProvider } from '@fuels/react';
+
+const queryClient = new QueryClient();
+
+export const Providers = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <FuelProvider
+        theme="dark"
+        fuelConfig={{
+          connectors: [
+            new FuelWalletConnector(),
+            new FuelWalletDevelopmentConnector(),
+            new FueletWalletConnector(),
+            new WalletConnectConnector(),
+          ],
+        }}
+      >
+        {children}
+      </FuelProvider>
+
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+};