use new wallet connectors

README.md

@@ -4,7 +4,7 @@ A simple farming game written in Sway.
 
 ## Running Locally
 
-Make sure you have `fuelup` installed and are using the `beta-5` toolchain. 
+Make sure you have [`fuelup`](https://docs.fuel.network/guides/installation/) installed and are using the `latest` toolchain.
 
 Install the Fuel Wallet extension and copy your wallet address. In the frontend folder, open the `src/App.tsx` file and add the following lines using your Fuel wallet address:
 

frontend/package.json

@@ -5,12 +5,13 @@
   "dependencies": {
     "@fuel-ui/css": "^0.12.4",
     "@fuel-ui/react": "^0.12.4",
-    "@fuel-wallet/react": "^0.15.2",
-    "@fuel-wallet/sdk": "^0.15.2",
+    "@fuels/connectors": "^0.2.2",
     "@fuels/eslint-plugin": "^0.1.4",
     "@fuels/prettier-config": "^0.1.4",
+    "@fuels/react": "^0.18.0",
     "@react-three/drei": "^9.97.0",
     "@react-three/fiber": "^8.15.16",
+    "@tanstack/react-query": "^5.28.9",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -19,7 +20,7 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vercel/analytics": "^1.0.0",
-    "fuels": "^0.73.0",
+    "fuels": "^0.79.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

frontend/src/App.tsx

@@ -5,7 +5,7 @@ import {
   useWallet,
   useAssets,
   useAddAssets,
-} from '@fuel-wallet/react';
+} from '@fuels/react';
 import { Analytics } from '@vercel/analytics/react';
 import { Wallet, Provider } from 'fuels';
 import type { Account } from 'fuels';

frontend/src/components/Game.tsx

@@ -74,7 +74,7 @@ export default function Game({ contract, isMobile }: GameProps) {
               gasPrice: 1,
               gasLimit: 800_000,
             })
-            .simulate();
+            .get();
           if (Some?.farming_skill.gte(1)) {
             setPlayer(Some);
             // if there is a player found, get the rest of the player info
@@ -87,7 +87,7 @@ export default function Game({ contract, isMobile }: GameProps) {
                 gasPrice: 1,
                 gasLimit: 800_000,
               })
-              .simulate();
+              .get();
             const seedAmount = new BN(results[0]).toNumber();
             setSeeds(seedAmount);
             const itemAmount = new BN(results[1]).toNumber();

frontend/src/components/Garden.tsx

@@ -38,7 +38,7 @@ export default function Garden({
               gasPrice: 1,
               gasLimit: 800_000,
             })
-            .simulate();
+            .get();
           setTileStates(value);
         } catch (err) {
           console.log('Error:', err);

frontend/src/components/NewPlayer.tsx

@@ -1,6 +1,6 @@
 import { cssObj } from '@fuel-ui/css';
 import { Button, BoxCentered, Link } from '@fuel-ui/react';
-import { useWallet } from '@fuel-wallet/react';
+import { useWallet } from '@fuels/react';
 import { useState, useEffect } from 'react';
 
 import { BASE_ASSET_ID, buttonStyle } from '../constants';

frontend/src/components/home/Home.tsx

@@ -1,6 +1,6 @@
 import { cssObj } from '@fuel-ui/css';
 import { Button, Box } from '@fuel-ui/react';
-import { useConnectUI } from '@fuel-wallet/react';
+import { useConnectUI } from '@fuels/react';
 import { Wallet, Provider } from 'fuels';
 import type { Dispatch, SetStateAction } from 'react';
 import { useEffect, useState } from 'react';

frontend/src/components/show/ShowCoins.tsx

@@ -1,6 +1,6 @@
 import { cssObj } from '@fuel-ui/css';
 import { Box } from '@fuel-ui/react';
-import { useWallet } from '@fuel-wallet/react';
+import { useWallet } from '@fuels/react';
 import type { BN } from 'fuels';
 import { useState, useEffect } from 'react';
 

frontend/src/constants.ts

@@ -1,6 +1,5 @@
 import { cssObj } from '@fuel-ui/css';
-import type { Asset } from '@fuel-wallet/sdk';
-import type { Fuel } from '@fuels/assets';
+import type { Fuel, Asset } from '@fuels/assets';
 import type { BN } from 'fuels';
 import { Vector3 } from 'three';
 

frontend/src/index.tsx

@@ -1,27 +1,37 @@
-import { FuelProvider } from '@fuel-wallet/react';
+import {
+  FuelWalletConnector,
+  FuelWalletDevelopmentConnector,
+  FueletWalletConnector,
+  EVMWalletConnector
+} from '@fuels/connectors';
+import { FuelProvider } from '@fuels/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+
+const queryClient = new QueryClient();
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <FuelProvider
-      fuelConfig={{
-        devMode: true,
-      }}
-    >
-      <App />
-    </FuelProvider>
+       <QueryClientProvider client={queryClient}>
+      <FuelProvider
+        fuelConfig={{
+          connectors: [
+            new FuelWalletConnector(),
+            new FuelWalletDevelopmentConnector(),
+            new FueletWalletConnector(),
+            new EVMWalletConnector(),
+          ],
+        }}
+      >
+        <App />
+      </FuelProvider>
+    </QueryClientProvider>
   </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+);