feat: remove welcome flow from localStorage (#406)

packages/app/src/systems/Core/components/PrivateRoute.tsx

@@ -5,15 +5,13 @@ import { Navigate, useNavigate } from "react-router-dom";
 
 import { useFuel } from "../hooks/useFuel";
 
-import { getCurrent, getAgreement } from "~/systems/Welcome";
+import { getAgreement } from "~/systems/Welcome";
 import { Pages } from "~/types";
 
 export function PrivateRoute({ children }: { children: ReactNode }) {
-  const current = getCurrent();
   const navigate = useNavigate();
   const acceptAgreement = getAgreement();
   const { fuel, error } = useFuel();
-
   const { data: isConnected, isLoading } = useQuery(
     ["isConnected", fuel !== undefined],
     async () => {
@@ -48,7 +46,7 @@ export function PrivateRoute({ children }: { children: ReactNode }) {
     };
   }, [isConnected, fuel]);
 
-  if ((current.id > 4 && acceptAgreement) || (isConnected && !current.id)) {
+  if (acceptAgreement) {
     return <>{children}</>;
   }
 

packages/app/src/systems/Core/components/WalletWidget.tsx

@@ -19,6 +19,7 @@ export function WalletWidget() {
 
   function handleDisconnect() {
     window.localStorage.clear();
+    window.fuel?.disconnect();
     window.location.reload();
   }
 

packages/app/src/systems/Core/hooks/__mocks__/MockConnection.ts

@@ -2,22 +2,24 @@
 
 import type { FuelWalletConnection } from '@fuel-wallet/sdk';
 import { FuelWalletLocked, FuelWalletProvider, BaseConnection } from '@fuel-wallet/sdk';
-import type { FuelProviderConfig } from '@fuel-wallet/types';
+import type { Asset, FuelProviderConfig } from '@fuel-wallet/types';
 import EventEmitter from 'events';
-import type { AbstractAddress, TransactionRequest } from 'fuels';
+import type { AbstractAddress, TransactionRequest, WalletUnlocked } from 'fuels';
 import { Wallet, Address } from 'fuels';
 
 import { FUEL_PROVIDER_URL } from '~/config';
 
 const generateOptions = {
   provider: FUEL_PROVIDER_URL,
 };
-export const userWallet = Wallet.generate(generateOptions);
 export const toWallet = Wallet.generate(generateOptions);
 const events = new EventEmitter();
 
 export class MockConnection extends BaseConnection {
   isConnectedOverride;
+  assetsData: Asset[];
+  wallet: WalletUnlocked;
+
   constructor(isConnected = true) {
     super();
     events.addListener('request', this.onCommunicationMessage.bind(this));
@@ -34,6 +36,8 @@ export class MockConnection extends BaseConnection {
       this.addAsset,
       this.addAssets,
     ]);
+    this.assetsData = [];
+    this.wallet = Wallet.generate(generateOptions);
     this.isConnectedOverride = isConnected;
   }
 
@@ -52,7 +56,8 @@ export class MockConnection extends BaseConnection {
   }
 
   async connect() {
-    return true;
+    this.isConnectedOverride = true;
+    return this.isConnectedOverride;
   }
 
   async disconnect() {
@@ -67,7 +72,8 @@ export class MockConnection extends BaseConnection {
     return true;
   }
 
-  async addAssets(): Promise<boolean> {
+  async addAssets(assets: Asset[]): Promise<boolean> {
+    this.assetsData = assets;
     return true;
   }
 
@@ -76,8 +82,7 @@ export class MockConnection extends BaseConnection {
   }
 
   async assets() {
-    const assets = await userWallet.getBalances();
-    return assets;
+    return this.assetsData;
   }
 
   async onMessage() {
@@ -89,24 +94,24 @@ export class MockConnection extends BaseConnection {
   }
 
   async accounts() {
-    return [userWallet.address.toAddress()];
+    return [this.wallet.address.toAddress()];
   }
 
   async signMessage(address: string, message: string) {
-    return userWallet.signMessage(message);
+    return this.wallet.signMessage(message);
   }
 
   async sendTransaction(
     transaction: TransactionRequest & { signer?: string | undefined },
     _1: FuelProviderConfig,
     _2?: string | undefined
   ) {
-    const response = await userWallet.sendTransaction(transaction);
+    const response = await this.wallet.sendTransaction(transaction);
     return response.id;
   }
 
   async currentAccount() {
-    return userWallet.address.toAddress();
+    return this.wallet.address.toAddress();
   }
 
   async getWallet(address: string | AbstractAddress): Promise<FuelWalletLocked> {

packages/app/src/systems/Core/hooks/__mocks__/useWallet.ts

@@ -5,8 +5,17 @@ import * as useWallet from '../useWallet';
 
 import { MockConnection } from './MockConnection';
 
-export async function createWallet(isConnectedOverride = true) {
+import { faucet } from '~/systems/Faucet/hooks/__mocks__/useFaucet';
+import { mint } from '~/systems/Mint/hooks/__mocks__/useMint';
+import { setAgreement, SWAYSWAP_ASSETS } from '~/systems/Welcome/machines';
+
+export function createFuel(isConnectedOverride = true) {
   const mockFuel = MockConnection.start(isConnectedOverride);
+  return mockFuel as unknown as Fuel;
+}
+
+export async function createWallet(isConnectedOverride = true) {
+  const mockFuel = createFuel(isConnectedOverride);
   const currentAccount = await mockFuel.currentAccount();
   const wallet = await mockFuel.getWallet(currentAccount);
   return { wallet, fuel: mockFuel };
@@ -22,13 +31,29 @@ export function mockUseWallet(wallet: FuelWalletLocked) {
   });
 }
 
-export function mockUseFuel(fuel: MockConnection) {
-  window.fuel = fuel as unknown as Fuel;
+export function mockUseFuel(fuel: Fuel) {
+  window.fuel = fuel;
   return jest.spyOn(useFuel, 'useFuel').mockImplementation(() => {
     return {
-      fuel: fuel as unknown as Fuel,
+      fuel,
       isLoading: false,
       error: '',
     };
   });
 }
+
+export async function mockUserData(opts: { faucetQuantity?: number } = {}) {
+  setAgreement(true);
+  const { wallet, fuel } = await createWallet();
+  mockUseFuel(fuel);
+  mockUseWallet(wallet);
+  fuel.addAssets(SWAYSWAP_ASSETS);
+  await faucet(wallet, opts.faucetQuantity || 2);
+  await mint(wallet);
+  return { wallet, fuel };
+}
+
+export async function clearMockUserData() {
+  setAgreement(false);
+  window.fuel = createFuel();
+}

packages/app/src/systems/Core/hooks/useWalletConnection.ts

@@ -0,0 +1,28 @@
+import { useQuery } from 'react-query';
+
+import { useFuel } from './useFuel';
+
+export function useWalletConnection() {
+  const { fuel } = useFuel();
+  const {
+    data: isConnected,
+    isLoading: isConnectedLoading,
+    isError: isConnectedError,
+  } = useQuery(
+    ['connected'],
+    async () => {
+      const isFuelConnected = await fuel!.isConnected();
+      return isFuelConnected;
+    },
+    {
+      enabled: !!fuel,
+      initialData: false,
+      refetchInterval: 1000,
+    }
+  );
+  return {
+    isConnected,
+    isConnectedLoading,
+    isConnectedError,
+  };
+}

packages/app/src/systems/Mint/routes.tsx

@@ -8,7 +8,7 @@ import { Pages } from "~/types";
 
 export const mintRoutes = (
   <Route
-    path={Pages.mint}
+    path={Pages.welcomeMint}
     element={
       <PrivateRoute>
         <MintPage />

packages/app/src/systems/Pool/pages/AddLiquidity.test.tsx

@@ -1,4 +1,4 @@
-import type { FuelWalletLocked } from "@fuel-wallet/sdk";
+import type { Fuel, FuelWalletLocked } from "@fuel-wallet/sdk";
 import {
   screen,
   renderWithRouter,
@@ -11,24 +11,29 @@ import * as poolQueries from "../utils/queries";
 
 import { App } from "~/App";
 import { ZERO } from "~/systems/Core";
-import type { MockConnection } from "~/systems/Core/hooks/__mocks__/MockConnection";
 import {
   createWallet,
   mockUseFuel,
   mockUseWallet,
 } from "~/systems/Core/hooks/__mocks__/useWallet";
 import { faucet } from "~/systems/Faucet/hooks/__mocks__/useFaucet";
 import { mint } from "~/systems/Mint/hooks/__mocks__/useMint";
+import { setAgreement } from "~/systems/Welcome";
 
 let wallet: FuelWalletLocked;
-let fuel: MockConnection;
+let fuel: Fuel;
 
 beforeAll(async () => {
+  setAgreement(true);
   ({ wallet, fuel } = await createWallet());
   mockUseFuel(fuel);
   mockUseWallet(wallet);
 });
 
+afterAll(() => {
+  setAgreement(false);
+});
+
 describe("Add Liquidity", () => {
   beforeEach(() => {
     mockUseUserPosition();

packages/app/src/systems/Pool/pages/Pools.test.tsx

@@ -1,28 +1,11 @@
-import type { FuelWalletLocked } from "@fuel-wallet/sdk";
 import { screen, renderWithRouter } from "@swayswap/test-utils";
 
-import { mockUseUserPosition } from "../hooks/__mocks__/useUserPosition";
-
 import { App } from "~/App";
-import type { MockConnection } from "~/systems/Core/hooks/__mocks__/MockConnection";
-import {
-  createWallet,
-  mockUseFuel,
-  mockUseWallet,
-} from "~/systems/Core/hooks/__mocks__/useWallet";
-
-let wallet: FuelWalletLocked;
-let fuel: MockConnection;
-
-beforeAll(async () => {
-  ({ wallet, fuel } = await createWallet());
-  mockUseWallet(wallet);
-  mockUseFuel(fuel);
-});
+import { mockUserData } from "~/systems/Core/hooks/__mocks__/useWallet";
 
 describe("Pool List", () => {
   beforeEach(() => {
-    mockUseUserPosition();
+    mockUserData();
   });
 
   afterEach(() => {

packages/app/src/systems/Pool/pages/RemoveLiquidity.test.tsx

@@ -1,4 +1,4 @@
-import type { FuelWalletLocked } from "@fuel-wallet/sdk";
+import type { Fuel, FuelWalletLocked } from "@fuel-wallet/sdk";
 import {
   screen,
   renderWithRouter,
@@ -15,23 +15,28 @@ import type { PoolInfoPreview } from "../utils";
 import { App } from "~/App";
 import { CONTRACT_ID } from "~/config";
 import { COIN_ETH, ONE_ASSET, TOKENS } from "~/systems/Core";
-import type { MockConnection } from "~/systems/Core/hooks/__mocks__/MockConnection";
 import { mockUseBalances } from "~/systems/Core/hooks/__mocks__/useBalances";
 import {
   createWallet,
   mockUseFuel,
   mockUseWallet,
 } from "~/systems/Core/hooks/__mocks__/useWallet";
+import { setAgreement } from "~/systems/Welcome";
 
 let wallet: FuelWalletLocked;
-let fuel: MockConnection;
+let fuel: Fuel;
 
 beforeAll(async () => {
+  setAgreement(true);
   ({ wallet, fuel } = await createWallet());
   mockUseFuel(fuel);
   mockUseWallet(wallet);
 });
 
+afterAll(() => {
+  setAgreement(false);
+});
+
 const USER_LIQUIDITY_POSITIONS: PoolInfoPreview = {
   ethReserve: bn("1009199438931"),
   formattedEthReserve: "1,009.199",

packages/app/src/systems/Swap/pages/SwapPage.test.tsx

@@ -12,15 +12,11 @@ import * as poolHelpers from "../../Pool/utils/helpers";
 import * as swapHelpers from "../utils/helpers";
 
 import { App } from "~/App";
-import { TOKENS } from "~/systems/Core";
 import {
-  createWallet,
-  mockUseFuel,
-  mockUseWallet,
+  clearMockUserData,
+  mockUserData,
 } from "~/systems/Core/hooks/__mocks__/useWallet";
 import { faucet } from "~/systems/Faucet/hooks/__mocks__/useFaucet";
-import { mint } from "~/systems/Mint/hooks/__mocks__/useMint";
-import { addLiquidity } from "~/systems/Pool/hooks/__mocks__/addLiquidity";
 
 async function findSwapBtn() {
   return waitFor(() => screen.findByLabelText(/swap button/i));
@@ -38,13 +34,6 @@ async function clickOnMaxBalance(input: "from" | "to" = "from") {
   });
 }
 
-async function createAndMockWallet() {
-  const { wallet, fuel } = await createWallet();
-  mockUseFuel(fuel);
-  mockUseWallet(wallet);
-  return wallet;
-}
-
 async function fillCoinFromWithValue(value: string) {
   await waitFor(
     async () => {
@@ -86,9 +75,14 @@ describe("SwapPage", () => {
   let wallet: FuelWalletLocked;
 
   beforeAll(async () => {
-    wallet = await createAndMockWallet();
-    await faucet(wallet, 4);
-    await mint(wallet);
+    const mocks = await mockUserData({
+      faucetQuantity: 4,
+    });
+    wallet = mocks.wallet;
+  }, 1000 * 60);
+
+  afterAll(() => {
+    clearMockUserData();
   });
 
   describe("without liquidity", () => {
@@ -157,14 +151,14 @@ describe("SwapPage", () => {
 
   describe("with liquidity created", () => {
     beforeAll(async () => {
-      await faucet(wallet, 4);
-      await addLiquidity(
-        wallet,
-        "0.5",
-        "500",
-        TOKENS[0].assetId,
-        TOKENS[1].assetId
-      );
+      const mocks = await mockUserData({
+        faucetQuantity: 4,
+      });
+      wallet = mocks.wallet;
+    }, 1000 * 60);
+
+    afterAll(() => {
+      clearMockUserData();
     });
 
     it("should show insufficient balance if try to input more than balance", async () => {