fix(swap-tokens): improve swap elements styling

cosmology-tech · Apr 7, 2024 · a789fd5 · a789fd5
1 parent 3cf4a01
commit a789fd5
Show file tree

Hide file tree

Showing 9 changed files with 554 additions and 305 deletions.
diff --git a/examples/asset-list/components/wallet/WalletConnect.tsx b/examples/asset-list/components/wallet/WalletConnect.tsx
@@ -55,10 +55,7 @@ export const ConnectWalletButton = ({
         gap="$4"
         as="span"
         borderRadius="8px"
-        // @ts-ignore
-        style={{
-          zIndex: '1',
-        }}
+        zIndex={1}
       >
         <Box as="span">
           <IoWallet />

diff --git a/examples/stake-tokens/components/staking/Overview.tsx b/examples/stake-tokens/components/staking/Overview.tsx
@@ -82,11 +82,11 @@ const Overview = ({
       <Box mb={{ mobile: '$12', tablet: '$14' }}>
         <StakingClaimHeader
           symbol={coin.symbol}
-          rewardsAmount={Number(rewards.total) || 0}
-          stakedAmount={Number(staked) || 0}
+          rewardsAmount={Number(rewards?.total ?? 0) || 0}
+          stakedAmount={Number(staked ?? 0) || 0}
           onClaim={onClaimRewardClick}
           isLoading={isClaiming}
-          isDisabled={!isGreaterThanZero(rewards.total)}
+          isDisabled={!isGreaterThanZero(rewards?.total ?? 0)}
         />
       </Box>
     </>

diff --git a/examples/stake-tokens/components/wallet/WalletConnect.tsx b/examples/stake-tokens/components/wallet/WalletConnect.tsx
@@ -55,17 +55,16 @@ export const ConnectWalletButton = ({
         gap="$4"
         as="span"
         borderRadius="8px"
-        // TODO fix type error
-        // @ts-ignore
-        style={{
-          zIndex: '1',
-        }}
+        zIndex={1}
+        color="$white"
       >
         <Box as="span">
-          <IoWallet />
+          <IoWallet color="inherit" />
         </Box>
 
-        <Box as="span">{buttonText ? buttonText : 'Connect Wallet'}</Box>
+        <Box as="span" color="inherit">
+          {buttonText ? buttonText : 'Connect Wallet'}
+        </Box>
       </Box>
     </Button>
   );

diff --git a/examples/swap-tokens/components/Main.tsx b/examples/swap-tokens/components/Main.tsx
@@ -1,17 +1,29 @@
 import { Box, Text } from '@interchain-ui/react';
-import { useSwap } from "@/hooks";
+import { useSwap } from '@/hooks';
 import { Swap } from '@/components';
 
 export function Main() {
   const {
-    to, setTo,
-    from, setFrom,
-    swap, info,
-    steps, tokens, amount,
-    slippage, setSlippage,
-    onFlip, onSwap, onAmountChange,
-    isLoading, isSwapping, isRoutesEmpty,
-    isSwapDisabled, isWalletConnected, isInsufficientBalance
+    to,
+    setTo,
+    from,
+    setFrom,
+    swap,
+    info,
+    steps,
+    tokens,
+    amount,
+    slippage,
+    setSlippage,
+    onFlip,
+    onSwap,
+    onAmountChange,
+    isLoading,
+    isSwapping,
+    isRoutesEmpty,
+    isSwapDisabled,
+    isWalletConnected,
+    isInsufficientBalance,
   } = useSwap();
 
   function buttonText() {
@@ -21,32 +33,32 @@ export function Main() {
     return 'Swap';
   }
 
-  return (
-    isWalletConnected ?
-      <Swap
-        to={to}
-        from={from}
-        swap={swap}
-        info={info?.display!}
-        steps={steps}
-        tokens={tokens}
-        amount={amount}
-        loading={isLoading}
-        swapping={isSwapping}
-        slippage={slippage}
-        buttonText={buttonText()}
-        buttonDisabled={isSwapDisabled}
-        onFlip={onFlip}
-        onToChange={setTo}
-        onFromChange={setFrom}
-        onAmountChange={onAmountChange}
-        onSlippageChange={setSlippage}
-        onSwapButtonClick={onSwap}
-      /> :
-      <Box textAlign="center">
-        <Text color="$gray600" fontSize="$xl" attributes={{ my: '$20' }}>
-          Please connect to your wallet.
-        </Text>
-      </Box>
+  return isWalletConnected ? (
+    <Swap
+      to={to}
+      from={from}
+      swap={swap}
+      info={info?.display!}
+      steps={steps}
+      tokens={tokens}
+      amount={amount}
+      loading={isLoading}
+      swapping={isSwapping}
+      slippage={slippage}
+      buttonText={buttonText()}
+      buttonDisabled={isSwapDisabled}
+      onFlip={onFlip}
+      onToChange={setTo}
+      onFromChange={setFrom}
+      onAmountChange={onAmountChange}
+      onSlippageChange={setSlippage}
+      onSwapButtonClick={onSwap}
+    />
+  ) : (
+    <Box textAlign="center">
+      <Text color="$gray600" fontSize="$xl" attributes={{ my: '$20' }}>
+        Please connect to your wallet.
+      </Text>
+    </Box>
   );
-}
+}
diff --git a/examples/swap-tokens/components/swap/Swap.tsx b/examples/swap-tokens/components/swap/Swap.tsx
@@ -1,32 +1,37 @@
 import BigNumber from 'bignumber.js';
 import { Box, Divider, Spinner, useColorModeValue } from '@interchain-ui/react';
-import { Swap } from '@/hooks';
+import { SwapDef } from '@/hooks';
 import {
-  Token, TokenList,
-  SwapButton, SwapFromTo, SwapDetails,
-  SwapSlippage, SwapInfoProps, SwapRouteStep
+  Token,
+  TokenList,
+  SwapButton,
+  SwapFromTo,
+  SwapDetails,
+  SwapSlippage,
+  SwapInfoProps,
+  SwapRouteStep,
 } from '.';
 
 export type SwapProps = {
-  from?: Token,
-  to?: Token,
-  swap: Swap,
-  info: SwapInfoProps
-  steps: SwapRouteStep[]
-  tokens: TokenList
-  amount?: string
-  loading?: boolean
-  swapping?: boolean
-  slippage?: number
-  buttonText?: string
-  buttonDisabled?: boolean
-  onFlip?: () => void
-  onToChange?: (token: Token) => void
-  onFromChange?: (token: Token) => void
-  onSwapButtonClick?: () => void
-  onAmountChange?: (amount: string) => void
-  onSlippageChange?: (tolerance: number) => void
-}
+  from?: Token;
+  to?: Token;
+  swap: SwapDef;
+  info: SwapInfoProps;
+  steps: SwapRouteStep[];
+  tokens: TokenList;
+  amount?: string;
+  loading?: boolean;
+  swapping?: boolean;
+  slippage?: number;
+  buttonText?: string;
+  buttonDisabled?: boolean;
+  onFlip?: () => void;
+  onToChange?: (token: Token) => void;
+  onFromChange?: (token: Token) => void;
+  onSwapButtonClick?: () => void;
+  onAmountChange?: (amount: string) => void;
+  onSlippageChange?: (tolerance: number) => void;
+};
 
 export function Swap({
   from = {} as Token,
@@ -43,16 +48,21 @@ export function Swap({
   buttonDisabled = false,
   onFlip = () => {},
   onToChange = () => {},
-  onFromChange = () => {}, 
+  onFromChange = () => {},
   onAmountChange = () => {},
   onSwapButtonClick = () => {},
   onSlippageChange = () => {},
 }: SwapProps) {
-
   const isDetailsExpandable = new BigNumber(amount).gt(0) && Boolean(info);
 
   return (
-    <Box mx="auto" maxWidth="500px" minHeight="480px" overflow="hidden" position="relative">
+    <Box
+      mx="auto"
+      maxWidth="500px"
+      minHeight="480px"
+      overflow="hidden"
+      position="relative"
+    >
       <SwapFromTo
         to={to}
         from={from}
@@ -66,16 +76,36 @@ export function Swap({
       />
       <SwapSlippage slippage={slippage} onChange={onSlippageChange} />
       <Divider />
-      <SwapDetails to={to} from={from} info={info} steps={steps} expandable={isDetailsExpandable} />
-      <SwapButton text={buttonText} disabled={buttonDisabled} onClick={onSwapButtonClick} />
+      <SwapDetails
+        to={to}
+        from={from}
+        info={info}
+        steps={steps}
+        expandable={isDetailsExpandable}
+      />
+      <SwapButton
+        text={buttonText}
+        disabled={buttonDisabled}
+        onClick={onSwapButtonClick}
+      />
+
       <Box
-        position="absolute" top="$0" left="$0" right="$0" bottom="0"
-        alignItems="center" justifyContent="center" borderRadius="$md"
-        backgroundColor={useColorModeValue('$blackAlpha200', '$blackAlpha500')}
+        position="absolute"
+        top="$0"
+        left="$0"
+        right="$0"
+        bottom="$0"
+        alignItems="center"
+        justifyContent="center"
+        borderRadius="$md"
+        backgroundColor="transparent"
         display={loading || swapping ? 'flex' : 'none'}
       >
-        <Spinner size="$5xl" color={useColorModeValue('$blackAlpha800', '$whiteAlpha900') }/>
+        <Spinner
+          size="$5xl"
+          color={useColorModeValue('$blackAlpha800', '$whiteAlpha900')}
+        />
       </Box>
     </Box>
   );
-}
+}
diff --git a/examples/swap-tokens/components/swap/SwapButton.tsx b/examples/swap-tokens/components/swap/SwapButton.tsx
@@ -1,10 +1,10 @@
-import { Button } from '@interchain-ui/react';
+import { Button, useColorModeValue } from '@interchain-ui/react';
 
 export type SwapButtonProps = {
-  text?: string
-  disabled?: boolean
-  onClick?: () => void
-}
+  text?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+};
 
 export function SwapButton({
   text = 'Swap',
@@ -17,9 +17,11 @@ export function SwapButton({
       intent="tertiary"
       onClick={onClick}
       disabled={disabled}
-      attributes={{ width: "$full" }}
+      attributes={{
+        width: '$full',
+      }}
     >
-    {text}
+      {text}
     </Button>
-  )
-}
+  );
+}