From 747d2ea15f1ff57860677fbec8dcfa590478ba40 Mon Sep 17 00:00:00 2001 From: Songkeys Date: Tue, 2 Jul 2024 10:13:32 +0800 Subject: [PATCH] feat: cashable power token and daily power token --- src/renderer/src/hono.ts | 6 +- .../tabs/wallet/my-wallet-section/index.tsx | 40 +++++- src/renderer/src/modules/wallet/tip-modal.tsx | 134 ++++++++---------- 3 files changed, 103 insertions(+), 77 deletions(-) diff --git a/src/renderer/src/hono.ts b/src/renderer/src/hono.ts index d66c38cc2c..aaeba3e0cc 100644 --- a/src/renderer/src/hono.ts +++ b/src/renderer/src/hono.ts @@ -186,9 +186,10 @@ declare const routes: hono_hono_base.HonoBase { ) : ( -
-
Balance
- {myWallet.powerToken} - +
+
+ + +
+ Daily $POWER + +
+ + + Daily $POWER is the amount of $POWER you can claim daily. It can + only be used to tip other users. + + + {myWallet.dailyPowerToken} + +
+ +
+ + +
+ Cashable $POWER + +
+ + + Cashable $POWER is the amount of $POWER you can withdraw to your + wallet. It can be used to tip other users or convert to other + cryptocurrencies. When you are tipped with $POWER, it will be + added to your cashable $POWER. + + + {myWallet.cashablePowerToken} +
)}
diff --git a/src/renderer/src/modules/wallet/tip-modal.tsx b/src/renderer/src/modules/wallet/tip-modal.tsx index bd12339a51..eeab2bc0a9 100644 --- a/src/renderer/src/modules/wallet/tip-modal.tsx +++ b/src/renderer/src/modules/wallet/tip-modal.tsx @@ -1,16 +1,15 @@ import { useUser } from "@renderer/atoms/user" import { StyledButton } from "@renderer/components/ui/button" import { Divider } from "@renderer/components/ui/divider" -import { Input } from "@renderer/components/ui/input" import { LoadingCircle } from "@renderer/components/ui/loading" import { useCurrentModal } from "@renderer/components/ui/modal" -import { RadioGroup, useRadioContext } from "@renderer/components/ui/radio-group" +import { RadioGroup } from "@renderer/components/ui/radio-group" import { RadioCard } from "@renderer/components/ui/radio-group/RadioCard" import { Balance } from "@renderer/components/ui/wallet/balance" import { nextFrame } from "@renderer/lib/dom" import { cn } from "@renderer/lib/utils" import { useWallet, useWalletTipMutation, useWalletTransactions } from "@renderer/queries/wallet" -import { from, subtract, toNumber } from "dnum" +import { from, toNumber } from "dnum" import type { FC } from "react" import { useState } from "react" @@ -26,7 +25,9 @@ export const TipModalContent: FC<{ const myWallet = useWallet({ userId: user?.id }) const myWalletData = myWallet.data?.[0] - const balanceBigInt = BigInt(myWalletData?.powerToken ?? 0) + const dPowerBigInt = BigInt(myWalletData?.dailyPowerToken ?? 0) + const cPowerBigInt = BigInt(myWalletData?.cashablePowerToken ?? 0) + const balanceBigInt = cPowerBigInt + dPowerBigInt const balanceNumber = toNumber(from(balanceBigInt, 18), { digits: 2, trailingZeros: true }) const transactionsQuery = useWalletTransactions({ toUserId: userId, toFeedId: feedId }) @@ -34,11 +35,13 @@ export const TipModalContent: FC<{ const tipMutation = useWalletTipMutation() const [amount, setAmount] = useState(DEFAULT_RECOMMENDED_TIP > balanceNumber ? balanceNumber : DEFAULT_RECOMMENDED_TIP) - const [amountCard, setAmountCard] = useState("1") - const [customAmount, setCustomAmount] = useState(5) const amountBigInt = from(amount, 18)[0] - const remainingBalance = subtract(balanceBigInt, amountBigInt)[0] + const shouldDeductFromCPower = amountBigInt > dPowerBigInt + const remainingDPowerBigInt = shouldDeductFromCPower ? BigInt(0) : dPowerBigInt - amountBigInt + const toDeductFromCPowerBigInt = shouldDeductFromCPower ? amountBigInt - dPowerBigInt : BigInt(0) + const remainingCPowerBigInt = cPowerBigInt - toDeductFromCPowerBigInt + const remainingBalance = remainingDPowerBigInt + remainingCPowerBigInt const wrongNumberRange = amountBigInt > balanceBigInt || amountBigInt <= BigInt(0) @@ -116,64 +119,87 @@ export const TipModalContent: FC<{ { - setAmountCard(value) - if (value === "custom") return - setAmount(Number(value)) - }} + value={amount.toString()} + onValueChange={(value) => setAmount(Number(value))} >
- - { - setAmountCard("custom") - setAmount(Number(e.target.value)) - setCustomAmount(Number(e.target.value)) - }} - onClick={(e) => { - setAmountCard("custom") - setAmount(Number(e.currentTarget.value)) - setCustomAmount(Number(e.currentTarget.value)) - }} - /> - )} - value="custom" - /> +
+ {/* tipping calculator */}
-
+
Balance
{balanceBigInt}
+
+
+
Daily $POWER
+ {dPowerBigInt} +
+
+
Cashable $POWER
+ {cPowerBigInt} +
+
+
Tipping
{amountBigInt}
+
Remaining
{remainingBalance}
+
+
+
Daily $POWER
+ {remainingDPowerBigInt} +
+
+
Cashable $POWER
+ {remainingCPowerBigInt} +
+
+ + {/* low balance notice */} + {wrongNumberRange && ( +
+ + Your balance is not enough to cover this tip. Please adjust the + amount. + +
+ )} + + {/* cPower spent notice */} + {!wrongNumberRange && shouldDeductFromCPower && ( +
+ + Your daily $POWER is not enough to cover this tip. The remaining + amount will be deducted from your cashable $POWER. + +
+ )}
@@ -213,37 +239,3 @@ export const TipModalContent: FC<{
) } - -const CustomBalanceInput = ({ - max, - value, - onClick, - onChange, -}: { - max?: number - value: number - onClick?: (e: React.MouseEvent) => void - onChange?: (e: React.ChangeEvent) => void -}) => { - const { onChange: ctxOnChange } = useRadioContext() - - return ( - { - ctxOnChange?.("custom") - onClick?.(e) - }} - onChange={(e) => { - onChange?.(e) - }} - /> - ) -}