From e6187ab9fee421bdf5c392f72018a58904a0cadf Mon Sep 17 00:00:00 2001 From: chuck-bear <178402093+bearpong@users.noreply.github.com> Date: Fri, 22 Nov 2024 19:33:11 +0100 Subject: [PATCH 1/2] feat(bex): mobile ui --- apps/hub/src/app/pools/PoolsTable.tsx | 10 +- .../[poolId]/details/PoolPageContent.tsx | 278 ++++++++---------- packages/shared-ui/src/pool-header.tsx | 20 +- packages/ui/src/button.tsx | 4 +- 4 files changed, 142 insertions(+), 170 deletions(-) diff --git a/apps/hub/src/app/pools/PoolsTable.tsx b/apps/hub/src/app/pools/PoolsTable.tsx index edb9aa5d4..37b46e031 100755 --- a/apps/hub/src/app/pools/PoolsTable.tsx +++ b/apps/hub/src/app/pools/PoolsTable.tsx @@ -70,12 +70,12 @@ export const PoolSearch = ({ id="poolstable" > -
+
All Pools @@ -83,7 +83,7 @@ export const PoolSearch = ({ My Pools @@ -91,7 +91,7 @@ export const PoolSearch = ({ -
+
{ @@ -127,7 +127,7 @@ export const PoolSearch = ({
-
+
{ diff --git a/apps/hub/src/app/pools/[poolId]/details/PoolPageContent.tsx b/apps/hub/src/app/pools/[poolId]/details/PoolPageContent.tsx index bc19f3545..4e268f6be 100755 --- a/apps/hub/src/app/pools/[poolId]/details/PoolPageContent.tsx +++ b/apps/hub/src/app/pools/[poolId]/details/PoolPageContent.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useEffect, useMemo, useState } from "react"; +import React, { ComponentProps, ReactNode, useEffect, useMemo } from "react"; import Link from "next/link"; import { SWRFallback, @@ -209,6 +209,56 @@ export default function PoolPageContent({ ? poolTypeLabels[pool?.type as keyof typeof poolTypeLabels] : undefined; + const cards: ({ label: string } & ComponentProps)[] = + [ + { + label: "TVL", + value: tvlInUsd ?? 0, + symbol: "USD", + }, + { + label: "Volume (24h)", + value: v3Pool?.volume24h ?? 0, + symbol: "USD", + }, + { + label: "Fees (24h)", + value: v3Pool?.fees24h ?? 0, + symbol: "USD", + }, + { + label: "APR", + value: v3Pool?.aprItems.at(0)?.apr ?? 0, + percent: true, + colored: true, + }, + ]; + + const tabs: [Selection, string, ReactNode][] = [ + [ + Selection.AllTransactions, + "All transactions", + , + ], + [ + Selection.Swaps, + "Swaps", + , + ], + [ + Selection.AddsWithdrawals, + "Adds & Withdraws", + , + ], + ]; return (
), - color: "success", }, { title: "Pool Contract", @@ -264,107 +313,9 @@ export default function PoolPageContent({ ]} /> - {/* {isPoolLoading ? ( - - ) : ( - - )} */}
-
- -
- -
-
- TVL -
-
-
- {tvlInUsd !== null ? ( - - ) : ( - "–" - )} -
- - -
-
- Volume (24h) -
-
-
- -
- - -
-
- Fees (24h) -
-
-
- -
- - -
-
- APR -
-
-
- -
- -
- -
- Pool Liquidity -
- {pool === undefined ? ( - - ) : tvlInUsd === null ? ( - "–" - ) : ( - - )} -
-
- t.address !== pool.address) - .map((t) => ({ - address: t.address!, - symbol: t.symbol!, - weight: t.weight, - value: parseFloat(t.balance), - valueUSD: t.token?.latestUSDPrice - ? parseFloat(t.balance) * - parseFloat(t.token?.latestUSDPrice ?? "0") - : null, - })) ?? [] - } - /> - -
{isConnected && ( -
+
@@ -494,7 +445,6 @@ export default function PoolPageContent({
-
@@ -550,65 +500,85 @@ export default function PoolPageContent({ ) : null}
)} +
+ +
+ {cards.map((card) => ( + +
+
+ {card.label} +
+
+
+ {card.value !== null ? ( + + ) : ( + "–" + )} +
+ + ))} +
+ +
+ Pool Liquidity +
+ {pool === undefined ? ( + + ) : tvlInUsd === null ? ( + "–" + ) : ( + + )} +
+
+ t.address !== pool.address) + .map((t) => ({ + address: t.address!, + symbol: t.symbol!, + weight: t.weight, + value: parseFloat(t.balance), + valueUSD: t.token?.latestUSDPrice + ? parseFloat(t.balance) * + parseFloat(t.token?.latestUSDPrice ?? "0") + : null, + })) ?? [] + } + /> + +
- setSelectedTab(value as Selection)} - > + - - All transactions - - - Swaps - - - Adds & Withdraws - + {tabs.map(([value, label]) => ( + + {label} + + ))} - - - - - - - - - + {tabs.map(([value, _label, content]) => ( + + {content} + + ))} - {/*
{getLoadMoreButton()}
*/}
diff --git a/packages/shared-ui/src/pool-header.tsx b/packages/shared-ui/src/pool-header.tsx index 48454f958..4c551b550 100755 --- a/packages/shared-ui/src/pool-header.tsx +++ b/packages/shared-ui/src/pool-header.tsx @@ -36,31 +36,33 @@ export const PoolHeader = ({ >
{title}
{subtitles.map((subtitle, index) => ( @@ -69,7 +71,7 @@ export const PoolHeader = ({ {subtitle.tooltip ? <> {subtitle.tooltip}: : ":"} Date: Fri, 22 Nov 2024 19:34:29 +0100 Subject: [PATCH 2/2] feat(pol): extracts useRewardVaults, adds it to BEX --- .../details/PoolCreateRewardVault.tsx | 21 +++++++--- .../[poolId]/details/PoolPageContent.tsx | 14 ++++--- .../create/components/create-gauge-card.tsx | 37 ++++-------------- .../create/components/useCreateRewardVault.ts | 38 +++++++++++++++++++ .../useRewardVaultBalanceFromStakingToken.ts | 21 +++++++--- 5 files changed, 85 insertions(+), 46 deletions(-) create mode 100644 apps/hub/src/app/vaults/create/components/useCreateRewardVault.ts diff --git a/apps/hub/src/app/pools/[poolId]/details/PoolCreateRewardVault.tsx b/apps/hub/src/app/pools/[poolId]/details/PoolCreateRewardVault.tsx index bdadaef93..64f5175c3 100644 --- a/apps/hub/src/app/pools/[poolId]/details/PoolCreateRewardVault.tsx +++ b/apps/hub/src/app/pools/[poolId]/details/PoolCreateRewardVault.tsx @@ -1,12 +1,22 @@ import { Button } from "@bera/ui/button"; import { Card, CardContent } from "@bera/ui/card"; -import { Separator } from "@bera/ui/separator"; -import { Skeleton } from "@bera/ui/skeleton"; -import Link from "next/link"; +import { Address } from "viem"; +import { useCreateRewardVault } from "~/app/vaults/create/components/useCreateRewardVault"; -export const PoolCreateRewardVault = () => { +export const PoolCreateRewardVault = ({ + address, + onSuccess, +}: { + address: Address; + onSuccess?: () => void; +}) => { + const { createRewardVault, ModalPortal } = useCreateRewardVault({ + tokenAddress: address, + onSuccess, + }); return ( + {ModalPortal}
@@ -21,8 +31,7 @@ export const PoolCreateRewardVault = () => { diff --git a/apps/hub/src/app/pools/[poolId]/details/PoolPageContent.tsx b/apps/hub/src/app/pools/[poolId]/details/PoolPageContent.tsx index 4e268f6be..6bf99a10e 100755 --- a/apps/hub/src/app/pools/[poolId]/details/PoolPageContent.tsx +++ b/apps/hub/src/app/pools/[poolId]/details/PoolPageContent.tsx @@ -10,7 +10,6 @@ import { ADDRESS_ZERO, useRewardVaultBalanceFromStakingToken, useSelectedGauge, - usePoolHistoricalData, } from "@bera/berajs"; import { beraTokenAddress, blockExplorerUrl } from "@bera/config"; import { @@ -38,6 +37,7 @@ import { Icons } from "@bera/ui/icons"; import { PoolCreateRewardVault } from "./PoolCreateRewardVault"; import { useOnChainPoolData } from "~/b-sdk/useOnChainPoolData"; import { PoolChart } from "./PoolChart"; +import { useCreateRewardVault } from "~/app/vaults/create/components/useCreateRewardVault"; enum Selection { AllTransactions = "allTransactions", @@ -190,9 +190,10 @@ export default function PoolPageContent({ : undefined; const { data: userPositionBreakdown } = usePoolUserPosition({ pool: pool }); - const { data: rewardVault } = useRewardVaultBalanceFromStakingToken({ - stakingToken: pool?.address as Address, - }); + const { data: rewardVault, refresh: refreshRewardVault } = + useRewardVaultBalanceFromStakingToken({ + stakingToken: pool?.address as Address, + }); const { data: gauge } = useSelectedGauge(rewardVault?.address as Address); const userSharePercentage = userPositionBreakdown?.userSharePercentage ?? 0; @@ -495,7 +496,10 @@ export default function PoolPageContent({ ) : ( - + refreshRewardVault()} + address={pool?.address as Address} + /> ) ) : null}
diff --git a/apps/hub/src/app/vaults/create/components/create-gauge-card.tsx b/apps/hub/src/app/vaults/create/components/create-gauge-card.tsx index 0a5a9841a..a287703ec 100644 --- a/apps/hub/src/app/vaults/create/components/create-gauge-card.tsx +++ b/apps/hub/src/app/vaults/create/components/create-gauge-card.tsx @@ -2,21 +2,20 @@ import React, { useMemo, useState } from "react"; import { useRouter } from "next/navigation"; -import { - TransactionActionType, - rewardVaultFactoryAbi, - usePollRewardVault, -} from "@bera/berajs"; -import { rewardVaultFactoryAddress } from "@bera/config"; -import { Spinner, Tooltip, useTxn } from "@bera/shared-ui"; +import { usePollRewardVault } from "@bera/berajs"; +import { Spinner, Tooltip } from "@bera/shared-ui"; import { Button } from "@bera/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@bera/ui/card"; import { Icons } from "@bera/ui/icons"; import { Input } from "@bera/ui/input"; import { Address, isAddress } from "viem"; +import { useCreateRewardVault } from "./useCreateRewardVault"; export const CreateGaugeCard: React.FC = () => { const [targetAddress, setTargetAddress] = useState(""); + const { createRewardVault, ModalPortal } = useCreateRewardVault({ + tokenAddress: targetAddress as Address, + }); const { data: rewardVaultData, isLoading: isLoadingRewardVault } = usePollRewardVault( @@ -33,28 +32,6 @@ export const CreateGaugeCard: React.FC = () => { const router = useRouter(); - const { write, ModalPortal } = useTxn({ - message: "Creating Reward Vault", - actionType: TransactionActionType.CREATE_REWARDS_VAULT, - onSuccess: async (txHash: string) => { - console.log("Success", txHash); - }, - onError: (e) => { - console.log("Error", e); - }, - }); - - const handleCreateVault = () => { - // Logic to create the vault - const address = targetAddress as Address; - write({ - address: rewardVaultFactoryAddress, - abi: rewardVaultFactoryAbi, - functionName: "createRewardsVault", - params: [address], - }); - }; - return (