From 33cd8925f789c25272237719755354157c4f620f Mon Sep 17 00:00:00 2001
From: Polybius93 <adam.daniel.puskas@polybius-studios.com>
Date: Thu, 30 Nov 2023 15:24:54 +0100
Subject: [PATCH 1/2] feat: added bitcoin price and total supply fetching

---
 .../lock-screen/components/protocol-fee.tsx   | 39 +++++------
 .../components/lock-screen/lock-screen.tsx    |  2 +-
 .../protocol-summary-stack.tsx                | 15 ++++-
 .../components/transaction-form-input.tsx     |  4 +-
 .../transaction-form/transaction-form.tsx     |  3 +-
 src/app/hooks/use-bitcoin.ts                  | 64 ++++++++++++-------
 src/app/hooks/use-ethereum.ts                 | 40 ++++++++++++
 7 files changed, 119 insertions(+), 48 deletions(-)

diff --git a/src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx b/src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx
index 61881738..d36f27ac 100644
--- a/src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx
+++ b/src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx
@@ -1,47 +1,48 @@
-import { HStack, Text, VStack } from "@chakra-ui/react";
+import { HStack, Text, VStack } from '@chakra-ui/react';
 
 interface LockScreenProtocolFeeProps {
   assetAmount?: number;
+  bitcoinPrice?: number;
 }
 
