native ETH extension: make it functional

.gitignore

@@ -2,6 +2,8 @@
 .env
 
 /tags
+tags.lock
+tags.temp
 
 # dependencies
 /node_modules

components/NoteCard/Children/Deposit.tsx

@@ -26,6 +26,7 @@ const Deposit: React.FC<DepositProps> = ({
 }) => {
   const [assetYields, setAssetYields] = useState();
   const [selectedKeys, setSelectedKeys] = useState<any>();
+  const [isNativeEthActive, setIsNativeEthActive] = useState<boolean>(false);
 
   const { data: vaultData } = useReadContracts({
     contracts: supportedVaults.map((address) => ({
@@ -88,11 +89,11 @@ const Deposit: React.FC<DepositProps> = ({
   const renderVaultTable = (vaultData: VaultInfo[]) => {
     return (
       <div>
-        <div className="hidden justify-between text-xs tracking-wider md:grid md:grid-cols-9 md:gap-x-2 mt-2 py-2 px-2 sticky top-0">
+        <div className="hidden justify-between text-xs tracking-wider md:grid md:grid-cols-10 md:gap-x-2 mt-2 py-2 px-2 sticky top-0">
           {vaultTableHeaders.map((header) => (
             <div
               key={header.columnKey}
-              className={`${header.columnKey === "actionOptions" ? "col-span-1" : "col-span-2"} my-auto ${header.columnKey !== "currency" ? "text-center" : "pl-2"}`}
+              className={`col-span-2 my-auto ${header.columnKey !== "currency" ? "text-center" : "pl-2"}`}
             >
               {header.label}
             </div>
@@ -106,11 +107,17 @@ const Deposit: React.FC<DepositProps> = ({
                 <Vault
                   key={i}
                   tokenId={tokenId}
-                  vault={vault}
+                  vault={
+                    vault.symbol === "wETH" && isNativeEthActive
+                      ? vault.altCurrencyInfo!
+                      : vault
+                  }
                   assetYield={assetYields && assetYields[vault.vaultAddress]}
                   vaultAssets={vaultAssets}
                   selectedKeys={selectedKeys}
                   setSelectedKeys={setSelectedKeys}
+                  isNativeEthActive={isNativeEthActive}
+                  setIsNativeEthActive={setIsNativeEthActive}
                 />
               );
             })}

components/NoteCard/vaults/Vault.tsx

@@ -1,13 +1,10 @@
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import Image from "next/image";
 import EditVaultModal from "@/components/Modals/NoteCardModals/DepositModals/EditVault/EditVaultModal";
 import EditVaultTabContent from "@/components/Modals/NoteCardModals/DepositModals/EditVault/EditVaultTabContent";
 import { TabsDataModel } from "@/models/TabsModel";
-import {
-  Accordion,
-  AccordionItem,
-} from "@nextui-org/accordion";
-import {Tooltip} from "@nextui-org/tooltip";
+import { Accordion, AccordionItem } from "@nextui-org/accordion";
+import { Tooltip } from "@nextui-org/tooltip";
 import { VaultInfo, vaultInfo } from "@/lib/constants";
 import { defaultChain } from "@/lib/config";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
@@ -19,6 +16,7 @@ import { VaultActions } from "@/models/VaultModels";
 import { MinusIcon, PlusIcon, XIcon } from "lucide-react";
 import useWindowSize from "@/hooks/useWindowSize";
 import { Selection } from "@nextui-org/table";
+import { Switch } from "@nextui-org/switch";
 
 const Vault = ({
   vault,
@@ -27,6 +25,8 @@ const Vault = ({
   vaultAssets,
   selectedKeys,
   setSelectedKeys,
+  isNativeEthActive,
+  setIsNativeEthActive,
 }: {
   vault: VaultInfo;
   tokenId: string;
@@ -42,12 +42,16 @@ const Vault = ({
     | undefined;
   selectedKeys: any;
   setSelectedKeys: (keys: Selection) => any;
+  isNativeEthActive: boolean;
+  setIsNativeEthActive: Dispatch<SetStateAction<boolean>>;
 }) => {
   const [isEditVaultModalOpen, setIsVaultModalOpen] = useState<boolean>(false);
   const [selectedEditVaultTab, setSelectedEditVaultTab] =
     useState<VaultActions>("Deposit");
   const [isEditInDialog, setIsEditInDialog] = useState<boolean>(false);
   const [vaultInputValue, setVaultInputValue] = useState("");
+  //This should be changed to get the real extension status
+  const isNativeEthExtensionEnabled = true;
 
   const { windowWidth } = useWindowSize();
 
@@ -61,9 +65,6 @@ const Vault = ({
     chainId: defaultChain.id,
   });
 
-  const { tokenAddress: collateralAddress, symbol: collateralString } =
-    vaultInfo.filter((value) => value.vaultAddress === vault.vaultAddress)[0];
-
   const accordionCloseHandler = () => {
     setSelectedKeys(new Set());
     setVaultInputValue("");
@@ -108,8 +109,8 @@ const Vault = ({
       content: (
         <EditVaultTabContent
           action="deposit"
-          token={collateralAddress}
-          symbol={collateralString}
+          token={vault.tokenAddress}
+          symbol={vault.symbol}
           collateralizationRatio={collatRatio}
           tokenId={tokenId}
           vault={vault}
@@ -126,8 +127,8 @@ const Vault = ({
       content: (
         <EditVaultTabContent
           action="withdraw"
-          token={collateralAddress}
-          symbol={collateralString}
+          token={vault.tokenAddress}
+          symbol={vault.symbol}
           collateralizationRatio={collatRatio}
           tokenId={tokenId}
           vault={vault}
@@ -154,7 +155,7 @@ const Vault = ({
       <DialogContent className="max-w-[90vw] md:max-w-lg px-[0px] md:px-8 pt-8 ml-auto">
         <EditVaultModal
           tabsData={tabs}
-          logo={collateralString}
+          logo={vault.symbol}
           selectedTab={selectedEditVaultTab}
         />
       </DialogContent>
@@ -181,6 +182,15 @@ const Vault = ({
         </div>
         <div className="my-auto">
           <div className="flex justify-between text-xs">
+            {isNativeEthExtensionEnabled && (
+              <Switch
+                className={`pointer-events-auto mr-2 ${["wETH", "ETH"].includes(vault.symbol) ? "" : "invisible"}`}
+                size="sm"
+                color="success"
+                isSelected={isNativeEthActive}
+                onValueChange={setIsNativeEthActive}
+              />
+            )}
             <div
               className="cursor-pointer mr-2 h-6 w-6 rounded-[50%] bg-[#1A1A1A] flex"
               onClick={() => {
@@ -235,7 +245,7 @@ const Vault = ({
           isCompact
           className="pointer-events-none"
           title={
-            <div className="hidden justify-between text-xs tracking-wider md:grid md:grid-cols-9 md:gap-x-2 text-center items-center h-9">
+            <div className="hidden justify-between text-xs tracking-wider md:grid md:grid-cols-10 md:gap-x-2 text-center items-center h-9">
               <div className="col-span-2 flex pl-2 items-center">
                 <div>
                   <Image
@@ -250,12 +260,30 @@ const Vault = ({
               <div className="col-span-2 flex justify-center">
                 <div>{vaultAssets?.[vault.vaultAddress]?.asset}</div>
               </div>
-              <div className="col-span-2 ">
+              <div className="col-span-2">
                 ${vaultAssets?.[vault.vaultAddress]?.usdValue}
               </div>
-              <div className="col-span-2 ">{assetYield}</div>
-              <div className="col-span-1 ">
+              <div className="col-span-2">{assetYield}</div>
+              <div className="col-span-2">
                 <div className="flex justify-between">
+                  {isNativeEthExtensionEnabled && (
+                    <Tooltip
+                      className="mb-4"
+                      content={
+                        isNativeEthActive ? "Switch to wETH" : "Switch to ETH"
+                      }
+                      closeDelay={200}
+                    >
+                      <Switch
+                        className={`pointer-events-auto ${["wETH", "ETH"].includes(vault.symbol) ? "" : "invisible"}`}
+                        size="sm"
+                        color="success"
+                        isSelected={isNativeEthActive}
+                        onValueChange={setIsNativeEthActive}
+                      />
+                    </Tooltip>
+                  )}
+
                   <Tooltip
                     content={
                       selectedKeys?.values().next().value ===

components/NoteEtensions.tsx

@@ -4,17 +4,31 @@ import { Switch } from "@nextui-org/switch";
 import NoteCardsContainer from "./reusable/NoteCardsContainer";
 import Image from "next/image";
 import useWindowSize from "@/hooks/useWindowSize";
+import { useReadVaultManagerIsExtensionAuthorized } from "@/generated";
+import { defaultChain } from "@/lib/config";
+import { useAccount } from "wagmi";
+import ConnectWallet from "./reusable/ConnectWallet";
 
 interface NoteEtensionsProps {
   extensions: NoteExtensionsModel[];
 }
 
 const NoteEtensions: React.FC<NoteEtensionsProps> = ({ extensions }) => {
+  const { address, isConnected } = useAccount();
   const [isRedemptionSelected, setRedemptionSelected] = React.useState(false);
-  const [isNativeEthSelected, setNativeEthSelected] = React.useState(true);
+  const [isNativeEthSelected, setNativeEthSelected] = React.useState(false);
   const [isAtomicSwapSelected, setAtomicSwapSelected] = React.useState(false);
-
   const { windowWidth } = useWindowSize();
+
+  const {data: isNativeEthEnabled} = useReadVaultManagerIsExtensionAuthorized({
+    chainId: defaultChain.id,
+    args: [address, extensions[0].address],
+  });
+
+  if (!isConnected) {
+    return <ConnectWallet hasConnectButton={true} />;
+  }
+
   return (
     <NoteCardsContainer>
       <>
@@ -60,7 +74,7 @@ const NoteEtensions: React.FC<NoteEtensionsProps> = ({ extensions }) => {
                   extension.label === "Redemption"
                     ? isRedemptionSelected
                     : extension.label === "Native ETH"
-                      ? isNativeEthSelected
+                      ? isNativeEthEnabled
                       : extension.label === "Atomic Swap"
                         ? isAtomicSwapSelected
                         : false

constants/NoteCards.ts

@@ -4,8 +4,8 @@ export const NOTE_EXTENSIONS = [
   {
     label: "Native ETH",
     description: "Deposit native ETH into your note without manually wrapping it",
-    address: "0xDc40",
-    enabled: false,
+    address: "0x9F77A6775d6aC6A69107326130D65E422002B5B2",
+    enabled: true,
     icon: "/3d-eth.png",
   },
   {

lib/abi/VaultManager.ts

@@ -266,6 +266,30 @@ export const vaultManagerAbi = [
     stateMutability: "view",
     type: "function",
   },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "user",
+        type: "address"
+      },
+      {
+        internalType: "address",
+        name: "extension",
+        type: "address"
+      }
+    ],
+    name: "isExtensionAuthorized",
+    outputs: [
+      {
+        internalType: "bool",
+        name: "",
+        type: "bool"
+      }
+    ],
+    stateMutability: "view",
+    type: "function"
+  },
   {
     inputs: [
       { internalType: "uint256", name: "id", type: "uint256" },

lib/constants.ts

@@ -28,6 +28,7 @@ export type VaultInfo = {
   decimals: number;
   getApr?: () => Promise<number>;
   additionalYield?: string;
+  altCurrencyInfo?: VaultInfo;
 };
 
 export const vaultInfo: VaultInfo[] = [
@@ -38,6 +39,14 @@ export const vaultInfo: VaultInfo[] = [
     tokenAddress: wethAddress[defaultChain.id],
     color: "#676767",
     decimals: 8,
+    altCurrencyInfo: {
+      icon: "/eth.png",
+      vaultAddress: wEthVaultAddress[defaultChain.id],
+      symbol: "ETH",
+      tokenAddress: wethAddress[defaultChain.id],
+      color: "#676767",
+      decimals: 8,
+    },
   },
   {
     icon: "/wsteth.png",
@@ -108,10 +117,10 @@ export const vaultInfo: VaultInfo[] = [
     tokenAddress: apxEthAddress[defaultChain.id],
     color: "#aa9a36",
     decimals: 8,
-    getApr: async() => {
-      const resp = await fetch("https://dinero.xyz/api/apr")
-      const data = await resp.json()
+    getApr: async () => {
+      const resp = await fetch("https://dinero.xyz/api/apr");
+      const data = await resp.json();
       return parseFloat(data.apxEth);
-    }
+    },
   },
 ];