feat: remove custom styles to rely more on design system

packages/app/src/systems/Accounts/components/AccountConnectionInput/AccountConnectionInput.tsx

@@ -2,7 +2,7 @@ import { cssObj } from '@fuel-ui/css';
 import { Card, Text, Image, Button, Box, IconButton } from '@fuel-ui/react';
 import type { ReactNode } from 'react';
 
-import { coreStyles, shortAddress } from '~/systems/Core';
+import { shortAddress } from '~/systems/Core';
 
 type AccountConnectionInputProps = {
  networkName?: string;
@@ -28,7 +28,7 @@ export const AccountConnectionInput = ({
  onDisconnect,
 }: AccountConnectionInputProps) => {
  return (
- <Card css={{ ...styles.root, ...coreStyles.card }}>
+ <Card css={styles.root}>
  <Card.Body css={styles.cardBody}>
  <Box.Stack gap="$1">
  <Box>
@@ -48,10 +48,12 @@ export const AccountConnectionInput = ({
  onPress={onConnect}
  isLoading={isConnecting}
  css={styles.connectButton}
- size="sm"
+ size="xs"
  intent="primary"
  >
- Connect wallet
+ <Text fontSize="sm" color="inherit">
+ Connect wallet
+ </Text>
  </Button>
  ) : (
  <Button
@@ -70,10 +72,10 @@ export const AccountConnectionInput = ({
  }
  variant="outlined"
  intent="base"
- size="sm"
+ size="xs"
  css={{ ...styles.connectButton, ...styles.connectedButton }}
  >
- <Text fontSize="xs">
+ <Text fontSize="sm">
  {shortAddress(account.alias, 16) ||
  shortAddress(account.address)}
  </Text>
@@ -89,24 +91,23 @@ export const AccountConnectionInput = ({
 const styles = {
  root: cssObj({
  minHeight: '$15',
- borderRadius: '$md',
+ border: '1px solid $border',
+ overflowX: 'hidden',
  }),
  cardBody: cssObj({
  px: '$3',
  py: '$2',
  }),
  connectButton: cssObj({
- borderRadius: '$md',
- height: '22px',
- width: '140px',
+ width: '$36',
  }),
  connectedButton: cssObj({
  justifyContent: 'space-between',
  gap: 0,
  }),
  circle: cssObj({
- minWidth: 10,
- height: 10,
+ minWidth: '$3',
+ height: '$3',
  backgroundColor: '$intentsError9',
  borderRadius: '$full',
  }),

packages/app/src/systems/Bridge/components/BridgeSteps/BridgeSteps.tsx

@@ -59,9 +59,8 @@ const styles = {
  stack: cssObj({
  gap: '$0',
  minWidth: '344px',
- backgroundColor: '$intentsBase0',
  borderRadius: '$md',
- border: '1px solid $intentsBase5',
+ border: '1px solid $border',
  }),
  item: cssObj({
  alignItems: 'center',
@@ -70,7 +69,7 @@ const styles = {
  py: '$2',
 
  '& ~ &': {
- borderTop: '1px solid $intentsBase5',
+ borderTop: '1px solid $border',
  },
 
  '.circleDone': {
@@ -86,7 +85,7 @@ const styles = {
  lineHeight: '1.5rem',
  }),
  icon: cssObj({
- color: '$black12',
+ color: '$blackA12',
  }),
  number: cssObj({
  display: 'flex',

packages/app/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx

@@ -75,7 +75,7 @@ const styles = cssObj({
  }),
  ageText: cssObj({
  fontSize: '$xs',
- minWidth: '70px',
+ color: '$intentsBase12',
  }),
  infoText: cssObj({
  fontSize: '$sm',

packages/app/src/systems/Bridge/containers/BridgeTabs.tsx

@@ -1,46 +1,55 @@
-import { cssObj } from '@fuel-ui/css';
 import { Tabs } from '@fuel-ui/react';
 import type { AnimationControls } from 'framer-motion';
 
 import { useBridge } from '../hooks';
 
 type BridgeTabsProps = {
- controls: AnimationControls;
+ fromControls: AnimationControls;
+ toControls: AnimationControls;
 };
 
-export const BridgeTabs = ({ controls }: BridgeTabsProps) => {
+export const BridgeTabs = ({ fromControls, toControls }: BridgeTabsProps) => {
  const { handlers, isWithdraw } = useBridge();
 
- const moveHorizontally = async (factor: number = 15) => {
- controls.set({ opacity: 0.4, x: factor });
- await controls.start({ opacity: 1, x: 0, transition: { duration: 0.3 } });
+ const moveVertically = async (
+ control: AnimationControls,
+ factor: number = 15,
+ zIndex: number = 1
+ ) => {
+ control.set({ y: factor, zIndex });
+ await control.start({ y: 0, transition: { duration: 0.3 } });
  };
- const rightToLeft = async () => {
- await moveHorizontally(50);
+ const handleDepositAnimation = async () => {
+ moveVertically(fromControls, 78);
+ await moveVertically(toControls, -78, 999);
  };
- const leftToRight = async () => {
- await moveHorizontally(-50);
+
+ const handleWithdrawAnimation = async () => {
+ moveVertically(fromControls, 78, 999);
+ await moveVertically(toControls, -78);
  };
 
  return (
- <Tabs defaultValue={isWithdraw ? 'withdraw' : 'deposit'}>
- <Tabs.List aria-label="Manage deposits" css={styles.tabList}>
+ <Tabs defaultValue={isWithdraw ? 'withdraw' : 'deposit'} variant="subtle">
+ <Tabs.List aria-label="Manage deposits">
  <Tabs.Trigger
  value="deposit"
- css={styles.tabTrigger}
  onClick={() => {
- rightToLeft();
- handlers.goToDeposit();
+ if (isWithdraw) {
+ handleDepositAnimation();
+ handlers.goToDeposit();
+ }
  }}
  >
  Deposit to Fuel
  </Tabs.Trigger>
  <Tabs.Trigger
  value="withdraw"
- css={styles.tabTrigger}
  onClick={() => {
- leftToRight();
- handlers.goToWithdraw();
+ if (!isWithdraw) {
+ handleWithdrawAnimation();
+ handlers.goToWithdraw();
+ }
  }}
  >
  Withdraw from Fuel
@@ -49,34 +58,3 @@ export const BridgeTabs = ({ controls }: BridgeTabsProps) => {
  </Tabs>
  );
 };
-
-const styles = {
- tabList: cssObj({
- borderBottom: 'none',
- padding: '$1',
- backgroundColor: '$intentsBase4',
- borderRadius: '$md',
- alignItems: 'center',
-
- '& > :after': { content: 'none' },
-
- 'button.bridge--navItemActive': {
- backgroundColor: '$intentsBase12',
- },
- }),
- tabTrigger: cssObj({
- borderRadius: '$md',
- color: '$intentsBase11',
- fontSize: '$sm',
- flex: '1 0',
- margin: '0 !important',
- '&[data-state="active"]': {
- color: '$intentsBase12',
- backgroundColor: '$intentsBase1',
- borderBottomColor: 'transparent',
- },
- '&:hover': {
- color: '$intentsBase12',
- },
- }),
-};

packages/app/src/systems/Bridge/hooks/useBridge.tsx

@@ -124,6 +124,7 @@ export function useBridge() {
  const navigate = useNavigate();
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
+ // TODO: for now we don't need to compute "to" param, because we only support eth/fuel
  const fromInput = queryParams.get('from');
 
  function getToInputNetwork() {

packages/app/src/systems/Bridge/hooks/useBridgeTxs.tsx

@@ -26,8 +26,7 @@ export const useBridgeTxs = () => {
  return {
  txs,
  isLoading,
- // need to check for strict equality bc we care if isConnected is not undefined
- shouldShowNotConnected: isConnected === false && !isLoading,
+ shouldShowNotConnected: !isConnected && !isLoading,
  shouldShowEmpty: isConnected && !isLoading && txs.length === 0,
  shouldShowList: !isLoading && isConnected && txs.length > 0,
  };

packages/app/src/systems/Bridge/machines/bridgeMachine.tsx

@@ -90,6 +90,7 @@ export const bridgeMachine = createMachine(
  toNetwork: ctx.toNetwork,
  assetAmount: ctx.assetAmount,
  fuelAddress: ev.input.fuelAddress,
+ ethAsset: ev.input.ethAsset,
  ethWalletClient: ev.input.ethWalletClient,
  ethPublicClient: ev.input.ethPublicClient,
  fuelWallet: ev.input.fuelWallet,

packages/app/src/systems/Bridge/pages/Bridge.tsx

@@ -11,87 +11,90 @@ import {
  isEthChain,
  isFuelChain,
 } from '~/systems/Chains';
-import { coreStyles } from '~/systems/Core';
 
 export const Bridge = () => {
  const { fromNetwork, toNetwork, assetAmount, assetBalance, asset, handlers } =
  useBridge();
 
- const controls = useAnimationControls();
+ const fromControls = useAnimationControls();
+ const toControls = useAnimationControls();
 
  if (!fromNetwork || !toNetwork) return null;
 
  return (
- <Card css={coreStyles.card}>
- <Card.Body>
- <BridgeTabs controls={controls} />
- <motion.div animate={controls}>
- <Box.Stack gap="$6">
- {Boolean(fromNetwork && toNetwork) && (
- <Box.Stack gap="$2">
- <Text fontSize="sm" css={styles.sectionHeader}>
- Network
- </Text>
+ <Card>
+ <Card.Body css={styles.cardBody}>
+ <BridgeTabs fromControls={fromControls} toControls={toControls} />
+ <Box css={styles.divider} />
+ <Box.Stack gap="$6">
+ {Boolean(fromNetwork && toNetwork) && (
+ <Box.Stack gap="$2">
+ <Text color="intentsBase12">Network</Text>
+ <motion.div animate={fromControls}>
  {isEthChain(fromNetwork) && (
  <EthAccountConnection label="From" />
  )}
  {isFuelChain(fromNetwork) && (
  <FuelAccountConnection label="From" />
  )}
+ </motion.div>
+ <motion.div animate={toControls}>
  {isEthChain(toNetwork) && <EthAccountConnection label="To" />}
  {isFuelChain(toNetwork) && <FuelAccountConnection label="To" />}
- </Box.Stack>
- )}
- <Box.Stack gap="$2">
- <Text fontSize="sm" css={styles.sectionHeader}>
- Asset
- </Text>
- <Box css={styles.amountInput}>
- <InputAmount
- balance={assetBalance}
- asset={{
- name: asset?.symbol,
- imageUrl: asset?.image,
- }}
- value={assetAmount}
- onChange={(val) =>
- handlers.changeAssetAmount({ assetAmount: val })
- }
- onClickAsset={handlers.openAssetsDialog}
- />
- </Box>
+ </motion.div>
  </Box.Stack>
- <BridgeButton />
- {isFuelChain(toNetwork) && (
- <Alert status="warning">
- <Alert.Description>
- <Text fontSize="sm">
- Any assets deposited to Fuel takes 7 days to withdraw back
- to Ethereum. Learn more about our architecture and security
- in our&nbsp;
- <Link href="https://fuel.sh/" isExternal>
- docs
- </Link>
- </Text>
- </Alert.Description>
- </Alert>
- )}
+ )}
+ <Box.Stack gap="$2">
+ <Text color="intentsBase12">Asset</Text>
+ <Box css={styles.amountInput}>
+ <InputAmount
+ balance={assetBalance}
+ asset={{
+ name: asset?.symbol,
+ imageUrl: asset?.image,
+ }}
+ value={assetAmount}
+ onChange={(val) =>
+ handlers.changeAssetAmount({ assetAmount: val })
+ }
+ onClickAsset={handlers.openAssetsDialog}
+ />
+ </Box>
  </Box.Stack>
- </motion.div>
+ <BridgeButton />
+ <Alert status="warning">
+ <Alert.Description>
+ <Text fontSize="sm">
+ Any assets deposited to Fuel takes 7 days to withdraw back to
+ Ethereum. Learn more about our architecture and security in
+ our&nbsp;
+ <Link href="https://fuel.sh/" isExternal>
+ docs
+ </Link>
+ </Text>
+ </Alert.Description>
+ </Alert>
+ </Box.Stack>
  </Card.Body>
  </Card>
  );
 };
 
 const styles = {
- sectionHeader: cssObj({
- fontWeight: '$semibold',
- color: '$intentsBase12',
+ cardBody: cssObj({
+ p: '$7',
+ }),
+ divider: cssObj({
+ h: '1px',
+ bg: '$border',
+ mt: '$1',
+ mb: '$5',
  }),
  amountInput: cssObj({
  '& > div': {
  px: '$3',
  py: '$2',
+ backgroundColor: 'transparent',
  },
  }),
 };