Merge pull request #3 from goblockchain/develop

feat: fixies de redirecionamento, ajustes visuais e traduções
goblockchain · Dec 4, 2023 · f8d7db2 · f8d7db2
2 parents fff9d68 + 56ab079
commit f8d7db2
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 162 deletions.
diff --git a/src/assets/images/main_logo.jpeg b/src/assets/images/main_logo.jpeg
diff --git a/src/assets/images/t-drex-logo.png b/src/assets/images/t-drex-logo.png
diff --git a/src/components/About/ProtocolBanner.tsx b/src/components/About/ProtocolBanner.tsx
@@ -89,16 +89,12 @@ const ProtocolBanner = () => {
   return (
     <Banner isDarkMode={isDarkMode}>
       <TextContainer>
-        <HeaderText>Powered by the Uniswap Protocol</HeaderText>
+        <HeaderText>Powered by T-DREX Protocol</HeaderText>
         <DescriptionText>
-          The leading decentralized crypto trading protocol, governed by a global community.
+          O principal protocolo descentralizado de negociação de criptografia, governado por uma comunidade global..
         </DescriptionText>
       </TextContainer>
-      <BannerButtonContainer>
-        <BannerButton width="200px" as="a" href="https://uniswap.org" rel="noopener noreferrer" target="_blank">
-          Learn more
-        </BannerButton>
-      </BannerButtonContainer>
+      <BannerButtonContainer></BannerButtonContainer>
     </Banner>
   )
 }

diff --git a/src/components/About/constants.tsx b/src/components/About/constants.tsx
@@ -7,7 +7,6 @@ import darkArrowImgSrc from './images/aboutArrowDark.png'
 import lightArrowImgSrc from './images/aboutArrowLight.png'
 import darkDollarImgSrc from './images/aboutDollarDark.png'
 import darkTerminalImgSrc from './images/aboutTerminalDark.png'
