-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: added total supply fetching, temporarily removed protocol history
- Loading branch information
1 parent
e63740b
commit 54b177d
Showing
14 changed files
with
186 additions
and
177 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 21 additions & 18 deletions
39
src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,42 @@ | ||
| 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"}> | ||
| <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> | ||
| <ProtocolHistory /> | ||
| {/* <ProtocolHistory /> */} | ||
| </ProtocolSummaryStackLayout> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
88 changes: 45 additions & 43 deletions
88
src/app/components/protocol-history/components/protocol-history-item.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| // ); | ||
| // } |
32 changes: 16 additions & 16 deletions
32
src/app/components/protocol-history/components/protocol-history.layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| // ); | ||
| // } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| // ); | ||
| // } |
Oops, something went wrong.