fix(teleport): tabs and slippage (#1041)

src/components/AvailableAmount/styles.module.scss

@@ -5,7 +5,7 @@
 .containerValue {
   padding: 0 13px;
   font-size: 1.25rem;
-  color: var(--text-text-dark);
+  color: var(--grayscale-dark);
   height: 42px;
   display: flex;
   align-items: center;

src/components/Carousel/Carousel.tsx

@@ -94,8 +94,6 @@ function Carousel({
     return '0px';
   }, [visibleSlide, itemWidth, displaySlideState]);
 
-  console.log(visibleSlide, slides);
-
   useEffect(() => {
     if (noAnimation) {
       return;
@@ -130,7 +128,7 @@ function Carousel({
   }, [visibleSlide, noAnimation, hasTransitionClass, slides.length]);
 
   const setActiveItem = useCallback(
-    (index) => {
+    (index: number) => {
       if (!disableMode) {
         setVisibleSlide(index);
       }

src/components/Slider/Slider.tsx

@@ -128,6 +128,7 @@ export type SliderProps = {
   valuePercents: number;
   disabled?: boolean;
   tokenPair?: TokenPair;
+  text?: string | React.ReactNode;
 };
 
 function Slider({
@@ -136,6 +137,7 @@ function Slider({
   valuePercents,
   disabled,
   tokenPair,
+  text,
 }: SliderProps) {
   const [valueSilder, setValueSilder] = useState(0);
   const [currentPercents, setCurrentPercent] = useState(0);
@@ -259,6 +261,13 @@ function Slider({
               border: 'none',
             }}
           />
+          {text && (
+            <div
+              className={cx(styles.text, valueSilder > 80 && styles.textLeft)}
+            >
+              {text}
+            </div>
+          )}
         </div>
       </div>
     </div>

src/components/Slider/styles.module.scss

@@ -247,3 +247,15 @@ $col-width: math.div(100%, $number-of-options);
   font-size: 12px;
   transform: translate(5px, 0px);
 }
+
+.text {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  transform: translate(0, -50%);
+
+  &Left {
+    left: 25px;
+    right: unset;
+  }
+}

src/components/networksImg/imgNetwork.jsx

@@ -76,7 +76,7 @@ function ImgNetwork({ network, marginImg, size, zIndexImg, tooltipStatus }) {
 
   const getImgFromIpfsByCid = useCallback(
     async (cidAvatar) => {
-      if (cidAvatar) {
+      if (cidAvatar && fetchWithDetails) {
         return fetchWithDetails(cidAvatar, 'image').then(
           (details) => details?.content && setImgDenom(details?.content)
         );

src/containers/application/AppMenu.tsx

@@ -45,9 +45,9 @@ const itemsMenu = () => {
       icon: teleport,
       active: false,
       subItems: [
-        { name: 'Swap', to: '/teleport/swap' },
-        { name: 'Bridge', to: '/teleport/bridge' },
         { name: 'Send', to: '/teleport/send' },
+        { name: 'Bridge', to: '/teleport/bridge' },
+        { name: 'Swap', to: '/teleport/swap' },
       ],
     },
     {

src/containers/teleport/components/Inputs/InputMemo/InputMemo.module.scss

@@ -1,22 +1,14 @@
-.contentValueInput {
-
-  input,
-  textarea {
-    padding-right: 35px;
-    font-size: 1.25rem;
-    text-align: left;
-  }
-}
-
 .containerInputMemo {
-  position: relative;
   display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
 }
 
 .containerAddFileButton {
   position: absolute;
   right: 10px;
-  bottom: 10px;
+  bottom: 30px;
 
   input {
     display: none;

src/containers/teleport/components/Inputs/InputMemo/InputMemo.tsx

@@ -49,9 +49,14 @@ function InputMemo({ onChangeValue, value }: Props) {
         onChange={(e) => onChangeValue(e.target.value)}
         title="type public message"
         color={Color.Pink}
-        classNameTextbox={styles.contentValueInput}
         isTextarea
         autoFocus
+        style={{
+          paddingLeft: '10px',
+          paddingRight: '35px',
+          paddingTop: '10px',
+          paddingBottom: '10px',
+        }}
       />
       <div className={styles.containerAddFileButton}>
         <input

src/containers/teleport/components/containers/Containers.module.scss

@@ -18,8 +18,11 @@
   gap: 20px;
   font-size: 16px;
 
-  @media (max-width: 580px) {
+  @media (width <=580px) {
     width: 100%;
-    font-size: 14px;
+
+    body {
+      font-size: 14px;
+    }
   }
 }

src/containers/teleport/components/slippage/Slippage.module.scss

@@ -0,0 +1,8 @@
+.container {
+  color: var(--grayscale-dark);
+  font-size: 0.75rem;
+
+  .value {
+    color: var(--grayscale-primary);
+  }
+}

src/containers/teleport/components/slippage/Slippage.tsx

@@ -0,0 +1,15 @@
+import s from './Slippage.module.scss';
+
+type Props = {
+  value: number;
+};
+
+function Slippage({ value }: Props) {
+  return (
+    <span className={s.container}>
+      slippage: <span className={s.value}>{value}%</span>
+    </span>
+  );
+}
+
+export default Slippage;

src/containers/teleport/components/tabList/TabList.module.scss

@@ -0,0 +1,5 @@
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  width: 100%;
+}

src/containers/teleport/components/tabList/TabList.tsx

@@ -0,0 +1,45 @@
+import { useNavigate } from 'react-router-dom';
+
+import ButtonTeleport from 'src/containers/warp/components/buttonGroup/indexBtn';
+import { TypePages } from '../../type';
+import s from './TabList.module.scss';
+
+type TabListProps = {
+  selected: TypePages;
+};
+
+function TabList({ selected }: TabListProps) {
+  const navigate = useNavigate();
+
+  const handleHistory = (to: string) => {
+    navigate(to);
+  };
+
+  return (
+    <div className={s.wrapper}>
+      <ButtonTeleport
+        status="left"
+        isSelected={selected === TypePages.send}
+        onClick={() => handleHistory(TypePages.send)}
+      >
+        {TypePages.send}
+      </ButtonTeleport>
+      <ButtonTeleport
+        status="center"
+        isSelected={selected === TypePages.bridge}
+        onClick={() => handleHistory(TypePages.bridge)}
+      >
+        {TypePages.bridge}
+      </ButtonTeleport>
+      <ButtonTeleport
+        status="right"
+        isSelected={selected === TypePages.swap}
+        onClick={() => handleHistory(TypePages.swap)}
+      >
+        {TypePages.swap}
+      </ButtonTeleport>
+    </div>
+  );
+}
+
+export default TabList;

src/containers/teleport/pages/Layout/Layout.module.scss

@@ -0,0 +1,14 @@
+$mobile-breakpoint: 480px;
+
+.header {
+  margin: 10px auto 30px;
+  width: 420px;
+
+  @media (width <=$mobile-breakpoint) {
+    width: unset;
+
+    >div {
+      width: 100vw;
+    }
+  }
+}

src/containers/teleport/pages/Layout/Layout.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+import s from './Layout.module.scss';
+import TabList from '../../components/tabList/TabList';
+import { TypePages } from '../../type';
+
+function Layout() {
+  const location = useLocation();
+  const [active, setActive] = useState<TypePages | undefined>(TypePages.swap);
+
+  useEffect(() => {
+    const locationSplit = location.pathname.replace(/^\/|\/$/g, '').split('/');
+    setActive(
+      Object.values(TypePages).find((item) => item === locationSplit[1])
+    );
+  }, [location]);
+
+  return (
+    <div>
+      {active && (
+        <header className={s.header}>
+          <TabList selected={active} />
+        </header>
+      )}
+      <Outlet />
+    </div>
+  );
+}
+
+export default Layout;

src/containers/teleport/pages/Teleport.tsx

@@ -6,15 +6,18 @@ import TeleportMainScreen from './mainScreen/TeleportMainScreen';
 import Relayer from './relayer/Relayer';
 import RelayerContextProvider from '../contexts/relayer';
 import TeleportContextProvider from './Teleport.context';
+import Layout from './Layout/Layout';
 
 function TeleportRouter() {
   return (
     <Routes>
-      <Route index element={<TeleportMainScreen />} />
-      <Route path="swap" element={<Swap />} />
-      <Route path="send" element={<Send />} />
-      <Route path="bridge" element={<Bridge />} />
-      <Route path="relayer" element={<Relayer />} />
+      <Route path="/" element={<Layout />}>
+        <Route index element={<TeleportMainScreen />} />
+        <Route path="swap" element={<Swap />} />
+        <Route path="send" element={<Send />} />
+        <Route path="bridge" element={<Bridge />} />
+        <Route path="relayer" element={<Relayer />} />
+      </Route>
     </Routes>
   );
 }

src/containers/teleport/pages/bridge/actionBar.bridge.tsx

@@ -237,13 +237,13 @@ function ActionBar({ stateActionBar }: { stateActionBar: Props }) {
 
   const buttonConfigs = {
     [TxsType.Deposit]: {
-      text: 'Deposit',
+      text: 'transfer',
       // onClick: () => addHistoriesItem(testItem),
       onClick: depositOnClick,
       disabled: isExceeded,
     },
     [TxsType.Withdraw]: {
-      text: 'withdraw',
+      text: 'transfer',
       onClick: withdrawOnClick,
       disabled: isExceeded,
     },

src/containers/teleport/pages/mainScreen/components/BridgeAction/BridgeItem.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 15px;
+  gap: 10px;
 
   .networks {
     display: flex;

src/containers/teleport/pages/mainScreen/components/SendAction/SendAction.module.scss

@@ -1,6 +1,7 @@
 .container {
   display: flex;
-  gap: 20px;
+  align-items: center;
+  justify-content: space-between;
   overflow: hidden;
-  padding: 5px 0;
+  padding: 7px 7px 7px 0px;
 }

src/containers/teleport/pages/mainScreen/components/SendAction/SendAction.tsx

@@ -55,7 +55,7 @@ function SendAction() {
             address={key}
             avatar
             onlyAvatar
-            sizeAvatar="50px"
+            sizeAvatar="45px"
             styleUser={{ flexDirection: 'column' }}
           />
         </Link>

src/containers/teleport/pages/mainScreen/components/SwapAction/SwapAction.module.scss

@@ -1,6 +1,6 @@
 .container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  row-gap: 20px;
+  row-gap: 15px;
   overflow: hidden;
 }

src/containers/teleport/pages/mainScreen/components/TeleportStat/TeleportStat.module.scss

@@ -1,6 +1,6 @@
 .container {
   text-align: center;
-  color: var(--text-text-dark);
+  color: var(--grayscale-dark);
   font-size: 14px;
   line-height: 23px;
 

src/containers/teleport/pages/mainScreen/components/TeleportText/TeleportText.module.scss

@@ -15,7 +15,7 @@
 .title {
   position: relative;
   color: #FFF;
-  text-shadow: 0px 0px 10px var(--text-text-dark);
+  text-shadow: 0px 0px 10px var(--grayscale-dark);
   @include font-size(42px);
 
   &::before {

src/containers/teleport/pages/mainScreen/components/TotalCount/TotalCount.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 20px;
+  gap: 15px;
   color: var(--primary-color);
 
 }
@@ -12,8 +12,8 @@
   align-items: center;
   justify-content: center;
 
-  width: 50px;
-  height: 50px;
+  width: 45px;
+  height: 45px;
   border-radius: 50%;
 
   background-color: #000;