feat: latest patrons

package.json

@@ -22,12 +22,12 @@
     "@codemirror/language": "6.6.0",
     "@codemirror/state": "6.2.0",
     "@codemirror/view": "6.9.1",
-    "@crossbell/connect-kit": "0.0.41",
-    "@crossbell/contract": "0.0.41",
-    "@crossbell/indexer": "0.0.41",
-    "@crossbell/notification": "0.0.41",
-    "@crossbell/ui": "0.0.41",
-    "@crossbell/util-hooks": "0.0.41",
+    "@crossbell/connect-kit": "0.0.43",
+    "@crossbell/contract": "0.0.43",
+    "@crossbell/indexer": "0.0.43",
+    "@crossbell/notification": "0.0.43",
+    "@crossbell/ui": "0.0.43",
+    "@crossbell/util-hooks": "0.0.43",
     "@emoji-mart/data": "1.1.2",
     "@emoji-mart/react": "1.1.1",
     "@floating-ui/react": "^0.20.1",
@@ -52,7 +52,7 @@
     "canvas-confetti": "^1.6.0",
     "chroma-js": "^2.4.2",
     "clsx": "1.2.1",
-    "crossbell.js": "0.16.15",
+    "crossbell.js": "0.17.2",
     "dayjs": "1.11.7",
     "dotenv": "16.0.3",
     "emoji-mart": "5.5.2",
@@ -112,7 +112,7 @@
     "unist-util-visit": "4.1.2",
     "use-onclickoutside": "0.4.1",
     "uuid": "9.0.0",
-    "wagmi": "0.11.7"
+    "wagmi": "0.12.1"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "13.2.3",

showcase.json

@@ -104,5 +104,6 @@
   "walk2future",
   "cryptonerdcn",
   "liuyejinghong",
-  "sion"
+  "sion",
+  "magren"
 ]

src/components/common/CharacterFloatCard.tsx

