feat: wallet

package.json

@@ -59,6 +59,7 @@
     "clsx": "2.1.1",
     "cmdk": "1.0.0",
     "dayjs": "1.11.11",
+    "dnum": "^2.13.1",
     "dotenv": "16.4.5",
     "electron-updater": "^6.2.1",
     "font-list": "1.5.1",

src/renderer/src/components/ui/wallet/balance.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@renderer/lib/utils"
+import { format } from "dnum"
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip"
+
+export const Balance = ({
+  children,
+  className,
+  precision = 2,
+  withSuffix = false,
+}: {
+  /** The token balance in wei. */
+  children: bigint
+  className?: string
+  precision?: number
+  withSuffix?: boolean
+}) => {
+  const from = [BigInt(children), 18] as const
+  const formatted = format(from, { digits: precision, trailingZeros: true })
+  const formattedFull = format(from, { digits: 18, trailingZeros: true })
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <span className={cn("font-mono tabular-nums", className)}>
+          {formatted}
+          {" "}
+          {withSuffix && <span>$POWER</span>}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>
+        <div className="font-mono text-sm">
+          <span className="font-bold tabular-nums">{formattedFull}</span>
+          {" "}
+          <span>$POWER</span>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  )
+}

src/renderer/src/components/user-button.tsx

@@ -136,6 +136,14 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {
             // Here we need to delay one frame, so it's two raf,
             //  in order to have `point-event: none` recorded by RadixOverlay after modal is invoked in a certain scenario,
             // and the page freezes after modal is turned off.
+            nextFrame(() => settingModalPresent("wallet"))
+          }}
+        >
+          Wallet
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onClick={() => {
             nextFrame(settingModalPresent)
           }}
         >

src/renderer/src/hono.ts

@@ -23,6 +23,74 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
             status: 200;
         };
     };
