From 7c706bc60e0df452670521ab0f95f11474d2a198 Mon Sep 17 00:00:00 2001 From: Jigar Patel Date: Tue, 11 Nov 2025 12:40:47 -0500 Subject: [PATCH] feat(provider): changed AKT dropdown popup design change --- .../src/components/layout/WalletStatus.tsx | 151 ++++++++---------- .../src/components/wallet/WalletPopup.tsx | 67 ++++++++ .../src/queries/useMarketData.ts | 28 +++- 3 files changed, 161 insertions(+), 85 deletions(-) create mode 100644 apps/provider-console/src/components/wallet/WalletPopup.tsx diff --git a/apps/provider-console/src/components/layout/WalletStatus.tsx b/apps/provider-console/src/components/layout/WalletStatus.tsx index 54c3c2ee49..0fdb16986f 100644 --- a/apps/provider-console/src/components/layout/WalletStatus.tsx +++ b/apps/provider-console/src/components/layout/WalletStatus.tsx @@ -1,105 +1,90 @@ "use client"; +import React, { useState } from "react"; import { FormattedNumber } from "react-intl"; -import { - Address, - Badge, - Button, - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, - Spinner, - Tooltip, - TooltipContent, - TooltipTrigger -} from "@akashnetwork/ui/components"; -import { LogOut, MoreHoriz, Wallet } from "iconoir-react"; -import Link from "next/link"; +import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, Spinner } from "@akashnetwork/ui/components"; +import { cn } from "@akashnetwork/ui/utils"; +import ClickAwayListener from "@mui/material/ClickAwayListener"; +import { NavArrowDown, Wallet } from "iconoir-react"; import { useWallet } from "@src/context/WalletProvider"; import { useTotalWalletBalance } from "@src/hooks/useWalletBalance"; -import { udenomToDenom } from "@src/utils/mathHelpers"; -import { FormattedDecimal } from "../shared/FormattedDecimal"; import { ConnectWalletButton } from "../wallet/ConnectWalletButton"; +import { WalletPopup } from "../wallet/WalletPopup"; export function WalletStatus() { - const { walletName, address, walletBalances, logout, isWalletLoaded, isWalletConnected } = useWallet(); + const { walletName, walletBalances, isWalletLoaded, isWalletConnected } = useWallet(); const walletBalance = useTotalWalletBalance(); + const [open, setOpen] = useState(false); - const onDisconnectClick = () => logout(); - - const WalletInfo = () => ( -
-
- - - - - - - -  Disconnect Wallet - - - -
- -
-
- - - - - {walletName} - - -
- - - -
- - {walletBalances && ( -
- - - - - - - -
-
- - AKT -
-
- - USDC -
-
- - -
- )} -
-
- ); + const getSplitText = (text: string, start: number, end: number) => { + if (text.length <= start + end) return text; + return `${text.slice(0, start)}...${text.slice(-end)}`; + }; return ( <> {isWalletLoaded ? ( isWalletConnected ? ( - +
+
+ + +
setOpen(true)} + > +
+ + {walletName?.length > 20 ? ( + {getSplitText(walletName, 4, 4)} + ) : ( + {walletName} + )} +
+ + {walletBalance > 0 &&
|
} + +
+ {walletBalance > 0 && ( + + )} +
+ +
+ +
+
+ + { + setOpen(false); + }} + > + { + setOpen(false); + }} + > +
+ +
+ + + +
+
) : ( ) ) : ( -
- +
+
)} diff --git a/apps/provider-console/src/components/wallet/WalletPopup.tsx b/apps/provider-console/src/components/wallet/WalletPopup.tsx new file mode 100644 index 0000000000..cdc8afbeb8 --- /dev/null +++ b/apps/provider-console/src/components/wallet/WalletPopup.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import { FormattedNumber } from "react-intl"; +import { Address, Button, Separator } from "@akashnetwork/ui/components"; +import { LogOut } from "iconoir-react"; + +import { usePricing } from "@src/context/PricingProvider"; +import { useWallet } from "@src/context/WalletProvider"; +import { uAktDenom } from "@src/utils/constants"; +import { udenomToDenom } from "@src/utils/mathHelpers"; +import { uaktToAKT } from "@src/utils/priceUtils"; + +interface WalletPopupProps extends React.PropsWithChildren { + walletBalances: { uakt: number; usdc: number } | null; +} + +export const WalletPopup: React.FC = ({ walletBalances }) => { + const { address, logout } = useWallet(); + const { isLoaded, getPriceForDenom } = usePricing(); + + const aktAmount = walletBalances ? uaktToAKT(walletBalances.uakt, 2) : 0; + const aktPrice = getPriceForDenom(uAktDenom); + const aktUsdValue = isLoaded && walletBalances && aktPrice > 0 ? aktAmount * aktPrice : 0; + const usdcAmount = walletBalances ? udenomToDenom(walletBalances.usdc, 2) : 0; + + return ( +
+
+
+
+ +
Wallet Balance
+
+ {walletBalances ? ( + <> +
+ AKT + + {isLoaded && aktPrice ? : $0.00} + ({aktAmount} AKT) + +
+ + + +
+ USDC + + + +
+ + ) : ( +
Wallet Balance is unknown because the blockchain is unavailable
+ )} +
+ +
Wallet Actions
+ +
+ +
+
+ ); +}; diff --git a/apps/provider-console/src/queries/useMarketData.ts b/apps/provider-console/src/queries/useMarketData.ts index 4d27ea06ca..6069283cda 100644 --- a/apps/provider-console/src/queries/useMarketData.ts +++ b/apps/provider-console/src/queries/useMarketData.ts @@ -4,8 +4,32 @@ import { useQuery } from "@tanstack/react-query"; import type { MarketData } from "@src/types"; import { QueryKeys } from "./queryKeys"; -async function getMarketData(): Promise { - return {}; +async function getMarketData(): Promise { + try { + const response = await fetch("https://api.coingecko.com/api/v3/coins/akash-network/tickers"); + const data = await response.json(); + const coinbasePrice = data.tickers.find((ticker: any) => ticker.market.name === "Coinbase Exchange"); + const price = coinbasePrice ? parseFloat(coinbasePrice.converted_last.usd) : 0; + + return { + price, + volume: 0, + marketCap: 0, + marketCapRank: 0, + priceChange24h: 0, + priceChangePercentage24: 0 + }; + } catch (error) { + console.error("Failed to fetch market data:", error); + return { + price: 0, + volume: 0, + marketCap: 0, + marketCapRank: 0, + priceChange24h: 0, + priceChangePercentage24: 0 + }; + } } export function useMarketData(options?: Omit, "queryKey" | "queryFn">) {