From 781f10fbe1a704a17054fd80228d40007edca12e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Mon, 4 Mar 2024 15:01:32 -0400 Subject: [PATCH 1/9] fix: remove unused css --- .../src/systems/Chains/fuel/containers/TxFuelToEthDialog.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/app-portal/src/systems/Chains/fuel/containers/TxFuelToEthDialog.tsx b/packages/app-portal/src/systems/Chains/fuel/containers/TxFuelToEthDialog.tsx index 41c8ec87c..a2495a03b 100644 --- a/packages/app-portal/src/systems/Chains/fuel/containers/TxFuelToEthDialog.tsx +++ b/packages/app-portal/src/systems/Chains/fuel/containers/TxFuelToEthDialog.tsx @@ -37,7 +37,7 @@ export function TxFuelToEthDialog() { return ( - + Withdraw @@ -80,7 +80,6 @@ export function TxFuelToEthDialog() { const styles = tv({ slots: { - divider: 'h-[2px] bg-border mt-2 w-full', actionButton: 'w-full', }, }); From 0f83af170e11e4b3703c4e38ae9b319d6f0a06e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Mon, 4 Mar 2024 15:06:27 -0400 Subject: [PATCH 2/9] fix: improve spinner gap --- .../Bridge/components/BridgeSteps/BridgeSteps.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/app-portal/src/systems/Bridge/components/BridgeSteps/BridgeSteps.tsx b/packages/app-portal/src/systems/Bridge/components/BridgeSteps/BridgeSteps.tsx index d6981385b..6d03def1d 100644 --- a/packages/app-portal/src/systems/Bridge/components/BridgeSteps/BridgeSteps.tsx +++ b/packages/app-portal/src/systems/Bridge/components/BridgeSteps/BridgeSteps.tsx @@ -1,10 +1,10 @@ -import { Box, Flex, Spinner, Text, VStack } from '@fuels/ui'; +import { Box, Flex, HStack, Spinner, Text, VStack } from '@fuels/ui'; import { IconCheck } from '@tabler/icons-react'; import type { ReactNode } from 'react'; import { tv } from 'tailwind-variants'; type Step = { - name: ReactNode; + name: string; status: ReactNode; isLoading?: boolean; isDone?: boolean; @@ -23,7 +23,7 @@ export const BridgeSteps = ({ steps }: BridgeStepsProps) => { {steps?.map((step, index) => { return ( { {step.name} - + {step.isLoading && } { > {step.status} - + ); })} From 0fc46c1759dd04991a300d5c08ec54d7c8c9c092 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Mon, 4 Mar 2024 15:31:06 -0400 Subject: [PATCH 3/9] fix: add more spacing between items on tx dialog --- .../systems/Bridge/components/BridgeSteps/BridgeSteps.tsx | 8 ++++---- .../components/BridgeTxOverview/BridgeTxOverview.tsx | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/app-portal/src/systems/Bridge/components/BridgeSteps/BridgeSteps.tsx b/packages/app-portal/src/systems/Bridge/components/BridgeSteps/BridgeSteps.tsx index 6d03def1d..9617c107f 100644 --- a/packages/app-portal/src/systems/Bridge/components/BridgeSteps/BridgeSteps.tsx +++ b/packages/app-portal/src/systems/Bridge/components/BridgeSteps/BridgeSteps.tsx @@ -32,7 +32,7 @@ export const BridgeSteps = ({ steps }: BridgeStepsProps) => { {step.isDone ? ( - + ) : ( {index + 1} )} @@ -57,14 +57,14 @@ export const BridgeSteps = ({ steps }: BridgeStepsProps) => { const styles = tv({ slots: { - item: 'group flex justify-between px-3 py-2 [&_~_&]:border-t [&_~_&]:border-border', + item: 'group flex justify-between p-3 [&_~_&]:border-t [&_~_&]:border-border', stack: 'gap-0 rounded-md border border-border bg-inputBaseBg', action: 'gap-2 items-center', name: 'leading-tight text-xs text-heading', status: 'text-xs text-muted', - icon: 'text-gray-1', + icon: 'text-white', number: [ - 'flex justify-center text-xs', + 'flex justify-center text-[9px]', 'group-[&[data-selected=true]]:text-gray-11', ], circle: [ diff --git a/packages/app-portal/src/systems/Bridge/components/BridgeTxOverview/BridgeTxOverview.tsx b/packages/app-portal/src/systems/Bridge/components/BridgeTxOverview/BridgeTxOverview.tsx index 7da2fc6f5..c14ba0c0f 100644 --- a/packages/app-portal/src/systems/Bridge/components/BridgeTxOverview/BridgeTxOverview.tsx +++ b/packages/app-portal/src/systems/Bridge/components/BridgeTxOverview/BridgeTxOverview.tsx @@ -101,10 +101,10 @@ export const BridgeTxOverview = ({ const styles = tv({ slots: { - stack: 'w-full', + stack: 'w-full mt-2', txItem: 'flex-wrap justify-between', labelText: 'text-xs text-intentsBase11', - subtleText: 'text-[10px] leading-tight text-muted', + subtleText: 'text-xs leading-tight text-muted', infoText: 'text-xs text-heading', linkText: 'text-xs', directionInfo: 'gap-1 items-center', From 921f97f75b62a87b845952cf5836808984fcbe53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Mon, 4 Mar 2024 17:01:17 -0400 Subject: [PATCH 4/9] fix: reduce txn page size --- packages/app-portal/src/systems/Bridge/hooks/useBridgeTxs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app-portal/src/systems/Bridge/hooks/useBridgeTxs.tsx b/packages/app-portal/src/systems/Bridge/hooks/useBridgeTxs.tsx index bb2060734..b7be0e197 100644 --- a/packages/app-portal/src/systems/Bridge/hooks/useBridgeTxs.tsx +++ b/packages/app-portal/src/systems/Bridge/hooks/useBridgeTxs.tsx @@ -7,7 +7,7 @@ import { import type { BridgeTxsMachineState } from '../machines'; -const MAX_BY_PAGE = 15; +const MAX_BY_PAGE = 5; const selectors = { bridgeTxs: (state: BridgeTxsMachineState) => { From 36e942461ee82ef5503109c0903dad19f9004b90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Mon, 4 Mar 2024 17:01:36 -0400 Subject: [PATCH 5/9] fix: adjust transaction general loader spacing --- .../components/BridgeTxItemsLoading/BridgeTxItemsLoading.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/app-portal/src/systems/Bridge/components/BridgeTxItemsLoading/BridgeTxItemsLoading.tsx b/packages/app-portal/src/systems/Bridge/components/BridgeTxItemsLoading/BridgeTxItemsLoading.tsx index 218225413..273ef73b5 100644 --- a/packages/app-portal/src/systems/Bridge/components/BridgeTxItemsLoading/BridgeTxItemsLoading.tsx +++ b/packages/app-portal/src/systems/Bridge/components/BridgeTxItemsLoading/BridgeTxItemsLoading.tsx @@ -2,7 +2,9 @@ import { LoadingBox, VStack } from '@fuels/ui'; export const BridgeTxItemsLoading = () => { return ( - + + + From 132bfa5ce1c8a6f4a9b7dc8da6ba03f66247e4d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Mon, 4 Mar 2024 17:46:43 -0400 Subject: [PATCH 6/9] fix: show more width and card height --- .../src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx | 2 +- packages/app-portal/src/systems/Bridge/pages/BridgeTxList.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx b/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx index 0f16afacd..4e0b80d51 100644 --- a/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx +++ b/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx @@ -76,7 +76,7 @@ export const BridgeTxItem = ({ const styles = tv({ slots: { networks: 'gap-1', - cardItem: 'flex flex-row min-h-[24px] gap-6 items-center', + cardItem: 'flex flex-row min-h-[58px] gap-6 items-center', statusTime: [ 'flex-1 justify-between', 'mobile:max-tablet:flex-col-reverse mobile:max-tablet:flex-wrap', diff --git a/packages/app-portal/src/systems/Bridge/pages/BridgeTxList.tsx b/packages/app-portal/src/systems/Bridge/pages/BridgeTxList.tsx index 3d6e6d385..fe87a4ff2 100644 --- a/packages/app-portal/src/systems/Bridge/pages/BridgeTxList.tsx +++ b/packages/app-portal/src/systems/Bridge/pages/BridgeTxList.tsx @@ -95,6 +95,6 @@ export const BridgeTxList = () => { const styles = tv({ slots: { cardList: 'cursor-pointer select-none :hover:bg-muted', // was intentsBase3 - buttonShowMore: 'mt-2', + buttonShowMore: 'mt-2 w-full', }, }); From 56405d46378c58b872e4f8f8fc083e6d63a6f850 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Mon, 4 Mar 2024 17:54:26 -0400 Subject: [PATCH 7/9] fix: txn slots alignments --- .../Bridge/components/BridgeTxItem/BridgeTxItem.tsx | 2 +- .../ActionRequiredBadge/ActionRequiredBadge.tsx | 12 +++++------- .../Chains/fuel/containers/TxListItemFuelToEth.tsx | 5 +++-- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx b/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx index 4e0b80d51..0922dad2d 100644 --- a/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx +++ b/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx @@ -78,7 +78,7 @@ const styles = tv({ networks: 'gap-1', cardItem: 'flex flex-row min-h-[58px] gap-6 items-center', statusTime: [ - 'flex-1 justify-between', + 'flex-1 justify-between items-center', 'mobile:max-tablet:flex-col-reverse mobile:max-tablet:flex-wrap', 'mobile:max-tablet:items-end mobile:max-tablet:gap-1', ], diff --git a/packages/app-portal/src/systems/Chains/fuel/components/ActionRequiredBadge/ActionRequiredBadge.tsx b/packages/app-portal/src/systems/Chains/fuel/components/ActionRequiredBadge/ActionRequiredBadge.tsx index 41b39cafa..4831f97c0 100644 --- a/packages/app-portal/src/systems/Chains/fuel/components/ActionRequiredBadge/ActionRequiredBadge.tsx +++ b/packages/app-portal/src/systems/Chains/fuel/components/ActionRequiredBadge/ActionRequiredBadge.tsx @@ -1,20 +1,18 @@ -import { Badge, Text } from '@fuels/ui'; +import { Badge } from '@fuels/ui'; import { tv } from 'tailwind-variants'; export const ActionRequiredBadge = () => { const classes = styles(); return ( - - - Action Required - - + + Action Required + ); }; export const styles = tv({ slots: { - actionBadge: 'text-[13px] font-medium leading-1 normal-case', + actionBadge: 'text-[13px] font-medium leading-1 normal-case cursor-pointer', }, }); diff --git a/packages/app-portal/src/systems/Chains/fuel/containers/TxListItemFuelToEth.tsx b/packages/app-portal/src/systems/Chains/fuel/containers/TxListItemFuelToEth.tsx index 25b15fdb4..e2a371671 100644 --- a/packages/app-portal/src/systems/Chains/fuel/containers/TxListItemFuelToEth.tsx +++ b/packages/app-portal/src/systems/Chains/fuel/containers/TxListItemFuelToEth.tsx @@ -21,8 +21,9 @@ export const TxListItemFuelToEth = ({ txHash }: TxListItemFuelToEthProps) => { const bridgeTxStatus = steps?.find(({ isSelected }) => !!isSelected); function getStatusComponent() { - if (status?.isReceiveDone) + if (status?.isReceiveDone) { return Settled; + } if (bridgeTxStatus?.isLoading) { return ( @@ -37,7 +38,7 @@ export const TxListItemFuelToEth = ({ txHash }: TxListItemFuelToEthProps) => { return ; } - return ''; + return null; } return ( From fc9bd8e44d731e750b5315a7d20ce4195dfe3178 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Tue, 5 Mar 2024 12:47:43 -0400 Subject: [PATCH 8/9] fix: adjust action required spacing --- .../systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx | 2 +- .../components/ActionRequiredBadge/ActionRequiredBadge.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx b/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx index 0922dad2d..e1c57acbc 100644 --- a/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx +++ b/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx @@ -76,7 +76,7 @@ export const BridgeTxItem = ({ const styles = tv({ slots: { networks: 'gap-1', - cardItem: 'flex flex-row min-h-[58px] gap-6 items-center', + cardItem: 'flex flex-row min-h-[58px] px-5 gap-1 items-center', statusTime: [ 'flex-1 justify-between items-center', 'mobile:max-tablet:flex-col-reverse mobile:max-tablet:flex-wrap', diff --git a/packages/app-portal/src/systems/Chains/fuel/components/ActionRequiredBadge/ActionRequiredBadge.tsx b/packages/app-portal/src/systems/Chains/fuel/components/ActionRequiredBadge/ActionRequiredBadge.tsx index 4831f97c0..bf7df6247 100644 --- a/packages/app-portal/src/systems/Chains/fuel/components/ActionRequiredBadge/ActionRequiredBadge.tsx +++ b/packages/app-portal/src/systems/Chains/fuel/components/ActionRequiredBadge/ActionRequiredBadge.tsx @@ -13,6 +13,7 @@ export const ActionRequiredBadge = () => { export const styles = tv({ slots: { - actionBadge: 'text-[13px] font-medium leading-1 normal-case cursor-pointer', + actionBadge: + 'text-[11px] px-2 font-medium leading-1 normal-case cursor-pointer', }, }); From b6cf12010abcadbceb4410402a3cc877cd3a5515 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Tue, 5 Mar 2024 15:21:36 -0400 Subject: [PATCH 9/9] fix: align direction arrow --- .../src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx b/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx index e1c57acbc..3234e6e24 100644 --- a/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx +++ b/packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx @@ -75,7 +75,7 @@ export const BridgeTxItem = ({ const styles = tv({ slots: { - networks: 'gap-1', + networks: 'gap-1 items-center', cardItem: 'flex flex-row min-h-[58px] px-5 gap-1 items-center', statusTime: [ 'flex-1 justify-between items-center',