Skip to content

Commit 7a77c59

Browse files
LuizAsFightLuizAsFight
committed
fix: popupss
1 parent 6235f6b commit 7a77c59

File tree

8 files changed

+209
-272
lines changed

8 files changed

+209
-272
lines changed

‎packages/app-portal/src/systems/Bridge/components/BridgeSteps/BridgeSteps.tsx

+44-77
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { cssObj } from '@fuel-ui/css';
2-
import { Box, Icon, Spinner, Text } from '@fuel-ui/react';
1+
import { Icon, Spinner } from '@fuel-ui/react';
2+
import { Box, Flex, Text, VStack } from '@fuels/ui';
3+
import { IconCheck } from '@tabler/icons-react';
34
import type { ReactNode } from 'react';
5+
import { tv } from 'tailwind-variants';
46

57
type Step = {
68
name: ReactNode;
@@ -15,96 +17,61 @@ type BridgeStepsProps = {
1517
};
1618

1719
export const BridgeSteps = ({ steps }: BridgeStepsProps) => {
20+
const classes = styles();
21+
1822
return (
19-
<Box.Stack css={styles.stack}>
23+
<VStack className={classes.stack()}>
2024
{steps?.map((step, index) => {
2125
return (
22-
<Box.Flex key={`${index}_${step.name?.toString()}`} css={styles.item}>
23-
<Box.Flex css={styles.action}>
24-
<Box
25-
className={step.isDone ? 'circleDone' : undefined}
26-
css={{
27-
...styles.circle,
28-
borderColor: step.isSelected ? '$intentsPrimary9' : undefined,
29-
}}
30-
>
26+
<Flex
27+
key={`${index}_${step.name?.toString()}`}
28+
className={classes.item()}
29+
data-done={step.isDone}
30+
data-selected={step.isSelected}
31+
data-loading={step.isLoading}
32+
>
33+
<Flex className={classes.action()}>
34+
<Box className={classes.circle()}>
3135
{step.isDone ? (
32-
<Icon icon="Check" size={12} css={styles.icon} />
36+
<IconCheck size={12} className={classes.icon()} />
3337
) : (
34-
<Text
35-
color={step.isSelected ? 'intentsBase12' : undefined}
36-
css={styles.number}
37-
fontSize="xs"
38-
>
39-
{index + 1}
40-
</Text>
38+
<Text className={classes.number()}>{index + 1}</Text>
4139
)}
4240
</Box>
43-
<Text fontSize="sm" color="intentsBase12" css={styles.name}>
44-
{step.name}
45-
</Text>
46-
</Box.Flex>
47-
<Box.Flex align="center" gap="$1">
41+
<Text className={classes.name()}>{step.name}</Text>
42+
</Flex>
43+
<Flex align="center">
4844
{step.isLoading && <Spinner size={14} />}
4945
<Text
50-
fontSize="sm"
5146
aria-label={`Step ${step.name?.toString()}: ${step.status}`}
47+
className={classes.status()}
5248
>
5349
{step.status}
5450
</Text>
55-
</Box.Flex>
56-
</Box.Flex>
51+
</Flex>
52+
</Flex>
5753
);
5854
})}
59-
</Box.Stack>
55+
</VStack>
6056
);
6157
};
6258

63-
const styles = {
64-
stack: cssObj({
65-
gap: '$0',
66-
minWidth: '344px',
67-
borderRadius: '$md',
68-
border: '1px solid $border',
69-
backgroundColor: '$inputBaseBg',
70-
}),
71-
item: cssObj({
72-
alignItems: 'center',
73-
justifyContent: 'space-between',
74-
px: '$3',
75-
py: '$2',
76-
77-
'& ~ &': {
78-
borderTop: '1px solid $border',
79-
},
80-
81-
'.circleDone': {
82-
backgroundColor: '$intentsPrimary9',
83-
border: '1px solid $intentsPrimary9',
84-
},
85-
}),
86-
action: cssObj({
87-
gap: '$2',
88-
alignItems: 'center',
89-
}),
90-
name: cssObj({
91-
lineHeight: '1.5rem',
92-
}),
93-
icon: cssObj({
94-
color: '$blackA12',
95-
}),
96-
number: cssObj({
97-
display: 'flex',
98-
justifyContent: 'center',
99-
fontSize: '10px',
100-
}),
101-
circle: cssObj({
102-
display: 'flex',
103-
justifyContent: 'center',
104-
alignItems: 'center',
105-
minWidth: '$4',
106-
height: '$4',
107-
border: '1px solid $intentsBase5',
108-
borderRadius: '$full',
109-
}),
110-
};
59+
const styles = tv({
60+
slots: {
61+
item: 'group flex justify-between px-3 py-2 [&_~_&]:border-t [&_~_&]:border-border',
62+
stack: 'gap-0 rounded-md border border-border bg-inputBaseBg',
63+
action: 'gap-2 items-center',
64+
name: 'leading-tight text-xs text-heading',
65+
status: 'text-xs text-muted',
66+
icon: 'text-gray-1',
67+
number: [
68+
'flex justify-center text-xs',
69+
'group-[&[data-selected=true]]:text-gray-11',
70+
],
71+
circle: [
72+
'flex justify-center items-center w-4 h-4 border rounded-full',
73+
'group-[&[data-selected=true]]:border-green-8',
74+
'group-[&[data-done=true]]:border-green-8 group-[&[data-done=true]]:bg-green-8',
75+
],
76+
},
77+
});

‎packages/app-portal/src/systems/Bridge/components/BridgeTxOverview/BridgeTxOverview.tsx

+45-59
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { cssObj } from '@fuel-ui/css';
2-
import { Box, FuelLogo, Icon, Link, Text } from '@fuel-ui/react';
1+
import { FuelLogo } from '@fuel-ui/react';
32
import type { Asset } from '@fuels/assets';
43
import type { BigNumberish } from 'fuels';
54
import { AssetLogo } from '~/systems/Assets/components/AssetLogo';
65
import { calculateDateDiff } from '~/systems/Core';
76

7+
import { Box, Flex, Link, Text, VStack } from '@fuels/ui';
8+
import { IconArrowRight } from '@tabler/icons-react';
9+
import { tv } from 'tailwind-variants';
810
import { InfoTextLoader } from './InfoTextLoader';
911

1012
type BridgeTxOverviewProps = {
@@ -28,84 +30,68 @@ export const BridgeTxOverview = ({
2830
amount,
2931
explorerLink,
3032
}: BridgeTxOverviewProps) => {
33+
const classes = styles();
34+
3135
return (
32-
<Box.Stack css={styles.stack}>
33-
<Box.Flex css={styles.txItem}>
34-
<Text css={styles.labelText}>ID</Text>
35-
<Link isExternal href={explorerLink} css={styles.linkText}>
36+
<VStack className={classes.stack()} gap="2">
37+
<Flex className={classes.txItem()}>
38+
<Text className={classes.labelText()}>ID</Text>
39+
<Link isExternal href={explorerLink} className={classes.linkText()}>
3640
<Box aria-label="Transaction ID">{transactionId.toString()}</Box>
3741
</Link>
38-
</Box.Flex>
39-
<Box.Flex css={styles.txItem}>
40-
<Text css={styles.labelText}>Age</Text>
41-
<Text css={styles.infoText}>
42+
</Flex>
43+
<Flex className={classes.txItem()}>
44+
<Text className={classes.labelText()}>Age</Text>
45+
<Text className={classes.infoText()}>
4246
{isLoading ? <InfoTextLoader /> : calculateDateDiff(date)}
4347
</Text>
44-
</Box.Flex>
45-
<Box.Flex css={styles.txItem}>
46-
<Text css={styles.labelText}>Direction</Text>
48+
</Flex>
49+
<Flex className={classes.txItem()}>
50+
<Text className={classes.labelText()}>Direction</Text>
4751
{isDeposit ? (
48-
<Box.Flex css={styles.directionInfo}>
49-
<Text css={styles.subtleText}>(Deposit)</Text>
52+
<Flex className={classes.directionInfo()}>
53+
<Text className={classes.subtleText()}>(Deposit)</Text>
5054
{ethAsset && <AssetLogo asset={ethAsset} alt={'Deposit'} />}
51-
<Icon icon="ArrowNarrowRight" />
55+
<IconArrowRight size={16} />
5256
<FuelLogo size={17} />
53-
</Box.Flex>
57+
</Flex>
5458
) : (
55-
<Box.Flex css={styles.directionInfo}>
56-
<Text css={styles.subtleText}>(Withdrawal)</Text>
59+
<Flex className={classes.directionInfo()}>
60+
<Text className={classes.subtleText()}>(Withdrawal)</Text>
5761
<FuelLogo size={17} />
58-
<Icon icon="ArrowNarrowRight" />
62+
<IconArrowRight size={16} />
5963
<AssetLogo asset={ethAsset} alt={'withdrawal'} />
60-
</Box.Flex>
64+
</Flex>
6165
)}
62-
</Box.Flex>
63-
<Box.Flex css={styles.txItem}>
64-
<Text css={styles.labelText}>Asset</Text>
65-
<Box.Flex css={styles.directionInfo}>
66+
</Flex>
67+
<Flex className={classes.txItem()}>
68+
<Text className={classes.labelText()}>Asset</Text>
69+
<Flex className={classes.directionInfo()}>
6670
{isLoading ? (
6771
<InfoTextLoader />
6872
) : (
6973
<>
7074
<AssetLogo asset={asset} alt={`Asset ${asset?.symbol}`} />
71-
<Text aria-label="Asset amount" css={styles.infoText}>
75+
<Text aria-label="Asset amount" className={classes.infoText()}>
7276
{amount}
7377
</Text>
74-
<Text css={styles.infoText}>{asset?.symbol}</Text>
78+
<Text className={classes.infoText()}>{asset?.symbol}</Text>
7579
</>
7680
)}
77-
</Box.Flex>
78-
</Box.Flex>
79-
</Box.Stack>
81+
</Flex>
82+
</Flex>
83+
</VStack>
8084
);
8185
};
8286

83-
const styles = {
84-
stack: cssObj({
85-
width: '100%',
86-
}),
87-
txItem: cssObj({
88-
flexWrap: 'wrap',
89-
justifyContent: 'space-between',
90-
}),
91-
labelText: cssObj({
92-
fontSize: '$sm',
93-
color: '$intentsBase11',
94-
}),
95-
subtleText: cssObj({
96-
fontSize: '$xs',
97-
color: '$intentsBase10',
98-
}),
99-
infoText: cssObj({
100-
fontSize: '$sm',
101-
color: '$intentsBase12',
102-
}),
103-
linkText: cssObj({
104-
fontSize: '$sm',
105-
color: '$intentsPrimary9',
106-
}),
107-
directionInfo: cssObj({
108-
gap: '$1',
109-
alignItems: 'center',
110-
}),
111-
};
87+
const styles = tv({
88+
slots: {
89+
stack: 'w-full',
90+
txItem: 'flex-wrap justify-between',
91+
labelText: 'text-xs text-intentsBase11',
92+
subtleText: 'text-[10px] leading-tight text-muted',
93+
infoText: 'text-xs text-heading',
94+
linkText: 'text-xs',
95+
directionInfo: 'gap-1 items-center',
96+
},
97+
});

‎packages/app-portal/src/systems/Chains/eth/containers/TxEthToFuelDialog.tsx

+31-41
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
import { cssObj } from '@fuel-ui/css';
2-
import { Box, Button, Dialog, Text } from '@fuel-ui/react';
31
import { useAsset } from '~/systems/Assets/hooks/useAsset';
42
import { BridgeSteps, BridgeTxOverview } from '~/systems/Bridge';
53
import { shortAddress } from '~/systems/Core';
64
import { useOverlay } from '~/systems/Overlay';
75

6+
import { Box, Button, Dialog, Text, VStack } from '@fuels/ui';
7+
import { tv } from 'tailwind-variants';
88
import { useTxEthToFuel } from '../hooks';
99

1010
export function TxEthToFuelDialog() {
11+
const classes = styles();
1112
const { asset: ethAsset } = useAsset();
1213
const { metadata } = useOverlay<{ txId: string }>();
1314
const {
@@ -27,54 +28,43 @@ export function TxEthToFuelDialog() {
2728
return (
2829
<>
2930
<Dialog.Close aria-label="Close Transaction Dialog" />
30-
<Dialog.Heading>
31+
<Dialog.Title>
3132
Deposit
32-
<Box css={styles.divider} />
33-
</Dialog.Heading>
34-
<Dialog.Description>
35-
<Box.Stack gap="$2">
36-
<Text color="intentsBase12">Status</Text>
33+
<Box className={classes.divider()} />
34+
</Dialog.Title>
35+
<VStack gap="3">
36+
<VStack gap="1">
37+
<Text>Status</Text>
3738
<BridgeSteps steps={steps} />
38-
<Box css={styles.border} />
39-
<BridgeTxOverview
40-
transactionId={shortAddress(metadata.txId)}
41-
date={date}
42-
isDeposit={true}
43-
asset={asset}
44-
isLoading={isLoadingReceipts}
45-
amount={amount}
46-
ethAsset={ethAsset}
47-
explorerLink={explorerLink}
48-
/>
49-
</Box.Stack>
50-
</Dialog.Description>
51-
{shouldShowConfirmButton && (
52-
<Dialog.Footer>
39+
</VStack>
40+
<Box className={classes.divider()} />
41+
<BridgeTxOverview
42+
transactionId={shortAddress(metadata.txId)}
43+
date={date}
44+
isDeposit={true}
45+
asset={asset}
46+
isLoading={isLoadingReceipts}
47+
amount={amount}
48+
ethAsset={ethAsset}
49+
explorerLink={explorerLink}
50+
/>
51+
{shouldShowConfirmButton && (
5352
<Button
54-
intent="primary"
55-
css={styles.actionButton}
53+
className={classes.actionButton()}
5654
isLoading={status?.isConfirmTransactionLoading}
5755
onClick={handlers.relayMessageToFuel}
5856
>
5957
Confirm Transaction
6058
</Button>
61-
</Dialog.Footer>
62-
)}
59+
)}
60+
</VStack>
6361
</>
6462
);
6563
}
6664

67-
const styles = {
68-
border: cssObj({
69-
my: '$4',
70-
borderBottom: '1px solid $border',
71-
}),
72-
divider: cssObj({
73-
h: '1px',
74-
bg: '$border',
75-
mt: '$5',
76-
}),
77-
actionButton: cssObj({
78-
width: '100%',
79-
}),
80-
};
65+
const styles = tv({
66+
slots: {
67+
divider: 'h-[2px] bg-border mt-2 w-full',
68+
actionButton: 'w-full',
69+
},
70+
});

0 commit comments

Comments
 (0)