feat: support gasless transactions (#1774)

<!--
- Closes #0
-->
- Closes FE-1205

- Fuel SDK updated to 0.98.0, breaking changes (e.g. Provide.create,
async provider calls, removal of AbstractAddress) are covered. Read
[here](https://github.com/fuellabs/fuels-ts/releases/tag/v0.98.0) for
more info.
- Gasless transactions are now supported via the `skipCustomFee` param


# Checklist

- [x] I've added error handling for all actions/requests.
- [x] I've reviewed how my changes will display in the UI.
- [x] I've checked all the copy (text) changes or additions in this PR.
- [x] I've included references to the issues being closed on GitHub
and/or Linear.
- [x] I've ensured that the documentation is up to date and reflects any
changes.
- [x] I've added documentation links where it may be helpful.
- [x] I **reviewed** the **entire PR** myself.

---------

Co-authored-by: Hélcio Franco <github@helciofranco.com>
Co-authored-by: LuizAsFight <felipebolsonigomes@gmail.com>
Co-authored-by: Luiz Gomes <8636507+LuizAsFight@users.noreply.github.com>

Author: 3 people

.changeset/cyan-dancers-shop.md

@@ -0,0 +1,7 @@
+---
+"@fuel-wallet/connections": patch
+"@fuel-wallet/types": patch
+"fuels-wallet": patch
+---
+
+Gasless transactions are now supported via the `skipCustomFee` param

.changeset/tricky-colts-pump.md

@@ -0,0 +1,8 @@
+---
+"@fuels/playwright-utils": minor
+"@fuel-wallet/connections": minor
+"@fuel-wallet/types": minor
+"fuels-wallet": minor
+---
+
+Fuel SDK updated to 0.98.0, breaking changes (e.g. Provide.create, async provider calls, removal of AbstractAddress) are covered. Read [here](https://github.com/fuellabs/fuels-ts/releases/tag/v0.98.0) for more info.

docker/docker-compose.yml

@@ -32,7 +32,7 @@ services:
       WALLET_SECRET_KEY: ${WALLET_SECRET}
       DISPENSE_AMOUNT: ${DISPENSE_AMOUNT}
       FUEL_NODE_URL: http://${PROJECT:-fuel-node}_fuel-core:4000/v1/graphql
-    image: ghcr.io/fuellabs/faucet:4f7bec0
+    image: ghcr.io/fuellabs/faucet:474768d
     ports:
       - '${FUEL_FAUCET_PORT:-4040}:3000'
     links:

docker/fuel-core/Dockerfile

@@ -6,7 +6,7 @@
 
 # We should be supporting always the same fuel-core version as the fuels (ts-sdk)
 # https://github.com/FuelLabs/fuels-ts/blob/master/internal/fuel-core/VERSION
-FROM ghcr.io/fuellabs/fuel-core:v0.40.0
+FROM ghcr.io/fuellabs/fuel-core:v0.40.2
 
 # dependencies
 ENV DEBIAN_FRONTEND=noninteractive
@@ -17,17 +17,20 @@ WORKDIR /fuel
 
 COPY ./genesis_coins.json .
 
+#  Fuel Core 0.40.2, needs to be changed when core version is updated
 RUN git clone \
     https://github.com/FuelLabs/chain-configuration.git \
-    /chain-configuration
+    /chain-configuration && \
+    cd /chain-configuration && \
+    git checkout b2a9fd7ae37a33b45b2407eadf9c870ef2027c07
 
 # Copy the base local configuration
 RUN cp -R /chain-configuration/local/* ./
 
 # Copy the testnet consensus parameters and state transition bytecode
-RUN cp /chain-configuration/upgradelog/ignition-devnet/consensus_parameters/13.json \
+RUN cp /chain-configuration/upgradelog/ignition-devnet/consensus_parameters/14.json \
     ./latest_consensus_parameters.json
-RUN cp /chain-configuration/upgradelog/ignition-devnet/state_transition_function/16.wasm \
+RUN cp /chain-configuration/upgradelog/ignition-devnet/state_transition_function/17.wasm \
     ./state_transition_bytecode.wasm
 
 # update local state_config with custom genesis coins config

examples/cra-dapp/package.json

@@ -7,10 +7,10 @@
     "start": "vite"
   },
   "dependencies": {
-    "@fuels/connectors": "0.35.1",
-    "@fuels/react": "0.35.1",
+    "@fuels/connectors": "0.39.0-main-5f9794e",
+    "@fuels/react": "0.39.0-main-5f9794e",
     "@tanstack/react-query": "5.28.4",
-    "fuels": "0.96.1",
+    "fuels": "0.98.0",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

package.json

@@ -124,7 +124,7 @@
       "send@<0.19.0": ">=0.19.0",
       "serve-static@<1.16.0": ">=1.16.0",
       "rollup@>=4.0.0 <4.22.4": ">=4.22.4",
-      "fuels": "0.96.1",
+      "fuels": "0.98.0",
       "secp256k1@=5.0.0": ">=5.0.1",
       "elliptic@<6.6.0": ">=6.6.0",
       "cross-spawn@<7.0.5": ">=7.0.5",

packages/app/package.json

@@ -43,7 +43,7 @@
     "events": "3.3.0",
     "fake-indexeddb": "4.0.2",
     "framer-motion": "10.16.4",
-    "fuels": "0.96.1",
+    "fuels": "0.98.0",
     "json-edit-react": "1.13.3",
     "json-rpc-2.0": "1.7.0",
     "lodash.debounce": "4.0.8",
@@ -63,7 +63,7 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "2.0.0-beta.31",
     "@fuel-wallet/types": "workspace:*",
-    "@fuels/connectors": "0.35.1",
+    "@fuels/connectors": "0.39.0-main-5f9794e",
     "@playwright/test": "1.46.1",
     "@sentry/cli": "2.33.1",
     "@storybook/addon-a11y": "7.4.6",

packages/app/playwright/commons/seedWallet.ts

@@ -12,13 +12,13 @@ export async function seedCurrentAccount(page: Page, amount: BN) {
 }
 
 export async function seedWallet(address: string, amount: BN) {
-  const provider = await Provider.create(VITE_FUEL_PROVIDER_URL);
+  const provider = new Provider(VITE_FUEL_PROVIDER_URL);
   const genesisWallet = Wallet.fromPrivateKey(GENESIS_SECRET, provider);
 
   const transfETH = await genesisWallet.transfer(
     Address.fromString(address),
     amount,
-    provider.getBaseAssetId()
+    await provider.getBaseAssetId()
   );
   await transfETH.wait();
 

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

@@ -98,7 +98,7 @@ test.describe('FuelWallet Extension', () => {
   });
 
   test('SDK operations', async ({ context, baseURL, extensionId }) => {
-    const provider = await Provider.create(process.env.VITE_FUEL_PROVIDER_URL);
+    const provider = new Provider(process.env.VITE_FUEL_PROVIDER_URL);
     // Use a single instance of the page to avoid
     // multiple waiting times, and window.fuel checking.
     const blankPage = await context.newPage();

packages/app/playwright/crx/utils/address.ts

@@ -0,0 +1,5 @@
+export function shortAddress(address = '') {
+  return address.length > 10
+    ? `${address.slice(0, 6)}...${address.slice(-4)}`
+    : address;
+}

packages/app/playwright/e2e/Accounts.test.ts

@@ -267,15 +267,15 @@ test.describe('Existing Accounts', () => {
   test('can add accounts using correct derivation path after importing from private key', async () => {
     // at this point 2 accounts have already been created
     const fuelAddress1 =
-      'fuel1kfnz04g7k8wjw22s03s3kk46wxr63he3v5v6kyrv76m7wzh7x9jqvqffua';
+      '0xb26627d51eb1dd2729507c611b5aba7187a8df316519ab106cf6b7e70afe3164';
     const fuelAddress2 =
-      'fuel1kyxzyv5z39fuxnr6k9ncxujxn4y07fu6pf73vslmemgpex325vrsytpqks';
+      '0xb10c2232828953c34c7ab1678372469d48ff279a0a7d1643fbced01c9a2aa307';
     const fuelAddress3 =
-      'fuel152720qgc5wthxu4g7a2g6s7xy9d8wjgtffl489k706xyd2fas0wqyv0vsw';
+      '0xa2bca78118a3977372a8f7548d43c6215a77490b4a7f5396de7e8c46a93d83dc';
     const fuelPrivKey =
       '0x7f802a2a277872af1204140bd2c77c2193309c366e3c71ff1c4c31cea0a53f38';
     const fuelAddPriv =
-      'fuel1szu0uagadwpgl0fuz2thrtzn7artghvhexg5d9at4t76nzeesqasrdmjxy';
+      '0x80b8fe751d6b828fbd3c129771ac53f746b45d97c9914697abaafda98b39803b';
 
     // import account from private key
     await createAccountFromPrivateKey(page, fuelPrivKey, 'Account 3');

packages/app/playwright/e2e/RecoverWallet.test.ts

@@ -91,6 +91,15 @@ test.describe('RecoverWallet', () => {
 
       /** Confirm Mnemonic */
       const words = WORDS_24.split(' ');
+      await expect
+        .poll(
+          async () => {
+            const _locator = await page.locator('input').all();
+            return _locator.length;
+          },
+          { timeout: 1000 }
+        )
+        .toBe(words.length);
       const inputs = await page.locator('input').all();
       words.forEach((word, i) => {
         expect(inputs[i]).toHaveValue(word);
@@ -143,6 +152,15 @@ test.describe('RecoverWallet', () => {
 
       /** Confirm Mnemonic */
       const words = WORDS_13.split(' ');
+      await expect
+        .poll(
+          async () => {
+            const _locator = await page.locator('input').all();
+            return _locator.length;
+          },
+          { timeout: 1000 }
+        )
+        .toBeGreaterThanOrEqual(12);
       const inputs = await page.locator('input').all();
       words.forEach((word, i) => {
         expect(inputs[i]).toHaveValue(word);

packages/app/playwright/e2e/SendTransaction.test.ts

@@ -27,7 +27,7 @@ test.describe('SendTransaction', () => {
     const { accounts } = await mockData(page);
     account = accounts[0];
     await seedWallet(account.address, bn(100_000_000));
-    provider = await Provider.create(process.env.VITE_FUEL_PROVIDER_URL);
+    provider = new Provider(process.env.VITE_FUEL_PROVIDER_URL);
   });
 
   test('Send transaction', async () => {
@@ -358,7 +358,7 @@ test.describe('SendTransaction', () => {
   });
 
   test('Send transaction to an asset address should fail', async () => {
-    const assetAddress = provider.getBaseAssetId();
+    const assetAddress = await provider.getBaseAssetId();
     await visit(page, '/send');
     await getInputByName(page, 'address').fill(assetAddress);
     await getInputByName(page, 'amount').fill('0.001');

packages/app/src/systems/Account/__mocks__/accounts.tsx

@@ -27,7 +27,8 @@ export const MOCK_ACCOUNTS = [
   },
   {
     name: 'Account 4',
-    address: 'fuel10va6297tkerdcn5u8mxjm9emudsmkj85pq5x7t7stkmzmc4nvs3qvn99qz',
+    address:
+      '0x7b3ba517cbb646dc4e9c3ecd2d973be361bb48f408286f2fd05db62de2b36422',
     publicKey: '0x00',
   },
 ];

packages/app/src/systems/Account/components/EthAddress/EthAddress.tsx

@@ -14,24 +14,10 @@ export const EthAddress = ({ address, css }: EthAddressProps) => {
   const ethAddress = isValidAddress ? bn(address).toHex(20) : '';
 
   return (
-    <Box.Flex css={styles.root}>
-      <Copyable value={address} aria-label={address}>
-        <Tooltip content={address} className="address_tooltip" side="top">
-          <Text css={css}>{shortAddress(ethAddress)}</Text>
-        </Tooltip>
+    <Box.Flex>
+      <Copyable value={ethAddress} aria-label={address}>
+        <Text css={css}>{shortAddress(ethAddress)}</Text>
       </Copyable>
     </Box.Flex>
   );
 };
-
-const styles = {
-  root: {
-    '.address_tooltip': cssObj({
-      fontSize: '$xs',
-      lineHeight: '$4',
-      maxWidth: 125,
-      textAlign: 'center',
-      wordWrap: 'break-word',
-    }),
-  },
-};

packages/app/src/systems/Account/components/FuelAddress/FuelAddress.test.tsx

@@ -1,33 +1,29 @@
 import type { ThemeUtilsCSS } from '@fuel-ui/css';
 import { cssObj } from '@fuel-ui/css';
 import { Box, Copyable, Icon, IconButton, Text } from '@fuel-ui/react';
-import {
-  Address,
-  type B256Address,
-  type Bech32Address,
-  type ChecksumAddress,
-} from 'fuels';
+import { Address, type B256Address, type ChecksumAddress } from 'fuels';
 import { useMemo } from 'react';
 import { shortAddress } from '~/systems/Core';
 import { useExplorerLink } from '../../hooks/useExplorerLink';
 
 export type AddressProps = {
-  address: ChecksumAddress | Bech32Address | B256Address;
+  address: string;
   canOpenExplorer?: boolean;
   css?: ThemeUtilsCSS;
   isContract?: boolean;
 };
 
 export const FuelAddress = ({
   address,
-  isContract,
   canOpenExplorer = false,
+  isContract,
   css,
 }: AddressProps) => {
   const account = useMemo<string>(() => {
     if (!address) return '';
-    if (isContract) return Address.fromDynamicInput(address).toB256();
-    return Address.fromDynamicInput(address).toString();
+    const fuelAddress = Address.fromDynamicInput(address);
+    if (isContract) return fuelAddress.toB256();
+    return fuelAddress.toString();
   }, [isContract, address]);
 
   const { openExplorer, href } = useExplorerLink(account);

packages/app/src/systems/Account/components/FuelAddress/FuelAddress.tsx

@@ -82,7 +82,7 @@ export class AccountService {
     const { address } = input;
     const account = await db.transaction('r', db.accounts, async () => {
       return db.accounts.get({
-        address: Address.fromString(address).toString(),
+        address: Address.fromDynamicInput(address).toString(),
       });
     });
 
@@ -112,7 +112,7 @@ export class AccountService {
         string,
         { value: number; formatted: string } | undefined
       > = {};
-      const chainId = provider.getChainId();
+      const chainId = await provider.getChainId();
 
       const balanceAssets = await AssetsCache.fetchAllAssets(
         chainId,
@@ -164,7 +164,7 @@ export class AccountService {
       });
 
       // includes eth balance info, centralizing the complexity here instead of in rest of UI
-      const baseAssetId = provider.getBaseAssetId();
+      const baseAssetId = await provider.getBaseAssetId();
       const ethAsset = balances.find(
         (balance) => balance.assetId === baseAssetId.toString()
       );

packages/app/src/systems/Account/services/account.ts

@@ -185,7 +185,7 @@ export const assetsMachine = createMachine(
     services: {
       setListedAssets: FetchMachine.create<null, void>({
         showError: true,
-        async fetch() {
+        fetch: async () => {
           await AssetService.setListedAssets();
         },
       }),