Frontend dApp

dapp/README.md

@@ -20,5 +20,5 @@ Run `yarn generate` to generate new hooks when contracts are changed.
 
 A common hook `useGetChainType` is used throughout the dApp to differentiate chain type (Cardano and EVM). If you wish to add a different type of chain (eg. Aptos), look there.
 
-EVM chains specifics are defined in the `src/utils/evm/chains` (supported chains), `src/utils/evm/contracts` (Hololocker contract address) and `src/utils/evm/wagmi` (wagmi providers).
-Cardano chain specifics are defined in the `src/utils/cardano/validator` (validator code)
+EVM chains specifics are defined in the `src/utils/evm/chains` (supported chains and their constants), `src/utils/evm/contracts` (Hololocker contract address) and `src/utils/evm/wagmi` (wagmi providers).
+Cardano chain specifics are defined in the `src/utils/cardano/validator` (validator code) and `src/utils/cardano/constants`.

dapp/package.json

@@ -21,6 +21,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "alchemy-sdk": "^2.11.0",
+    "assert-never": "^1.2.1",
     "axios": "^1.5.1",
     "cbor": "^9.0.1",
     "curve25519-js": "^0.0.4",

dapp/src/components/ChainSelector.tsx

@@ -1,23 +1,30 @@
 import { Button } from "@mui/material";
 import { useChainModal } from "@rainbow-me/rainbowkit";
-import { useGetChainType } from "../hooks/useGetChainType";
+import { useGetVmType } from "../hooks/useGetVmType";
 import { useNetwork } from "wagmi";
 import { isChainSupported } from "../utils/evm/chains";
 import slugify from "slugify";
