Update Name Data

v3xlabs · Jun 2, 2024 · 89a2c65 · 89a2c65
1 parent a79e3e4
commit 89a2c65
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 29 deletions.
diff --git a/src/components/modals/VaultInfo.tsx b/src/components/modals/VaultInfo.tsx
@@ -1,52 +1,112 @@
 import { RESCUE_NAME_ABI } from "abi/abi";
 import { formatAddress } from "ens-tools";
+import { useExpiry } from "hooks/useExpiry";
 import { useVaultBalance } from "hooks/useVaultBalance";
+import { useVaultNames } from "hooks/useVaultNames";
 import { useVaultOwner } from "hooks/useVaultOwner";
 import { FC } from "react";
+import { FiPlusCircle, FiTrash } from "react-icons/fi";
 import { formatEther } from "viem";
-import { useChainId, useEnsName, useWriteContract } from "wagmi";
+import { useAccount, useChainId, useEnsName, useWriteContract } from "wagmi";
 
 import { CONTRACT_ADDRESS } from "../../constants";
 import { Modal } from "./modal";
 
+export const NameExpiryDate: FC<{ name: string }> = ({ name }) => {
+    const { data: expiry } = useExpiry(name + ".eth");
+
+    return (
+        <span>
+            {expiry
+                ? "expires in " +
+                  Math.floor(
+                      (expiry.expiry.date.getTime() - Date.now()) /
+                          1000 /
+                          60 /
+                          60 /
+                          24
+                  ) +
+                  " days"
+                : "Unavailable"}
+        </span>
+    );
+};
+
 export const VaultInfo: FC<{ vaultId: bigint; onClose: () => void }> = ({
     vaultId,
     onClose
 }) => {
     const chainId = useChainId();
+    const { address } = useAccount();
     const { data: owner } = useVaultOwner(vaultId);
     const { data: balance } = useVaultBalance(vaultId);
     const { data: ownerName } = useEnsName({ address: owner });
+    const { data: names } = useVaultNames(vaultId);
     const { writeContract } = useWriteContract();
 
+    const isVaultOwner = owner == address;
+
     return (
         <Modal
-            title={`Vault ${vaultId}`}
+            title={`Vault #${vaultId}`}
             dismissOnBgClick
             onCloseRequest={onClose}
         >
-            <div className="flex justify-between">
-                <div>Owner</div>
-                <div>{ownerName || formatAddress(owner || "")}</div>
-            </div>
-            <div className="flex justify-between">
-                <div>Balance</div>
-                <div className="flex items-center gap-2">
-                    <div>{formatEther(balance || 0n)} ETH</div>
-                    <button
-                        className="btn"
-                        onClick={() => {
-                            writeContract({
-                                abi: RESCUE_NAME_ABI,
-                                address: CONTRACT_ADDRESS[chainId],
-                                functionName: "topupVault",
-                                args: [vaultId],
-                                value: BigInt(0.05e18)
-                            });
-                        }}
-                    >
-                        Topup
-                    </button>
+            <div className="space-y-2">
+                <div className="flex justify-between">
+                    <div>Owner</div>
+                    <div className="flex items-center gap-1">
+                        <div>{ownerName || formatAddress(owner || "")}</div>
+                        {isVaultOwner && (
+                            <div className="tag-blue tag">You</div>
+                        )}
+                    </div>
+                </div>
+                <div className="flex justify-between">
+                    <div>Balance</div>
+                    <div className="flex items-center gap-2">
+                        <div>{formatEther(balance || 0n)} ETH</div>
+                        <button
+                            className="btn"
+                            onClick={() => {
+                                writeContract({
+                                    abi: RESCUE_NAME_ABI,
+                                    address: CONTRACT_ADDRESS[chainId],
+                                    functionName: "topupVault",
+                                    args: [vaultId],
+                                    value: BigInt(0.05e18)
+                                });
+                            }}
+                        >
+                            +0.05 ETH
+                        </button>
+                    </div>
+                </div>
+                <div className="">
+                    <div className="flex items-center justify-between border-b border-border">
+                        <div>Names ({names?.length})</div>
+                        <button className="">
+                            <FiPlusCircle />
+                        </button>
+                    </div>
+                    <div>
+                        {names?.map((name, index) => (
+                            <div
+                                key={index}
+                                className="group flex justify-between"
+                            >
+                                <div className="flex items-center gap-2">
+                                    <div>{name}</div>
+                                    <div className="text-text-secondary">
+                                        <NameExpiryDate name={name} />
+                                    </div>
+                                </div>
+                                <button className="opacity-0 group-hover:opacity-100">
+                                    <FiTrash />
+                                </button>
+                            </div>
+                        ))}
+                    </div>
                 </div>
             </div>
         </Modal>

diff --git a/src/components/vaults/VaultEntry.tsx b/src/components/vaults/VaultEntry.tsx
@@ -3,15 +3,18 @@
 import { VaultInfo } from "components/modals/VaultInfo";
 import { formatAddress } from "ens-tools";
 import { useVaultBalance } from "hooks/useVaultBalance";
+import { useVaultNames } from "hooks/useVaultNames";
 import { useVaultOwner } from "hooks/useVaultOwner";
 import { FC, useState } from "react";
 import { formatEther } from "viem";
-import { useEnsName } from "wagmi";
+import { useAccount, useEnsName } from "wagmi";
 
 export const VaultEntry: FC<{ vault: bigint }> = ({ vault }) => {
+    const { address } = useAccount();
     const { data: owner } = useVaultOwner(vault);
     const { data: name } = useEnsName({ address: owner });
     const { data: balance } = useVaultBalance(vault);
+    const { data: names } = useVaultNames(vault);
 
     const [isOpen, setIsOpen] = useState(false);
 
@@ -23,12 +26,17 @@ export const VaultEntry: FC<{ vault: bigint }> = ({ vault }) => {
             >
                 <div>
                     <div>#{vault.toString()}</div>
-                    <div className="text-text-secondary">
-                        {name || formatAddress(owner || "")}
+                    <div className="flex items-center gap-1">
+                        <div className="text-text-secondary">
+                            {name || formatAddress(owner || "")}
+                        </div>
+                        {owner == address && (
+                            <div className="tag-blue tag">You</div>
+                        )}
                     </div>
                 </div>
-                <div>
-                    {/* <div>{vault.name_count} names</div> */}
+                <div className="text-right">
+                    <div>{names.length} names</div>
                     <div>{formatEther(balance || 0n)} ETH</div>
                 </div>
             </div>

diff --git a/src/global.css b/src/global.css
@@ -270,3 +270,11 @@ html.dark {
 .input {
     @apply border border-border bg-background-primary rounded-lg px-4 py-2;
 }
+
+.tag {
+    @apply rounded-xl px-2;
+}
+
+.tag-blue {
+    @apply bg-blue-surface text-blue-primary;
+}