feat: integrate token search functionality

components/backdrop/index.tsx

@@ -1,6 +1,14 @@
+import classNames from 'classnames';
 import { motion } from 'framer-motion';
 
-const LBBackdrop = ({ onClick }: ILBBackdrop) => (
-  <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.2 }} className="fixed inset-0 bg-transparent z-10" onClick={onClick} />
+const LBBackdrop = ({ onClick, variant = 'primary' }: ILBBackdrop) => (
+  <motion.div
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 1 }}
+    exit={{ opacity: 0 }}
+    transition={{ duration: 0.2 }}
+    className={classNames('fixed inset-0', { 'bg-transparent z-10': variant === 'primary', 'bg-[#000000b3] z-50': variant === 'secondary' })}
+    onClick={onClick}
+  />
 );
 export default LBBackdrop;

components/backdrop/types.ts

@@ -1,3 +1,4 @@
 interface ILBBackdrop {
   onClick: () => void;
+  variant?: 'primary' | 'secondary';
 }

store/token/actions.tsx

@@ -27,6 +27,8 @@ import {
   setOneHourAnalytics,
   setOneMonthAnalytics,
   setOneWeekAnalytics,
+  setSearchLoading,
+  setSearchedTokens,
 } from '.';
 import { CallbackProps } from '..';
 import api from './api';
@@ -393,6 +395,20 @@ const useTokenActions = () => {
     }
   };
 
+  const getSearchedTokens = async (query: string, callback?: CallbackProps) => {
+    try {
+      dispatch(setSearchLoading(true));
+      const { tokens } = await api.fetchTokens(query);
+
+      dispatch(setSearchedTokens(tokens));
+      return callback?.onSuccess?.(tokens);
+    } catch (error: any) {
+      callback?.onError?.(error);
+    } finally {
+      dispatch(setSearchLoading(false));
+    }
+  };
+
   useEffect(() => {
     _submitData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -452,6 +468,7 @@ const useTokenActions = () => {
     sellTokens,
     getCoinPrice,
     getAnalytics,
+    getSearchedTokens,
   };
 };
 

store/token/index.ts

@@ -20,6 +20,8 @@ export interface TokenState {
   oneDayAnalytics?: Analytics;
   oneWeekAnalytics?: Analytics;
   oneMonthAnalytics?: Analytics;
+  searchedTokens: Token[] | undefined;
+  searchLoading: boolean;
 }
 
 const initialState: TokenState = {
@@ -39,6 +41,8 @@ const initialState: TokenState = {
   oneWeekAnalytics: undefined,
   oneMonthAnalytics: undefined,
   loadingAnalytics: true,
+  searchedTokens: undefined,
+  searchLoading: false,
 };
 
 export const tokenReducer = createSlice({
@@ -172,6 +176,18 @@ export const tokenReducer = createSlice({
       state.oneWeekAnalytics = undefined;
       state.oneMonthAnalytics = undefined;
     },
+
+    setSearchLoading: (state, action: PayloadAction<boolean>) => {
+      state.searchLoading = action.payload;
+    },
+
+    setSearchedTokens: (state, action: PayloadAction<Token[] | undefined>) => {
+      if (action.payload) {
+        state.searchedTokens = [...action.payload];
+      } else {
+        state.searchedTokens = undefined;
+      }
+    },
   },
 });
 
@@ -195,6 +211,8 @@ export const {
   setUserTokensLoading,
   setUserTokensMeta,
   resetAnalytics,
+  setSearchLoading,
+  setSearchedTokens,
 } = tokenReducer.actions;
 
 export default tokenReducer.reducer;

utils/helpers.ts

@@ -1,3 +1,5 @@
+import moment from 'moment';
+
 export const getTokenLink = (id: number, hash?: string): { title: string; url: string } => {
   if (!hash) return { title: '', url: '' };
 
@@ -154,3 +156,20 @@ export const appearAnimation = {
   animate: { opacity: 1 },
   exit: { opacity: 0 },
 };
+
+export const formatDateDifference = (date: string) => {
+  const startDate = moment(date);
+  const endDate = moment();
+
+  const years = endDate.diff(startDate, 'years');
+  startDate.add(years, 'years');
+
+  const months = endDate.diff(startDate, 'months');
+  startDate.add(months, 'months');
+
+  const days = endDate.diff(startDate, 'days');
+
+  const formattedString = `${years ? years + 'y ' : ''}${months ? months + 'mo ' : ''}${days ? days + 'd' : ''}`.trim();
+
+  return formattedString || '0d';
+};

views/home/index.tsx

@@ -1,10 +1,8 @@
 'use client';
 import { useEffect, useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { debounce } from 'lodash';
+import { AnimatePresence } from 'framer-motion';
 
 import { LBBadge, LBContainer, LBError, LBModal, LBTable, LBTradeInterface } from '@/components';
-import { SearchAltIcon } from '@/public/icons';
 import useSystemFunctions from '@/hooks/useSystemFunctions';
 import useTokenActions from '@/store/token/actions';
 import { Token } from '@/store/token/types';
@@ -14,12 +12,12 @@ import { setMeta as setTransactionsMeta, setTransactions } from '@/store/transac
 import { setMeta as setHoldersMeta, setHolders } from '@/store/holder';
 import { formatAmount } from '@/utils/helpers';
 import { resetCastAnalytics } from '@/store/casts';
+import SearchComponent from './search';
 
 const HomeView = () => {
   const { navigate, tokenState, dispatch } = useSystemFunctions();
   const { getTokens } = useTokenActions();
 
-  const [searchTerm, setSearchTerm] = useState('');
   const [activeToken, setActiveToken] = useState<Token>();
   const [shouldFetchMore, setShouldFetchMore] = useState(false);
   const [showErrorState, setShowErrorState] = useState(false);
@@ -40,17 +38,8 @@ const HomeView = () => {
     wallet: token.token_address,
   }));
 
-  const debouncedSetSearchTerm = debounce((term) => {
-    setSearchTerm(term);
-  }, 300);
-
   const showShouldFetchMore = tokens && tokens.length > 0 ? false : shouldFetchMore || (loading && !tokens);
 
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target;
-    debouncedSetSearchTerm(value);
-  };
-
   const cta = (id: string) => {
     const token = tokens?.find((token) => token.id === id);
     setActiveToken(token!);
@@ -75,11 +64,6 @@ const HomeView = () => {
     getTokens('take=20', { onError: () => setShowErrorState(true) });
   };
 
-  useEffect(() => {
-    // getTokens(`take=50&search=${searchTerm}`);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setSearchTerm]);
-
   useEffect(() => {
     if (!shouldFetchMore) return;
 
@@ -118,23 +102,7 @@ const HomeView = () => {
               <p className="text-primary-700">Tokens launched will be updated here in realtime</p>
             </div>
 
-            <AnimatePresence>
-              {Boolean(tableData?.length) && (
-                <motion.div
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center justify-center gap-2 min-w-80 px-3 py-2 rounded-lg border border-primary-1950 bg-white shadow-table-cta">
-                  <SearchAltIcon />
-                  <input
-                    type="text"
-                    placeholder="Search by token or contract..."
-                    className="w-full text-primary-2200 text-[14px] leading-[24px] bg-transparent outline-none"
-                    onChange={handleSearchChange}
-                  />
-                </motion.div>
-              )}
-            </AnimatePresence>
+            <AnimatePresence>{Boolean(tableData?.length) && <SearchComponent />}</AnimatePresence>
           </div>
         </LBContainer>
       </div>