Skip to content

Commit

Permalink
fix: wallet tooltip bug
Browse files Browse the repository at this point in the history 
Signed-off-by: Innei <i@innei.in>
  • Loading branch information
@Innei
Innei committed Jul 11, 2024
1 parent a68ee9c commit b13f21f
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 24 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ out

# Sentry Config File
.env.sentry-build-plugin
.vercel
59 changes: 44 additions & 15 deletions src/renderer/src/modules/settings/tabs/wallet/my-wallet-section/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { useUser } from "@renderer/atoms/user"
import { Divider } from "@renderer/components/ui/divider"
import { LoadingCircle } from "@renderer/components/ui/loading"
import { Tooltip, TooltipContent, TooltipTrigger } from "@renderer/components/ui/tooltip"
import {
Tooltip,
TooltipContent,
TooltipPortal,
TooltipTrigger,
} from "@renderer/components/ui/tooltip"
import { Balance } from "@renderer/components/ui/wallet/balance"
import { SettingSectionTitle } from "@renderer/modules/settings/section"
import { useWallet } from "@renderer/queries/wallet"
Expand All @@ -17,7 +22,9 @@ export const MyWalletSection = () => {
return (
<div>
{wallet.isPending ? (
<LoadingCircle size="large" />
<div className="center absolute inset-0 flex">
<LoadingCircle size="large" className="-translate-y-full" />
</div>
) : !myWallet ?
(
<CreateWallet />
Expand All @@ -27,35 +34,57 @@ export const MyWalletSection = () => {
<div>
<SettingSectionTitle title="Balance" />
<div className="flex items-center justify-between">
<Balance className="text-xl font-bold text-theme-accent">{BigInt(myWallet.dailyPowerToken || 0n) + BigInt(myWallet.cashablePowerToken || 0n)}</Balance>
<Balance className="text-xl font-bold text-theme-accent">
{BigInt(myWallet.dailyPowerToken || 0n) +
BigInt(myWallet.cashablePowerToken || 0n)}
</Balance>
<ClaimDailyReward />
</div>
<Divider className="my-4" />
<Tooltip>
<TooltipTrigger className="block">
<div className="flex flex-row items-center gap-x-2 text-xs text-zinc-600 dark:text-neutral-400">
<span className="">Daily Power</span>
<span className="flex w-[120px] items-center gap-1 text-left">
Daily Power
<i className="i-mingcute-question-line" />
</span>
<Balance>{myWallet.dailyPowerToken}</Balance>
<i className="i-mingcute-question-line" />

</div>
</TooltipTrigger>
<TooltipContent>
<p>1. Daily Power can only be used for tips.</p>
<p>2. It comes from the Power you claim for free every day..</p>
</TooltipContent>
<TooltipPortal>
<TooltipContent align="start" className="z-[999]">
<p>1. Daily Power can only be used for tips.</p>
<p>
2. It comes from the Power you claim for free every day..
</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
<Tooltip>
<TooltipTrigger className="block">
<div className="flex flex-row items-center gap-x-2 text-xs text-zinc-600 dark:text-neutral-400">
Cashable Power
<span className="flex w-[120px] items-center gap-1 text-left">
Cashable Power
{" "}
<i className="i-mingcute-question-line" />
</span>

<Balance>{myWallet.cashablePowerToken}</Balance>
<i className="i-mingcute-question-line" />
</div>
</TooltipTrigger>
<TooltipContent>
<p>1. You can transfer Cashable Power to your wallet and trade freely.</p>
<p>2. It comes from the Power you recharge and the tips you receive.</p>
</TooltipContent>
<TooltipPortal>
<TooltipContent align="start" className="z-[999]">
<p>
1. You can transfer Cashable Power to your wallet and trade
freely.
</p>
<p>
2. It comes from the Power you recharge and the tips you
receive.
</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>
</div>
Expand Down
14 changes: 5 additions & 9 deletions src/renderer/src/modules/settings/tabs/wallet/transaction-section/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const TransactionsSection = () => {
// if (transactions.data?.length === 0) return <div className="text-theme-disabled">No transactions</div>

return (
<div>
<div className="mt-8">
<SettingSectionTitle title="Transactions" />

<div className="overflow-x-auto">
Expand Down Expand Up @@ -114,22 +114,18 @@ const UserRenderer = ({ user }: { user?: NonNullable<ReturnType<typeof useWallet
const me = useUser()
const isMe = user?.id === me?.id

const name = isMe ? "You" : user?.name || "SYSTEM"

return (
<div className="center">
<Avatar className="aspect-square size-4">
<AvatarImage src={user?.image || undefined} />
<AvatarFallback>{user?.name?.slice(0, 2)}</AvatarFallback>
<AvatarFallback>{name?.slice(0, 2)}</AvatarFallback>
</Avatar>

<div className="ml-1">
{isMe ? <span className="font-bold">You</span> : user?.name || "NULL"}
{isMe ? <span className="font-bold">You</span> : name}
</div>
</div>
)
}

// const FeedRenderer = ({ feed }: { feed: NonNullable<ReturnType<typeof useWalletTransactions>["data"]>[number]["toFeed"] }) => (
// <div className="center line-clamp-1 truncate">
// {feed?.title ?? "-"}
// </div>
// )

0 comments on commit b13f21f

Please sign in to comment.