From 8522c82597f8d28467445d3cd4c672ec3df17042 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Bolsoni Gomes <8636507+LuizAsFight@users.noreply.github.com> Date: Tue, 14 Jun 2022 17:48:48 -0300 Subject: [PATCH 1/4] fix: coin input value being cut by bottom line balance (#286) * feat: create CoinBalance from CoinSelector to centralize behavior and fix layout bug --- .gitignore | 2 +- packages/app/.gitignore | 2 - packages/app/cypress/e2e/App.cy.ts | 33 ++++---- packages/app/cypress/support/commands.ts | 4 + packages/app/cypress/support/index.d.ts | 16 ++++ .../src/styles/components/coin-balance.css | 5 ++ .../app/src/styles/components/coin-input.css | 2 +- .../src/styles/components/coin-selector.css | 3 - .../src/systems/Core/components/AssetItem.tsx | 2 - .../systems/Core/components/CoinBalance.tsx | 58 +++++++++++++ .../src/systems/Core/components/CoinInput.tsx | 83 ++++++++++--------- .../systems/Core/components/CoinSelector.tsx | 58 +------------ .../Pool/components/AddLiquidityPoolPrice.tsx | 2 +- .../Pool/components/AddLiquidityPreview.tsx | 2 +- .../Pool/components/PoolCurrentPosition.tsx | 2 +- .../components/RemoveLiquidityPreview.tsx | 2 +- .../src/systems/Pool/pages/AddLiquidity.tsx | 5 ++ .../systems/Pool/pages/RemoveLiquidity.tsx | 2 + .../systems/Swap/components/SwapComponent.tsx | 3 + .../systems/Swap/components/SwapPreview.tsx | 2 +- 20 files changed, 166 insertions(+), 122 deletions(-) create mode 100644 packages/app/cypress/support/index.d.ts create mode 100644 packages/app/src/styles/components/coin-balance.css create mode 100644 packages/app/src/systems/Core/components/CoinBalance.tsx diff --git a/.gitignore b/.gitignore index 3031cda5..6e742899 100644 --- a/.gitignore +++ b/.gitignore @@ -41,7 +41,7 @@ node_modules # testing coverage -cypress +/cypress # next.js .next/ diff --git a/packages/app/.gitignore b/packages/app/.gitignore index 1704aa16..ed987507 100644 --- a/packages/app/.gitignore +++ b/packages/app/.gitignore @@ -1,3 +1 @@ .env.test -cypress/videos/ -cypress/screenshots/ diff --git a/packages/app/cypress/e2e/App.cy.ts b/packages/app/cypress/e2e/App.cy.ts index 6f433d14..b32d4876 100644 --- a/packages/app/cypress/e2e/App.cy.ts +++ b/packages/app/cypress/e2e/App.cy.ts @@ -1,5 +1,5 @@ -describe('App flow', () => { - it('should execute whole app flow', () => { +describe('End-to-end Test: 😁 Happy Path', () => { + it('should execute whole app basic flow', () => { cy.visit('/'); cy.contains('button', /Launch app/i).click(); @@ -43,25 +43,25 @@ describe('App flow', () => { if (hasPoolCreated) { // validate add liquidity cy.contains('Enter Ether amount'); - cy.get('[aria-label="Coin From Input"]').type('0.2'); + cy.getByAriaLabel('Coin From Input').type('0.2'); // make sure preview output box shows up - cy.get('[aria-label="preview-add-liquidity-output"]'); + cy.getByAriaLabel('Preview Add Liquidity Output'); // make sure pool price box shows up - cy.get('[aria-label="pool-price"]'); + cy.getByAriaLabel('Pool Price Box'); cy.contains('button', 'Add liquidity').click(); } else { // validate create pool cy.contains('Enter Ether amount'); - cy.get('[aria-label="Coin From Input"]').type('0.2'); - cy.get('[aria-label="Coin To Input"]').type('190'); + cy.getByAriaLabel('Coin From Input').type('0.2'); + cy.getByAriaLabel('Coin To Input').type('190'); // make sure preview output box shows up - cy.get('[aria-label="preview-add-liquidity-output"]'); + cy.getByAriaLabel('Preview Add Liquidity Output'); // make sure pool price box shows up - cy.get('[aria-label="pool-price"]'); + cy.getByAriaLabel('Pool Price Box'); cy.contains('button', 'Create liquidity').click(); } @@ -71,22 +71,23 @@ describe('App flow', () => { // validate swap cy.contains('button', 'Swap').click(); cy.contains('Enter amount'); - cy.get('[aria-label="Coin From Input"]').type('0.1'); + cy.getByAriaLabel('Coin From Input').type('0.1'); // make sure preview output box shows up - cy.get('[aria-label="preview-swap-output"]'); + cy.getByAriaLabel('Preview Swap Output'); - // make sure "swap" button comes from inside swap page only - cy.contains('[aria-label="Swap button"]', 'Swap').click(); + // execute swap operation + cy.getByAriaLabel('Swap button').click(); cy.contains('Swap made successfully!'); // validate remove liquidity cy.contains('button', 'Pool').click(); cy.contains('button', 'Remove liquidity').click(); - cy.get('.coinSelector--maxButton').click(); + cy.getByAriaLabel('Set Maximun Balance').click(); + // // make sure preview output box shows up - cy.get('[aria-label="preview-remove-liquidity-output"]'); + cy.getByAriaLabel('Preview Remove Liquidity Output'); // make sure current positions box shows up - cy.get('[aria-label="pool-current-position"]'); + cy.getByAriaLabel('Pool Current Position'); cy.contains('button', 'Remove liquidity').click(); cy.contains('Liquidity removed successfully!'); }); diff --git a/packages/app/cypress/support/commands.ts b/packages/app/cypress/support/commands.ts index 95857aea..8d19e3d0 100644 --- a/packages/app/cypress/support/commands.ts +++ b/packages/app/cypress/support/commands.ts @@ -35,3 +35,7 @@ // } // } // } + +Cypress.Commands.add('getByAriaLabel', (selector, options) => + cy.get(`[aria-label="${selector}"]`, options) +); diff --git a/packages/app/cypress/support/index.d.ts b/packages/app/cypress/support/index.d.ts new file mode 100644 index 00000000..2438f86b --- /dev/null +++ b/packages/app/cypress/support/index.d.ts @@ -0,0 +1,16 @@ +/// + +declare namespace Cypress { + interface Chainable { + /** + * Get element by aria-label + * @example + * cy.getByAriaLabel('Aria Label'); + * cy.getByAriaLabel('Aria Label', { log: false, timeout: 6000 }); + */ + getByAriaLabel( + ariaLabel: string, + options?: Partial + ): Chainable>; + } +} diff --git a/packages/app/src/styles/components/coin-balance.css b/packages/app/src/styles/components/coin-balance.css new file mode 100644 index 00000000..4cbc6a0e --- /dev/null +++ b/packages/app/src/styles/components/coin-balance.css @@ -0,0 +1,5 @@ +@layer components { + .coinBalance--maxButton { + @apply text-xs py-0 px-1 h-auto bg-primary-800/60 text-primary-500 hover:bg-primary-800; + } +} diff --git a/packages/app/src/styles/components/coin-input.css b/packages/app/src/styles/components/coin-input.css index 49ac8cc8..ae38ee76 100644 --- a/packages/app/src/styles/components/coin-input.css +++ b/packages/app/src/styles/components/coin-input.css @@ -1,6 +1,6 @@ @layer components { .coinInput { - @apply flex bg-gray-700 rounded-2xl p-2 border border-gray-700; + @apply bg-gray-700 rounded-2xl p-2 border border-gray-700; } .coinInput--input { @apply w-[100px] flex-1 ml-2 h-10 bg-transparent placeholder:text-gray-300; diff --git a/packages/app/src/styles/components/coin-selector.css b/packages/app/src/styles/components/coin-selector.css index 3dbeaf01..5905e8e2 100644 --- a/packages/app/src/styles/components/coin-selector.css +++ b/packages/app/src/styles/components/coin-selector.css @@ -11,7 +11,4 @@ .coinSelector--root { @apply flex flex-col items-end; } - .coinSelector--maxButton { - @apply text-xs py-0 px-1 h-auto bg-primary-800/60 text-primary-500 hover:bg-primary-800; - } } diff --git a/packages/app/src/systems/Core/components/AssetItem.tsx b/packages/app/src/systems/Core/components/AssetItem.tsx index f955dcf5..e06200ce 100644 --- a/packages/app/src/systems/Core/components/AssetItem.tsx +++ b/packages/app/src/systems/Core/components/AssetItem.tsx @@ -13,8 +13,6 @@ export function AssetItem({ coin }: AssetItemProps) { coin, amount: coin.amount, isReadOnly: true, - showBalance: false, - showMaxButton: false, }); return ( diff --git a/packages/app/src/systems/Core/components/CoinBalance.tsx b/packages/app/src/systems/Core/components/CoinBalance.tsx new file mode 100644 index 00000000..57ac154a --- /dev/null +++ b/packages/app/src/systems/Core/components/CoinBalance.tsx @@ -0,0 +1,58 @@ +import { useMemo } from "react"; + +import { useBalances } from "../hooks"; +import { parseToFormattedNumber } from "../utils"; + +import { Button, Tooltip } from "~/systems/UI"; +import type { Coin } from "~/types"; + +export type CoinBalanceProps = { + coin?: Coin | null; + showMaxButton?: boolean; + onSetMaxBalance?: () => void; + gasFee?: bigint | null; +}; + +export const CoinBalance = ({ + coin, + showMaxButton = true, + onSetMaxBalance, + gasFee, +}: CoinBalanceProps) => { + const { data: balances } = useBalances({ enabled: true }); + + const balance = useMemo(() => { + const coinBalance = balances?.find( + (item) => item.assetId === coin?.assetId + ); + return parseToFormattedNumber(coinBalance?.amount || BigInt(0)); + }, [balances, coin?.assetId]); + + return ( +
+
+ Balance: {balance} +
+ {showMaxButton && ( + + + + )} +
+ ); +}; diff --git a/packages/app/src/systems/Core/components/CoinInput.tsx b/packages/app/src/systems/Core/components/CoinInput.tsx index 140e8ff2..806cc13d 100644 --- a/packages/app/src/systems/Core/components/CoinInput.tsx +++ b/packages/app/src/systems/Core/components/CoinInput.tsx @@ -14,6 +14,7 @@ import { ZERO, } from "../utils"; +import type { CoinBalanceProps } from "./CoinBalance"; import type { CoinSelectorProps } from "./CoinSelector"; import { DECIMAL_UNITS } from "~/config"; @@ -34,8 +35,6 @@ type UseCoinParams = { /** * Coins for */ - showBalance?: boolean; - showMaxButton?: boolean; onChangeCoin?: (coin: Coin) => void; disableWhenEth?: boolean; }; @@ -46,6 +45,7 @@ export type UseCoinInput = { setGasFee: React.Dispatch>; getInputProps: () => CoinInputProps; getCoinSelectorProps: () => CoinSelectorProps; + getCoinBalanceProps: () => CoinBalanceProps; formatted: string; hasEnoughBalance: boolean; }; @@ -77,8 +77,6 @@ export function useCoinInput({ gasFee: initialGasFee, isReadOnly, onInput, - showBalance, - showMaxButton, onChangeCoin, disableWhenEth, ...params @@ -131,13 +129,7 @@ export function useCoinInput({ return { coin, isReadOnly, - showBalance, - showMaxButton, onChange: onChangeCoin, - onSetMaxBalance: () => { - onInput?.(); - handleInputPropsChange(formatValue(getSafeMaxBalance())); - }, ...(disableWhenEth && isEth && { isReadOnly: true, @@ -146,6 +138,17 @@ export function useCoinInput({ } as CoinSelectorProps; } + function getCoinBalanceProps() { + return { + coin, + gasFee, + onSetMaxBalance: () => { + onInput?.(); + handleInputPropsChange(formatValue(getSafeMaxBalance())); + }, + } as CoinBalanceProps; + } + useEffect(() => { // Enable value initialAmount to be null if (initialAmount !== undefined) setAmount(initialAmount); @@ -157,6 +160,7 @@ export function useCoinInput({ setGasFee, getInputProps, getCoinSelectorProps, + getCoinBalanceProps, formatted: formatValue(amount), hasEnoughBalance: getSafeMaxBalance() >= (amount || ZERO), }; @@ -173,9 +177,10 @@ type CoinInputProps = Omit & displayType: DisplayType; autoFocus?: boolean; isLoading?: boolean; - rightElement?: ReactNode; isAllowed?: (values: NumberFormatValues) => boolean; onChange?: (val: string) => void; + rightElement?: ReactNode; + bottomElement?: ReactNode; }; export const CoinInput = forwardRef( @@ -189,6 +194,7 @@ export const CoinInput = forwardRef( autoFocus, isLoading, rightElement, + bottomElement, ...props }, ref @@ -204,32 +210,35 @@ export const CoinInput = forwardRef( return (
- {isLoading ? ( -
- -
- ) : ( - ) => { - onChange?.(e.target.value); - setValue(e.target.value); - }} - decimalScale={DECIMAL_UNITS} - placeholder="0" - className="coinInput--input" - thousandSeparator={false} - onInput={onInput} - /> - )} - {rightElement} +
+ {isLoading ? ( +
+ +
+ ) : ( + ) => { + onChange?.(e.target.value); + setValue(e.target.value); + }} + decimalScale={DECIMAL_UNITS} + placeholder="0" + className="coinInput--input" + thousandSeparator={false} + onInput={onInput} + /> + )} + {rightElement} +
+ {bottomElement}
); } diff --git a/packages/app/src/systems/Core/components/CoinSelector.tsx b/packages/app/src/systems/Core/components/CoinSelector.tsx index 6ba08281..8ef7fc22 100644 --- a/packages/app/src/systems/Core/components/CoinSelector.tsx +++ b/packages/app/src/systems/Core/components/CoinSelector.tsx @@ -1,10 +1,9 @@ import cx from "classnames"; import type { ReactNode } from "react"; -import { useState, useEffect, forwardRef, useMemo } from "react"; +import { useState, useEffect, forwardRef } from "react"; import { FiChevronDown } from "react-icons/fi"; -import { useBalances } from "../hooks"; -import { TOKENS, parseToFormattedNumber, COIN_ETH } from "../utils"; +import { TOKENS } from "../utils"; import { CoinsListDialog } from "./CoinsListDialog"; import { TokenIcon } from "./TokenIcon"; @@ -15,37 +14,14 @@ import type { Coin } from "~/types"; export type CoinSelectorProps = { coin?: Coin | null; isReadOnly?: boolean; - showBalance?: boolean; - showMaxButton?: boolean; onChange?: (coin: Coin) => void; - onSetMaxBalance?: () => void; tooltip?: ReactNode; }; export const CoinSelector = forwardRef( - ( - { - coin, - isReadOnly, - showBalance = true, - showMaxButton = true, - onChange, - onSetMaxBalance, - tooltip: tooltipContent, - }, - ref - ) => { + ({ coin, isReadOnly, onChange, tooltip: tooltipContent }, ref) => { const [selected, setSelected] = useState(null); const dialog = useDialog(); - const { data: balances } = useBalances({ enabled: showBalance }); - const coinBalance = balances?.find( - (item) => item.assetId === coin?.assetId - ); - - const balance = useMemo( - () => parseToFormattedNumber(coinBalance?.amount || BigInt(0)), - [coinBalance?.assetId, coinBalance?.amount] - ); function handleSelect(assetId: string) { const next = TOKENS.find((item) => item.assetId === assetId)!; @@ -99,34 +75,6 @@ export const CoinSelector = forwardRef( - {(showBalance || showMaxButton) && ( -
- {showBalance && ( -
- Balance: {balance} -
- )} - {showMaxButton && ( - - - - )} -
- )} ); } diff --git a/packages/app/src/systems/Pool/components/AddLiquidityPoolPrice.tsx b/packages/app/src/systems/Pool/components/AddLiquidityPoolPrice.tsx index 0a132b81..d2847adf 100644 --- a/packages/app/src/systems/Pool/components/AddLiquidityPoolPrice.tsx +++ b/packages/app/src/systems/Pool/components/AddLiquidityPoolPrice.tsx @@ -23,7 +23,7 @@ export const AddLiquidityPoolPrice = ({ Math.floor(oneAssetAmount * 1 * reservesRatio) ); return ( -
+

Pool price

diff --git a/packages/app/src/systems/Pool/components/AddLiquidityPreview.tsx b/packages/app/src/systems/Pool/components/AddLiquidityPreview.tsx index 4080277a..47afbed9 100644 --- a/packages/app/src/systems/Pool/components/AddLiquidityPreview.tsx +++ b/packages/app/src/systems/Pool/components/AddLiquidityPreview.tsx @@ -42,7 +42,7 @@ export const AddLiquidityPreview = ({ { const coinTo = coinMetaData?.pairOf?.[1]; return ( - + } + bottomElement={ + + } /> } + bottomElement={} />
} + bottomElement={} />
diff --git a/packages/app/src/systems/Swap/components/SwapComponent.tsx b/packages/app/src/systems/Swap/components/SwapComponent.tsx index aa48ab35..e2227212 100644 --- a/packages/app/src/systems/Swap/components/SwapComponent.tsx +++ b/packages/app/src/systems/Swap/components/SwapComponent.tsx @@ -12,6 +12,7 @@ import type { SwapState } from "../types"; import { ActiveInput } from "../types"; import { CoinInput, useCoinInput, CoinSelector } from "~/systems/Core"; +import { CoinBalance } from "~/systems/Core/components/CoinBalance"; import { InvertButton } from "~/systems/UI"; import type { Coin } from "~/types"; @@ -143,6 +144,7 @@ export function SwapComponent({ {...(activeInput === ActiveInput.to && { isLoading })} autoFocus={activeInput === ActiveInput.from} rightElement={} + bottomElement={} />
@@ -155,6 +157,7 @@ export function SwapComponent({ {...(activeInput === ActiveInput.from && { isLoading })} autoFocus={activeInput === ActiveInput.to} rightElement={} + bottomElement={} />
diff --git a/packages/app/src/systems/Swap/components/SwapPreview.tsx b/packages/app/src/systems/Swap/components/SwapPreview.tsx index fcfdac63..7397acaf 100644 --- a/packages/app/src/systems/Swap/components/SwapPreview.tsx +++ b/packages/app/src/systems/Swap/components/SwapPreview.tsx @@ -54,7 +54,7 @@ export function SwapPreview({ const inputAmountWithSlippage = parseToFormattedNumber(priceWithSlippage); return ( -
+
From 8f1234fdb18392dd9687d3fdfef3c8774ac10c2f Mon Sep 17 00:00:00 2001 From: Luiz Felipe Bolsoni Gomes <8636507+LuizAsFight@users.noreply.github.com> Date: Wed, 15 Jun 2022 02:21:07 -0300 Subject: [PATCH 2/4] fix: correct behavior when typing only "." in the coin input (#291) --- .../src/systems/Core/components/CoinInput.tsx | 12 +++++++++++- .../systems/Pool/pages/AddLiquidity.test.tsx | 19 +++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/app/src/systems/Core/components/CoinInput.tsx b/packages/app/src/systems/Core/components/CoinInput.tsx index 806cc13d..856c7fa3 100644 --- a/packages/app/src/systems/Core/components/CoinInput.tsx +++ b/packages/app/src/systems/Core/components/CoinInput.tsx @@ -168,7 +168,17 @@ export function useCoinInput({ function getRightValue(value: string, displayType: string) { if (displayType === "text") return parseToFormattedNumber(value); - return value === "0.0" ? "0" : value; + + switch (value) { + case "0.0": + return "0"; + + case ".": + return "0."; + + default: + return value; + } } type CoinInputProps = Omit & diff --git a/packages/app/src/systems/Pool/pages/AddLiquidity.test.tsx b/packages/app/src/systems/Pool/pages/AddLiquidity.test.tsx index 3a5e27e6..60d9446b 100644 --- a/packages/app/src/systems/Pool/pages/AddLiquidity.test.tsx +++ b/packages/app/src/systems/Pool/pages/AddLiquidity.test.tsx @@ -196,4 +196,23 @@ describe("Add Liquidity", () => { const successFeedback = await screen.findByText(/New pool created/i); expect(successFeedback).toBeInTheDocument(); }); + + it("should show '0.' if typed only '.' in the input", async () => { + jest.unmock("../hooks/useUserPositions.ts"); + + renderWithRouter(, { + route: "/pool/add-liquidity", + }); + + const coinFromInput = screen.getByLabelText(/Coin From Input/); + fireEvent.change(coinFromInput, { + target: { + value: ".", + }, + }); + + await waitFor(() => { + expect(coinFromInput).toHaveValue("0."); + }); + }); }); From 222e171d3ee313f3fb9943ef73a61a3e96032e02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luiz=20Est=C3=A1cio=20=7C=20stacio=2Eeth?= Date: Thu, 16 Jun 2022 16:57:45 -0300 Subject: [PATCH 3/4] feat: add agreement and update copy (#290) * feat: add legal agreement * fix: jest tests * fix: e2e tests * chore: use getByAriaLabel( --- docs/LEGAL_DISCLAIMER.md | 0 packages/app/cypress/e2e/App.cy.ts | 3 +- .../src/styles/components/welcome-page.css | 4 ++ .../systems/Core/components/PrivateRoute.tsx | 5 +- .../Welcome/components/WelcomeDone.tsx | 48 ++++++++++++++----- .../Welcome/components/WelcomePage.test.tsx | 10 +++- .../systems/Welcome/hooks/useWelcomeSteps.tsx | 27 ++++++++++- .../src/systems/Welcome/pages/WelcomePage.tsx | 4 -- 8 files changed, 81 insertions(+), 20 deletions(-) create mode 100644 docs/LEGAL_DISCLAIMER.md diff --git a/docs/LEGAL_DISCLAIMER.md b/docs/LEGAL_DISCLAIMER.md new file mode 100644 index 00000000..e69de29b diff --git a/packages/app/cypress/e2e/App.cy.ts b/packages/app/cypress/e2e/App.cy.ts index b32d4876..aa22347d 100644 --- a/packages/app/cypress/e2e/App.cy.ts +++ b/packages/app/cypress/e2e/App.cy.ts @@ -7,7 +7,8 @@ describe('End-to-end Test: 😁 Happy Path', () => { // create a wallet and fund it cy.contains('button', /Create wallet/i).click(); cy.contains('button', 'Give me ETH').click(); - cy.contains('button', 'Go to Swap').click(); + cy.getByAriaLabel('Accept the use agreement').check(); + cy.contains('button', 'Get Swapping!').click(); cy.contains('Enter amount'); // mint tokens diff --git a/packages/app/src/styles/components/welcome-page.css b/packages/app/src/styles/components/welcome-page.css index ea4505ae..d8a65461 100644 --- a/packages/app/src/styles/components/welcome-page.css +++ b/packages/app/src/styles/components/welcome-page.css @@ -9,6 +9,10 @@ } .welcomePage--content { @apply relative m-8 grid place-items-center max-h-[100vh]; + + @media (max-width: 640px) { + @apply m-0 my-4; + } } /* WelcomeSidebar diff --git a/packages/app/src/systems/Core/components/PrivateRoute.tsx b/packages/app/src/systems/Core/components/PrivateRoute.tsx index 4d87972c..ca20d2f2 100644 --- a/packages/app/src/systems/Core/components/PrivateRoute.tsx +++ b/packages/app/src/systems/Core/components/PrivateRoute.tsx @@ -3,13 +3,14 @@ import { Navigate } from "react-router-dom"; import { useWallet } from "../hooks"; -import { getCurrent } from "~/systems/Welcome"; +import { getCurrent, getAgreement } from "~/systems/Welcome"; import { Pages } from "~/types"; export function PrivateRoute({ children }: { children: ReactNode }) { const current = getCurrent(); + const acceptAgreement = getAgreement(); const wallet = useWallet(); - if (current.id > 2 || (wallet && !current.id)) { + if ((current.id > 2 && acceptAgreement) || (wallet && !current.id)) { return <>{children}; } return ; diff --git a/packages/app/src/systems/Welcome/components/WelcomeDone.tsx b/packages/app/src/systems/Welcome/components/WelcomeDone.tsx index 2a52ed4e..4b1caba6 100644 --- a/packages/app/src/systems/Welcome/components/WelcomeDone.tsx +++ b/packages/app/src/systems/Welcome/components/WelcomeDone.tsx @@ -1,31 +1,57 @@ -import { useNavigate } from "react-router-dom"; - import { useWelcomeSteps } from "../hooks"; import { WelcomeStep } from "./WelcomeStep"; import { relativeUrl } from "~/systems/Core"; -import { Button } from "~/systems/UI"; +import { Button, Link } from "~/systems/UI"; + +const DISCLAIMER_URL = + "https://github.com/FuelLabs/swayswap/blob/master/docs/LEGAL_DISCLAIMER.md"; export function WelcomeDone() { - const navigate = useNavigate(); - const { send } = useWelcomeSteps(); + const { send, state } = useWelcomeSteps(); function handleDone() { - navigate("/swap"); send("FINISH"); } return ( -

Done, congrats!

+

Wallet Created!

- Now you are done to swap your coins using the fatest modular execution - layer + Now you're ready to swap and pool test assets using Fuel: + the fastest modular execution layer.

- ); diff --git a/packages/app/src/systems/Welcome/components/WelcomePage.test.tsx b/packages/app/src/systems/Welcome/components/WelcomePage.test.tsx index 42e511fc..c43721e3 100644 --- a/packages/app/src/systems/Welcome/components/WelcomePage.test.tsx +++ b/packages/app/src/systems/Welcome/components/WelcomePage.test.tsx @@ -39,8 +39,16 @@ describe("WelcomePage", () => { /** * Third step: done */ + + const acceptAgreement = await screen.findByRole("checkbox", { + name: /Accept the use agreement/i, + }); + expect(acceptAgreement).not.toBeChecked(); + await user.click(acceptAgreement); + expect(acceptAgreement).toBeChecked(); + const goToSwapBtn = await screen.findByRole("button", { - name: /Go to Swap/i, + name: /Get Swapping!/i, }); expect(goToSwapBtn).toBeInTheDocument(); await user.click(goToSwapBtn); diff --git a/packages/app/src/systems/Welcome/hooks/useWelcomeSteps.tsx b/packages/app/src/systems/Welcome/hooks/useWelcomeSteps.tsx index 9bd6fbee..fd2c7ac1 100644 --- a/packages/app/src/systems/Welcome/hooks/useWelcomeSteps.tsx +++ b/packages/app/src/systems/Welcome/hooks/useWelcomeSteps.tsx @@ -10,6 +10,7 @@ import { useWallet } from "~/systems/Core"; import { Pages } from "~/types"; export const LOCALSTORAGE_WELCOME_KEY = "fuel--welcomeStep"; +export const LOCALSTORAGE_AGREEMENT_KEY = "fuel--agreement"; export const STEPS = [ { id: 0, path: Pages["welcome.createWallet"] }, { id: 1, path: Pages["welcome.addFunds"] }, @@ -17,6 +18,14 @@ export const STEPS = [ { id: 3, path: null }, ]; +export function getAgreement() { + return localStorage.getItem(LOCALSTORAGE_AGREEMENT_KEY) === "true"; +} + +export function setAgreement(accept: boolean) { + localStorage.setItem(LOCALSTORAGE_AGREEMENT_KEY, String(accept)); +} + export function getCurrent() { try { const curr = localStorage.getItem(LOCALSTORAGE_WELCOME_KEY); @@ -49,6 +58,7 @@ export type Step = { type MachineContext = { current: Step; + acceptAgreement: boolean; wallet?: Wallet | null; }; @@ -63,6 +73,7 @@ const welcomeStepsMachine = createMachine({ }, context: { current: getCurrent(), + acceptAgreement: getAgreement(), }, states: { init: { @@ -84,9 +95,12 @@ const welcomeStepsMachine = createMachine({ }, { target: "done", - cond: (ctx) => ctx.current.id === 2, + cond: (ctx) => + ctx.current.id === 2 || + (ctx.current.id >= 2 && !ctx.acceptAgreement), }, { + cond: (ctx) => ctx.current.id === 3 && ctx.acceptAgreement, target: "finished", }, ], @@ -110,6 +124,9 @@ const welcomeStepsMachine = createMachine({ done: { entry: [assignCurrent(2), "navigateTo"], on: { + ACCEPT_AGREEMENT: { + actions: ["acceptAgreement"], + }, FINISH: { target: "finished", }, @@ -157,6 +174,7 @@ export function StepsProvider({ children }: WelcomeStepsProviderProps) { .withContext({ wallet, current: getCurrent(), + acceptAgreement: getAgreement(), }) .withConfig({ actions: { @@ -164,6 +182,13 @@ export function StepsProvider({ children }: WelcomeStepsProviderProps) { if (context.current.id > 2) return; navigate(`/welcome/${context.current.path}`); }, + acceptAgreement: assign((context, event) => { + setAgreement(event.value); + return { + ...context, + acceptAgreement: event.value, + }; + }), }, }) ); diff --git a/packages/app/src/systems/Welcome/pages/WelcomePage.tsx b/packages/app/src/systems/Welcome/pages/WelcomePage.tsx index 874b4734..5806609d 100644 --- a/packages/app/src/systems/Welcome/pages/WelcomePage.tsx +++ b/packages/app/src/systems/Welcome/pages/WelcomePage.tsx @@ -30,10 +30,6 @@ export function WelcomePage() {
- } - /> } From 4b2ed2e2e5a57e165c2cc1c999a02104b65dde91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luiz=20Est=C3=A1cio=20=7C=20stacio=2Eeth?= Date: Thu, 16 Jun 2022 21:23:07 -0300 Subject: [PATCH 4/4] feat: move check branch to commit step (#292) --- .github/workflows/deploy-contracts.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/deploy-contracts.yml b/.github/workflows/deploy-contracts.yml index c59f4dc5..123ab492 100644 --- a/.github/workflows/deploy-contracts.yml +++ b/.github/workflows/deploy-contracts.yml @@ -67,7 +67,6 @@ jobs: needs: test_inputs name: Build and deploy runs-on: ubuntu-latest - if: github.ref != 'refs/heads/master' steps: - name: Checkout uses: actions/checkout@v3 @@ -130,7 +129,7 @@ jobs: NODE_ENV: production - name: Commit .env.production - if: ${{ github.event.inputs.commit_changes }} + if: ${{ github.event.inputs.commit_changes && github.ref != 'refs/heads/master' }} uses: EndBug/add-and-commit@v9 with: message: 'chore: update contract ids'