@rango-dev/ui 0.33.1-next.5 → 0.34.1-next.0

package/src/containers/SwapInput/SwapInput.tsx

@@ -29,7 +29,11 @@ import { TokenSection } from './TokenSection';
 
 export function SwapInput(props: SwapInputPropTypes) {
   const showBalance =
-    'balance' in props && !props.loading && !props.loadingBalance;
+    'balance' in props &&
+    !props.loading &&
+    !props.loadingBalance &&
+    props.token.displayName;
+
   const showBalanceSkeleton =
     'balance' in props && (props.loading || props.loadingBalance);
   return (
@@ -108,6 +112,7 @@ export function SwapInput(props: SwapInputPropTypes) {
                   size="large"
                   placeholder="0"
                   variant="ghost"
+                  isZero={props.price.value === '0'}
                   min={0}
                   {...('onInputChange' in props && {
                     onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
@@ -142,7 +147,9 @@ export function SwapInput(props: SwapInputPropTypes) {
                   <ValueTypography hasWarning={!!props.price.error}>
                     <UsdPrice variant="body" size="medium">
                       {props.price.usdValue
-                        ? `~$${props.price.usdValue}`
+                        ? props.price.usdValue === '0'
+                          ? '0.00'
+                          : `~$${props.price.usdValue}`
                         : props.price.error}
                     </UsdPrice>
                   </ValueTypography>

package/src/containers/SwapInput/TokenSection.styles.ts

@@ -1,3 +1,5 @@
+import { ChainImageContainer } from 'src/components/ChainToken/ChainToken.styles';
+
 import { Button } from '../../components';
 import { css, darkTheme, styled } from '../../theme';
 
@@ -6,12 +8,14 @@ export const Container = styled(Button, {
   minWidth: '130px',
   flexGrow: 1,
   backgroundColor: 'transparent',
+  borderRadius: '$xs',
+
   color: '$neutral700',
   '&:disabled': {
     color: '$neutral600',
   },
   '&:focus-visible': {
-    $$color: '$colors$info100',
+    $$color: '$colors$secondary100',
     [`.${darkTheme} &`]: {
       $$color: '$colors$info700',
     },
@@ -22,11 +26,19 @@ export const Container = styled(Button, {
     backgroundColor: 'transparent',
   },
   '&:hover': {
-    $$color: '$colors$info100',
+    $$color: '$colors$secondary100',
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral100',
     },
     backgroundColor: '$$color !important',
+
+    [`& ${ChainImageContainer}`]: {
+      $$color: '$colors$secondary100',
+      [`.${darkTheme} &`]: {
+        $$color: '$colors$neutral100',
+      },
+      backgroundColor: '$$color !important',
+    },
   },
 });
 

package/src/containers/SwapInput/TokenSection.tsx

@@ -46,14 +46,14 @@ export function TokenSection(props: TokenSectionProps) {
             <>
               <Typography variant="title" size="medium">
                 {error || (!loading && !tokenSymbol)
-                  ? i18n.t('Token')
+                  ? i18n.t('Select Token')
                   : tokenSymbol}
               </Typography>
               <Typography
                 variant="body"
                 size="medium"
                 className={chainNameStyles()}>
-                {error || (!loading && !chain) ? i18n.t('Chain') : chain}
+                {error || (!loading && !chain) ? i18n.t('Select Chain') : chain}
               </Typography>
             </>
           )}

package/src/theme.ts

@@ -14,7 +14,7 @@ export const theme = {
     primary600: '#0B27C5',
 
     secondary: '#469BF5',
-    secondary100: '#E9F4FF',
+    secondary100: '#E9F3FF',
     secondary200: '#D6EAFF',
     secondary300: '#C8E3FF',
     secondary400: '#B5D9FF',