feat: update for swap

protofire · Oct 8, 2024 · 35416e1 · 35416e1
1 parent e1bcc22
commit 35416e1
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 58 deletions.
diff --git a/lib/hooks/useNavItems.tsx b/lib/hooks/useNavItems.tsx
@@ -215,7 +215,7 @@ export default function useNavItems(): ReturnType {
         icon: 'gear',
         subItems: [
           {
-            text: 'Swap',
+            text: 'Get ONE',
             nextRoute: { pathname: '/swap' as const },
             isActive: pathname.startsWith('/swap'),
           },

diff --git a/ui/shared/TextSeparator.tsx b/ui/shared/TextSeparator.tsx
@@ -3,7 +3,7 @@ import type { StyleProps } from '@chakra-ui/styled-system';
 import React from 'react';
 
 const TextSeparator = ({ id, ...props }: StyleProps & { id?: string }) => {
-  return <chakra.span mx={ 3 } id={ id } { ...props }>|</chakra.span>;
+  return <chakra.span mx={ props.mx || 3 } id={ id } { ...props }>|</chakra.span>;
 };
 
 export default React.memo(TextSeparator);
diff --git a/ui/snippets/topBar/SwapButton.tsx b/ui/snippets/topBar/SwapButton.tsx
@@ -1,47 +1,23 @@
 import { Button, Box } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
 import React from 'react';
 
-import { route } from 'nextjs-routes';
-
-import config from 'configs/app';
-import getPageType from 'lib/mixpanel/getPageType';
-import * as mixpanel from 'lib/mixpanel/index';
 import IconSvg from 'ui/shared/IconSvg';
 
-const feature = config.features.swapButton;
-
 const SwapButton = () => {
-  const router = useRouter();
-  const source = getPageType(router.pathname);
-
-  const handleClick = React.useCallback(() => {
-    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Swap button', Source: source });
-  }, [ source ]);
-
-  if (!feature.isEnabled) {
-    return null;
-  }
-
-  const href = 'url' in feature ?
-    feature.url :
-    route({ pathname: '/apps/[id]', query: { id: feature.dappId, action: 'connect' } });
-
   return (
     <Button
       as="a"
-      href={ href }
-      target={ 'url' in feature ? '_blank' : '_self' }
+      href="/swap"
+      target="_self"
       variant="solid"
       size="xs"
       borderRadius="sm"
       height={ 5 }
       px={ 1.5 }
-      onClick={ handleClick }
     >
       <IconSvg name="swap" boxSize={ 3 } mr={{ base: 0, sm: 1 }}/>
-      <Box display={{ base: 'none', sm: 'inline' }}>
-        Swap
+      <Box display={{ base: 'none', md: 'inline' }}>
+        Get ONE
       </Box>
     </Button>
   );

diff --git a/ui/snippets/topBar/TopBar.tsx b/ui/snippets/topBar/TopBar.tsx
@@ -15,8 +15,6 @@ import ColorModeSwitch from './ColorModeSwitch';
 import SwapButton from './SwapButton';
 import TopBarStats from './TopBarStats';
 
-const feature = config.features.swapButton;
-
 const AddressSwitcher = () => {
   const { setFormat, isEthFormat } = useAddressFormatContext();
 
@@ -26,15 +24,14 @@ const AddressSwitcher = () => {
 
   return (
     <>
-      <Text fontSize="sm" mr={ 2 }>
-        ONE / ETH address
+      <Text fontSize="xs" mr={ 2 } color="text_secondary">
+        ONE/ETH
       </Text>
       <Switch
         isChecked={ isEthFormat }
         onChange={ handleSwitchChange }
         colorScheme="teal"
-        size="md"
-        mr={ 3 }
+        size={{ base: 'sm', sm: 'md' }}
       />
     </>
   );
@@ -71,24 +68,24 @@ const TopBar = () => {
       >
         <TopBarStats/>
         <Flex alignItems="center">
-          <AddressSwitcher/>
-          <Divider
-            mr={ 3 }
-            ml={{ base: 2, sm: 3 }}
-            height={ 4 }
-            orientation="vertical"
-          />
-          { feature.isEnabled && (
-            <>
-              <SwapButton/>
-              <Divider
-                mr={ 3 }
-                ml={{ base: 2, sm: 3 }}
-                height={ 4 }
-                orientation="vertical"
-              />
-            </>
-          ) }
+          <>
+            <AddressSwitcher/>
+            <Divider
+              mr={ 3 }
+              ml={{ base: 2, sm: 3 }}
+              height={ 4 }
+              orientation="vertical"
+            />
+          </>
+          <>
+            <SwapButton/>
+            <Divider
+              mr={ 3 }
+              ml={{ base: 2, sm: 3 }}
+              height={ 4 }
+              orientation="vertical"
+            />
+          </>
           <ColorModeSwitch/>
         </Flex>
       </Flex>

diff --git a/ui/snippets/topBar/TopBarStats.tsx b/ui/snippets/topBar/TopBarStats.tsx
@@ -51,19 +51,21 @@ const TopBarStats = () => {
       { data?.coin_price && (
         <Flex columnGap={ 1 }>
           <Skeleton isLoaded={ !isPlaceholderData }>
-            <chakra.span color="text_secondary">{ config.chain.governanceToken.symbol || config.chain.currency.symbol } </chakra.span>
-            <span>${ Number(data.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
+            <chakra.span color="text_secondary" mr={ 1 } display={{ base: 'none', md: 'initial' }}>
+              { config.chain.governanceToken.symbol || config.chain.currency.symbol }
+            </chakra.span>
+            <span>${ Number(data.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 4 }) }</span>
           </Skeleton>
           { data.coin_price_change_percentage && (
-            <Skeleton isLoaded={ !isPlaceholderData }>
+            <Skeleton isLoaded={ !isPlaceholderData } display={{ base: 'none', md: 'initial' }}>
               <chakra.span color={ Number(data.coin_price_change_percentage) >= 0 ? 'green.500' : 'red.500' }>
                 { Number(data.coin_price_change_percentage).toFixed(2) }%
               </chakra.span>
             </Skeleton>
           ) }
         </Flex>
       ) }
-      { data?.coin_price && config.features.gasTracker.isEnabled && <TextSeparator color="divider"/> }
+      { data?.coin_price && config.features.gasTracker.isEnabled && <TextSeparator mx={{ base: 1, md: 3 }} color="divider"/> }
       { data?.gas_prices && data.gas_prices.average !== null && config.features.gasTracker.isEnabled && (
         <Skeleton isLoaded={ !isPlaceholderData }>
           <chakra.span color="text_secondary">Gas </chakra.span>