+import { VmTypes } from "../utils/constants";
+import assertNever from "assert-never";
 
 type Props = {
   text?: string;
 };
 
 export default function ChainSelector({ text }: Props) {
   const { openChainModal: openChainModalEVM } = useChainModal();
-  const chainType = useGetChainType();
+  const vmType = useGetVmType();
   const { chain: chainEVM } = useNetwork();
 
   const handleClickWhenConnected = () => {
-    if (chainType === "EVM") {
+    if (vmType === VmTypes.EVM) {
       openChainModalEVM?.();
+      return;
     }
+    if (vmType === VmTypes.Cardano || vmType === VmTypes.None) {
+      return;
+    }
+    assertNever(vmType);
   };
 
   if (!chainEVM) {

dapp/src/components/ConnectWallet.tsx

@@ -8,13 +8,20 @@ import {
 import { useAccountModal, useConnectModal } from "@rainbow-me/rainbowkit";
 import React from "react";
 import { useAccount } from "wagmi";
-import { useGetChainType } from "../hooks/useGetChainType";
+import { useGetVmType } from "../hooks/useGetVmType";
 import { useModal } from "mui-modal-provider";
 import CardanoWalletsDialog from "../dialogs/CardanoWalletsDialog";
 import { useDappStore } from "../store";
 import WalletInfoDialog from "../dialogs/WalletInfoDialog";
-import { formatCardanoAddress } from "../utils/cardano/utils";
+import {
+  connectWallet,
+  formatCardanoAddress,
+  getCardanoWallets,
+} from "../utils/cardano/utils";
 import { formatEVMAddress } from "../utils/evm/utils";
+import { VmTypes } from "../utils/constants";
+import assertNever from "assert-never";
+import InstallWalletDialog from "../dialogs/InstallWalletDialog";
 
 type Props = {
   popoverAnchorOrigin?: PopoverOrigin;
@@ -34,9 +41,10 @@ export default function ConnectWallet({
   const { showModal } = useModal();
   const { openConnectModal: openConnectModalEVM } = useConnectModal();
   const { openAccountModal: openAccountModalEVM } = useAccountModal();
-  const chainType = useGetChainType();
+  const vmType = useGetVmType();
   const { address: addressEVM } = useAccount();
   const address = useDappStore((state) => state.address);
+  const selectWallet = useDappStore((state) => state.selectWallet);
 
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
     null,
@@ -56,37 +64,57 @@ export default function ConnectWallet({
   };
 
   const openCardanoConnect = () => {
-    const modal = showModal(CardanoWalletsDialog, {
-      onCancel: () => {
-        modal.hide();
-      },
-    });
+    const wallets = getCardanoWallets();
+    if (wallets.length === 0) {
+      const modal = showModal(InstallWalletDialog, {
+        onCancel: () => {
+          modal.hide();
+        },
+      });
+    } else if (wallets.length === 1) {
+      connectWallet(wallets[0], selectWallet);
+    } else {
+      const modal = showModal(CardanoWalletsDialog, {
+        wallets,
+        onCancel: () => {
+          modal.hide();
+        },
+      });
+    }
     handleClose();
   };
 
   const handleClickWhenConnected = () => {
-    if (chainType === "EVM") {
+    if (vmType === VmTypes.None) {
+      return;
+    }
+    if (vmType === VmTypes.EVM) {
       openAccountModalEVM?.();
-    } else if (chainType === "Cardano") {
+      return;
+    } else if (vmType === VmTypes.Cardano) {
       const modal = showModal(WalletInfoDialog, {
         onCancel: () => {
           modal.hide();
         },
       });
+      return;
     }
+    assertNever(vmType);
   };
 
   const open = Boolean(anchorEl);
   const id = open ? "chains-popover" : undefined;
   const formattedAddress =
-    chainType === "EVM"
+    vmType === VmTypes.EVM
       ? formatEVMAddress(addressEVM)
-      : chainType === "Cardano"
+      : vmType === VmTypes.Cardano
       ? formatCardanoAddress(address)
-      : "";
+      : vmType === VmTypes.None
+      ? ""
+      : assertNever(vmType);
   return (
     <>
-      {chainType == null ? (
+      {vmType === VmTypes.None ? (
         <Button aria-describedby={id} onClick={handleClick}>
           Connect wallet
         </Button>

dapp/src/components/IsConnectedWrapper.tsx

@@ -1,17 +1,18 @@
 import { Stack, Typography } from "@mui/material";
 import { PropsWithChildren } from "react";
 import ConnectWallet from "./ConnectWallet";
-import { useGetChainType } from "../hooks/useGetChainType";
+import { useGetVmType } from "../hooks/useGetVmType";
 import { isChainSupported } from "../utils/evm/chains";
 import { useNetwork } from "wagmi";
 import ChainSelector from "./ChainSelector";
+import { VmTypes } from "../utils/constants";
 
 export default function IsConnectedWrapper({ children }: PropsWithChildren) {
-  const chainType = useGetChainType();
+  const vmType = useGetVmType();
   const { chain } = useNetwork();
-  const unsupportedChain = isChainSupported(chain?.id);
+  const supportedChain = isChainSupported(chain?.id);
 
-  if (chainType == null) {
+  if (vmType === VmTypes.None) {
     return (
       <Stack sx={{ my: 4, gap: 2, alignItems: "center", textAlign: "center" }}>
         <Typography>
@@ -32,7 +33,7 @@ export default function IsConnectedWrapper({ children }: PropsWithChildren) {
     );
   }
 
-  if (chainType === "EVM" && !unsupportedChain) {
+  if (vmType === VmTypes.EVM && !supportedChain) {
     return (
       <Stack sx={{ my: 4, gap: 2, alignItems: "center" }}>
         <Typography>You are using an unsupported network.</Typography>

dapp/src/components/LockNftSection.tsx

@@ -1,18 +1,28 @@
 "use client";
 import { Stack, Typography } from "@mui/material";
-import { useGetChainType } from "../hooks/useGetChainType";
+import { useGetVmType } from "../hooks/useGetVmType";
 import LockNftListEVM from "./evm/LockNftList";
 import LockNftListCardano from "./cardano/LockNftList";
+import { VmTypes } from "../utils/constants";
+import assertNever from "assert-never";
 
 export default function LockNftSection() {
-  const chainType = useGetChainType();
+  const vmType = useGetVmType();
 
   return (
     <Stack sx={{ gap: 2, mt: 4, alignItems: "center", width: "100%" }}>
       <Typography variant="h3" textAlign={"center"}>
         Project a token
       </Typography>
-      {chainType === "EVM" ? <LockNftListEVM /> : <LockNftListCardano />}
+      {vmType === VmTypes.None ? (
+        <></>
+      ) : vmType === VmTypes.EVM ? (
+        <LockNftListEVM />
+      ) : vmType === VmTypes.Cardano ? (
+        <LockNftListCardano />
+      ) : (
+        assertNever(vmType)
+      )}
     </Stack>
   );
 }

dapp/src/components/UnlockNftSection.tsx

@@ -1,22 +1,26 @@
 "use client";
 import { Stack, Typography } from "@mui/material";
 import UnlockNftListEVM from "./evm/UnlockNftList";
-import { useGetChainType } from "../hooks/useGetChainType";
+import { useGetVmType } from "../hooks/useGetVmType";
 import UnlockNftListCardano from "./cardano/UnlockNftList";
+import { VmTypes } from "../utils/constants";
+import assertNever from "assert-never";
 
 export default function UnlockNftSection() {
-  const chainType = useGetChainType();
+  const vmType = useGetVmType();
   return (
     <Stack sx={{ alignItems: "center", gap: 2, width: "100%" }}>
       <Typography variant="h3" textAlign={"center"}>
         Projected tokens
       </Typography>
-      {chainType === "EVM" ? (
+      {vmType === VmTypes.None ? (
+        <></>
+      ) : vmType === VmTypes.EVM ? (
         <UnlockNftListEVM />
-      ) : chainType === "Cardano" ? (
+      ) : vmType === VmTypes.Cardano ? (
         <UnlockNftListCardano />
       ) : (
-        <></>
+        assertNever(vmType)
       )}
     </Stack>
   );

dapp/src/components/evm/UnlockNftList.tsx

@@ -12,7 +12,7 @@ import {
   Typography,
 } from "@mui/material";
 import TransactionButton from "../TransactionButton";
-import { useWaitForTransaction } from "wagmi";
+import { useNetwork, useWaitForTransaction } from "wagmi";
 import { useGetLocksEVM } from "../../hooks/evm/useGetLocksEVM";
 import { LockInfoEVM, TokenEVM } from "../../utils/evm/types";
 import Grid from "@mui/material/Unstable_Grid2";
@@ -34,11 +34,7 @@ import { useSnackbar } from "notistack";
 import { SnackbarMessage } from "../../utils/texts";
 import CopyableTypography from "../CopyableTypography";
 import { writeContract } from "@wagmi/core";
-
-// average block time on ETH
-const blockTime = 12n;
-// we shall wait 1.5x the average block time until we try to simulate withdraw txn
-const reserveWaitingTime = (blockTime * 3n) / 2n;
+import { getChainReserveWaitingTime } from "../../utils/evm/chains";
 
 function UnlockNftCard({
   lockInfo,
@@ -51,6 +47,7 @@ function UnlockNftCard({
   isSelected: boolean;
   onClick?: (token: TokenEVM) => void;
 }) {
+  const { chain } = useNetwork();
   const { enqueueSnackbar } = useSnackbar();
   const [isLoadingUnlock, setIsLoadingUnlock] = useState(false);
   const [isLoadingWithdraw, setIsLoadingWithdraw] = useState(false);
@@ -59,7 +56,7 @@ function UnlockNftCard({
   const { token, tokenId, nftData } = lockInfo;
   let { unlockTime } = lockInfo;
   if (unlockTime > 0n) {
-    unlockTime += reserveWaitingTime;
+    unlockTime += getChainReserveWaitingTime(chain?.id);
   }
   const [now, setNow] = useState<number>(new Date().getTime() / 1000);
   const queryClient = useQueryClient();
@@ -208,6 +205,7 @@ function UnlockNftListItem({
   selectedTokens: TokenEVM[];
   expanded: boolean;
 }) {
+  const { chain } = useNetwork();
   const [now, setNow] = useState<number>(new Date().getTime() / 1000);
   useInterval(() => {
     setNow(new Date().getTime() / 1000);
@@ -221,7 +219,8 @@ function UnlockNftListItem({
   const tokenIdsToWithdraw = locks
     .filter(
       (lock) =>
-        lock.unlockTime !== 0n && now > lock.unlockTime + reserveWaitingTime,
+        lock.unlockTime !== 0n &&
+        now > lock.unlockTime + getChainReserveWaitingTime(chain?.id),
     )
     .map((lock) => lock.tokenId);
 
@@ -309,6 +308,7 @@ function UnlockNftListItem({
 }
 
 export default function UnlockNftList() {
+  const { chain } = useNetwork();
   const [now, setNow] = useState<number>(new Date().getTime() / 1000);
   useInterval(() => {
     setNow(new Date().getTime() / 1000);
@@ -332,7 +332,8 @@ export default function UnlockNftList() {
   const locksForWithdraw =
     locks?.filter(
       (lock) =>
-        lock.unlockTime > 0n && now > lock.unlockTime + reserveWaitingTime,
+        lock.unlockTime > 0n &&
+        now > lock.unlockTime + getChainReserveWaitingTime(chain?.id),
     ) ?? [];
   if (locks) {
     if (selectingMultipleUnlock) {

dapp/src/dialogs/CardanoWalletsDialog.tsx

@@ -10,21 +10,19 @@ import {
   Typography,
 } from "@mui/material";
 import { useDappStore } from "../store";
-import { useModal } from "mui-modal-provider";
-import InstallWalletDialog from "./InstallWalletDialog";
 import { Check, Close } from "@mui/icons-material";
-import { CardanoWalletInfo } from "../utils/cardano/types";
-import { cardanoWallets } from "../utils/cardano/constants";
+import { connectWallet, getCardanoWallets } from "../utils/cardano/utils";
 
 type CardanoWalletsDialogProps = {
   onCancel: () => void;
+  wallets: ReturnType<typeof getCardanoWallets>;
 } & DialogProps;
 
 export default function CardanoWalletsDialog({
   onCancel,
+  wallets,
   ...props
 }: CardanoWalletsDialogProps) {
-  const { showModal } = useModal();
   const selectWallet = useDappStore((state) => state.selectWallet);
   const selectedWalletKey = useDappStore((state) => state.selectedWallet);
 
@@ -36,27 +34,6 @@ export default function CardanoWalletsDialog({
     return false;
   };
 
-  const connectWallet = async (walletInfo: CardanoWalletInfo) => {
-    if (typeof window !== "undefined" && window.cardano) {
-      if (window.cardano[walletInfo.key]) {
-        try {
-          const walletApi = await window.cardano[walletInfo.key].enable();
-          if (walletApi) {
-            selectWallet(walletInfo.key);
-            onCancel();
-          }
-        } catch (_) {}
-      } else {
-        const modal = showModal(InstallWalletDialog, {
-          walletInfo,
-          onCancel: () => {
-            modal.hide();
-          },
-        });
-      }
-    }
-  };
-
   return (
     <Dialog {...props}>
       <Stack
@@ -74,12 +51,18 @@ export default function CardanoWalletsDialog({
           </IconButton>
         </DialogActions>
       </Stack>
-      <MenuList sx={{ pb: 0 }}>
-        {cardanoWallets.map((wallet) => {
+      <MenuList>
+        {wallets.map((wallet) => {
           const installed = walletInstalled(wallet.key);
           const selected = wallet.key === selectedWalletKey;
           return (
-            <MenuItem onClick={() => connectWallet(wallet)} key={wallet.key}>
+            <MenuItem
+              onClick={async () => {
+                await connectWallet(wallet, selectWallet);
+                onCancel();
+              }}
+              key={wallet.key}
+            >
               <Stack
                 sx={{
                   flexDirection: "row",