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" }, +// ];