feat: tvl

src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx

@@ -2,6 +2,7 @@ import { HStack, Text, VStack } from "@chakra-ui/react";
 
 interface LockScreenProtocolFeeProps {
   assetAmount?: number;
+  bitcoinPrice?: number;
 }
 
 function calculateProtocolFee(
@@ -21,6 +22,7 @@ function calculateProtocolFeeInUSD(
 
 export function LockScreenProtocolFee({
   assetAmount,
+  bitcoinPrice,
 }: LockScreenProtocolFeeProps): React.JSX.Element {
   return (
     <VStack
@@ -41,7 +43,9 @@ export function LockScreenProtocolFee({
       </HStack>
       <Text color={"white.01"} fontSize={"sm"}>
         ={" "}
-        {assetAmount && calculateProtocolFeeInUSD(assetAmount, 36.142, 0.0001)}{" "}
+        {assetAmount &&
+          bitcoinPrice &&
+          calculateProtocolFeeInUSD(assetAmount, bitcoinPrice, 0.0001)}{" "}
         $
       </Text>
     </VStack>

src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx

@@ -16,7 +16,10 @@ export function LockScreen(): React.JSX.Element {
   return (
     <VStack w={"300px"} spacing={"15px"}>
       <VaultCard vault={readyVaults[0]} isSelected />
-      <LockScreenProtocolFee assetAmount={readyVaults[0].collateral} />
+      <LockScreenProtocolFee
+        assetAmount={readyVaults[0].collateral}
+        bitcoinPrice={bitcoin?.bitcoinPrice}
+      />
       <Button
         isLoading={isSubmitting}
         variant={"account"}

src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx

@@ -1,30 +1,42 @@
-import { Text, VStack } from "@chakra-ui/react";
-import { ProtocolHistory } from "@components/protocol-history/protocol-history";
+import { Skeleton, Text, VStack } from "@chakra-ui/react";
+// import { ProtocolHistory } from "@components/protocol-history/protocol-history";
 
+import { useContext } from "react";
+import { BlockchainContext } from "../../../../providers/blockchain-context-provider";
 import { ProtocolSummaryStackLayout } from "./components/protocol-summary-stack.layout";
 
 export function ProtocolSummaryStack(): React.JSX.Element {
+  const blockchainContext = useContext(BlockchainContext);
+  const totalSupply = blockchainContext?.ethereum.totalSupply;
+  const bitcoinPrice = blockchainContext?.bitcoin.bitcoinPrice;
   return (
     <ProtocolSummaryStackLayout>
       <VStack alignItems={"start"} h={"250px"} w={"50%"} spacing={"15px"}>
         <Text alignContent={"start"} color={"white"} fontSize={"lg"}>
           TVL
         </Text>
         <VStack alignItems={"start"} w={"100%"} spacing={"0px"}>
-          <Text
-            alignContent={"start"}
-            color={"white"}
-            fontSize={"3xl"}
-            fontWeight={"semibold"}
-          >
-            1,650.36 dlcBTC
-          </Text>
-          <Text alignContent={"start"} color={"white"} fontSize={"lg"}>
-            $56,425,710.06
-          </Text>
+          <Skeleton isLoaded={totalSupply !== undefined} w={"100%"}>
+            <Text
+              alignContent={"start"}
+              color={"white"}
+              fontSize={"3xl"}
+              fontWeight={"semibold"}
+            >
+              {totalSupply} dlcBTC
+            </Text>
+          </Skeleton>
+          <Skeleton isLoaded={totalSupply !== undefined} w={"100%"}>
+            <Text alignContent={"start"} color={"white"} fontSize={"lg"}>
+              $
+              {totalSupply && bitcoinPrice
+                ? (totalSupply * bitcoinPrice).toLocaleString()
+                : 0}
+            </Text>
+          </Skeleton>
         </VStack>
       </VStack>
-      <ProtocolHistory />
+      {/* <ProtocolHistory /> */}
     </ProtocolSummaryStackLayout>
   );
 }

src/app/components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx

@@ -15,10 +15,12 @@ function validateTokenAmount(value: number): string | undefined {
 
 interface TransactionFormInputProps {
   values: TransactionFormValues;
+  bitcoinPrice?: number;
 }
 
 export function TransactionFormInput({
   values,
+  bitcoinPrice,
 }: TransactionFormInputProps): React.JSX.Element {
   return (
     <VStack
@@ -54,7 +56,7 @@ export function TransactionFormInput({
         <Text fontSize={"xl"}>dlcBTC</Text>
       </HStack>
       <Text pl={"30px"} color={"gray"} fontSize={"sm"}>
-        = ~{(values.amount * 36131.1).toFixed(4)}$
+        {bitcoinPrice && `= ~${(values.amount * bitcoinPrice).toFixed(4)}$`}
       </Text>
     </VStack>
   );

src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx

@@ -26,6 +26,7 @@ export function TransactionForm(): React.JSX.Element {
   const toast = useToast();
   const blockchainContext = useContext(BlockchainContext);
   const ethereum = blockchainContext?.ethereum;
+  const bitcoinPrice = blockchainContext?.bitcoin.bitcoinPrice;
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   async function handleSetup(btcDepositAmount: number) {
@@ -64,7 +65,10 @@ export function TransactionForm(): React.JSX.Element {
                 <Text w={"100%"} color={"accent.cyan.01"}>
                   Amount of dlcBTC you want to mint:
                 </Text>
-                <TransactionFormInput values={values} />
+                <TransactionFormInput
+                  values={values}
+                  bitcoinPrice={bitcoinPrice}
+                />
                 <FormErrorMessage fontSize={"xs"}>
                   {errors.amount}
                 </FormErrorMessage>

src/app/components/protocol-history/components/protocol-history-item.tsx

@@ -1,46 +1,48 @@
-import { HStack, Image, Text } from "@chakra-ui/react";
-import { CustomSkeleton } from "@components/custom-skeleton/custom-skeleton";
+// /* eslint-disable */
 
-interface ProtocolHistoryItem {
-  id: string;
-  value: string;
-  uuid: string;
-  date: string;
-}
+// import { HStack, Image, Text } from "@chakra-ui/react";
+// import { CustomSkeleton } from "@components/custom-skeleton/custom-skeleton";
 
-export function ProtocolHistoryItem(
-  protocolHistoryItem: ProtocolHistoryItem,
-): React.JSX.Element {
-  if (!protocolHistoryItem) return <CustomSkeleton height={"35px"} />;
+// interface ProtocolHistoryItem {
+//   id: string;
+//   value: string;
+//   uuid: string;
+//   date: string;
+// }
 
-  return (
-    <HStack
-      justifyContent={"space-between"}
-      p={"10px"}
-      w={"300px"}
-      h={"35px"}
-      bgGradient={"linear(to-r, background.content.01, background.content.02)"}
-      blendMode={"screen"}
-      border={"1px solid"}
-      borderRadius={"md"}
-      borderColor={"border.white.01"}
-    >
-      <HStack spacing={"15px"}>
-        <Image
-          src={"/images/logos/dlc-btc-logo.svg"}
-          alt={"dlcBTC Logo"}
-          boxSize={"20px"}
-        />
-        <Text color={"white"} fontWeight={800}>
-          {protocolHistoryItem.value}
-        </Text>
-        <Text color={"white"} fontSize={"sm"}>
-          {protocolHistoryItem.uuid}
-        </Text>
-      </HStack>
-      <Text color={"white"} fontSize={"sm"}>
-        {protocolHistoryItem.date}
-      </Text>
-    </HStack>
-  );
-}
+// export function ProtocolHistoryItem(
+//   protocolHistoryItem: ProtocolHistoryItem,
+// ): React.JSX.Element {
+//   if (!protocolHistoryItem) return <CustomSkeleton height={"35px"} />;
+
+//   return (
+//     <HStack
+//       justifyContent={"space-between"}
+//       p={"10px"}
+//       w={"300px"}
+//       h={"35px"}
+//       bgGradient={"linear(to-r, background.content.01, background.content.02)"}
+//       blendMode={"screen"}
+//       border={"1px solid"}
+//       borderRadius={"md"}
+//       borderColor={"border.white.01"}
+//     >
+//       <HStack spacing={"15px"}>
+//         <Image
+//           src={"/images/logos/dlc-btc-logo.svg"}
+//           alt={"dlcBTC Logo"}
+//           boxSize={"20px"}
+//         />
+//         <Text color={"white"} fontWeight={800}>
+//           {protocolHistoryItem.value}
+//         </Text>
+//         <Text color={"white"} fontSize={"sm"}>
+//           {protocolHistoryItem.uuid}
+//         </Text>
+//       </HStack>
+//       <Text color={"white"} fontSize={"sm"}>
+//         {protocolHistoryItem.date}
+//       </Text>
+//     </HStack>
+//   );
+// }

src/app/components/protocol-history/components/protocol-history.layout.tsx

@@ -1,17 +1,17 @@
-import { VStack } from "@chakra-ui/react";
-import { FadeLayer } from "@components/fade-layer/fade-layer";
-import { HasChildren } from "@models/has-children";
+// import { VStack } from "@chakra-ui/react";
+// import { FadeLayer } from "@components/fade-layer/fade-layer";
+// import { HasChildren } from "@models/has-children";
 
-export function ProtocolHistoryLayout({
-  children,
-}: HasChildren): React.JSX.Element {
-  return (
-    <VStack h={"250px"}>
-      <FadeLayer height={"195px"} fadeHeight={"25px"}>
-        <VStack alignItems={"start"} h={"195px"} spacing={"15px"} w={"50%"}>
-          {children}
-        </VStack>
-      </FadeLayer>
-    </VStack>
-  );
-}
+// export function ProtocolHistoryLayout({
+//   children,
+// }: HasChildren): React.JSX.Element {
+//   return (
+//     <VStack h={"250px"}>
+//       <FadeLayer height={"195px"} fadeHeight={"25px"}>
+//         <VStack alignItems={"start"} h={"195px"} spacing={"15px"} w={"50%"}>
+//           {children}
+//         </VStack>
+//       </FadeLayer>
+//     </VStack>
+//   );
+// }

src/app/components/protocol-history/protocol-history.tsx

@@ -1,28 +1,28 @@
-import { Text, VStack } from "@chakra-ui/react";
+// // import { Text, VStack } from "@chakra-ui/react";
 
-import { exampleProtocolHistoryItems } from "@shared/examples/example-protocol-history-items";
+// // import { exampleProtocolHistoryItems } from "@shared/examples/example-protocol-history-items";
 
-import { ProtocolHistoryItem } from "./components/protocol-history-item";
-import { ProtocolHistoryLayout } from "./components/protocol-history.layout";
-import { scrollBarCSS } from "../../../styles/css-styles";
+// // import { ProtocolHistoryItem } from "./components/protocol-history-item";
+// import { ProtocolHistoryLayout } from "./components/protocol-history.layout";
+// // import { scrollBarCSS } from "../../../styles/css-styles";
 
-export function ProtocolHistory(): React.JSX.Element {
-  return (
-    <ProtocolHistoryLayout>
-      <Text alignContent={"start"} color={"white.01"} fontSize={"lg"}>
-        Protocol History
-      </Text>
-      <VStack
-        overflowY={"scroll"}
-        overflowX={"hidden"}
-        alignItems={"start"}
-        pr={"15px"}
-        css={scrollBarCSS}
-      >
-        {exampleProtocolHistoryItems.map((item) => (
-          <ProtocolHistoryItem key={item.id} {...item} />
-        ))}
-      </VStack>
-    </ProtocolHistoryLayout>
-  );
-}
+// export function ProtocolHistory(): React.JSX.Element {
+//   return (
+//     <ProtocolHistoryLayout>
+//       {/* <Text alignContent={"start"} color={"white.01"} fontSize={"lg"}>
+//         Protocol History
+//       </Text>
+//       <VStack
+//         overflowY={"scroll"}
+//         overflowX={"hidden"}
+//         alignItems={"start"}
+//         pr={"15px"}
+//         css={scrollBarCSS}
+//       >
+//         {exampleProtocolHistoryItems.map((item) => (
+//           <ProtocolHistoryItem key={item.id} {...item} />
+//         ))}
+//       </VStack> */}
+//     </ProtocolHistoryLayout>
+//   );
+// }

src/app/hooks/use-bitcoin.ts

@@ -7,14 +7,24 @@
 
 import { useEndpoints } from "./use-endpoints";
 import { RootState } from "@store/index";
+import { useEffect, useState } from "react";
 
 export interface UseBitcoinReturnType {
   fetchBitcoinContractOfferAndSendToUserWallet: (vault: Vault) => Promise<void>;
+  bitcoinPrice: number;
 }
 
 export function useBitcoin(): UseBitcoinReturnType {
   const dispatch = useDispatch();
   const { routerWalletURL } = useEndpoints();
+  const [bitcoinPrice, setBitcoinPrice] = useState(0);
+
+  useEffect(() => {
+    const getBitcoinPrice = async () => {
+      await fetchBitcoinPrice();
+    };
+    getBitcoinPrice();
+  }, []);
   const { network } = useSelector((state: RootState) => state.account);
 
   function createURLParams(bitcoinContractOffer: any) {
@@ -87,7 +97,24 @@
     await sendOfferForSigning(urlParams, vault.uuid);
   }
 
+  async function fetchBitcoinPrice() {
+    try {
+      const response = await fetch(
+        "https://api.coindesk.com/v1/bpi/currentprice.json",
+        {
+          headers: { Accept: "application/json" },
+        },
+      );
+      const message = await response.json();
+      const bitcoinUSDPrice = message.bpi.USD.rate_float;
+      setBitcoinPrice(bitcoinUSDPrice);
+    } catch (error: any) {
+      throw new BitcoinError(`Could not fetch bitcoin price: ${error.message}`);
+    }
+  }
+
   return {
     fetchBitcoinContractOfferAndSendToUserWallet,
+    bitcoinPrice,
   };
 }