Introduce VaultInfo

src/components/modals/VaultInfo.tsx

@@ -0,0 +1,34 @@
+import { formatAddress } from "ens-tools";
+import { useVaultBalance } from "hooks/useVaultBalance";
+import { useVaultOwner } from "hooks/useVaultOwner";
+import { FC } from "react";
+import { useEnsName } from "wagmi";
+
+import { Modal } from "./modal";
+
+export const VaultInfo: FC<{ vaultId: bigint; onClose: () => void }> = ({
+    vaultId,
+    onClose
+}) => {
+    const { data: owner } = useVaultOwner(vaultId);
+    const { data: balance } = useVaultBalance(vaultId);
+    const { data: ownerName } = useEnsName({ address: owner });
+
+    return (
+        <Modal
+            title={`Vault ${vaultId}`}
+            dismissOnBgClick
+            onCloseRequest={onClose}
+        >
+            <div>
+                <div>Owner</div>
+                <div>{ownerName || formatAddress(owner || "")}</div>
+            </div>
+            <div>
+                <div>Balance</div>
+                <div>{balance?.toString()}</div>
+                <button className="btn">Topup</button>
+            </div>
+        </Modal>
+    );
+};

src/hooks/useVaultNames.tsx

@@ -1,8 +1,8 @@
 import { useChainId } from "wagmi";
 
-export const useVaultBalance = (vaultId: bigint) => {
+export const useVaultNames = (vaultId: bigint) => {
     const chainId = useChainId();
 
     // TODO: hook up to substream
-    return [];
+    return { data: ["lucemans", "nevvdevv"] };
 };