stability 0.9.0, add playwright tests to ci, Vaults strategy shortName

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g yarn && yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -19,3 +19,7 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -1,21 +1,22 @@
 {
   "name": "stability-ui",
   "type": "module",
-  "version": "0.8.5-alpha",
+  "version": "0.8.6-alpha",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "test": "jest"
   },
   "dependencies": {
     "@astrojs/partytown": "^2.1.0",
     "@astrojs/react": "^3.0.3",
     "@astrojs/tailwind": "^5.0.2",
     "@astrojs/vercel": "^5.1.0",
     "@nanostores/react": "^0.7.1",
-    "@stabilitydao/stability": "^0.7.2",
+    "@stabilitydao/stability": "^0.9.0",
     "@tanstack/query-sync-storage-persister": "^5.22.2",
     "@tanstack/react-query": "^5.22.2",
     "@tanstack/react-query-persist-client": "^5.22.2",
@@ -36,5 +37,10 @@
     "vercel": "^32.5.0",
     "viem": "^2.13.1",
     "wagmi": "^2.5.7"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.45.1",
+    "@types/node": "^20.14.10",
+    "jest": "^29.7.0"
   }
 }

playwright.config.ts

@@ -0,0 +1,78 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

src/components/Vault/Contracts.tsx

@@ -2,8 +2,6 @@ import { memo, useMemo, useState, useEffect } from "react";
 
 import { zeroAddress, getAddress } from "viem";
 
-import { AssetsProportion } from "@components";
-
 import { getProtocolLogo } from "@utils";
 
 import { DEXes, CHAINS } from "@constants";