-function calculateProtocolFee(
-  amount: number,
-  protocolFeePercentage: number,
-): string {
+function calculateProtocolFee(amount: number, protocolFeePercentage: number): string {
   return (amount * protocolFeePercentage).toFixed(8);
 }
 
 function calculateProtocolFeeInUSD(
   assetAmount: number,
   usdPrice: number,
-  protocolFeePercentage: number,
+  protocolFeePercentage: number
 ): string {
   return (assetAmount * protocolFeePercentage * usdPrice).toFixed(8);
 }
 
 export function LockScreenProtocolFee({
   assetAmount,
+  bitcoinPrice,
 }: LockScreenProtocolFeeProps): React.JSX.Element {
   return (
     <VStack
-      alignItems={"end"}
-      p={"15px"}
-      w={"100%"}
-      border={"1px solid"}
-      borderRadius={"md"}
-      borderColor={"border.cyan.01"}
+      alignItems={'end'}
+      p={'15px'}
+      w={'100%'}
+      border={'1px solid'}
+      borderRadius={'md'}
+      borderColor={'border.cyan.01'}
     >
-      <HStack justifyContent={"space-between"} w={"100%"}>
-        <Text color={"white.02"} fontSize={"sm"}>
+      <HStack justifyContent={'space-between'} w={'100%'}>
+        <Text color={'white.02'} fontSize={'sm'}>
           Protocol Fee
         </Text>
-        <Text color={"white.01"} fontSize={"sm"} fontWeight={800}>
+        <Text color={'white.01'} fontSize={'sm'} fontWeight={800}>
           {assetAmount && calculateProtocolFee(assetAmount, 0.0001)} BTC
-        </Text>{" "}
+        </Text>{' '}
       </HStack>
-      <Text color={"white.01"} fontSize={"sm"}>
-        ={" "}
-        {assetAmount && calculateProtocolFeeInUSD(assetAmount, 36.142, 0.0001)}{" "}
+      <Text color={'white.01'} fontSize={'sm'}>
+        ={' '}
+        {assetAmount &&
+          bitcoinPrice &&
+          calculateProtocolFeeInUSD(assetAmount, bitcoinPrice, 0.0001)}{' '}
         $
       </Text>
     </VStack>
diff --git a/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx b/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx
index 56e60441..09023b72 100644
--- a/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx
+++ b/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx
@@ -16,7 +16,7 @@ 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"}
diff --git a/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx b/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx
index 4d58092b..6a36c9ba 100644
--- a/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx
+++ b/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx
@@ -1,9 +1,14 @@
-import { Text, VStack } from "@chakra-ui/react";
+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"}>
@@ -11,17 +16,21 @@ export function ProtocolSummaryStack(): React.JSX.Element {
           TVL
         </Text>
         <VStack alignItems={"start"} w={"100%"} spacing={"0px"}>
+        <Skeleton isLoaded={totalSupply !== undefined} w={'100%'}>
           <Text
             alignContent={"start"}
             color={"white"}
             fontSize={"3xl"}
             fontWeight={"semibold"}
           >
-            1,650.36 dlcBTC
+            {totalSupply} dlcBTC
           </Text>
+          </Skeleton>
+          <Skeleton isLoaded={totalSupply !== undefined}  w={'100%'}>
           <Text alignContent={"start"} color={"white"} fontSize={"lg"}>
-            $56,425,710.06
+            ${totalSupply && bitcoinPrice ? (totalSupply * bitcoinPrice).toLocaleString() : (0)}
           </Text>
+          </Skeleton>
         </VStack>
       </VStack>
       <ProtocolHistory />
diff --git a/src/app/components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx b/src/app/components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx
index f6da3a65..e1924ad1 100644
--- a/src/app/components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx
+++ b/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>
   );
diff --git a/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx b/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx
index 0bcc8763..b9c3fbcc 100644
--- a/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx
+++ b/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,7 @@ 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>
diff --git a/src/app/hooks/use-bitcoin.ts b/src/app/hooks/use-bitcoin.ts
index e8b13a59..2632282d 100644
--- a/src/app/hooks/use-bitcoin.ts
+++ b/src/app/hooks/use-bitcoin.ts
@@ -1,34 +1,44 @@
-import { useDispatch } from "react-redux";
+import { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
 
-import { BitcoinError } from "@models/error-types";
-import { Vault } from "@models/vault";
-import { mintUnmintActions } from "@store/slices/mintunmint/mintunmint.actions";
-import { vaultActions } from "@store/slices/vault/vault.actions";
+import { BitcoinError } from '@models/error-types';
+import { Vault } from '@models/vault';
+import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
+import { vaultActions } from '@store/slices/vault/vault.actions';
 
-import { useEndpoints } from "./use-endpoints";
+import { useEndpoints } from './use-endpoints';
 
 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();
+  }, []);
 
   function createURLParams(bitcoinContractOffer: any) {
     if (!routerWalletURL) {
-      throw new BitcoinError("Router wallet URL is undefined");
+      throw new BitcoinError('Router wallet URL is undefined');
     }
 
     const counterPartyWalletDetails = {
       counterpartyWalletURL: routerWalletURL,
-      counterpartyWalletName: "DLC.Link",
+      counterpartyWalletName: 'DLC.Link',
       counterpartyWalletIcon:
-        "https://dlc-public-assets.s3.amazonaws.com/DLC.Link_logo_icon_color.svg",
+        'https://dlc-public-assets.s3.amazonaws.com/DLC.Link_logo_icon_color.svg',
     };
     const urlParams = {
       bitcoinContractOffer: JSON.stringify(bitcoinContractOffer),
-      bitcoinNetwork: JSON.stringify("regtest"),
+      bitcoinNetwork: JSON.stringify('regtest'),
       counterpartyWalletDetails: JSON.stringify(counterPartyWalletDetails),
     };
     return urlParams;
@@ -36,29 +46,24 @@ export function useBitcoin(): UseBitcoinReturnType {
 
   async function sendOfferForSigning(urlParams: any, vaultUUID: string) {
     try {
-      const response = await window.btc.request(
-        "acceptBitcoinContractOffer",
-        urlParams,
-      );
+      const response = await window.btc.request('acceptBitcoinContractOffer', urlParams);
       dispatch(
         vaultActions.setVaultToFunding({
           vaultUUID,
           fundingTX: response.result.txId,
-        }),
+        })
       );
       dispatch(mintUnmintActions.setMintStep(2));
     } catch (error: any) {
-      throw new BitcoinError(
-        `Could not send contract offer for signing: ${error.error.message}`,
-      );
+      throw new BitcoinError(`Could not send contract offer for signing: ${error.error.message}`);
     }
   }
 
   async function fetchBitcoinContractOfferFromCounterpartyWallet(vault: Vault) {
     try {
       const response = await fetch(`${routerWalletURL}/offer`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           uuid: vault.uuid,
         }),
@@ -70,20 +75,33 @@ export function useBitcoin(): UseBitcoinReturnType {
       return responseStream;
     } catch (error: any) {
       throw new BitcoinError(
-        `Could not fetch contract offer from counterparty wallet: ${error.message}`,
+        `Could not fetch contract offer from counterparty wallet: ${error.message}`
       );
     }
   }
 
   async function fetchBitcoinContractOfferAndSendToUserWallet(vault: Vault) {
-    const bitcoinContractOffer =
-      await fetchBitcoinContractOfferFromCounterpartyWallet(vault);
+    const bitcoinContractOffer = await fetchBitcoinContractOfferFromCounterpartyWallet(vault);
     if (!bitcoinContractOffer) return;
     const urlParams = createURLParams(bitcoinContractOffer);
     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,
   };
 }
diff --git a/src/app/hooks/use-ethereum.ts b/src/app/hooks/use-ethereum.ts
index a7ceca23..b775b9b4 100644
--- a/src/app/hooks/use-ethereum.ts
+++ b/src/app/hooks/use-ethereum.ts
@@ -20,6 +20,7 @@ export interface UseEthereumReturnType {
   dlcBTCContract: Contract | undefined;
   dlcBTCBalance: number | undefined;
   lockedBTCBalance: number | undefined;
+  totalSupply: number | undefined;
   requestEthereumAccount: (network: Network) => Promise<void>;
   getAllVaults: () => Promise<void>;
   getVault: (vaultUUID: string, vaultState: VaultState) => Promise<void>;
@@ -60,6 +61,14 @@ export function useEthereum(): UseEthereumReturnType {
   const [lockedBTCBalance, setLockedBTCBalance] = useState<number | undefined>(
     undefined,
   );
+  const [totalSupply, setTotalSupply] = useState<number | undefined>(undefined);
+
+  useEffect(() => {
+    const fetchTotalSupply = async () => {
+    await getTotalSupply();
+    }
+    fetchTotalSupply();
+  }, [network])
 
   useEffect(() => {
     if (!address || !network) return;
@@ -108,6 +117,35 @@ export function useEthereum(): UseEthereumReturnType {
     };
   }
 
+  async function getTotalSupply() {
+    const provider = ethers.providers.getDefaultProvider('https://testrpc.x1.tech')
+    const branchName = import.meta.env.VITE_ETHEREUM_DEPLOYMENT_BRANCH;
+    const contractVersion = import.meta.env.VITE_ETHEREUM_DEPLOYMENT_VERSION;
+    const deploymentPlanURL = `https://raw.githubusercontent.com/DLC-link/dlc-solidity/${branchName}/deploymentFiles/x1test/v${contractVersion}/DLCBTC.json`;
+
+    try {
+      const response = await fetch(deploymentPlanURL);
+      const contractData = await response.json();
+      const protocolContract = new ethers.Contract(
+        contractData.contract.address,
+        contractData.contract.abi,
+        provider
+      );
+      const totalSupply = await protocolContract.totalSupply();
+      setTotalSupply(customShiftValue(
+        parseInt(totalSupply),
+        8,
+        true,
+      ));
+    } catch (error) {
+      console.log('error', error)
+
+      throw new EthereumError(
+        `Could not fetch deployment info for ${'asdkasdkads'} on ${'asdasd'}`,
+      );
+    }}
+
+
   async function setupEthereumConfiguration(network: Network): Promise<void> {
     const ethereumProvider = await getEthereumProvider(network);
     if (!ethereumProvider) {
@@ -120,6 +158,7 @@ export function useEthereum(): UseEthereumReturnType {
   async function getEthereumProvider(network: Network) {
     try {
       const { ethereum } = window;
+
       const browserProvider = new ethers.providers.Web3Provider(ethereum);
       const signer = browserProvider.getSigner();
 
@@ -358,6 +397,7 @@ export function useEthereum(): UseEthereumReturnType {
     dlcBTCContract,
     dlcBTCBalance,
     lockedBTCBalance,
+    totalSupply,
     requestEthereumAccount,
     getAllVaults,
     getVault,

From 54b177dc4ec1d38e18c270d19386b34603aa02a1 Mon Sep 17 00:00:00 2001
From: Polybius93 <adam.daniel.puskas@polybius-studios.com>
Date: Tue, 5 Dec 2023 14:20:18 +0100
Subject: [PATCH 2/2] feat: added total supply fetching, temporarily removed
 protocol history

---
 .../lock-screen/components/protocol-fee.tsx   | 35 ++++----
 .../components/lock-screen/lock-screen.tsx    |  5 +-
 .../protocol-summary-stack.tsx                | 39 ++++----
 .../components/transaction-form-input.tsx     |  2 +-
 .../transaction-form/transaction-form.tsx     |  5 +-
 .../components/protocol-history-item.tsx      | 88 ++++++++++---------
 .../components/protocol-history.layout.tsx    | 32 +++----
 .../protocol-history/protocol-history.tsx     | 50 +++++------
 src/app/hooks/use-bitcoin.ts                  | 38 ++++----
 src/app/hooks/use-ethereum.ts                 | 29 +++---
 src/app/hooks/use-observer.ts                 | 15 ++--
 .../providers/blockchain-context-provider.tsx |  4 +-
 src/app/store/slices/modal/modal.slice.ts     |  1 -
 .../example-protocol-history-items.ts         | 20 ++---
 14 files changed, 186 insertions(+), 177 deletions(-)

diff --git a/src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx b/src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx
index d36f27ac..41759eae 100644
--- a/src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx
+++ b/src/app/components/mint-unmint/components/lock-screen/components/protocol-fee.tsx
@@ -1,18 +1,21 @@
-import { HStack, Text, VStack } from '@chakra-ui/react';
+import { HStack, Text, VStack } from "@chakra-ui/react";
 
 interface LockScreenProtocolFeeProps {
   assetAmount?: number;
   bitcoinPrice?: number;
 }
 
-function calculateProtocolFee(amount: number, protocolFeePercentage: number): string {
+function calculateProtocolFee(
+  amount: number,
+  protocolFeePercentage: number,
+): string {
   return (amount * protocolFeePercentage).toFixed(8);
 }
 
 function calculateProtocolFeeInUSD(
   assetAmount: number,
   usdPrice: number,
-  protocolFeePercentage: number
+  protocolFeePercentage: number,
 ): string {
   return (assetAmount * protocolFeePercentage * usdPrice).toFixed(8);
 }
@@ -23,26 +26,26 @@ export function LockScreenProtocolFee({
 }: LockScreenProtocolFeeProps): React.JSX.Element {
   return (
     <VStack
-      alignItems={'end'}
-      p={'15px'}
-      w={'100%'}
-      border={'1px solid'}
-      borderRadius={'md'}
-      borderColor={'border.cyan.01'}
+      alignItems={"end"}
+      p={"15px"}
+      w={"100%"}
+      border={"1px solid"}
+      borderRadius={"md"}
+      borderColor={"border.cyan.01"}
     >
-      <HStack justifyContent={'space-between'} w={'100%'}>
-        <Text color={'white.02'} fontSize={'sm'}>
+      <HStack justifyContent={"space-between"} w={"100%"}>
+        <Text color={"white.02"} fontSize={"sm"}>
           Protocol Fee
         </Text>
-        <Text color={'white.01'} fontSize={'sm'} fontWeight={800}>
+        <Text color={"white.01"} fontSize={"sm"} fontWeight={800}>
           {assetAmount && calculateProtocolFee(assetAmount, 0.0001)} BTC
-        </Text>{' '}
+        </Text>{" "}
       </HStack>
-      <Text color={'white.01'} fontSize={'sm'}>
-        ={' '}
+      <Text color={"white.01"} fontSize={"sm"}>
+        ={" "}
         {assetAmount &&
           bitcoinPrice &&
-          calculateProtocolFeeInUSD(assetAmount, bitcoinPrice, 0.0001)}{' '}
+          calculateProtocolFeeInUSD(assetAmount, bitcoinPrice, 0.0001)}{" "}
         $
       </Text>
     </VStack>
diff --git a/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx b/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx
index 09023b72..01fa4b25 100644
--- a/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx
+++ b/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} bitcoinPrice={bitcoin?.bitcoinPrice}/>
+      <LockScreenProtocolFee
+        assetAmount={readyVaults[0].collateral}
+        bitcoinPrice={bitcoin?.bitcoinPrice}
+      />
       <Button
         isLoading={isSubmitting}
         variant={"account"}
diff --git a/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx b/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx
index 6a36c9ba..64c0b64d 100644
--- a/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx
+++ b/src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx
@@ -1,14 +1,14 @@
 import { Skeleton, Text, VStack } from "@chakra-ui/react";
-import { ProtocolHistory } from "@components/protocol-history/protocol-history";
+// 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
+  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"}>
@@ -16,24 +16,27 @@ export function ProtocolSummaryStack(): React.JSX.Element {
           TVL
         </Text>
         <VStack alignItems={"start"} w={"100%"} spacing={"0px"}>
-        <Skeleton isLoaded={totalSupply !== undefined} w={'100%'}>
-          <Text
-            alignContent={"start"}
-            color={"white"}
-            fontSize={"3xl"}
-            fontWeight={"semibold"}
-          >
-            {totalSupply} dlcBTC
-          </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 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>
   );
 }
diff --git a/src/app/components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx b/src/app/components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx
index e1924ad1..2184c9f1 100644
--- a/src/app/components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx
+++ b/src/app/components/mint-unmint/components/transaction-form/components/transaction-form-input.tsx
@@ -20,7 +20,7 @@ interface TransactionFormInputProps {
 
 export function TransactionFormInput({
   values,
-  bitcoinPrice
+  bitcoinPrice,
 }: TransactionFormInputProps): React.JSX.Element {
   return (
     <VStack
diff --git a/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx b/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx
index b9c3fbcc..97624c51 100644
--- a/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx
+++ b/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx
@@ -65,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} bitcoinPrice={bitcoinPrice} />
+                <TransactionFormInput
+                  values={values}
+                  bitcoinPrice={bitcoinPrice}
+                />
                 <FormErrorMessage fontSize={"xs"}>
                   {errors.amount}
                 </FormErrorMessage>
diff --git a/src/app/components/protocol-history/components/protocol-history-item.tsx b/src/app/components/protocol-history/components/protocol-history-item.tsx
index 75bb72a5..ac7a45b9 100644
--- a/src/app/components/protocol-history/components/protocol-history-item.tsx
+++ b/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>
+//   );
+// }
diff --git a/src/app/components/protocol-history/components/protocol-history.layout.tsx b/src/app/components/protocol-history/components/protocol-history.layout.tsx
index 6704e130..ead3e6e2 100644
--- a/src/app/components/protocol-history/components/protocol-history.layout.tsx
+++ b/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>
+//   );
+// }
diff --git a/src/app/components/protocol-history/protocol-history.tsx b/src/app/components/protocol-history/protocol-history.tsx
index 77c41765..af44d646 100644
--- a/src/app/components/protocol-history/protocol-history.tsx
+++ b/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>
+//   );
+// }
diff --git a/src/app/hooks/use-bitcoin.ts b/src/app/hooks/use-bitcoin.ts
index 49cdc288..073ba7be 100644
--- a/src/app/hooks/use-bitcoin.ts
+++ b/src/app/hooks/use-bitcoin.ts
@@ -1,9 +1,9 @@
 import { useDispatch, useSelector } from "react-redux";
 
-import { BitcoinError } from '@models/error-types';
-import { Vault } from '@models/vault';
-import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
-import { vaultActions } from '@store/slices/vault/vault.actions';
+import { BitcoinError } from "@models/error-types";
+import { Vault } from "@models/vault";
+import { mintUnmintActions } from "@store/slices/mintunmint/mintunmint.actions";
+import { vaultActions } from "@store/slices/vault/vault.actions";
 
 import { useEndpoints } from "./use-endpoints";
 import { RootState } from "@store/index";
@@ -29,18 +29,18 @@ export function useBitcoin(): UseBitcoinReturnType {
 
   function createURLParams(bitcoinContractOffer: any) {
     if (!routerWalletURL) {
-      throw new BitcoinError('Router wallet URL is undefined');
+      throw new BitcoinError("Router wallet URL is undefined");
     }
 
     const counterPartyWalletDetails = {
       counterpartyWalletURL: routerWalletURL,
-      counterpartyWalletName: 'DLC.Link',
+      counterpartyWalletName: "DLC.Link",
       counterpartyWalletIcon:
-        'https://dlc-public-assets.s3.amazonaws.com/DLC.Link_logo_icon_color.svg',
+        "https://dlc-public-assets.s3.amazonaws.com/DLC.Link_logo_icon_color.svg",
     };
     const urlParams = {
       bitcoinContractOffer: JSON.stringify(bitcoinContractOffer),
-      bitcoinNetwork: JSON.stringify('regtest'),
+      bitcoinNetwork: JSON.stringify("regtest"),
       counterpartyWalletDetails: JSON.stringify(counterPartyWalletDetails),
     };
     return urlParams;
@@ -62,15 +62,17 @@ export function useBitcoin(): UseBitcoinReturnType {
       );
       dispatch(mintUnmintActions.setMintStep(2));
     } catch (error: any) {
-      throw new BitcoinError(`Could not send contract offer for signing: ${error.error.message}`);
+      throw new BitcoinError(
+        `Could not send contract offer for signing: ${error.error.message}`,
+      );
     }
   }
 
   async function fetchBitcoinContractOfferFromCounterpartyWallet(vault: Vault) {
     try {
       const response = await fetch(`${routerWalletURL}/offer`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           uuid: vault.uuid,
         }),
@@ -82,13 +84,14 @@ export function useBitcoin(): UseBitcoinReturnType {
       return responseStream;
     } catch (error: any) {
       throw new BitcoinError(
-        `Could not fetch contract offer from counterparty wallet: ${error.message}`
+        `Could not fetch contract offer from counterparty wallet: ${error.message}`,
       );
     }
   }
 
   async function fetchBitcoinContractOfferAndSendToUserWallet(vault: Vault) {
-    const bitcoinContractOffer = await fetchBitcoinContractOfferFromCounterpartyWallet(vault);
+    const bitcoinContractOffer =
+      await fetchBitcoinContractOfferFromCounterpartyWallet(vault);
     if (!bitcoinContractOffer) return;
     const urlParams = createURLParams(bitcoinContractOffer);
     await sendOfferForSigning(urlParams, vault.uuid);
@@ -96,9 +99,12 @@ export function useBitcoin(): UseBitcoinReturnType {
 
   async function fetchBitcoinPrice() {
     try {
-      const response = await fetch('https://api.coindesk.com/v1/bpi/currentprice.json', {
-        headers: { Accept: 'application/json' },
-      });
+      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);
diff --git a/src/app/hooks/use-ethereum.ts b/src/app/hooks/use-ethereum.ts
index a4e180d0..42900ada 100644
--- a/src/app/hooks/use-ethereum.ts
+++ b/src/app/hooks/use-ethereum.ts
@@ -76,10 +76,10 @@ export function useEthereum(): UseEthereumReturnType {
 
   useEffect(() => {
     const fetchTotalSupply = async () => {
-    await getTotalSupply();
-    }
+      await getTotalSupply();
+    };
     fetchTotalSupply();
-  }, [network])
+  }, [network]);
 
   useEffect(() => {
     if (!address || !network) return;
@@ -106,10 +106,12 @@ export function useEthereum(): UseEthereumReturnType {
   }
 
   async function getTotalSupply() {
-    const provider = ethers.providers.getDefaultProvider('https://testrpc.x1.tech')
+    const provider = ethers.providers.getDefaultProvider(
+      "https://ethereum-sepolia.publicnode.com/",
+    );
     const branchName = import.meta.env.VITE_ETHEREUM_DEPLOYMENT_BRANCH;
     const contractVersion = import.meta.env.VITE_ETHEREUM_DEPLOYMENT_VERSION;
-    const deploymentPlanURL = `https://raw.githubusercontent.com/DLC-link/dlc-solidity/${branchName}/deploymentFiles/x1test/v${contractVersion}/DLCBTC.json`;
+    const deploymentPlanURL = `https://raw.githubusercontent.com/DLC-link/dlc-solidity/${branchName}/deploymentFiles/sepolia/v${contractVersion}/DLCBTC.json`;
 
     try {
       const response = await fetch(deploymentPlanURL);
@@ -117,21 +119,14 @@ export function useEthereum(): UseEthereumReturnType {
       const protocolContract = new ethers.Contract(
         contractData.contract.address,
         contractData.contract.abi,
-        provider
+        provider,
       );
       const totalSupply = await protocolContract.totalSupply();
-      setTotalSupply(customShiftValue(
-        parseInt(totalSupply),
-        8,
-        true,
-      ));
+      setTotalSupply(customShiftValue(parseInt(totalSupply), 8, true));
     } catch (error) {
-      console.log('error', error)
-
-      throw new EthereumError(
-        `Could not fetch deployment info for ${'asdkasdkads'} on ${'asdasd'}`,
-      );
-    }}
+      throw new EthereumError(`Could not fetch total supply info: ${error}}`);
+    }
+  }
 
   async function addEthereumNetwork(
     newEthereumNetwork: EthereumNetwork,
diff --git a/src/app/hooks/use-observer.ts b/src/app/hooks/use-observer.ts
index f0a5f847..3cea3a1e 100644
--- a/src/app/hooks/use-observer.ts
+++ b/src/app/hooks/use-observer.ts
@@ -1,17 +1,14 @@
-import { Dispatch, useEffect } from "react";
-import { useSelector } from "react-redux";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
 
+import { VaultState } from "@models/vault";
 import { RootState } from "@store/index";
 import { mintUnmintActions } from "@store/slices/mintunmint/mintunmint.actions";
-import { AnyAction } from "redux";
-import { UseEthereumReturnType } from "./use-ethereum";
 import { modalActions } from "@store/slices/modal/modal.actions";
-import { VaultState } from "@models/vault";
+import { UseEthereumReturnType } from "./use-ethereum";
 
-export function useObserver(
-  ethereum: UseEthereumReturnType,
-  dispatch: Dispatch<AnyAction>,
-): void {
+export function useObserver(ethereum: UseEthereumReturnType): void {
+  const dispatch = useDispatch();
   const { address, network } = useSelector((state: RootState) => state.account);
   const {
     protocolContract,
diff --git a/src/app/providers/blockchain-context-provider.tsx b/src/app/providers/blockchain-context-provider.tsx
index 25ef08f2..3cf42318 100644
--- a/src/app/providers/blockchain-context-provider.tsx
+++ b/src/app/providers/blockchain-context-provider.tsx
@@ -1,5 +1,4 @@
 import React, { createContext } from "react";
-import { useDispatch } from "react-redux";
 
 import { UseBitcoinReturnType, useBitcoin } from "@hooks/use-bitcoin";
 import { UseEthereumReturnType, useEthereum } from "@hooks/use-ethereum";
@@ -17,11 +16,10 @@ export const BlockchainContext = createContext<BlockchainContextType | null>(
 export function BlockchainContextProvider({
   children,
 }: HasChildren): React.JSX.Element {
-  const dispatch = useDispatch();
   const ethereum = useEthereum();
   const bitcoin = useBitcoin();
 
-  useObserver(ethereum, dispatch);
+  useObserver(ethereum);
 
   return (
     <BlockchainContext.Provider value={{ ethereum, bitcoin }}>
diff --git a/src/app/store/slices/modal/modal.slice.ts b/src/app/store/slices/modal/modal.slice.ts
index f27da530..037d8f5d 100644
--- a/src/app/store/slices/modal/modal.slice.ts
+++ b/src/app/store/slices/modal/modal.slice.ts
@@ -18,7 +18,6 @@ export const modalSlice = createSlice({
       state.isSelectWalletModalOpen = !state.isSelectWalletModalOpen;
     },
     toggleSuccessfulFlowModalVisibility: (state, action) => {
-      console.log(action.payload);
       state.isSuccesfulFlowModalOpen = [
         !state.isSuccesfulFlowModalOpen[0],
         action.payload,
diff --git a/src/shared/examples/example-protocol-history-items.ts b/src/shared/examples/example-protocol-history-items.ts
index 3ccd24b7..33314ce0 100644
--- a/src/shared/examples/example-protocol-history-items.ts
+++ b/src/shared/examples/example-protocol-history-items.ts
@@ -1,10 +1,10 @@
-export const exampleProtocolHistoryItems = [
-  { id: "1", value: "25.00", uuid: "0x1234", date: "1 hour ago" },
-  { id: "2", value: "50.00", uuid: "0x1234", date: "2 hours ago" },
-  { id: "3", value: "75.00", uuid: "0x1234", date: "3 hours ago" },
-  { id: "4", value: "100.00", uuid: "0x1234", date: "4 hours ago" },
-  { id: "5", value: "125.00", uuid: "0x1234", date: "5 hours ago" },
-  { id: "6", value: "150.00", uuid: "0x1234", date: "6 hours ago" },
-  { id: "7", value: "175.00", uuid: "0x1234", date: "7 hours ago" },
-  { id: "8", value: "200.00", uuid: "0x1234", date: "8 hours ago" },
-];
+// export const exampleProtocolHistoryItems = [
+//   { id: "1", value: "25.00", uuid: "0x1234", date: "1 hour ago" },
+//   { id: "2", value: "50.00", uuid: "0x1234", date: "2 hours ago" },
+//   { id: "3", value: "75.00", uuid: "0x1234", date: "3 hours ago" },
+//   { id: "4", value: "100.00", uuid: "0x1234", date: "4 hours ago" },
+//   { id: "5", value: "125.00", uuid: "0x1234", date: "5 hours ago" },
+//   { id: "6", value: "150.00", uuid: "0x1234", date: "6 hours ago" },
+//   { id: "7", value: "175.00", uuid: "0x1234", date: "7 hours ago" },
+//   { id: "8", value: "200.00", uuid: "0x1234", date: "8 hours ago" },
+// ];