feat(app): ui improvements (#1330)

src/components/TableTxsInfinite/TableTxsInfinite.tsx

@@ -25,7 +25,7 @@ function TableTxsInfinite({
   const { data, loading, error } = response;
 
   return (
-    <Display noPaddingX>
+    <Display noPadding>
       <InfiniteScroll
         dataLength={(data?.messages_by_address || []).length}
         next={fetchMoreData}

src/components/TableTxsInfinite/component/TableDataTxs.tsx

@@ -86,6 +86,7 @@ function TableDataTxs({ data, loading, accountUser }: Props) {
       columns={Object.values(ColumnsTable).map((item) => ({
         header: item,
         accessorKey: item,
+        enableSorting: ![ColumnsTable.action, ColumnsTable.tx].includes(item),
         cell: (info) => info.getValue(),
       }))}
     />

src/containers/application/App.tsx

@@ -1,11 +1,10 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { Link, Outlet, matchPath, useLocation } from 'react-router-dom';
 
 import { initPocket } from 'src/redux/features/pocket';
 import MainLayout from 'src/layouts/Main';
 
 import { getPassport } from 'src/features/passport/passports.redux';
-import { useQueryClient } from 'src/contexts/queryClient';
 import { useAdviser } from 'src/features/adviser/context';
 import { routes } from 'src/routes';
 import { AdviserColors } from 'src/features/adviser/Adviser/Adviser';
@@ -14,7 +13,6 @@ import { useBackend } from 'src/contexts/backend/backend';
 import { useAppDispatch } from 'src/redux/hooks';
 import useSenseManager from 'src/features/sense/ui/useSenseManager';
 
-// eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
 import { initCyblog } from 'src/utils/logging/bootstrap';
 
 import { setTimeHistoryRoute } from 'src/features/TimeHistory/redux/TimeHistory.redux';
@@ -33,7 +31,6 @@ initCyblog();
 
 function App() {
   const dispatch = useAppDispatch();
-  const queryClient = useQueryClient();
   const address = useCurrentAddress();
 
   // const { community, communityLoaded } = useGetCommunity(address || null, {
@@ -51,17 +48,16 @@ function App() {
   }, []);
 
   useEffect(() => {
-    if (!address || !queryClient) {
+    if (!address) {
       return;
     }
 
     dispatch(
       getPassport({
         address,
-        queryClient,
       })
     );
-  }, [address, queryClient, dispatch]);
+  }, [address, dispatch]);
 
   // reset
   // useEffect(() => {
@@ -70,6 +66,10 @@ function App() {
   //   }
   // }, [communityLoaded, community, dispatch]);
 
+  useAdviserTexts({
+    defaultText: 'indexer is in sync now, some data may be not fully available',
+  });
+
   useEffect(() => {
     // tabs
     if (
@@ -135,13 +135,7 @@ function App() {
             <div id={PORTAL_ID} className={styles.portal} />
           )}
 
-          {![
-            /* routes.home.path, */
-            /* routes.teleport.path, */
-            // cybernetRoutes.verse.path,
-          ].some((path) => {
-            return matchPath(path, location.pathname);
-          }) && <AdviserContainer />}
+          <AdviserContainer />
 
           <Outlet />
         </>

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

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

src/pages/teleport/Layout/Layout.tsx

@@ -2,8 +2,13 @@ import { Outlet } from 'react-router-dom';
 import styles from './Layout.module.scss';
 import TabListTeleport from '../components/tabList/TabList';
 import { Stars } from 'src/containers/portal/components';
+import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
 
 function Layout() {
+  useAdviserTexts({
+    defaultText: 'welcome to teleport',
+  });
+
   return (
     <div>
       <Stars />

src/pages/teleport/components/Inputs/InputNumberDecimalScale/InputNumberDecimalScale.tsx

@@ -16,6 +16,7 @@ type Props = {
   validAmountMessage?: boolean;
   validAmountMessageText?: string;
   autoFocus?: boolean;
+  availableAmount?: number;
   onValueChange: $TsFixMeFunc;
 };
 
@@ -26,6 +27,7 @@ function InputNumberDecimalScale({
   onValueChange,
   title,
   validAmountMessage,
+  availableAmount,
   validAmountMessageText,
   ...props
 }: Props) {
@@ -55,8 +57,9 @@ function InputNumberDecimalScale({
 
   return (
     <InputNumber
+      maxValue={availableAmount}
       value={value}
-      onValueChange={onValueChange}
+      onChange={onValueChange}
       title={title}
       color={validAmount || value.length === 0 ? Color.Red : Color.Green}
       fixedDecimalScale={fixed}

src/pages/teleport/send/send.tsx

@@ -279,6 +279,7 @@ function Send() {
             <Col>
               <InputNumberDecimalScale
                 value={tokenAmount}
+                availableAmount={tokenABalance}
                 onValueChange={(value) => setTokenAmount(value)}
                 title="choose amount to send"
                 validAmount={validInputAmountToken}