hotfix tab list issue on mobile (#2228)

* hotfix tab list issue on mobile * fix some kyberAI bugs * try fix menu text missing color on ipad * try fix text color kyberai menu
KyberNetwork · Sep 11, 2023 · 34c4cb1 · 34c4cb1
1 parent 5f8ca8f
commit 34c4cb1
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 22 deletions.
diff --git a/src/components/Header/KyberAINavItem.tsx b/src/components/Header/KyberAINavItem.tsx
@@ -17,6 +17,7 @@ import NavGroup from './groups/NavGroup'
 import { DropdownTextAnchor, StyledNavLink } from './styleds'
 
 const CustomSlideToUnlock = styled(SlideToUnlock)`
+  background: ${({ theme }) => theme.subText};
   background: linear-gradient(
     to right,
     ${({ theme }) => theme.subText} 0,
@@ -25,8 +26,8 @@ const CustomSlideToUnlock = styled(SlideToUnlock)`
   );
   background-clip: text;
   -webkit-background-clip: text;
-
   &[data-active='true'] {
+    background: ${({ theme }) => theme.primary};
     background: linear-gradient(
       to right,
       ${({ theme }) => theme.primary} 0,

diff --git a/src/constants/networks/base.ts b/src/constants/networks/base.ts
@@ -22,7 +22,7 @@ const base: EVMNetworkInfo = {
   defaultBlockSubgraph: 'https://base-graph.kyberengineering.io/subgraphs/name/kybernetwork/base-blocks',
   etherscanUrl: 'https://basescan.org',
   etherscanName: 'Base Explorer',
-  bridgeURL: EMPTY,
+  bridgeURL: 'https://bridge.base.org/deposit',
   nativeToken: {
     symbol: 'ETH',
     name: 'ETH',

diff --git a/src/pages/TrueSightV2/components/LoadingTextAnimation.tsx b/src/pages/TrueSightV2/components/LoadingTextAnimation.tsx
@@ -1,5 +1,8 @@
+import { useMedia } from 'react-use'
 import styled, { keyframes } from 'styled-components'
 
+import { MEDIA_WIDTHS } from 'theme'
+
 const bounce = keyframes`
   15%,
   35%,
@@ -24,7 +27,6 @@ const Wrapper = styled.div`
     color: ${({ theme }) => theme.text};
     animation: ${bounce} 3s infinite ease;
     min-width: 10px;
-    display: flex;
     justify-content: center;
     margin-bottom: 10px;
   }
@@ -120,16 +122,34 @@ const Wrapper = styled.div`
     animation-delay: 1.55s;
   }
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    font-size: 12px;
+    font-size: 14px;
   `}
 `
 
 export default function LoadingTextAnimation() {
+  const isMobile = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
   return (
-    <Wrapper>
-      {'Crafting your screenshot...'.split('').map((w, index) => (
-        <span key={index}>{w}</span>
-      ))}
-    </Wrapper>
+    <>
+      {isMobile ? (
+        <Wrapper>
+          <div>
+            {'Crafting your'.split('').map((w, index) => (
+              <span key={index}>{w}</span>
+            ))}
+          </div>
+          <div>
+            {'screenshot...'.split('').map((w, index) => (
+              <span key={index}>{w}</span>
+            ))}
+          </div>
+        </Wrapper>
+      ) : (
+        <Wrapper>
+          {'Crafting your screenshot...'.split('').map((w, index) => (
+            <span key={index}>{w}</span>
+          ))}
+        </Wrapper>
+      )}
+    </>
   )
 }
diff --git a/src/pages/TrueSightV2/components/chart/index.tsx b/src/pages/TrueSightV2/components/chart/index.tsx
@@ -2724,6 +2724,7 @@ export const Prochart = ({
         'mainSeriesProperties.priceAxisProperties.autoScale': true,
         'scalesProperties.textColor': theme.text,
       })
+
       tvWidget
         .activeChart()
         .createStudy('Relative Strength Index')
@@ -2764,7 +2765,7 @@ export const Prochart = ({
   const addSRLevels = useCallback(() => {
     if (!currentPrice || !tvWidget) return
     SRLevels?.forEach((level: ISRLevel) => {
-      const entityId = tvWidget.activeChart().createMultipointShape([{ time: level.timestamp, price: level.value }], {
+      const entityId = tvWidget?.activeChart().createMultipointShape([{ time: level.timestamp, price: level.value }], {
         shape: 'horizontal_ray',
         lock: true,
         disableSelection: true,
@@ -2799,10 +2800,12 @@ export const Prochart = ({
   }, [tvWidget, SRLevels, showSRLevels, currentPrice, theme, removeSRLevels, addSRLevels])
 
   useEffect(() => {
-    if (resolution && tvWidget?.activeChart().resolution() !== (resolution as ResolutionString)) {
-      tvWidget?.activeChart().setResolution(resolution as ResolutionString)
-      variablesRef.current.resolution = resolution
-    }
+    try {
+      if (resolution && tvWidget?.activeChart().resolution() !== (resolution as ResolutionString)) {
+        tvWidget?.activeChart().setResolution(resolution as ResolutionString)
+        variablesRef.current.resolution = resolution
+      }
+    } catch {}
   }, [resolution, tvWidget])
 
   return (

diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
@@ -228,21 +228,18 @@ const TabWrapper = styled(motion.div)`
   }
   ${({ theme }) => theme.mediaWidth.upToSmall`
     min-width: initial;
-    flex:1;
+    flex: 1;
   `}
 `
 
 const ButtonTypeActive = styled(ButtonLight)`
   height: 36px;
-  margin: 0 !important;
-  display: flex;
   gap: 4px;
   font-size: 14px;
   white-space: nowrap;
   border: 1px solid ${({ theme }) => theme.primary};
   background-color: ${({ theme }) => rgba(theme.primary, 0.33)};
   transition: all 0.1s ease;
-  flex: 1;
   :hover {
     background-color: ${({ theme }) => rgba(theme.primary, 0.5)};
     filter: none;
@@ -251,14 +248,10 @@ const ButtonTypeActive = styled(ButtonLight)`
 
 const ButtonTypeInactive = styled(ButtonOutlined)`
   height: 36px;
-  margin: 0 !important;
-  display: flex;
   gap: 4px;
   font-size: 14px;
   white-space: nowrap;
   transition: all 0.1s ease;
-  flex: 1;
-
   ${({ theme }) => css`
     color: ${theme.subText};
     border-color: ${theme.subText};