@@ -30,7 +30,6 @@ export const CharacterFloatCard: React.FC<{
 
   const { getReferenceProps, getFloatingProps } = useInteractions([
     useHover(context, { delay: { close: 200, open: 200 } }),
-    useFocus(context),
     useRole(context, { role: "tooltip" }),
     useDismiss(context),
   ])

src/components/common/PatronModal.tsx

@@ -12,6 +12,11 @@ import { useAccountState } from "@crossbell/connect-kit"
 import { toast } from "react-hot-toast"
 import confetti from "canvas-confetti"
 import { Avatar } from "~/components/ui/Avatar"
+import { CharacterFloatCard } from "./CharacterFloatCard"
+import { UniLink } from "../ui/UniLink"
+import { getSiteLink } from "~/lib/helpers"
+import { CSB_SCAN } from "~/lib/env"
+import { BlockchainIcon } from "../icons/BlockchainIcon"
 
 export const PatronModal: React.FC<{
   site: Profile | undefined | null
@@ -20,10 +25,9 @@ export const PatronModal: React.FC<{
 }> = ({ site, open, setOpen }) => {
   const { t } = useTranslation("common")
   const tipCharacter = useTipCharacter()
-  // const tips = useGetTips({
-  //   toCharacterId: site?.metadata?.proof,
-  // })
-  // console.log(tips.data)
+  const tips = useGetTips({
+    toCharacterId: site?.metadata?.proof,
+  })
 
   const radios = [
     {
@@ -125,34 +129,83 @@ export const PatronModal: React.FC<{
             ></span>
           )}
         </div>
-        <div className="text-lg">{t("Current patrons")}</div>
-        <div className="text-zinc-500 text-sm">
-          {t("You are here to be the first patron.")}
-        </div>
-        <div className="text-lg">{t("Select a tier")}</div>
         <div>
-          <Tabs
-            items={[
-              {
-                text: "One-time",
-                active: true,
-              },
-              {
-                text: "Monthly and NFT Rewards",
-                tooltip: "Coming soon",
-              },
-            ]}
-          ></Tabs>
+          <div className="text-lg">{t("Latest patrons")}</div>
+          <div className="text-zinc-500 text-sm mt-2">
+            {tips.data?.list ? (
+              <>
+                <ul className="grid grid-cols-8">
+                  {tips.data.list?.map((tip, index) => (
+                    <li
+                      className="inline-flex flex-col items-center"
+                      key={index}
+                    >
+                      <CharacterFloatCard siteId={tip.character?.handle}>
+                        <UniLink
+                          href={getSiteLink({
+                            subdomain: tip.character?.handle || "",
+                          })}
+                        >
+                          <Avatar
+                            className="relative align-middle border-2 border-white"
+                            images={
+                              tip.character?.metadata?.content?.avatars || []
+                            }
+                            name={tip.character?.metadata?.content?.name}
+                            size={55}
+                          />
+                        </UniLink>
+                      </CharacterFloatCard>
+                      <UniLink
+                        href={`${CSB_SCAN}/tx/${tip.transactionHash}`}
+                        className="inline-flex items-center mt-1 text-center"
+                      >
+                        <span className="text-xs text-zinc-500">
+                          {tip.amount} Mira
+                        </span>
+                      </UniLink>
+                    </li>
+                  ))}
+                  {tips.data.count > 10 && (
+                    <li className="inline-block">
+                      <div className="relative align-middle border-2 border-white w-10 h-10 rounded-full inline-flex bg-gray-100 items-center justify-center text-gray-400 font-medium">
+                        +{tips.data.count - 10}
+                      </div>
+                    </li>
+                  )}
+                </ul>
+              </>
+            ) : (
+              t("You are here to be the first patron.")
+            )}
+          </div>
         </div>
         <div>
-          <BoxRadio items={radios} value={value} setValue={setValue} />
-        </div>
-        <div className="text-zinc-500 text-xs space-y-2">
-          <p>1 Mira ≈ 1 USDC</p>
-          <p className="flex items-center">
-            <QuestionMarkCircleIcon className="w-4 h-4 inline-block mr-1" />
-            What is Mira? Where can I get some?
-          </p>
+          <div className="text-lg">{t("Select a tier")}</div>
+          <div className="-mb-4">
+            <Tabs
+              items={[
+                {
+                  text: "One-time",
+                  active: true,
+                },
+                {
+                  text: "Monthly and NFT Rewards",
+                  tooltip: "Coming soon",
+                },
+              ]}
+            ></Tabs>
+          </div>
+          <div>
+            <BoxRadio items={radios} value={value} setValue={setValue} />
+          </div>
+          <div className="text-zinc-500 text-xs space-y-1 mt-2">
+            <p>1 Mira ≈ 1 USDC</p>
+            <p className="flex items-center">
+              <QuestionMarkCircleIcon className="w-4 h-4 inline-block mr-1" />
+              What is Mira? Where can I get some?
+            </p>
+          </div>
         </div>
         <div>
           <Button

src/models/site.model.ts

@@ -6,10 +6,13 @@ import type Unidata from "unidata.js"
 import type { Profiles as UniProfiles } from "unidata.js"
 import { createClient } from "@urql/core"
 import axios from "axios"
-import { indexer } from "@crossbell/indexer"
-import type { Contract } from "crossbell.js"
+import { Indexer } from "crossbell.js"
 import { CharacterOperatorPermission } from "crossbell.js"
-import { GeneralAccount } from "@crossbell/connect-kit"
+import type { useContract } from "@crossbell/contract"
+
+type Contract = ReturnType<typeof useContract>
+
+const indexer = new Indexer()
 
 const expandSite = (site: Profile) => {
   site.navigation = JSON.parse(
@@ -520,7 +523,7 @@ export async function tipCharacter(
   },
   contract: Contract,
 ) {
-  const decimals = await contract.getMiraTokenDecimals() // TODO
+  const decimals = await contract.getMiraTokenDecimals()
   return await contract?.tipCharacter(
     input.fromCharacterId,
     input.toCharacterId,
@@ -532,9 +535,32 @@ export async function getTips(
   input: { toCharacterId: string | number },
   contract: Contract,
 ) {
-  const address = await contract.getMiraTokenAddress() // TODO
-  return await indexer?.getTips({
+  const address = await contract.getMiraTokenAddress()
+  const tips = await indexer?.getTips({
     toCharacterId: input.toCharacterId,
     tokenAddress: address?.data || "0xAfB95CC0BD320648B3E8Df6223d9CDD05EbeDC64",
+    includeMetadata: true,
+    limit: 8,
   })
+
+  if (tips?.list?.length) {
+    const decimals = await contract.getMiraTokenDecimals()
+    tips.list = tips.list.filter((t) => {
+      return (
+        BigInt(t.amount) >=
+        BigInt(1) * BigInt(10) ** BigInt(decimals?.data || 18)
+      )
+    })
+    tips.list = tips.list.map((t) => {
+      return {
+        ...t,
+        amount: (
+          BigInt(t.amount) /
+          BigInt(10) ** BigInt(decimals?.data || 18)
+        ).toString(),
+      }
+    })
+  }
+
+  return tips
 }