Skip to content

Commit

Permalink
feat: added total supply fetching, temporarily removed protocol history
Browse files Browse the repository at this point in the history
  • Loading branch information
Polybius93 committed Dec 5, 2023
1 parent e63740b commit 9f86d54
Show file tree
Hide file tree
Showing 13 changed files with 149 additions and 140 deletions.
Original file line number Diff line number Diff line change
@@ -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);
}
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,33 @@ import { BlockchainContext } from "../../../../providers/blockchain-context-prov
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"}>
<Text alignContent={"start"} color={"white"} fontSize={"lg"}>
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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ interface TransactionFormInputProps {

export function TransactionFormInput({
values,
bitcoinPrice
bitcoinPrice,
}: TransactionFormInputProps): React.JSX.Element {
return (
<VStack
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
// );
// }
12 changes: 6 additions & 6 deletions src/app/components/protocol-history/protocol-history.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
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 { ProtocolHistoryItem } from "./components/protocol-history-item";
import { ProtocolHistoryLayout } from "./components/protocol-history.layout";
import { scrollBarCSS } from "../../../styles/css-styles";
// import { scrollBarCSS } from "../../../styles/css-styles";

export function ProtocolHistory(): React.JSX.Element {
return (
<ProtocolHistoryLayout>
<Text alignContent={"start"} color={"white.01"} fontSize={"lg"}>
{/* <Text alignContent={"start"} color={"white.01"} fontSize={"lg"}>
Protocol History
</Text>
<VStack
Expand All @@ -22,7 +22,7 @@ export function ProtocolHistory(): React.JSX.Element {
{exampleProtocolHistoryItems.map((item) => (
<ProtocolHistoryItem key={item.id} {...item} />
))}
</VStack>
</VStack> */}
</ProtocolHistoryLayout>
);
}
38 changes: 22 additions & 16 deletions src/app/hooks/use-bitcoin.ts
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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;
Expand All @@ -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,
}),
Expand All @@ -82,23 +84,27 @@ 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 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);
Expand Down
Loading

0 comments on commit 9f86d54

Please sign in to comment.