Skip to content

Commit

Permalink
fix: staking buttons adjustments (#1751)
Browse files Browse the repository at this point in the history 
* fix: dont show nom pool staking button if solo staking

* fix: staking buttons inside balance buttons

* fix: dont show unbond button on crowdloan rows
  • Loading branch information
@0xKheops
0xKheops authored Dec 18, 2024
1 parent 1c9c680 commit de6119e
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 74 deletions.
7 changes: 6 additions & 1 deletion apps/extension/src/ui/domains/Portfolio/AssetDetails/DashboardAssetDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,11 @@ const LockedExtra: FC<{
[accountStatus?.canWithdrawIn, rowMeta.unbonding],
)

const canUnbond = useMemo(
() => (accountStatus?.canUnstake && rowMeta.poolId) || tokenId === "bittensor-substrate-native",
[accountStatus?.canUnstake, rowMeta.poolId, tokenId],
)

if (!rowAddress) return null

return (
Expand All @@ -343,7 +348,7 @@ const LockedExtra: FC<{
)}
</>
)
) : accountStatus?.canUnstake || tokenId === "bittensor-substrate-native" ? (
) : canUnbond ? (
<UnbondButton
tokenId={tokenId}
address={rowAddress}
Expand Down
8 changes: 6 additions & 2 deletions apps/extension/src/ui/domains/Portfolio/AssetDetails/PopupAssetDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,11 @@ const LockedExtra: FC<{
[accountStatus?.canWithdrawIn, rowMeta.unbonding],
)

const canUnbond = useMemo(
() => (accountStatus?.canUnstake && rowMeta.poolId) || tokenId === "bittensor-substrate-native",
[accountStatus?.canUnstake, rowMeta.poolId, tokenId],
)

if (!rowAddress) return null

return (
Expand All @@ -304,8 +309,7 @@ const LockedExtra: FC<{
)}
</Tooltip>
)
) : //eslint-disable-next-line @typescript-eslint/no-explicit-any
accountStatus?.canUnstake || tokenId === "bittensor-substrate-native" ? (
) : canUnbond ? (
<UnbondButton
tokenId={tokenId}
address={rowAddress}
Expand Down
36 changes: 19 additions & 17 deletions apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,15 @@ export const AssetRow: FC<{ balances: Balances; noCountUp?: boolean }> = ({
if (!token || !summary) return null

return (
<div className="relative">
<div className="group relative h-[6.6rem] w-full">
<button
type="button"
className={classNames(
"text-body-secondary bg-grey-850 hover:bg-grey-800 group grid h-[6.6rem] w-full grid-cols-[40%_30%_30%] overflow-hidden rounded text-left text-base",
"text-body-secondary bg-grey-850 hover:bg-grey-800 grid h-[6.6rem] w-full grid-cols-[40%_30%_30%] overflow-hidden rounded text-left text-base",
)}
onClick={handleClick}
>
<div className="flex h-[6.6rem]">
<div className="flex h-full">
<div className="shrink-0 p-8 text-xl">
<TokenLogo tokenId={token.id} />
</div>
Expand Down Expand Up @@ -99,20 +99,6 @@ export const AssetRow: FC<{ balances: Balances; noCountUp?: boolean }> = ({
/>
</div>
<div className="flex h-[6.6rem] flex-col items-end justify-center gap-2 text-right">
{canBondNomPool && (
<>
<BondPillButton
tokenId={token.id}
balances={balances}
className="[>svg]:text-[2rem] mr-8 hidden text-base group-hover:block"
/>
<div className="absolute -right-5 -top-2 size-10 overflow-hidden rounded-full bg-black p-1">
<div className="text-primary bg-primary/25 flex size-full items-center justify-center rounded-full text-xs">
<ZapFastIcon className="size-6" />
</div>
</div>
</>
)}
<AssetBalanceCellValue
render
tokens={summary.availableTokens}
Expand All @@ -127,6 +113,22 @@ export const AssetRow: FC<{ balances: Balances; noCountUp?: boolean }> = ({
/>
</div>
</button>
{canBondNomPool && (
<>
<div className="absolute right-8 top-0 hidden h-[6.6rem] flex-col justify-center group-hover:flex">
<BondPillButton
tokenId={token.id}
balances={balances}
className="[>svg]:text-[2rem] text-base"
/>
</div>
<div className="absolute -right-5 -top-2 size-10 overflow-hidden rounded-full bg-black p-1">
<div className="text-primary bg-primary/25 flex size-full items-center justify-center rounded-full text-xs">
<ZapFastIcon className="size-6" />
</div>
</div>
</>
)}
</div>
)
}
93 changes: 48 additions & 45 deletions apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,46 +96,47 @@ const AssetRow: FC<{
if (!token || !summary) return null

return (
<button
type="button"
className="bg-grey-850 hover:bg-grey-800 group flex h-28 w-full items-center rounded-sm"
onClick={handleClick}
>
<div className="p-6 text-xl">
<TokenLogo tokenId={token.id} />
</div>
<div className="relative flex grow items-center gap-4 pr-6">
<div className="flex w-full flex-col gap-2 overflow-hidden text-left">
<div className="flex items-center gap-3">
<div className="text-body flex items-center gap-3 whitespace-nowrap text-sm font-bold">
{token.symbol}
{!!token.isTestnet && (
<span className="text-tiny bg-alert-warn/10 text-alert-warn rounded px-3 py-1 font-light">
{t("Testnet")}
</span>
<div className="group relative h-28 w-full">
<button
type="button"
className="bg-grey-850 hover:bg-grey-800 flex w-full items-center rounded-sm"
onClick={handleClick}
>
<div className="p-6 text-xl">
<TokenLogo tokenId={token.id} />
</div>
<div className="relative flex grow items-center gap-4 pr-6">
<div className="flex w-full flex-col gap-2 overflow-hidden text-left">
<div className="flex items-center gap-3">
<div className="text-body flex items-center gap-3 whitespace-nowrap text-sm font-bold">
{token.symbol}
{!!token.isTestnet && (
<span className="text-tiny bg-alert-warn/10 text-alert-warn rounded px-3 py-1 font-light">
{t("Testnet")}
</span>
)}
</div>
{!!networkIds.length && (
<div className="text-base">
<NetworksLogoStack networkIds={networkIds} max={3} />
</div>
)}
</div>
{!!networkIds.length && (
<div className="text-base">
<NetworksLogoStack networkIds={networkIds} max={3} />

{isUniswapV2LpToken && typeof tvl === "number" && (
<div className="text-body-secondary whitespace-nowrap text-xs">
<Fiat amount={tvl} noCountUp={noCountUp} />{" "}
<span className="text-[0.8rem]">TVL</span>
</div>
)}
{!isUniswapV2LpToken && <AssetPrice tokenId={token.id} className="text-xs" />}
</div>

{isUniswapV2LpToken && typeof tvl === "number" && (
<div className="text-body-secondary whitespace-nowrap text-xs">
<Fiat amount={tvl} noCountUp={noCountUp} /> <span className="text-[0.8rem]">TVL</span>
</div>
)}
{!isUniswapV2LpToken && <AssetPrice tokenId={token.id} className="text-xs" />}
</div>
<div
className={classNames(
"flex shrink-0 flex-col items-end gap-2 text-right",
status.status === "fetching" && "animate-pulse transition-opacity",
)}
>
<>
<div
className={classNames(
"flex shrink-0 flex-col items-end gap-2 text-right",
status.status === "fetching" && "animate-pulse transition-opacity",
)}
>
<div
className={classNames(
"whitespace-nowrap text-sm font-bold",
Expand Down Expand Up @@ -163,17 +164,19 @@ const AssetRow: FC<{
>
{fiat === null ? "-" : <Fiat amount={fiat} isBalance noCountUp={noCountUp} />}
</div>
{showStakingButton && (
<BondPillButton
tokenId={token.id}
balances={balances}
className="hidden group-hover:block"
/>
)}
</>
</div>
</div>
</div>
</button>
</button>
{showStakingButton && (
<div className="absolute right-4 top-0 hidden h-28 flex-col justify-center group-hover:flex">
<BondPillButton
tokenId={token.id}
balances={balances}
className="[>svg]:text-[2rem] text-base"
/>
</div>
)}
</div>
)
}

Expand Down
32 changes: 23 additions & 9 deletions apps/extension/src/ui/domains/Staking/Bond/useBondButton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,28 @@ export const useBondButton = ({

const ownedAddresses = useMemo(() => ownedAccounts.map(({ address }) => address), [ownedAccounts])

// accounts that are solo-staking cannot stake in nomination pools
const soloStakingAddresses = useMemo(() => {
type SoloStakingMeta = { id?: string } | undefined
return (
balances?.each
.filter((b) => b.locks.some((l) => (l.meta as SoloStakingMeta)?.id === "staking ")) // yes, there is a space at the end :jean:
.map((b) => b.address) ?? []
)
}, [balances])

const sorted = useMemo(() => {
if (!balances || !tokenId) return []
return balances
.find({ tokenId })
.each.filter((b) => ownedAddresses.includes(b.address))
.each.filter(
(b) => ownedAddresses.includes(b.address) && !soloStakingAddresses.includes(b.address),
)
.sort((a, b) => {
if (a.transferable.planck === b.transferable.planck) return 0
return a.transferable.planck > b.transferable.planck ? -1 : 1
})
}, [balances, ownedAddresses, tokenId])
}, [balances, ownedAddresses, soloStakingAddresses, tokenId])

const address = sorted[0]?.address

Expand All @@ -47,24 +59,26 @@ export const useBondButton = ({

if (!poolId) return [null, false]

// if a watch-only account is selected, there will be no entries here
// if a watch-only or solo-staking account is selected, array will be empty
if (!sorted.length) return [null, false]

// lookup existing poolId for that account
for (const balance of sorted.filter((b) => b.address === address)) {
switch (token.chain.id) {
case "bittensor": {
type SubtensorMeta = { hotkeys?: string[] }
const entry = balance.subtensor.find((b) => !!(b.meta as SubtensorMeta).hotkeys?.length)
const meta = entry?.meta as SubtensorMeta | undefined
type SubtensorMeta = { hotkeys?: string[] } | undefined
const entry = balance.subtensor.find(
(b) => !!(b.meta as SubtensorMeta)?.hotkeys?.length,
)
const meta = entry?.meta as SubtensorMeta
if (meta?.hotkeys?.[0]) return [{ tokenId, address, poolId: meta?.hotkeys[0] }, false]
break
}
default: {
// assume nomination pool staking, but there will be more in the future
type NomPoolMeta = { poolId?: number }
const entry = balance.nompools.find((b) => !!(b.meta as NomPoolMeta).poolId)
const meta = entry?.meta as NomPoolMeta | undefined
type NomPoolMeta = { poolId?: number } | undefined
const entry = balance.nompools.find((b) => !!(b.meta as NomPoolMeta)?.poolId)
const meta = entry?.meta as NomPoolMeta
if (meta?.poolId) return [{ tokenId, address, poolId: meta.poolId }, true]
break
}
Expand Down

0 comments on commit de6119e

Please sign in to comment.