-import nftCardImgSrc from './images/nftCard.png'
 import swapCardImgSrc from './images/swapCard.png'
 
 export const MAIN_CARDS = [
@@ -20,15 +19,15 @@ export const MAIN_CARDS = [
     lightBackgroundImgSrc: swapCardImgSrc,
     elementName: InterfaceElementName.ABOUT_PAGE_SWAP_CARD,
   },
-  {
-    to: '/nfts',
-    title: 'Trade NFTs',
-    description: 'Buy and sell NFTs across marketplaces to find more listings at better prices.',
-    cta: 'Explore NFTs',
-    darkBackgroundImgSrc: nftCardImgSrc,
-    lightBackgroundImgSrc: nftCardImgSrc,
-    elementName: InterfaceElementName.ABOUT_PAGE_NFTS_CARD,
-  },
+  // {
+  //   to: '/nfts',
+  //   title: 'Trade NFTs',
+  //   description: 'Buy and sell NFTs across marketplaces to find more listings at better prices.',
+  //   cta: 'Explore NFTs',
+  //   darkBackgroundImgSrc: nftCardImgSrc,
+  //   lightBackgroundImgSrc: nftCardImgSrc,
+  //   elementName: InterfaceElementName.ABOUT_PAGE_NFTS_CARD,
+  // },
 ]
 
 const StyledCardLogo = styled.img`

diff --git a/src/components/NavBar/SearchBar.tsx b/src/components/NavBar/SearchBar.tsx
@@ -111,7 +111,7 @@ export const SearchBar = () => {
     ? t(i18n)`Search`
     : shouldDisableNFTRoutes
     ? t(i18n)`Search tokens`
-    : t(i18n)`Search tokens and NFT collections`
+    : t(i18n)`Pesquise por ativos`
 
   const handleKeyPress = useCallback(
     (event: any) => {

diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
@@ -37,7 +37,7 @@ interface MenuItemProps {
   dataTestId?: string
 }
 
-const MenuItem = ({ href, dataTestId, id, isActive, children }: MenuItemProps) => {
+const MenuItem = ({ href = '/', dataTestId, id, isActive, children }: MenuItemProps) => {
   return (
     <NavLink
       to={href}
@@ -64,9 +64,14 @@ export const PageTabs = () => {
 
   return (
     <>
-      <MenuItem href="/swap" isActive={pathname.startsWith('/swap')}>
+      <a
+        href="https://tdrex.vercel.app/"
+        target="_blank"
+        style={{ textDecoration: 'none', color: '#7D7D7D' }}
+        rel="noreferrer"
+      >
         <Trans>Swap</Trans>
-      </MenuItem>
+      </a>
       {infoExplorePageEnabled ? (
         <MenuItem href={`/explore/tokens/${chainName.toLowerCase()}`} isActive={pathname.startsWith('/explore')}>
           <Trans>Explore</Trans>
@@ -117,7 +122,7 @@ const Navbar = ({ blur }: { blur: boolean }) => {
       <Nav>
         <Box display="flex" height="full" flexWrap="nowrap">
           <Box className={styles.leftSideContainer}>
-            <Box className={styles.logoContainer}>
+            <Box className={styles.logoContainer} onClick={handleDinoIconClick}>
               <img src="/images/logos/main_logo.png" width={48} />
             </Box>
             {!isNftPage && (

diff --git a/src/components/NavBar/style.css.ts b/src/components/NavBar/style.css.ts
@@ -8,6 +8,7 @@ export const logoContainer = style([
     display: 'flex',
     marginRight: '12',
     alignItems: 'center',
+    cursor: 'pointer',
   }),
 ])
 

diff --git a/src/components/Pools/PoolDetails/PoolDetailsStats.tsx b/src/components/Pools/PoolDetails/PoolDetailsStats.tsx
@@ -170,7 +170,7 @@ export function PoolDetailsStats({ poolData, isReversed, chainId, loading }: Poo
   return (
     <StatsWrapper>
       <HeaderText>
-        <Trans>Stats</Trans>
+        <Trans>Estatísticas</Trans>
       </HeaderText>
       <StatItemColumn>
         <ThemedText.BodySecondary>

diff --git a/src/components/Tokens/TokenDetails/About.tsx b/src/components/Tokens/TokenDetails/About.tsx
@@ -52,12 +52,12 @@ export function AboutSection({ address, chainId, description, homepageUrl, twitt
   return (
     <AboutContainer data-testid="token-details-about-section">
       <AboutHeader>
-        <Trans>About</Trans>
+        <Trans>Sobre</Trans>
       </AboutHeader>
       <TokenDescriptionContainer>
         {!description && (
           <NoInfoAvailable>
-            <Trans>No token information available</Trans>
+            <Trans>Informações do token não estão disponíveis</Trans>
           </NoInfoAvailable>
         )}
         {tokenDescription}

diff --git a/src/components/Tokens/TokenDetails/StatsSection.tsx b/src/components/Tokens/TokenDetails/StatsSection.tsx
@@ -108,7 +108,7 @@ export default function StatsSection(props: StatsSectionProps) {
     return (
       <StatsWrapper data-testid="token-details-stats">
         <Header>
-          <Trans>Stats</Trans>
+          <Trans>Estatísticas</Trans>
         </Header>
         <TokenStatsSection>
           {isInfoTDPEnabled ? (
@@ -143,8 +143,7 @@ export default function StatsSection(props: StatsSectionProps) {
                   value={volume24H}
                   description={
                     <Trans>
-                      1 day volume is the amount of the asset that has been traded on T-DREX during the past 24
-                      hours.
+                      1 day volume is the amount of the asset that has been traded on T-DREX during the past 24 hours.
                     </Trans>
                   }
                   title={<Trans>1 day volume</Trans>}

diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx
@@ -1,14 +1,10 @@
 import { Trans } from '@lingui/macro'
 import { BrowserEvent, InterfaceElementName, InterfacePageName, SharedEventName } from '@uniswap/analytics-events'
 import { Trace, TraceEvent } from 'analytics'
-import { ReactComponent as UniswapAppLogo } from 'assets/svg/uniswap_app_logo.svg'
-import { AboutFooter } from 'components/About/AboutFooter'
-import Card, { CardType } from 'components/About/Card'
-import { MAIN_CARDS, MORE_CARDS } from 'components/About/constants'
+import { MAIN_CARDS } from 'components/About/constants'
 import ProtocolBanner from 'components/About/ProtocolBanner'
 import { useAccountDrawer } from 'components/AccountDrawer'
 import { BaseButton } from 'components/Button'
-import { AppleLogo } from 'components/Logo/AppleLogo'
 import { useAndroidGALaunchFlagEnabled } from 'featureFlags/flags/androidGALaunch'
 import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import Swap from 'pages/Swap'
@@ -22,7 +18,6 @@ import { BREAKPOINTS } from 'theme'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
 import { TRANSITION_DURATIONS } from 'theme/styles'
 import { Z_INDEX } from 'theme/zIndex'
-import { getDownloadAppLinkProps } from 'utils/openDownloadApp'
 
 const PageContainer = styled.div`
   position: absolute;
