Skip to content

Commit

Permalink
Merge pull request #259 from stabilitydao/4-vault
Browse files Browse the repository at this point in the history 
charts fix & add curve liquidity pool
  • Loading branch information
@DevTeaLeaf
DevTeaLeaf authored Oct 10, 2024
2 parents 449996c + 63ae121 commit 248ec53
Show file tree
Hide file tree
Showing 7 changed files with 472 additions and 468 deletions.
54 changes: 27 additions & 27 deletions .github/workflows/3_e2e.yml
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
name: End-to-End Tests(Playwright)
on:
push:
branches: [main, master]
pull_request:
branches: [main, master]
# name: End-to-End Tests(Playwright)
# 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: yarn install
- name: Install Playwright Browsers
run: yarn playwright install --with-deps
- name: Run Playwright tests
run: yarn test:e2e
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
# 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: yarn install
# - name: Install Playwright Browsers
# run: yarn playwright install --with-deps
# - name: Run Playwright tests
# run: yarn test:e2e
# - uses: actions/upload-artifact@v4
# if: always()
# with:
# name: playwright-report
# path: playwright-report/
# retention-days: 30
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "stability-ui",
"type": "module",
"version": "0.12.17-alpha",
"version": "0.12.18-alpha",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
Expand Down
23 changes: 14 additions & 9 deletions src/modules/Vault/components/HistoricalRate/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const HistoricalRate: React.FC<IProps> = memo(
const [chartData, setChartData] = useState<TChartData[]>([]);
const [activeChart, setActiveChart] = useState<TActiveChart>();
const [timeline, setTimeline] = useState<TSegment>(
timelineSegments.YEAR as TSegment
timelineSegments.WEEK as TSegment
);
const [isData, setIsData] = useState(true);
const [graphError, setGraphError] = useState({
Expand Down Expand Up @@ -121,7 +121,7 @@ const HistoricalRate: React.FC<IProps> = memo(
let APRChartData = workedData
.filter(
(obj) =>
obj.APR && obj.unixTimestamp >= NOW - TIMESTAMPS_IN_SECONDS.YEAR
obj.APR && obj.unixTimestamp >= NOW - TIMESTAMPS_IN_SECONDS.WEEK
)
.map((obj) => ({
unixTimestamp: obj.unixTimestamp,
Expand All @@ -136,11 +136,10 @@ const HistoricalRate: React.FC<IProps> = memo(
setIsData(false);
return;
}

const lastTimestamp =
APRChartData[APRChartData.length - 1].unixTimestamp;

time = APRChartData[0].unixTimestamp;

do {
let sortedAPRs = APRChartData.filter(
(obj) => obj.unixTimestamp >= time
Expand Down Expand Up @@ -192,7 +191,7 @@ const HistoricalRate: React.FC<IProps> = memo(
const NOW = Math.floor(Date.now() / 1000);
const TIME: number = TIMESTAMPS_IN_SECONDS[segment];

let time = 0,
let time = NOW - TIME,
newData;

const lastTimestamp = chartData[chartData.length - 1].unixTimestamp;
Expand All @@ -204,7 +203,6 @@ const HistoricalRate: React.FC<IProps> = memo(
);

newData = [];
time = APRArr[0].unixTimestamp;

if (segment === "MONTH") {
do {
Expand All @@ -223,6 +221,7 @@ const HistoricalRate: React.FC<IProps> = memo(
}
} while (time < lastTimestamp);
} else if (segment === "YEAR") {
time = APRArr[0].unixTimestamp;
do {
let sortedAPRs = APRArr.filter(
(obj) => obj.unixTimestamp >= time
Expand Down Expand Up @@ -300,7 +299,10 @@ const HistoricalRate: React.FC<IProps> = memo(
(obj: TChartData) => obj.unixTimestamp >= NOW - TIME
);
newData = [];
time = TVLArr[0].unixTimestamp;

if (segment === "YEAR") {
time = TVLArr[0].unixTimestamp;
}

do {
let sortedAPRs = TVLArr.filter((obj) => obj.unixTimestamp < time);
Expand Down Expand Up @@ -354,7 +356,10 @@ const HistoricalRate: React.FC<IProps> = memo(
);

newData = [];
time = priceArr[0].unixTimestamp;

if (segment === "YEAR") {
time = priceArr[0].unixTimestamp;
}

do {
let sortedData = priceArr.filter((obj) => obj.unixTimestamp < time);
Expand Down Expand Up @@ -414,7 +419,6 @@ const HistoricalRate: React.FC<IProps> = memo(
);

newData = [];
time = vsHoldArr[0].unixTimestamp;

if (segment === "MONTH") {
do {
Expand All @@ -433,6 +437,7 @@ const HistoricalRate: React.FC<IProps> = memo(
}
} while (time < lastTimestamp);
} else if (segment === "YEAR") {
time = vsHoldArr[0].unixTimestamp;
do {
let sortedAPRs = vsHoldArr.filter(
(obj) => obj.unixTimestamp >= time
Expand Down
1 change: 0 additions & 1 deletion src/modules/Vault/components/InvestForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2839,7 +2839,6 @@ const InvestForm: React.FC<IProps> = ({ network, vault }) => {
? "Confirm in wallet"
: "Deposit"}
</p>

{transactionInProgress && (
<Loader color={"#a6a0b2"} />
)}
Expand Down
60 changes: 31 additions & 29 deletions src/modules/Vault/components/LiquidityPool.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { memo, useState, useEffect } from "react";

import { useStore } from "@nanostores/react";

import { HeadingText } from "@ui";
import { HeadingText, FieldValue } from "@ui";

import { DEXes } from "@constants";

Expand Down Expand Up @@ -37,10 +37,16 @@ const LiquidityPool: React.FC<IProps> = memo(({ network, vault }) => {
vault.strategyInfo?.protocols.some((protocol) => protocol.name === dex.name)
);

const protocol =
vault.strategyInfo.protocols.length > 1
? vault.strategyInfo.protocols[1]
: vault.strategyInfo.protocols[0];
let protocol = { logoSrc: "", name: "" };

if (vault?.strategy === "Curve Convex Farm") {
protocol = vault.strategyInfo.protocols[0];
} else {
protocol =
vault.strategyInfo.protocols.length > 1
? vault.strategyInfo.protocols[1]
: vault.strategyInfo.protocols[0];
}

useEffect(() => {
if (!$assetsPrices[network]) return;
Expand Down Expand Up @@ -82,12 +88,12 @@ const LiquidityPool: React.FC<IProps> = memo(({ network, vault }) => {
className="rounded-full w-7 h-7"
/>
<div className="flex flex-col">
<span data-testid="poolName" className="text-[16px]">
<span data-testid="poolName" className="text-[18px] font-semibold">
{protocol.name}
</span>
<span
data-testid="poolSymbol"
className="text-[14px] text-[#8d8e96]"
className="text-[12px] leading-3 text-neutral-500"
>
{poolSymbol}
</span>
Expand All @@ -96,43 +102,39 @@ const LiquidityPool: React.FC<IProps> = memo(({ network, vault }) => {

<div className="flex items-start gap-10 flex-wrap">
<div className="flex flex-col gap-5">
<div className="flex flex-col">
<span className="text-[14px] text-[#8d8e96]">TVL</span>
<span data-testid="poolTVL" className="text-[16px]">
{formatNumber(Number(vault.pool.tvl), "abbreviate")}
</span>
</div>
<div className="flex flex-col">
<span className="text-[14px] text-[#8d8e96]">FEE</span>
<span data-testid="poolFee" className="text-[16px]">
{vault.pool.fee}%
</span>
</div>
<FieldValue
name="TVL"
value={formatNumber(Number(vault.pool.tvl), "abbreviate")}
/>

{!!vault.pool.fee && (
<FieldValue name="FEE" value={`${vault.pool.fee}%`} />
)}
</div>
<div className="flex flex-col gap-5">
{!!poolAssets &&
poolAssets.map((poolAsset, index: number) => (
<div key={poolAsset.amount} className="flex flex-col">
<span className="text-[14px] text-[#8d8e96]">
<div
key={poolAsset.amount}
className="h-[36px] md:h-[64px] flex flex-row items-center justify-between w-full md:justify-normal md:items-start md:flex-col"
>
<div className="h-[12px] flex uppercase text-[12px] leading-3 text-neutral-500 mb-0 md:mb-0">
{poolAsset.symbol}
</span>
<span
</div>
<div
data-testid={`poolAsset${index}`}
className="text-[16px]"
className="h-[40px] flex items-center text-[18px] font-semibold whitespace-nowrap"
>
{formatNumber(poolAsset.amount, "format")} (
{poolAsset.percent.toFixed(2)}%)
</span>
</div>
</div>
))}
</div>

{!!dexPool && (
<div>
<div className="flex flex-col">
<span className="text-[14px] text-[#8d8e96]">ALGO</span>
<span className="text-[16px]">{dexPool.algo}</span>
</div>
<FieldValue name="ALGO" value={dexPool.algo} />
</div>
)}
</div>
Expand Down
12 changes: 5 additions & 7 deletions src/modules/Vault/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { LiquidityPool } from "./components/LiquidityPool";
import { UnderlyingALM } from "./components/UnderlyingALM";

import { WagmiLayout } from "@layouts";
import { Toast, Loader, ErrorMessage, Breadcrumbs } from "@ui";
import { Toast, FullPageLoader, ErrorMessage, Breadcrumbs } from "@ui";

import { vaultData, vaults, error } from "@store";

Expand Down Expand Up @@ -93,11 +93,9 @@ const Vault: React.FC<IProps> = ({ network, vault }) => {

<div className="my-8 flex flex-col lg:flex-row gap-5 w-full">
<div className="w-full lg:w-1/2">
{localVault.assets.length > 1 &&
localVault?.pool &&
localVault?.strategy != "Curve Convex Farm" && (
<LiquidityPool network={network} vault={localVault} />
)}
{localVault.assets.length > 1 && localVault?.pool && (
<LiquidityPool network={network} vault={localVault} />
)}
</div>
<div className="w-full lg:w-1/2">
{isALM && <UnderlyingALM network={network} vault={localVault} />}
Expand All @@ -115,7 +113,7 @@ const Vault: React.FC<IProps> = ({ network, vault }) => {
</WagmiLayout>
) : (
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<Loader width="100" height="100" />
<FullPageLoader />
</div>
);
};
Expand Down
Loading

0 comments on commit 248ec53

Please sign in to comment.