Cleanup and enable tests on Base

README.md

@@ -1,21 +1,7 @@
-# Synthetix V3 UI Monorepo
+# Synthetix Liquidity UI
 
 [![main](https://github.com/synthetixio/v3ui/actions/workflows/main.yml/badge.svg)](https://github.com/synthetixio/v3ui/actions/workflows/main.yml)
 
-## Upgrade contacts
-
-```sh
-yarn upgrade-contracts
-yarn dedupe
-```
-
-## Upgrade browserlist
-
-```sh
-yarn upgrade-browsers
-yarn dedupe
-```
-
 ## Install
 
 This repo uses Yarn workspaces to manage multiple packages in the same repo. To prepare the repository for use, run:
@@ -26,74 +12,52 @@ yarn install
 
 This will install all dependencies, wire dependencies between packages in this repo, and allow for you to build projects.
 
-## Build
+## Testing Requirements
 
-If you make a change and want to generate the library JS code, run:
+1. Install `foundry`
 
 ```sh
-yarn build
+curl -L https://foundry.paradigm.xyz | bash
+foundryup
 ```
 
-This will ensure all projects are fully built in topological order. You are also free to run script commands from individual repositories if necessary or desired.
+Have `INFURA_KEY` env variable set
 
-## Adding external library to the monorepo preserving git history
+## Testing Base
 
-This is 3-step process:
+1.  Run Foundry Anvil fork
 
-1. Prepare original repo
-2. Add remote to monorepo
-3. Merge original repo branch and update build to match monorepo processes
+    ```sh
+    yarn anvil:base
+    ```
 
-Using `codegen-graph-ts` as an example
+2.  Update all prices
 
-### 1. Prepare original repo
+    ```sh
+    yarn update-prices:base
+    ```
 
-- Create a separate branch `move-to-monorepo`
-- Create the intended destination folder inside monorepo `mkdir -p tools/codegen-graph-ts`
-- Move all the package files into `tools/codegen-graph-ts`
-- Remove all the files that won't be used (CI config, lockfile, etc)
+3.  Run Liquidity app locally
 
-### 2. Add remote to monorepo
-
-```sh
-cd ~/synthetix/v3ui
-git remote add codegen-graph-ts ~/synthetix/codegen-graph-ts
-git fetch --all
-
-#
-git merge codegen-graph-ts/move-to-monorepo --allow-unrelated-histories
-```
+    ```sh
+    yarn start
+    ```
 
-### 3. Merge original repo branch
+4.  Open Cypress for Base
+    ```sh
+    yarn e2e:base
+    ```
 
-Using `--allow-unrelated-histories` allows merging independent git history
-
-```sh
-git merge codegen-graph-ts/move-to-monorepo --allow-unrelated-histories
-```
-
-Because we moved all the files into the separate folder we have no merge conflicts and at the same time we have full history added to the git tree
-
-Now we can remove remote as it is no longer necessary and cleanup all the added tags too
-
-```sh
-git remote remove codegen-graph-ts
-
-# Cleanup all local tags and re-fetch existing tags without just removed `codegen-graph-ts` remote
-git tag -l | xargs git tag -d
-git fetch --tags
-```
-
-### Rebasing unmerged branch
-
-To preserve all the merge commits when rebasing on top of updated master use `--rebase-merges`
+## Upgrade contacts
 
 ```sh
-git rebase master --rebase-merge
+yarn upgrade-contracts
+yarn dedupe
 ```
 
-Interactive rebase works too
+## Upgrade browserlist
 
 ```sh
-git rebase master --rebase-merge --interactive
+yarn upgrade-browsers
+yarn dedupe
 ```

liquidity/components/ClaimModal/ClaimModal.tsx

@@ -91,7 +91,7 @@ export const ClaimModalUi: React.FC<{
           }}
           width="100%"
           mt="6"
-          data-cy="claim-confirm-button"
+          data-cy="claim confirm button"
         >
           {(() => {
             switch (txnStatus) {

liquidity/components/DepositModal/DepositModal.tsx

@@ -28,7 +28,7 @@ import { LiquidityPositionUpdated } from '../../ui/src/components/Manage/Liquidi
 import { ZEROWEI } from '@snx-v3/constants';
 import { ManagePositionContext } from '@snx-v3/ManagePositionContext';
 import { LiquidityPosition } from '@snx-v3/useLiquidityPosition';
-import { ChangeStat } from '../../ui/src/components';
+import { ChangeStat } from '../../ui/src/components/ChangeStat';
 import { CRatioChangeStat } from '../../ui/src/components/CRatioBar/CRatioChangeStat';
 import { TransactionSummary } from '../../ui/src/components/TransactionSummary/TransactionSummary';
 import { currency } from '@snx-v3/format';
@@ -102,7 +102,7 @@ export const DepositModalUi: FC<{
     }
 
     return (
-      <div>
+      <div data-cy="deposit multistep">
         <Text color="gray.50" fontSize="20px" fontWeight={700}>
           <ArrowBackIcon cursor="pointer" onClick={onClose} mr={2} />
           {title}
@@ -217,7 +217,7 @@ export const DepositModalUi: FC<{
           onClick={onSubmit}
           width="100%"
           mt="6"
-          data-cy="deposit-confirm-button"
+          data-cy="deposit confirm button"
         >
           {(() => {
             switch (true) {

liquidity/components/Multistep/Multistep.tsx

@@ -51,7 +51,7 @@ export function Multistep({
     >
       <Step status={status}>{step}</Step>
       <Flex direction="column">
-        <Text data-cy={`multistep-${step}`}>{title}</Text>
+        <Text>{title}</Text>
         {subtitle ? (
           <Text as="div" fontSize="xs" opacity="0.66">
             {subtitle}

liquidity/components/PercentBadges/PercentBadges.tsx

@@ -38,7 +38,6 @@ export const PercentBadges: FC<{
         }}
         mx={1}
         onClick={disabled ? undefined : () => onBadgePress(0.5)}
-        data-cy="manage-percent-50"
         color="cyan.500"
         bg="whiteAlpha.300"
         fontFamily="heading"

liquidity/components/UndelegateModal/UndelegateModal.tsx

@@ -21,7 +21,7 @@ import { Events, ServiceNames, State, UndelegateMachine } from './UndelegateMach
 import { ArrowBackIcon } from '@chakra-ui/icons';
 import { LiquidityPositionUpdated } from '../../ui/src/components/Manage/LiquidityPositionUpdated';
 import { ZEROWEI } from '@snx-v3/constants';
-import { ChangeStat } from '../../ui/src/components';
+import { ChangeStat } from '../../ui/src/components/ChangeStat';
 import { currency } from '@snx-v3/format';
 import { CRatioChangeStat } from '../../ui/src/components/CRatioBar/CRatioChangeStat';
 import { TransactionSummary } from '../../ui/src/components/TransactionSummary/TransactionSummary';

liquidity/cypress/cypress/e2e/42161-main/Create Account.e2e.js

@@ -4,21 +4,17 @@ it('Create Account', () => {
   });
 
   cy.viewport(1200, 900);
-  cy.visit('/');
+  cy.visit('/#/dashboard');
 
-  cy.get('[data-cy="account-menu-button"]').click();
-  cy.contains('[data-cy="create-new-account-menu-item"]', 'Create Account').should('exist');
+  cy.get('[data-cy="wallet button"]').click();
+  cy.contains('[data-cy="create new account button"]', 'Create Account').should('exist');
+  cy.get('[data-cy="create new account button"]').click();
+  cy.get('[data-cy="accounts list"]').children().should('have.length', 1);
 
-  // Create account
-  cy.get('[data-cy="header-wallet-address-button"]').click();
-  cy.get('[data-cy="create-new-account-menu-item"]').click();
-  cy.get('[data-cy="header-account-list"]').children().should('have.length', 1);
-
-  // The account id in the url should be the same as in the header
   cy.url().then((url) => {
-    const [baseUrl, fragment] = url.split('/#/');
-    const params = new URL(`${baseUrl}${fragment}`).searchParams;
-    const accountId = params.get('accountId');
-    cy.get(`[data-cy="account-${accountId}"]`).should('exist');
+    const u1 = new URL(url);
+    const u2 = new URL(`http://whatever${u1.hash.slice(1)}`);
+    const accountId = u2.searchParams.get('accountId');
+    cy.get(`[data-cy="account id"][data-account-id="${accountId}"]`).should('exist');
   });
 });