+    "/wallets/transactions": {
+        $get: {
+            input: {
+                query: {
+                    type?: "tip" | "mint" | "burn" | "withdraw" | undefined;
+                    hash?: string | undefined;
+                    fromUserId?: string | undefined;
+                    toUserId?: string | undefined;
+                    toEntryId?: string | undefined;
+                    fromOrToUserId?: string | undefined;
+                    createdAfter?: string | undefined;
+                };
+            };
+            output: {
+                code: 0;
+                data: {
+                    type: "tip" | "mint" | "burn" | "withdraw";
+                    createdAt: string;
+                    powerToken: bigint;
+                    hash: string;
+                    fromUserId: string | null;
+                    toUserId: string | null;
+                    toEntryId: string | null;
+                    comment: string | null;
+                    fromUser?: {
+                        name: string | null;
+                        id: string;
+                        email: string;
+                        emailVerified: Date | null;
+                        image: string | null;
+                        handle: string | null;
+                    } | undefined;
+                    toUser?: {
+                        name: string | null;
+                        id: string;
+                        email: string;
+                        emailVerified: Date | null;
+                        image: string | null;
+                        handle: string | null;
+                    } | undefined;
+                    toEntry?: {
+                        description: string | null;
+                        title: string | null;
+                        content: string | null;
+                        id: string;
+                        author: string | null;
+                        url: string | null;
+                        feedId: string;
+                        guid: string;
+                        authorUrl: string | null;
+                        authorAvatar: string | null;
+                        changedAt: string;
+                        publishedAt: string;
+                        images: string[] | null;
+                        categories: string[] | null;
+                        enclosures?: {
+                            url: string;
+                            length?: number | undefined;
+                            type?: string | undefined;
+                            title?: string | undefined;
+                        }[] | null | undefined;
+                    } | undefined;
+                }[];
+            };
+            outputFormat: "json";
+            status: 200;
+        };
+    };
     "/wallets/transactions/claim_daily": {
         $post: {
             input: {};

src/renderer/src/hooks/biz/useEntryActions.tsx

@@ -1,7 +1,9 @@
 import { apiClient } from "@renderer/lib/api-fetch"
 import { tipcClient } from "@renderer/lib/client"
+import { nextFrame } from "@renderer/lib/dom"
 import { shortcuts } from "@renderer/lib/shortcuts"
 import type { EntryModel } from "@renderer/models"
+import { useTipModal } from "@renderer/modules/wallet/hooks"
 import { entryActions } from "@renderer/store"
 import { useMutation, useQuery } from "@tanstack/react-query"
 import type { FetchError } from "ofetch"
@@ -112,14 +114,32 @@ export const useEntryActions = ({
     refetchOnWindowFocus: false,
   })
 
+  // const canTip = Boolean(entry?.feeds.ownerUserId)
+  // comment out L119-122 to work ⬇️
+  const openTipModal = useTipModal({
+    userId: entry?.feeds.ownerUserId ?? undefined,
+    entryId: entry?.entries.id ?? undefined,
+  })
+
   const collect = useCollect(entry)
   const uncollect = useUnCollect(entry)
   const read = useRead()
   const unread = useUnread()
+
   const items = useMemo(() => {
     if (!entry || view === undefined) return []
     const items = [
       [
+        {
+          key: "tip",
+          shortcut: shortcuts.entry.tip.key,
+          name: `Tip`,
+          className: "i-mgc-power-mono",
+          // disabled: !canTip,
+          onClick: () => {
+            nextFrame(openTipModal)
+          },
+        },
         {
           key: "star",
           shortcut: shortcuts.entry.toggleStarred.key,

src/renderer/src/lib/shortcuts.ts

@@ -63,7 +63,10 @@ export const shortcuts = {
     copyLink: {
       name: "Copy Link",
       key: "Meta+Shift+C",
-
+    },
+    tip: {
+      name: "Tip",
+      key: "Meta+Shift+T",
     },
   },
 } as const

src/renderer/src/modules/settings/action-card.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable tailwindcss/no-custom-classname */
 import { Button } from "@renderer/components/ui/button"
 import { Card, CardHeader } from "@renderer/components/ui/card"
 import {

src/renderer/src/modules/settings/tabs/wallet/index.tsx

@@ -0,0 +1,13 @@
+import { SettingsTitle } from "../../title"
+import { MyWalletSection } from "./my-wallet-section"
+import { TransactionsSection } from "./transaction-section"
+
+export const SettingWallet = () => (
+  <div>
+    <SettingsTitle />
+
+    <MyWalletSection />
+
+    <TransactionsSection />
+  </div>
+)

src/renderer/src/modules/settings/tabs/wallet/my-wallet-section/claim-daily-reward.tsx

@@ -0,0 +1,64 @@
+import { TooltipTrigger } from "@radix-ui/react-tooltip"
+import { StyledButton } from "@renderer/components/ui/button"
+import { Tooltip, TooltipContent } from "@renderer/components/ui/tooltip"
+import {
+  useClaimWalletDailyRewardMutation,
+  useClaimWalletDailyRewardTtl,
+} from "@renderer/queries/wallet"
+import { useEffect, useState } from "react"
+
+export const ClaimDailyReward = () => {
+  const mutation = useClaimWalletDailyRewardMutation()
+
+  const ttl = useClaimWalletDailyRewardTtl()
+
+  const [ttlState, setTtlState] = useState(ttl.data?.data.ttl ?? 0)
+
+  const hour = Math.floor(ttlState / 3600)
+    .toString()
+    .padStart(2, "0")
+  const minute = Math.floor((ttlState % 3600) / 60)
+    .toString()
+    .padStart(2, "0")
+  const second = (ttlState % 60).toString().padStart(2, "0")
+
+  const canClaim = ttlState <= 0
+
+  // refresh ttl every second
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTtlState((prev) => (prev > 0 ? prev - 1 : 0))
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [])
+
+  // update ttl when ttl changes
+  useEffect(() => {
+    if (ttl.data?.data.ttl) {
+      setTtlState(ttl.data.data.ttl)
+    }
+  }, [ttl.data?.data.ttl])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <StyledButton
+          variant="primary"
+          isLoading={mutation.isPending}
+          onClick={() => mutation.mutate()}
+          disabled={!canClaim}
+        >
+          {canClaim ?
+            "Claim Daily Reward" :
+            `Reward in ${hour}:${minute}:${second}`}
+        </StyledButton>
+      </TooltipTrigger>
+      <TooltipContent>
+        {canClaim ?
+          "Claim your daily reward (2.00 PowerTokens) now!" :
+          `You can claim your daily reward in ${hour}:${minute}:${second}.`}
+      </TooltipContent>
+    </Tooltip>
+  )
+}

src/renderer/src/modules/settings/tabs/wallet/my-wallet-section/create-wallet.tsx

@@ -0,0 +1,27 @@
+import { StyledButton } from "@renderer/components/ui/button"
+import { useCreateWalletMutation } from "@renderer/queries/wallet"
+
+export const CreateWallet = () => {
+  const mutation = useCreateWalletMutation()
+
+  return (
+    <div>
+      <StyledButton
+        variant="primary"
+        isLoading={mutation.isPending}
+        onClick={() => mutation.mutate()}
+      >
+        Create Wallet
+      </StyledButton>
+
+      <p className="my-2 text-theme-inactive">
+        Create a free wallet to receive
+        {" "}
+        <strong>PowerTokens</strong>
+        , which can
+        be used to reward creators and also get rewarded for your content
+        contributions.
+      </p>
+    </div>
+  )
+}

src/renderer/src/modules/settings/tabs/wallet/my-wallet-section/index.tsx

@@ -0,0 +1,34 @@
+import { useUser } from "@renderer/atoms/user"
+import { LoadingCircle } from "@renderer/components/ui/loading"
+import { Balance } from "@renderer/components/ui/wallet/balance"
+import { useWallet } from "@renderer/queries/wallet"
+
+import { SettingSectionTitle } from "../../../section"
+import { ClaimDailyReward } from "./claim-daily-reward"
+import { CreateWallet } from "./create-wallet"
+
+export const MyWalletSection = () => {
+  const user = useUser()
+  const wallet = useWallet({ userId: user?.id })
+  const myWallet = wallet.data?.[0]
+
+  return (
+    <div>
+      <SettingSectionTitle title="My Wallet" />
+
+      {wallet.isPending ? (
+        <LoadingCircle size="large" />
+      ) : !myWallet ?
+          (
+            <CreateWallet />
+          ) :
+          (
+            <div className="flex flex-row items-center gap-x-5">
+              <div className="font-bold">Balance</div>
+              <Balance withSuffix>{myWallet.powerToken}</Balance>
+              <ClaimDailyReward />
+            </div>
+          )}
+    </div>
+  )
+}