feat: upgrade sdk (#1141)

- Update `fuels` to `0.77.0` (latest).
- Update `@fuels/react` to `0.17.0` (latest).
- Update `@fuels/connectors` to `0.1.1` (latest).
- Add `@tanstack/react-query` as `peerDependency`.

.changeset/tame-flowers-grow.md

@@ -0,0 +1,7 @@
+---
+'@fuel-wallet/connections': minor
+'@fuel-wallet/types': minor
+'fuels-wallet': minor
+---
+
+feat: bump SDK to latest version

.github/workflows/pr.yaml

@@ -30,7 +30,6 @@ jobs:
         with:
           files: |
             **/packages/app/**  
-            **/packages/sdk/**
             **/packages/types/**
             **/packages/react/**
 

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

@@ -30,5 +30,4 @@ jobs:
 
       - name: Change tag to latest
         run: |
-          npm dist-tag add @fuel-wallet/sdk@${{ env.BUILD_VERSION }} latest
           npm dist-tag add @fuel-wallet/types@${{ env.BUILD_VERSION }} latest

examples/cra-dapp/package.json

@@ -6,14 +6,15 @@
     "start": "vite"
   },
   "dependencies": {
-    "@fuels/connectors": "0.1.0",
-    "@fuels/react": "0.16.0",
-    "fuels": "0.75.0",
+    "@fuels/connectors": "0.1.1",
+    "@fuels/react": "0.17.0",
+    "@tanstack/react-query": "5.28.4",
+    "fuels": "0.77.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "^4.36.1",
+    "@tanstack/react-query-devtools": "5.28.4",
     "@types/react": "18.2.56",
     "@types/react-dom": "18.2.19",
     "@vitejs/plugin-react": "4.2.1",

examples/cra-dapp/src/main.tsx

@@ -4,25 +4,31 @@ import {
   FueletWalletConnector,
 } from '@fuels/connectors';
 import { FuelProvider } from '@fuels/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
 import App from './App';
 
+const queryClient = new QueryClient();
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <FuelProvider
-      fuelConfig={{
-        connectors: [
-          new FuelWalletConnector(),
-          new FuelWalletDevelopmentConnector(),
-          new FueletWalletConnector(),
-        ],
-      }}
-    >
-      <App />
+    <QueryClientProvider client={queryClient}>
+      <FuelProvider
+        fuelConfig={{
+          connectors: [
+            new FuelWalletConnector(),
+            new FuelWalletDevelopmentConnector(),
+            new FueletWalletConnector(),
+          ],
+        }}
+      >
+        <App />
+      </FuelProvider>
+
       <ReactQueryDevtools initialIsOpen={false} />
-    </FuelProvider>
+    </QueryClientProvider>
   </React.StrictMode>
 );

package.json

@@ -75,7 +75,7 @@
     "@biomejs/biome": "1.6.1",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
-    "@fuels/ts-config": "0.1.4",
+    "@fuels/ts-config": "0.17.0",
     "@jest/types": "29.6.3",
     "@playwright/test": "1.39.0",
     "@types/jest": "^29.5.5",

packages/app/connect/connect.stories.tsx

@@ -1,6 +1,7 @@
 import { cssObj } from '@fuel-ui/css';
 import { Box, Button, Text } from '@fuel-ui/react';
 import { FuelProvider, useAccount, useConnectUI } from '@fuels/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useDarkMode } from 'storybook-dark-mode';
 
 export default {
@@ -11,6 +12,8 @@ export default {
   },
 };
 
+const queryClient = new QueryClient();
+
 const App = () => {
   const { account } = useAccount();
   const { connect, isConnecting } = useConnectUI();
@@ -27,13 +30,14 @@ const App = () => {
 
 export const Usage = () => {
   const isDark = useDarkMode();
+
   return (
     <Box css={styles.box}>
-      <FuelProvider>
+      <QueryClientProvider client={queryClient}>
         <FuelProvider theme={isDark ? 'dark' : 'light'}>
           <App />
         </FuelProvider>
-      </FuelProvider>
+      </QueryClientProvider>
     </Box>
   );
 };

packages/app/package.json

@@ -26,15 +26,17 @@
     "@fuel-ui/react": "0.23.2",
     "@fuel-ui/test-utils": "0.17.0",
     "@fuel-wallet/connections": "workspace:*",
-    "@fuels/assets": "0.15.3",
-    "@fuels/connectors": "0.1.0",
-    "@fuels/local-storage": "0.15.3",
-    "@fuels/react-xstore": "0.15.3",
+    "@fuels/assets": "^0.17.0",
+    "@fuels/connectors": "0.1.1",
+    "@fuels/local-storage": "0.17.0",
+    "@fuels/react": "0.17.0",
+    "@fuels/react-xstore": "0.17.0",
     "@hookform/resolvers": "3.3.2",
     "@react-aria/utils": "3.21.0",
     "@sentry/browser": "7.73.0",
     "@storybook/addon-viewport": "7.4.6",
     "@storybook/jest": "0.2.3",
+    "@tanstack/react-query": "5.28.4",
     "@xstate/react": "3.2.2",
     "compare-versions": "6.1.0",
     "cross-fetch": "4.0.0",
@@ -45,11 +47,11 @@
     "events": "3.3.0",
     "fake-indexeddb": "4.0.2",
     "framer-motion": "10.16.4",
-    "fuels": "0.75.0",
+    "fuels": "0.77.0",
     "graphql": "16.8.1",
     "graphql-request": "6.1.0",
     "graphql-tag": "2.12.6",
-    "json-rpc-2.0": "1.6.0",
+    "json-rpc-2.0": "1.7.0",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
     "react": "18.2.0",
@@ -67,8 +69,6 @@
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "1.0.14",
-    "@fuels/react": "0.16.0",
-    "@fuel-wallet/sdk": "workspace:*",
     "@fuel-wallet/types": "workspace:*",
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/named-operations-object": "2.3.1",
@@ -96,6 +96,7 @@
     "@storybook/react-webpack5": "7.4.6",
     "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "7.4.6",
+    "@tanstack/react-query-devtools": "5.28.4",
     "@testing-library/react": "14.0.0",
     "@types/chrome": "0.0.246",
     "@types/lodash.clonedeep": "4.5.7",

packages/app/playwright/crx/crx.test.ts

@@ -1,6 +1,13 @@
-import type { Account, Asset } from '@fuel-wallet/sdk';
 import { expect } from '@playwright/test';
-import { Signer, bn, hashMessage, Wallet, Provider } from 'fuels';
+import {
+  Signer,
+  bn,
+  hashMessage,
+  Wallet,
+  Provider,
+  type Account,
+  type Asset,
+} from 'fuels';
 
 import {
   seedWallet,

packages/app/playwright/mocks/database.ts

@@ -1,12 +1,10 @@
+import type { AssetData, Connection, NetworkData } from '@fuel-wallet/types';
+import type { Page } from '@playwright/test';
 import type {
+  WalletManagerAccount as WalletAccount,
   Account,
   Asset,
-  AssetData,
-  Connection,
-  NetworkData,
-} from '@fuel-wallet/sdk';
-import type { Page } from '@playwright/test';
-import type { WalletManagerAccount as WalletAccount } from 'fuels';
+} from 'fuels';
 import { WalletManager, Mnemonic, encrypt, Address } from 'fuels';
 
 import { getByAriaLabel } from '../commons/locator';

packages/app/src/main.tsx

@@ -5,7 +5,7 @@ import { App } from './App';
 import './exports';
 import { RouterProvider } from './systems/Core/components/RouterProvider';
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById('root') as HTMLElement).render(
   <RouterProvider>
     <App />
   </RouterProvider>

packages/app/src/systems/CRX/background/services/BackgroundService.ts

@@ -1,10 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  BACKGROUND_SCRIPT_NAME,
-  CONTENT_SCRIPT_NAME,
-  MessageTypes,
-} from '@fuel-wallet/types';
+import { BACKGROUND_SCRIPT_NAME } from '@fuel-wallet/types';
 import type { Connection } from '@fuel-wallet/types';
+import { CONTENT_SCRIPT_NAME, MessageTypes } from '@fuels/connectors';
 import { Address } from 'fuels';
 import type {
   JSONRPCParams,

packages/app/src/systems/CRX/background/services/CommunicationProtocol.ts

@@ -1,14 +1,11 @@
 import { BaseConnection, createUUID } from '@fuel-wallet/connections';
-import type {
-  CommunicationEventArg,
-  CommunicationMessage,
-  EventMessage,
-} from '@fuel-wallet/types';
+import type { CommunicationEventArg } from '@fuel-wallet/types';
+import { VAULT_SCRIPT_NAME, BACKGROUND_SCRIPT_NAME } from '@fuel-wallet/types';
 import {
-  VAULT_SCRIPT_NAME,
-  BACKGROUND_SCRIPT_NAME,
   MessageTypes,
-} from '@fuel-wallet/types';
+  type CommunicationMessage,
+  type EventMessage,
+} from '@fuels/connectors';
 
 export class CommunicationProtocol extends BaseConnection {
   ports: Map<string, chrome.runtime.Port>;

packages/app/src/systems/CRX/background/services/DatabaseEvents.ts

@@ -1,10 +1,6 @@
-import type {
-  Account,
-  Connection,
-  EventMessage,
-  EventMessageEvents,
-} from '@fuel-wallet/types';
-import { CONTENT_SCRIPT_NAME, MessageTypes } from '@fuel-wallet/types';
+import type { Account, Connection } from '@fuel-wallet/types';
+import type { EventMessage, EventMessageEvents } from '@fuels/connectors';
+import { CONTENT_SCRIPT_NAME, MessageTypes } from '@fuels/connectors';
 import { ConnectionService } from '~/systems/DApp/services';
 
 import type { CommunicationProtocol } from './CommunicationProtocol';

packages/app/src/systems/CRX/background/services/PopUpService.ts

@@ -1,10 +1,11 @@
-import { deferPromise } from '@fuel-wallet/sdk';
-import type { DeferPromise } from '@fuel-wallet/sdk';
-import { POPUP_SCRIPT_NAME, MessageTypes } from '@fuel-wallet/types';
-import type { ResponseMessage, UIEventMessage } from '@fuel-wallet/types';
+import { POPUP_SCRIPT_NAME } from '@fuel-wallet/types';
+import { MessageTypes } from '@fuels/connectors';
+import type { ResponseMessage, UIEventMessage } from '@fuels/connectors';
 import type { JSONRPCRequest } from 'json-rpc-2.0';
 import { JSONRPCClient } from 'json-rpc-2.0';
 import { CRXPages } from '~/systems/Core/types';
+import type { DeferPromise } from '~/systems/Core/utils/promise';
+import { deferPromise } from '~/systems/Core/utils/promise';
 import { uniqueId } from '~/systems/Core/utils/string';
 
 import {

packages/app/src/systems/CRX/background/services/VaultService.ts

@@ -1,8 +1,5 @@
-import {
-  MessageTypes,
-  POPUP_SCRIPT_NAME,
-  VAULT_SCRIPT_NAME,
-} from '@fuel-wallet/types';
+import { POPUP_SCRIPT_NAME, VAULT_SCRIPT_NAME } from '@fuel-wallet/types';
+import { MessageTypes } from '@fuels/connectors';
 import { AUTO_LOCK_IN_MINUTES } from '~/config';
 import { VaultServer } from '~/systems/Vault/services/VaultServer';
 

packages/app/src/systems/CRX/background/services/types.ts

@@ -1,9 +1,9 @@
 import type {
-  AbiMap,
   AssetData,
   FuelProviderConfig,
   NetworkData,
 } from '@fuel-wallet/types';
+import type { AbiMap } from 'fuels';
 
 export type MessageInputs = {
   signMessage: {

packages/app/src/systems/CRX/utils/utils.ts

@@ -1,4 +1,4 @@
-import type { MessageSender } from '@fuel-wallet/types';
+import type { MessageSender } from '@fuels/connectors';
 
 export function getTabIdFromPort(port: chrome.runtime.Port) {
   return port.sender?.tab?.id;

packages/app/src/systems/Core/utils/assets.tsx

@@ -1,10 +1,10 @@
-import type { Fuel } from '@fuels/assets';
 import assets from '@fuels/assets';
+import type { AssetFuel } from 'fuels';
 
 export const fuelAssets = assets.map((asset) => {
   const fuelNetworkAsset = asset.networks.find(
     (n) => n.type === 'fuel'
-  ) as Fuel;
+  ) as AssetFuel;
   return {
     ...asset,
     assetId: fuelNetworkAsset.assetId,

packages/sdk/src/utils/promise.ts → packages/app/src/systems/Core/utils/promise.ts

@@ -15,15 +15,3 @@ export function deferPromise<R = unknown>() {
 
   return defer;
 }
-
-export async function withTimeout<F extends Promise<unknown>, RT = Awaited<F>>(
-  promise: F,
-  timeout: number = 1050
-): Promise<RT> {
-  const timeoutPromise = new Promise((_, reject) => {
-    setTimeout(() => {
-      reject(new Error('Promise timed out'));
-    }, timeout);
-  });
-  return Promise.race([timeoutPromise, promise]) as any;
-}

packages/app/src/systems/Settings/__mocks__/settingsABI.ts

@@ -1,4 +1,4 @@
-import type { AbiMap } from '@fuel-wallet/types';
+import type { AbiMap } from 'fuels';
 
 import { AbiService } from '../services';
 

packages/app/src/systems/Settings/services/abi.ts

@@ -1,4 +1,4 @@
-import type { AbiMap } from '@fuel-wallet/types';
+import type { AbiMap } from 'fuels';
 import { db } from '~/systems/Core/utils/database';
 
 export type AbiInputs = {

packages/app/src/systems/Transaction/__mocks__/tx-recipient.tsx

@@ -1,4 +1,4 @@
-import { AddressType } from '@fuel-wallet/types';
+import { AddressType } from 'fuels';
 
 export const MOCK_TX_RECIPIENT = {
   account: {

packages/app/src/systems/Transaction/__mocks__/tx.ts

@@ -1,5 +1,5 @@
-import { AddressType } from '@fuel-wallet/types';
 import {
+  AddressType,
   ReceiptType,
   OutputType,
   InputType,

packages/app/src/systems/Transaction/components/TxRecipientCard/TxRecipientCard.tsx

@@ -1,8 +1,7 @@
 import { cssObj } from '@fuel-ui/css';
 import { Avatar, Box, Card, Heading, Icon, Text } from '@fuel-ui/react';
-import { AddressType } from '@fuel-wallet/types';
 import type { OperationTransactionAddress } from 'fuels';
-import { Address, ChainName, isB256, isBech32 } from 'fuels';
+import { AddressType, Address, ChainName, isB256, isBech32 } from 'fuels';
 import type { FC } from 'react';
 import { EthAddress, FuelAddress, useAccounts } from '~/systems/Account';
 

packages/app/src/systems/Transaction/types.tsx

@@ -1,5 +1,6 @@
-import type { AddressType, AssetAmount } from '@fuel-wallet/types';
+import type { AssetAmount } from '@fuel-wallet/types';
 import type {
+  AddressType,
   CallResult,
   CoinTransactionRequestInput,
   CoinTransactionRequestOutput,