@@ -160,10 +158,10 @@ const Contracts: React.FC<IProps> = memo(({ vault, network }) => {
                 <td>
                   <div className="ml-3 hidden sm:block">
                     {logo === "proportions" ? (
-                      <AssetsProportion
-                        proportions={vault.assetsProportions}
-                        assets={vault?.assets}
-                        type="vault"
+                      <img
+                        src={`https://api.stabilitydao.org/vault/${vault.network}/${vault.address}/logo.svg`}
+                        alt="logo"
+                        className="w-[26px] h-[26px] rounded-full"
                       />
                     ) : (
                       <img

src/components/Vault/VaultActionForm.tsx

@@ -40,6 +40,8 @@ import {
   ZapABI,
   ERC20MetadataUpgradeableABI,
   wagmiConfig,
+  platforms,
+  PlatformABI,
 } from "@web3";
 
 import {
@@ -49,6 +51,7 @@ import {
   decodeHex,
   setLocalStoreHash,
   getProtocolLogo,
+  addAssetsBalance,
 } from "@utils";
 
 import type {
@@ -59,6 +62,7 @@ import type {
   TTokenData,
   TPlatformsData,
   TVault,
+  TBalances,
 } from "@types";
 
 import tokenlist from "@stabilitydao/stability/out/stability.tokenlist.json";
@@ -1117,12 +1121,32 @@ const VaultActionForm: React.FC<IProps> = ({ network, vault }) => {
     setTransactionInProgress(false);
   };
 
+  const refreshBalance = async () => {
+    const contractBalance = await _publicClient.readContract({
+      address: platforms[network],
+      abi: PlatformABI,
+      functionName: "getBalance",
+      args: [$account as TAddress],
+    });
+
+    const currentChainBalances = addAssetsBalance(contractBalance);
+
+    const oldBalances = assetsBalances.get();
+    oldBalances[network] = currentChainBalances;
+
+    assetsBalances.set(oldBalances);
+
+    return currentChainBalances;
+  };
+
   ///// 1INCH DATA REFRESH
   const refreshData = async () => {
     if (!isRefresh || loader) return;
+    const currentBalances: TBalances = await refreshBalance();
+
     setRotation(rotation + 360);
     setLoader(true);
-    loadAssetsBalances();
+    loadAssetsBalances(currentBalances);
     zapInputHandler(inputs[option[0]]?.amount, option[0]);
   };
   /////
@@ -1640,16 +1664,18 @@ const VaultActionForm: React.FC<IProps> = ({ network, vault }) => {
     setTransactionInProgress(false);
   };
 
-  const loadAssetsBalances = () => {
+  const loadAssetsBalances = (
+    balances: Balances = $assetsBalances[network]
+  ) => {
     const balance: TVaultBalance | any = {};
 
-    if ($assetsBalances[network]) {
+    if (balances) {
       for (let i = 0; i < option.length; i++) {
         const decimals = getTokenData(option[i])?.decimals;
 
         if (decimals) {
           balance[option[i]] = formatUnits(
-            $assetsBalances[network][option[i].toLowerCase()],
+            balances[option[i].toLowerCase()],
             decimals
           );
         }
@@ -2019,7 +2045,7 @@ const VaultActionForm: React.FC<IProps> = ({ network, vault }) => {
   useEffect(() => {
     setUnderlyingShares(false);
     setZapShares(false);
-    if (option[0] === underlyingToken?.address || !inputs[option[0]]?.amount) {
+    if (option[0] === underlyingToken?.address) {
       setIsRefresh(false);
       return;
     }

src/components/Vaults/PlatformModal.tsx

@@ -186,12 +186,12 @@ const PlatformModal: React.FC<IProps> = ({ setModalState }) => {
                     </span>
                   </div>
                   <div className="flex flex-wrap mt-2">
-                    {Object.keys(deployments[$currentChainID]).map(
+                    {Object.keys(deployments[$currentChainID].core).map(
                       (moduleContract) => {
                         //Can't use CoreContracts type
                         const address =
                           //@ts-ignore
-                          deployments[$currentChainID][moduleContract];
+                          deployments[$currentChainID].core[moduleContract];
 
                         return (
                           <a

src/components/Vaults/index.tsx

@@ -749,7 +749,7 @@ const Vaults = () => {
                     return (
                       <tr
                         key={vault.name + index}
-                        className="text-center text-[14px] min-[1020px]:hover:bg-[#2B3139] cursor-pointer h-[60px] font-medium relative"
+                        className="component text-center text-[14px] min-[1020px]:hover:bg-[#2B3139] cursor-pointer h-[60px] font-medium relative"
                         onClick={() => toVault(vault.network, vault.address)}
                       >
                         <td className="mt-[6px] min-[1020px]:px-2 min-[1130px]:px-3 py-2 text-center sticky min-[1020px]:relative left-0 min-[1020px]:block bg-[#181A20] min-[1020px]:bg-transparent z-10">

src/constants/index.ts

@@ -14,6 +14,7 @@ import {
   cbETH,
   CRV,
 } from "./tokens";
+import { deployments } from "@stabilitydao/stability";
 
 const APRsType = ["latest", "24h", "week"];
 
@@ -307,13 +308,14 @@ const STRATEGY_SPECIFIC_SUBSTITUTE: {
 };
 
 const GRAPH_ENDPOINTS: { [key: string]: string } = {
-  137: `https://gateway-arbitrum.network.thegraph.com/api/${
+  137: deployments[137].subgraph.replace(
+    "[api-key]",
     import.meta.env.PUBLIC_GRAPH_API_KEY
-  }/subgraphs/
-id/7WgM7jRzoW7yiJCE8DMEwCxtN3KLisYrVVShuAL2Kz4N`,
-  8453: `https://gateway-arbitrum.network.thegraph.com/api/${
+  ),
+  8453: deployments[8453].subgraph.replace(
+    "[api-key]",
     import.meta.env.PUBLIC_GRAPH_API_KEY
-  }/subgraphs/id/8uU5LrpCLCP1P31GBCUXu8AdWKQ2aW6mKTKsr2ssUdJS`,
+  ),
 };
 
 const STABILITY_API = "https://api.stabilitydao.org/";

src/layouts/AppStore.tsx

@@ -38,14 +38,7 @@ import {
   vaultData,
 } from "@store";
 
-import {
-  wagmiConfig,
-  platforms,
-  PlatformABI,
-  IVaultManagerABI,
-  retroIchiFactory,
-  quickSwapIchiFactory,
-} from "@web3";
+import { wagmiConfig, platforms, PlatformABI, IVaultManagerABI } from "@web3";
 
 import {
   calculateAPY,
@@ -596,12 +589,12 @@ const AppStore = (props: React.PropsWithChildren) => {
 
         platformData[String(chain.id)] = {
           platform: platforms[chain.id],
-          factory: deployments[chain.id].factory.toLowerCase(),
+          factory: deployments[chain.id].core.factory.toLowerCase(),
           buildingPermitToken:
             stabilityAPIData?.platforms[chain.id]?.buildingPermitToken,
           buildingPayPerVaultToken:
             stabilityAPIData?.platforms[chain.id]?.buildingPayPerVaultToken,
-          zap: deployments[chain.id].zap.toLowerCase(),
+          zap: deployments[chain.id].core.zap.toLowerCase(),
         };
 
         /////***** SET USER BALANCES *****/////

src/utils/functions/getStrategyInfo.ts

@@ -172,7 +172,7 @@ export const getStrategyInfo = (vaultSymbol: string): IStrategyInfo => {
       sourceCode: "",
       il: IL.CF,
     };
-  } else if (vaultSymbol.match(/DQMFN[a-z0-9]{1}$/)) {
+  } else if (vaultSymbol.match(/DQMFN?[A-Z0-9]?$/)) {
     strategyInfo = {
       name: strategies.DQMF?.id as string,
       shortName: strategies.DQMF?.shortId as string,
@@ -198,7 +198,7 @@ export const getStrategyInfo = (vaultSymbol: string): IStrategyInfo => {
       sourceCode: "",
       il: IL.IQMF,
     };
-  } else if (vaultSymbol.match(/GQMF(S|N|W)$/)) {
+  } else if (vaultSymbol.match(/GQMF(S|N|W)?$/)) {
     const il = vaultSymbol.match(/GQMFS$/)
       ? IL.GQFS
       : vaultSymbol.match(/GQMFN$/)

src/web3/index.ts

@@ -26,13 +26,13 @@ import type { TAddress } from "@types";
 const walletConnectProjectId = "12a65603dc5ad4317b3bc1be13138687";
 // 137 || 8453
 const platforms: { [key: string]: TAddress } = {
-  "137": deployments[137]?.platform,
-  "8453": deployments[8453]?.platform,
+  "137": deployments[137].core?.platform,
+  "8453": deployments[8453].core?.platform,
 };
 
 const priceReaders: { [key: string]: TAddress } = {
-  "137": deployments[137].priceReader,
-  "8453": deployments[8453].priceReader,
+  "137": deployments[137].core.priceReader,
+  "8453": deployments[8453].core.priceReader,
 };
 
 const defiedgeFactories: { [key: string]: TAddress } = {