-
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: add garden swap functionality and ui components
- Loading branch information
1 parent
ee2bc04
commit be7d9e2
Showing
29 changed files
with
5,596 additions
and
328 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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 |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { HStack, Input, Text, VStack } from '@chakra-ui/react'; | ||
| import { Asset } from '@gardenfi/orderbook'; | ||
|
|
||
| import { SwapTokenLabel } from './swap-token-label'; | ||
|
|
||
| interface SwapAmountCardProps { | ||
| direction: string; | ||
| asset: Asset; | ||
| amount?: string; | ||
| amountInUSD?: string; | ||
| setAmount?: (amount: string) => void; | ||
| balance?: number; | ||
| transactionGasFee?: number; | ||
| } | ||
|
|
||
| const assetDetails = { | ||
| iBTC: { | ||
| assetColor: 'purple.01', | ||
| assetSymbol: 'iBTC', | ||
| assetLogo: '/images/logos/ibtc-logo.svg', | ||
| }, | ||
| BTC: { | ||
| assetColor: 'orange.01', | ||
| assetSymbol: 'BTC', | ||
| assetLogo: '/images/logos/bitcoin-logo.svg', | ||
| }, | ||
| }; | ||
|
|
||
| export function SwapAmountCard({ | ||
| direction, | ||
| amount, | ||
| asset, | ||
| amountInUSD, | ||
| setAmount, | ||
| }: SwapAmountCardProps): React.JSX.Element | null { | ||
| const isBTC = asset.symbol === 'BTC'; | ||
| const { assetColor, assetSymbol, assetLogo } = assetDetails[isBTC ? 'BTC' : 'iBTC']; | ||
|
|
||
| return ( | ||
| <VStack | ||
| p={'15px'} | ||
| w={'100%'} | ||
| bg={'background.container.02'} | ||
| borderRadius={'md'} | ||
| border={'1px solid'} | ||
| spacing={'15px'} | ||
| borderColor={assetColor} | ||
| alignItems={'flex-start'} | ||
| boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'} | ||
| > | ||
| <Text color={'white'} fontWeight={'600'}> | ||
| {direction} | ||
| </Text> | ||
| <VStack | ||
| p={'15px'} | ||
| w={'100%'} | ||
| bg={'background.content.02'} | ||
| borderRadius={'md'} | ||
| border={'1px solid'} | ||
| spacing={'15px'} | ||
| borderColor={'white.03'} | ||
| alignItems={'flex-start'} | ||
| boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'} | ||
| > | ||
| <HStack w={'100%'} justifyContent={'space-between'}> | ||
| {direction === 'From' ? ( | ||
| <Input | ||
| autoFocus | ||
| w={'175px'} | ||
| value={amount} | ||
| onChange={e => setAmount?.(e.target.value)} | ||
| borderColor={'white.01'} | ||
| color={'white.01'} | ||
| focusBorderColor={'rgba(50, 201, 247, 1)'} // accent.lightBlue.01 | ||
| /> | ||
| ) : ( | ||
| <Text | ||
| color={'white'} | ||
| fontWeight={'800'} | ||
| fontSize={'x-large'} | ||
| textShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'} | ||
| > | ||
| {amount} | ||
| </Text> | ||
| )} | ||
| <SwapTokenLabel tokenImage={assetLogo} tokenDisplay={assetSymbol} /> | ||
| </HStack> | ||
| <HStack justifyContent={'space-between'} width={'100%'}> | ||
| <Text color={'white.03'} fontSize={'sm'}> | ||
| {amountInUSD} USD | ||
| </Text> | ||
| </HStack> | ||
| </VStack> | ||
| </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 |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { Button } from '@chakra-ui/react'; | ||
|
|
||
| interface SwapButtonProps { | ||
| isDisabled?: boolean; | ||
| onClick: () => void; | ||
| } | ||
|
|
||
| export function SwapButton({ onClick, isDisabled }: SwapButtonProps): React.JSX.Element { | ||
| return ( | ||
| <Button | ||
| isDisabled={isDisabled} | ||
| onClick={onClick} | ||
| w={'100%'} | ||
| boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'} | ||
| > | ||
| Swap | ||
| </Button> | ||
| ); | ||
| } |
47 changes: 47 additions & 0 deletions
47
src/app/components/swap/components/swap-extra-details-card.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 |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| // import { HStack, Text, VStack } from '@chakra-ui/react'; | ||
|
|
||
| // interface SwapExtraDetailsCardProps { | ||
| // gasFee: number; | ||
| // } | ||
|
|
||
| // export function SwapExtraDetailsCard({ gasFee }: SwapExtraDetailsCardProps): React.JSX.Element { | ||
| // return ( | ||
| // <VStack | ||
| // p={'15px'} | ||
| // w={'100%'} | ||
| // bg={'background.container.02'} | ||
| // borderRadius={'md'} | ||
| // border={'1px dashed'} | ||
| // spacing={'15px'} | ||
| // borderColor={'white.02'} | ||
| // alignItems={'flex-start'} | ||
| // > | ||
| // <HStack w={'100%'} justifyContent={'space-between'}> | ||
| // <Text color={'white.02'} fontSize={'sm'}> | ||
| // Gas Fee | ||
| // </Text> | ||
| // <Text color={'white.02'} fontSize={'sm'} fontWeight={600}> | ||
| // {gasFee} | ||
| // </Text> | ||
| // </HStack> | ||
| // <HStack w={'100%'} justifyContent={'space-between'}> | ||
| // <Text color={'white.02'} fontSize={'sm'}> | ||
| // Rate | ||
| // </Text> | ||
| // <Text color={'white.02'} fontSize={'sm'} fontWeight={600}> | ||
| // 1 BTC = 1 dlcBTC | ||
| // </Text> | ||
| // </HStack> | ||
| // <HStack w={'100%'} justifyContent={'space-between'}> | ||
| // <Text color={'white.02'} fontSize={'sm'}> | ||
| // Slippage Tolerance | ||
| // </Text> | ||
| // <Text color={'white.02'} fontSize={'sm'} fontWeight={600}> | ||
| // Auto | ||
| // </Text> | ||
| // </HStack> | ||
| // </VStack> | ||
| // ); | ||
| // } | ||
|
|
||
| // TODO: Add back this component |
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 |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { HStack, Text } from '@chakra-ui/react'; | ||
|
|
||
| // import { SwapNetworksMenu } from './swap-networks-menu'; | ||
|
|
||
| export function SwapHeader(): React.JSX.Element { | ||
| return ( | ||
| <HStack w={'100%'} justifyContent={'space-between'}> | ||
| <Text color={'white'} fontSize={'xx-large'} fontWeight={'600'}> | ||
| Swap | ||
| </Text> | ||
| <HStack> | ||
| {/* <SwapNetworksMenu isMenuOpen={false} setIsMenuOpen={() => {}} /> */} | ||
| {/* <SwapSettingsMenu isMenuOpen={false} setIsMenuOpen={() => {}} /> */} | ||
| </HStack> | ||
| </HStack> | ||
| ); | ||
| } |
Oops, something went wrong.