@@ -350,9 +345,10 @@ export default function Landing() {
             name={SharedEventName.ELEMENT_CLICKED}
             element={InterfaceElementName.LANDING_PAGE_SWAP_ELEMENT}
           >
-            <Link to="/swap">
-              <LandingSwap />
-            </Link>
+            <img
+              style={{ borderRadius: '20px 20px' }}
+              src="https://github.com/goblockchain/t-drex-frontend/assets/90073210/e5ce8a9a-cedb-45bd-995f-657870bda1f2"
+            />
           </TraceEvent>
         </LandingSwapContainer>
         <Gradient isDarkMode={isDarkMode} />
@@ -361,18 +357,17 @@ export default function Landing() {
         </GlowContainer>
         <ContentContainer isDarkMode={isDarkMode}>
           <TitleText isDarkMode={isDarkMode}>
-            {shouldDisableNFTRoutes ? (
-              <Trans>Trade crypto with confidence</Trans>
-            ) : (
-              <Trans>Trade crypto and NFTs with confidence</Trans>
-            )}
+            {shouldDisableNFTRoutes ? <Trans>Trade crypto with confidence</Trans> : <Trans>T-DREX</Trans>}
           </TitleText>
           <SubTextContainer>
             <SubText>
               {shouldDisableNFTRoutes ? (
-                <Trans>Buy, sell, and explore tokens</Trans>
+                <Trans>Buy, sell, and explore assets</Trans>
               ) : (
-                <Trans>Buy, sell, and explore tokens and NFTs</Trans>
+                <Trans>
+                  Resolvemos o problema de liquidez e flexibilidade dos títulos públicos federais, permitindo o acesso
+                  de empresas de qualquer lugar do mundo e de outros países.
+                </Trans>
               )}
             </SubText>
           </SubTextContainer>
@@ -382,57 +377,25 @@ export default function Landing() {
               name={SharedEventName.ELEMENT_CLICKED}
               element={InterfaceElementName.CONTINUE_BUTTON}
             >
-              <ButtonCTA as={Link} to="/swap">
-                <ButtonCTAText>
-                  <Trans>Get started</Trans>
-                </ButtonCTAText>
-              </ButtonCTA>
+              <a href="https://tdrex.vercel.app/" target="_blank" style={{ textDecoration: 'none' }} rel="noreferrer">
+                <ButtonCTA>
+                  <ButtonCTAText>
+                    <Trans>Comece agora</Trans>
+                  </ButtonCTAText>
+                </ButtonCTA>
+              </a>
             </TraceEvent>
           </ActionsContainer>
           <LearnMoreContainer
             onClick={() => {
               cardsRef?.current?.scrollIntoView({ behavior: 'smooth' })
             }}
           >
-            <Trans>Learn more</Trans>
+            <Trans>Saiba mais</Trans>
           </LearnMoreContainer>
-
-          <DownloadWalletLink
-            {...getDownloadAppLinkProps({
-              element: InterfaceElementName.UNISWAP_WALLET_LANDING_PAGE_DOWNLOAD_BUTTON,
-              isAndroidGALaunched,
-            })}
-          >
-            {isAndroidGALaunched ? (
-              <>
-                <UniswapAppLogo width="20" height="20" />
-                Download the T-DREX app
-              </>
-            ) : (
-              <>
-                <AppleLogo width="20" height="20" />
-                Download the T-DREX app for iOS
-              </>
-            )}
-          </DownloadWalletLink>
         </ContentContainer>
         <AboutContentContainer isDarkMode={isDarkMode}>
-          <CardGrid cols={cards.length} ref={cardsRef}>
-            {cards.map(({ darkBackgroundImgSrc, lightBackgroundImgSrc, ...card }) => (
-              <Card
-                {...card}
-                backgroundImgSrc={isDarkMode ? darkBackgroundImgSrc : lightBackgroundImgSrc}
-                key={card.title}
-              />
-            ))}
-          </CardGrid>
-          <CardGrid cols={MORE_CARDS.length}>
-            {MORE_CARDS.map(({ darkIcon, lightIcon, ...card }) => (
-              <Card {...card} icon={isDarkMode ? darkIcon : lightIcon} key={card.title} type={CardType.Secondary} />
-            ))}
-          </CardGrid>
           <ProtocolBanner />
-          <AboutFooter />
         </AboutContentContainer>
       </PageContainer>
     </Trace>

diff --git a/src/pages/Pool/PoolCard.tsx b/src/pages/Pool/PoolCard.tsx
@@ -20,7 +20,6 @@ const SqueezedPoolPairs = ({ firstPair, secondPair }: { firstPair: string; secon
 
 const PoolCardsContainer = styled.div`
   display: grid;
-  justify-content: center;
   grid-template-columns: 1fr;
   gap: 20px;
 
@@ -29,7 +28,7 @@ const PoolCardsContainer = styled.div`
   }
 
   @media (min-width: 1200px) {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
   }
 `
 
@@ -189,13 +188,12 @@ export default function PoolCards({ activePoolType }: { activePoolType: PoolsTyp
               </div>
               <div>
                 <span>${pool.liquidity}M</span>
-                <label>Liquidity</label>
+                <label>Liquidez</label>
               </div>
             </div>
           </PoolCardBody>
           <PoolCardFooter>
             <p>{pool.public_title_infos.description}</p>
-            <button>Ver mais</button>
           </PoolCardFooter>
         </StyledPoolCard>
       ))}

diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx
@@ -393,7 +393,7 @@ export default function Pool() {
                   onClick={() => handleFilterPoolByType('all')}
                   className={`${activePoolType === 'all' && 'selected'}`}
                 >
-                  View all
+                  Ver todos
                 </button>
                 <button
                   onClick={() => handleFilterPoolByType('ltn')}