status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-18 06:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(currency-dropdown): show currency

Browse Source
This commit is contained in:
RadoslavDimchev 2024-02-28 23:59:41 +02:00 committed by Emil Ivanichkov
parent 7113dd6f1c
commit e8bb940d6c
1 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/General/CurrencyDropdown.tsx
View File

@ -1,13 +1,20 @@
import { useState } from 'react'
import { Button, DropdownMenu } from '@status-im/components'
import { useDispatch } from 'react-redux'
import { Button, DropdownMenu, Text } from '@status-im/components'
import { useDispatch, useSelector } from 'react-redux'
import { XStack, YStack } from 'tamagui'
import { CURRENCIES } from '../../constants'
import ChevronIcon from './ChevronIcon'
import { RootState } from '../../redux/store'
const CurrencyDropdown = () => {
type CurrencyDropdownProps = {
totalPrice: number
}
const CurrencyDropdown = ({ totalPrice }: CurrencyDropdownProps) => {
const [isOpen, setIsOpen] = useState(false)
const dispatch = useDispatch()
const currency = useSelector((state: RootState) => state.currency)
const changeIsOpenHandler = (isOpen: boolean) => {
setIsOpen(isOpen)
@ -18,22 +25,32 @@ const CurrencyDropdown = () => {
}
return (
<DropdownMenu onOpenChange={changeIsOpenHandler}>
<Button
variant="ghost"
size={24}
icon={<ChevronIcon isOpen={isOpen} />}
/>
<DropdownMenu.Content width={63} side="bottom" zIndex={999}>
{Object.keys(CURRENCIES).map(currency => (
<DropdownMenu.Item
key={currency}
label={currency}
onSelect={() => changeCurrencyHandler(currency)}
<YStack space={'$2'}>
<XStack style={{ justifyContent: 'space-between' }}>
<Text size={15} weight={'semibold'}>
{currency}
</Text>
<DropdownMenu onOpenChange={changeIsOpenHandler}>
<Button
variant="ghost"
size={24}
icon={<ChevronIcon isOpen={isOpen} />}
/>
))}
</DropdownMenu.Content>
</DropdownMenu>
<DropdownMenu.Content width={63} side="bottom" zIndex={999}>
{Object.keys(CURRENCIES).map(currency => (
<DropdownMenu.Item
key={currency}
label={currency}
onSelect={() => changeCurrencyHandler(currency)}
/>
))}
</DropdownMenu.Content>
</DropdownMenu>
</XStack>
<Text size={27} weight={'semibold'}>
{totalPrice.toFixed(2)} {currency}
</Text>
</YStack>
)
}