add: csb faucet

src/components/common/ClaimCSBButton.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { useTranslations } from "next-intl"
+
+import { useWalletClaimCSBModal } from "@crossbell/connect-kit"
+
+import { Button } from "~/components/ui/Button"
+
+export function ClaimCSBButton() {
+  const t = useTranslations()
+  const claimCSBModal = useWalletClaimCSBModal()
+  return (
+    <Button
+      onClick={() => claimCSBModal.show()}
+      aria-label="claim csb"
+      isAutoWidth
+    >
+      ⛽ {t("Claim CSB")}
+    </Button>
+  )
+}

src/components/common/ConnectButton.tsx

@@ -276,6 +276,15 @@ export const ConnectButton = ({
             </div>
           }
         ></Menu>
+        <i
+          className={cn(
+            "i-mingcute-currency-euro-line",
+            `${
+              size === "base" ? "size-6 ml-2" : "size-5 ml-1"
+            } text-zinc-500 cursor-pointer hidden sm:block`,
+          )}
+          onClick={() => csbDetailModal.show()}
+        />
         <div className="h-full w-[2px] py-1 ml-2">
           <div className="size-full bg-zinc-200 rounded-full"></div>
         </div>

src/components/home/HomeSidebar.tsx

@@ -11,6 +11,7 @@ import getQueryClient from "~/lib/query-client"
 import { getShowcase } from "~/queries/home.server"
 import { getBlockNumber } from "~/queries/site.server"
 
+import { ClaimCSBButton } from "../common/ClaimCSBButton"
 import { FollowAllButton } from "../common/FollowAllButton"
 import { BlockNumber } from "./BlockNumber"
 import PromotionLinks from "./PromotionLinks"
@@ -91,6 +92,10 @@ export async function HomeSidebar({ hideSearch }: { hideSearch?: boolean }) {
           </>
         </ShowMoreContainer>
       </div>
+      <div className="text-center text-zinc-700 space-y-3">
+        <p className="font-bold text-lg">{t("Need More CSB?")}</p>
+        <ClaimCSBButton />
+      </div>
     </Hydrate>
   )
 }

src/messages/en.json

@@ -117,5 +117,7 @@
   "zh": "Chinese",
   "zh-TW": "Traditional Chinese",
   "Confirmed by {blockNumber} blocks": "Confirmed by {blockNumber} blocks",
-  "Become a patron of {name}": "Become a patron of {name}"
+  "Become a patron of {name}": "Become a patron of {name}",
+  "Need More CSB?": "Need More CSB?",
+  "Claim CSB": "Claim CSB"
 }

src/messages/ja.json

@@ -220,5 +220,7 @@
   "en": "英語",
   "ja": "日本語",
   "zh": "中国語",
-  "zh-TW": "繁体字中国語"
+  "zh-TW": "繁体字中国語",
+  "Need More CSB?": "もっと CSB が必要ですか？",
+  "Claim CSB": "CSB を請求"
 }

src/messages/zh-TW.json

@@ -411,5 +411,7 @@
   "New Short": "新增圖文",
   "Publishing": "你發佈的內容",
   "Support Markdown": "支援 Markdown 語法",
-  "on-chain posting on": "條鏈上發布於"
+  "on-chain posting on": "條鏈上發布於",
+  "Need More CSB?": "需要更多 CSB？",
+  "Claim CSB": "領取 CSB"
 }

src/messages/zh.json

@@ -436,5 +436,7 @@
   "zh-TW": "繁体中文",
   "Footer": "页脚",
   "Support Markdown": "支持 Markdown",
-  "on-chain posting on": "条链上发布于"
+  "on-chain posting on": "条链上发布于",
+  "Need More CSB?": "需要更多 CSB？",
+  "Claim CSB": "领取 CSB"
 }

src/models/site.model.ts

@@ -1,4 +1,4 @@
-import { CharacterOperatorPermission } from "crossbell"
+import { CharacterOperatorPermission, createContract } from "crossbell"
 import type { Address } from "viem"
 
 import type { useContract } from "@crossbell/contract"
@@ -502,20 +502,9 @@ export async function checkDomain(domain: string, handle: string) {
   return check.data
 }
 
+const contract = createContract()
+
 export async function getBlockNumber() {
-  const result = await (
-    await fetch("https://scan.crossbell.io/api/eth-rpc", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        jsonrpc: "2.0",
-        method: "eth_blockNumber",
-        params: [],
-        id: 0,
-      }),
-    })
-  ).json()
-  return Number(BigInt(result.result))
+  const result = await contract.publicClient.getBlockNumber()
+  return Number(result)
 }