Skip to content

Commit

Permalink
feat: wp
Browse files Browse the repository at this point in the history
  • Loading branch information
@BLuEScioN
BLuEScioN committed Jan 29, 2025
1 parent 648d46c commit b706da4
Show file tree
Hide file tree
Showing 10 changed files with 341 additions and 279 deletions.
40 changes: 14 additions & 26 deletions src/app/_components/NewNavBar/CurrencySetting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@
import { useAppDispatch } from '@/common/state/hooks';
import { Currency, setCurrency, useCurrency } from '@/common/state/slices/currency.slice';
import { Text } from '@/ui/Text';
import { Box, Flex, IconButton } from '@chakra-ui/react';
import { Box, Flex } from '@chakra-ui/react';
import { CurrencyBtc, CurrencyDollarSimple, CurrencyEur, CurrencyGbp } from '@phosphor-icons/react';

import { OptionPicker } from './OptionPicker';

function getCurrencyIcon(currency: Currency) {
return currency === Currency.USD ? (
<CurrencyDollarSimple />
Expand All @@ -22,7 +24,7 @@ export const CurrencySetting = () => {
const dispatch = useAppDispatch();
const selectedCurrency = useCurrency();
return (
<Flex justifyContent="space-between" gap={4}>
<Flex justifyContent="space-between" gap={8}>
<Box>
<Text color="textPrimary" fontSize="xs">
Currency
Expand All @@ -31,30 +33,16 @@ export const CurrencySetting = () => {
{selectedCurrency.toUpperCase()}
</Text>
</Box>
<Flex
border="1px solid"
borderColor="newBorderSecondary"
borderRadius="lg"
p={1}
gap={1}
alignItems="center"
>
{Object.values(Currency).map(currency => (
<IconButton
aria-label="Change currency"
onClick={() => dispatch(setCurrency(currency))}
borderRadius="md"
h={6}
w={8}
py={1}
px={2}
bg={currency === selectedCurrency ? 'surfaceInvert' : 'surfacePrimary'}
color={currency === selectedCurrency ? 'iconInvert' : 'iconSecondary'}
>
{getCurrencyIcon(currency)}
</IconButton>
))}
</Flex>
<OptionPicker
options={Object.values(Currency).map(currency => ({
id: currency,
label: currency.toUpperCase(),
value: currency,
icon: getCurrencyIcon(currency),
onSelect: () => dispatch(setCurrency(currency)),
}))}
defaultOptionId={selectedCurrency}
/>
</Flex>
);
};
4 changes: 2 additions & 2 deletions src/app/_components/NewNavBar/FeePopover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export const FeePopover = () => {
>
<PopoverTrigger>
<Flex
bg="navbar.menu.bg"
bg="surfacePrimary"
borderRadius="lg"
borderTopRadius="lg"
borderBottomRadius={open ? 'none' : 'lg'}
Expand All @@ -153,7 +153,7 @@ export const FeePopover = () => {
borderRadius="xl"
borderTopRightRadius="none"
border="none"
bg="navbar.menu.bg"
bg="surfacePrimary"
>
<Box p={4}>
<Tabs.Root onValueChange={({ value: id }) => {}} defaultValue={tabs[0].id}>
Expand Down
193 changes: 136 additions & 57 deletions src/app/_components/NewNavBar/NetworkSetting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,67 @@ import { buildUrl } from '@/common/utils/buildUrl';
import { Button } from '@/components/ui/button';
import { Link } from '@/ui/Link';
import { Text } from '@/ui/Text';
import { Flex, Icon, Stack } from '@chakra-ui/react';
import { Flex, Icon, IconButton, Stack } from '@chakra-ui/react';
import { Check, Trash } from '@phosphor-icons/react';
import { useMemo } from 'react';
import { useMemo, useState } from 'react';

const NetworkLabel = ({
network,
isActiveNetwork,
key,
const DeleteNetworkMessage = ({
onDelete,
onCancel,
}: {
network: Network;
isActiveNetwork: boolean;
key: string;
onDelete: () => void;
onCancel: () => void;
}) => {
return (
<Stack
p={3}
border="1px solid"
borderColor="var(--stacks-colors-status-red-400)"
borderRadius="md"
pointerEvents="auto"
cursor="default"
onClick={e => {
e.stopPropagation();
e.preventDefault();
}}
>
<Text fontSize="xs" fontWeight="medium" color="textPrimary">
Delete Network
</Text>
<Flex gap={2}>
<Button
onClick={e => {
e.stopPropagation();
e.preventDefault();
onDelete();
}}
bg="var(--stacks-colors-status-red-500)"
>
<Text fontSize="xs" fontWeight="medium" color="var(--stacks-colors-neutral-sand-50)">
Delete
</Text>
</Button>
<Button
onClick={e => {
e.stopPropagation();
e.preventDefault();
onCancel();
}}
bg="var(--stacks-colors-neutral-sand-500)"
>
<Text fontSize="xs" fontWeight="medium" color="var(--stacks-colors-neutral-sand-50)">
Cancel
</Text>
</Button>
</Flex>
</Stack>
);
};

const NetworkLabel = ({ network }: { network: Network }) => {
const { activeNetwork, removeCustomNetwork } = useGlobalContext();
const isActiveNetwork = activeNetwork.url === network.url;

const dispatch = useAppDispatch();
const isMainnet = network.url === DEFAULT_MAINNET_SERVER;
const isTestnet = network.url === DEFAULT_TESTNET_SERVER;
Expand All @@ -46,61 +94,96 @@ const NetworkLabel = ({
window.location.href = 'https://your-site.com/path?param=value';
};

const [isDeletingNetwork, setIsDeletingNetwork] = useState(false);

return (
<Link
href={isActiveNetwork || isDisabled ? undefined : buildUrl('/', network)}
onClick={onClick}
variant="noUnderline"
w="full"
pointerEvents={isActiveNetwork || isDisabled ? 'none' : 'auto'}
_hover={{
bg: isActiveNetwork ? 'transparent' : 'surfaceTertiary',
}}
bg={isDeletingNetwork ? 'surfaceTertiary' : 'transparent'}
borderColor="newBorderSecondary"
borderRadius="md"
key={network.url}
className="group"
>
<Flex
justifyContent="space-between"
alignItems="center"
<Stack
gap={3}
w="full"
key={key}
border={isActiveNetwork ? '1px solid' : 'none'}
borderColor="newBorderSecondary"
borderRadius="md"
px={3}
py={2}
_hover={{
bg: isActiveNetwork ? 'transparent' : 'surfaceTertiary',
}}
borderColor="newBorderSecondary"
borderRadius="md"
>
<Stack>
<Text fontSize="xs" fontWeight="medium" color="textPrimary">
{network.label}
</Text>
<Text fontSize="xs" color="textSecondary">
{network.url}
</Text>
</Stack>
{isActiveNetwork ? (
<Flex
bg="surfaceInvert"
px={2}
py={1}
h={6}
w={8}
borderRadius="md"
alignItems="center"
justifyContent="center"
>
<Icon h={4} w={4} color="iconInvert">
<Check />
</Icon>
</Flex>
) : isNetworkRemovable ? (
<Icon h={4} w={4} color="iconPrimary">
<Trash />
</Icon>
) : isDisabled ? (
<Text fontSize="xs" color="textTertiary">
Offline
</Text>
) : null}
</Flex>
<Flex justifyContent="space-between" alignItems="center" w="full">
<Stack gap={0}>
<Text
fontSize="xs"
fontWeight="medium"
color={
isDisabled ? 'textTertiary' : isActiveNetwork ? 'textPrimary' : 'textSecondary'
}
_groupHover={{
color: !isDisabled && !isActiveNetwork ? 'textPrimary' : 'textSecondary',
}}
>
{network.label}
</Text>
<Text fontSize="xs" color={isDisabled ? 'textTertiary' : 'textSecondary'}>
{network.url}
</Text>
</Stack>
{isActiveNetwork ? (
<Flex
bg="surfaceInvert"
px={2}
py={1}
h={6}
w={8}
borderRadius="md"
alignItems="center"
justifyContent="center"
>
<Icon h={4} w={4} color="iconInvert">
<Check />
</Icon>
</Flex>
) : isNetworkRemovable ? (
<IconButton
h={4}
w={4}
color="iconPrimary"
onClick={e => {
e.stopPropagation();
e.preventDefault();
setIsDeletingNetwork(true);
}}
bg={'transparent'}
>
<Trash />
</IconButton>
) : isDisabled ? (
<Text fontSize="xs" color="textTertiary">
Offline
</Text>
) : null}
</Flex>
{isDeletingNetwork && (
<DeleteNetworkMessage
onDelete={() => {
removeCustomNetwork(network);
setIsDeletingNetwork(false);
}}
onCancel={() => setIsDeletingNetwork(false)}
/>
)}
</Stack>
</Link>
);
};
Expand All @@ -109,16 +192,12 @@ export const NetworkSetting = () => {
// const networks = useNetworks();
// const activeNetwork = useActiveNetwork();

const { networks, activeNetworkKey } = useGlobalContext();
const { networks } = useGlobalContext();
return (
<Stack gap={4}>
<Stack gap={1.5} w="full">
{Object.entries(networks).map(([url, network]) => (
<NetworkLabel
key={network.url}
network={network}
isActiveNetwork={network.url === activeNetworkKey}
/>
<NetworkLabel key={network.url} network={network} />
))}
</Stack>
<Button
Expand Down
Loading

0 comments on commit b706da4

Please sign in to comment.