Merge branch 'release/v0.1.3'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "baifa",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -18,6 +18,7 @@
     "bitcoin-address-validation": "^2.2.3",
     "clsx": "^2.1.0",
     "d3": "^7.9.0",
+    "d3-drag": "^3.0.0",
     "i18next": "^23.2.8",
     "next": "13.4.5",
     "next-i18next": "^14.0.0",

src/components/add_address_panel/add_address_panel.tsx

@@ -2,54 +2,102 @@ import {IoIosCloseCircleOutline} from 'react-icons/io';
 import {HiPlus} from 'react-icons/hi';
 import {FaHeart} from 'react-icons/fa';
 import {FiTrash2} from 'react-icons/fi';
-import {useState} from 'react';
+import {ChangeEvent, useState, useEffect} from 'react';
 import useAPIResponse from '../../lib/hooks/use_api_response';
 import {HttpMethod} from '../../constants/api_request';
 import {buttonStyle} from '../../constants/config';
 
 interface IAddAddressPanelProps {
   modalVisible: boolean;
   modalClickHandler: () => void;
+  targetAddress: string;
   addAddressHandler: (address: string) => void;
 }
 
 const AddAddressPanel = ({
   modalVisible,
   modalClickHandler,
+  targetAddress,
   addAddressHandler,
 }: IAddAddressPanelProps) => {
   // Info: (20240326 - Julian) 是否顯示 Following List
   const [visibleFollowingList, setVisibleFollowingList] = useState(false);
   // Info: (20240326 - Julian) address 清單
   // ToDo: (20240326 - Julian) 之後應該要改成 <string[]>
-  const [preAddAddressList, setPreAddAddressList] = useState<string>('');
+  const [addressList, setAddressList] = useState<string>(targetAddress);
+  // Info: (20240402 - Julian) 輸入的地址
+  const [inputValue, setInputValue] = useState('');
+  // Info: (20240402 - Julian) 是否顯示 address 建議清單
+  const [visibleAddressSuggestion, setVisibleAddressSuggestion] = useState(false);
 
   const {data: followingList, isLoading: isFollowingList} = useAPIResponse<string[]>(
-    '/api/v1/app/tracking_tool/add_address_list',
+    '/api/v1/app/tracking_tool/add_address/following_list',
     {method: HttpMethod.GET}
   );
 
+  // Info: (20240402 - Julian) 從 API 取得的地址建議清單
+  const {data: addressSuggestion} = useAPIResponse<string[]>(
+    `/api/v1/app/tracking_tool/add_address/address_suggestion`,
+    {method: HttpMethod.GET},
+    {search_input: inputValue}
+  );
+
+  // Info: (20240326 - Julian) 顯示 Following List
   const visibleFollowingListHandler = () => setVisibleFollowingList(prev => !prev);
 
   // Info: (20240326 - Julian) 點擊 Add 按鈕後的處理
   const addAddressButtonHandler = () => {
-    addAddressHandler(preAddAddressList);
+    addAddressHandler(addressList);
     modalClickHandler();
   };
+  // Info: (20240402 - Julian) focus 搜尋欄位時，顯示搜尋建議
+  const handleInputFocus = () => setVisibleAddressSuggestion(true);
+  // Info: (20240402 - Julian) 改變搜尋欄位的值
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+    setVisibleAddressSuggestion(true);
+  };
+
+  // Info: (20240402 - Julian) 如果 panel 重開，就清空輸入的值
+  useEffect(() => {
+    setAddressList(targetAddress);
+    setInputValue('');
+  }, [modalVisible, targetAddress]);
+
   // Info: (20240326 - Julian) 如果清單為空，就不能點擊 Add 按鈕
-  const addAddressButtonDisabled = preAddAddressList === '';
+  const addAddressButtonDisabled = addressList === '';
+
+  // Info: (20240402 - Julian) 顯示建議
+  const displayAddressSuggestion = visibleAddressSuggestion
+    ? addressSuggestion?.map((suggestion, index) => {
+        // Info: (20240402 - Julian) 將地址加入 address list，並關閉建議
+        const addAddressHandler = () => {
+          setAddressList(suggestion);
+          setVisibleAddressSuggestion(false);
+        };
+        return (
+          <div
+            key={index}
+            onClick={addAddressHandler}
+            className="w-full cursor-pointer px-4 py-2 text-hoverWhite hover:bg-purpleLinear"
+          >
+            {suggestion}
+          </div>
+        );
+      })
+    : null;
 
-  //
-  const displayPreAddAddressList =
-    preAddAddressList !== '' ? (
+  // Info: (20240326 - Julian) 顯示地址清單
+  const displayAddressList =
+    addressList !== '' ? (
       <div className="flex w-full items-center border-b border-darkPurple4 px-4 py-2">
         <p className="w-100px grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-xl font-semibold text-primaryBlue lg:w-300px">
           <span className="text-hoverWhite">Address </span>
-          {preAddAddressList}
+          {addressList}
         </p>
 
         {/* Info: (20240326 - Julian) Delete button */}
-        <button onClick={() => setPreAddAddressList('')} className={`${buttonStyle} ml-4`}>
+        <button onClick={() => setAddressList('')} className={`${buttonStyle} ml-4`}>
           <FiTrash2 size={24} />
         </button>
       </div>
@@ -60,7 +108,7 @@ const AddAddressPanel = ({
       followingList.map((address, index) => {
         // Info: (20240326 - Julian) 將地址加入清單並關閉 Following List
         const addButtonHandler = () => {
-          setPreAddAddressList(address);
+          setAddressList(address);
           visibleFollowingListHandler();
         };
         return (
@@ -87,7 +135,7 @@ const AddAddressPanel = ({
   const isShowFollowingList = visibleFollowingList ? (
     <div
       id="following-list"
-      className="absolute z-80 flex w-9/10 flex-col items-center rounded bg-darkPurple p-10 shadow-lg lg:w-700px"
+      className="absolute z-80 flex w-9/10 flex-col items-center rounded-lg bg-darkPurple p-10 shadow-lg lg:w-700px"
     >
       {/* Info: (20240326 - Julian) Close button */}
       <button
@@ -99,7 +147,7 @@ const AddAddressPanel = ({
 
       <h2 className="text-xl font-semibold">Following List</h2>
       {/* Info: (20240326 - Julian) Address list */}
-      <div className="mt-10 flex h-400px w-full flex-col items-center overflow-y-auto bg-darkPurple3">
+      <div className="mt-10 flex max-h-300px w-full flex-col items-center overflow-y-auto bg-darkPurple3">
         {displayFollowingList}
       </div>
     </div>
@@ -109,19 +157,22 @@ const AddAddressPanel = ({
     <div className="fixed z-60 flex h-screen w-screen items-center justify-center overflow-hidden bg-black/25 backdrop-blur-sm">
       <div
         id="add-address-panel"
-        className="relative z-70 flex h-400px w-9/10 flex-col items-center gap-4 rounded bg-darkPurple p-10 lg:w-700px"
+        className="relative z-70 flex h-400px w-9/10 flex-col items-center gap-4 rounded-lg bg-darkPurple p-10 lg:w-700px"
       >
         {/* Info: (20240326 - Julian) Close button */}
         <button onClick={modalClickHandler} className="absolute right-6 top-6 hover:opacity-75">
           <IoIosCloseCircleOutline size={30} />
         </button>
-
+        {/* Info: (20240401 - Julian) Title */}
         <h2 className="text-xl font-semibold">Add address</h2>
         {/* Info: (20240326 - Julian) Input address */}
         <div className="relative flex w-full items-center">
           <input
             type="text"
             placeholder="Enter the address"
+            value={inputValue}
+            onFocus={handleInputFocus}
+            onChange={handleInputChange}
             className="h-55px w-full rounded bg-purpleLinear px-6 text-base shadow-xl placeholder:text-lilac"
           />
           <button
@@ -131,15 +182,12 @@ const AddAddressPanel = ({
             <p className="hidden lg:block">Following List</p>
             <FaHeart size={12} className="block lg:hidden" />
           </button>
+          <div className="absolute top-55px flex w-full flex-col items-start bg-darkPurple4 shadow-lg">
+            {displayAddressSuggestion}
+          </div>
         </div>
-        {/* Info: (20240326 - Julian) Add button */}
-        <button className={buttonStyle}>
-          <HiPlus size={24} />
-        </button>
         {/* Info: (20240326 - Julian) Pre add address list */}
-        <div className="flex w-full flex-1 flex-col overflow-y-auto">
-          {displayPreAddAddressList}
-        </div>
+        <div className="flex w-full flex-1 flex-col overflow-y-auto">{displayAddressList}</div>
 
         <button
           disabled={addAddressButtonDisabled}

src/components/all_currencies_page_body/all_currencies_page_body.tsx

@@ -12,17 +12,20 @@ import SortingMenu from '../sorting_menu/sorting_menu';
 import useAPIResponse from '../../lib/hooks/use_api_response';
 import {APIURL, HttpMethod} from '../../constants/api_request';
 import Skeleton from '../skeleton/skeleton';
-import {ITEM_PER_PAGE} from '../../constants/config';
+import {DEFAULT_PAGE, ITEM_PER_PAGE, defaultOption} from '../../constants/config';
 import {getKeyByValue} from '../../lib/common';
+import {useRouter} from 'next/router';
 
 const AllCurrenciesPageBody = () => {
   const {t}: {t: TranslateFunction} = useTranslation('common');
 
+  const router = useRouter();
+  const {page} = router.query;
+
   // Info: (20240308 - Liz) 搜尋條件
   const [search, setSearch] = useState('');
-  const typeOptionDefault = 'SORTING.ALL';
-  const [filteredType, setFilteredType] = useState(typeOptionDefault);
-  const [activePage, setActivePage] = useState<number>(1);
+  const [activePage, setActivePage] = useState<number>(page ? +page : DEFAULT_PAGE);
+  const [filteredType, setFilteredType] = useState(defaultOption);
 
   const sortingOptions = ['A to Z', 'Z to A']; // Info: (20240125 - Julian) 暫時以字母排序
   const [sorting, setSorting] = useState(sortingOptions[0]);
@@ -36,13 +39,15 @@ const AllCurrenciesPageBody = () => {
   };
   const sortingReq = sortingMap[sorting];
 
+  // Info: (20240402 - Liz) Call API to get currencies list (API-017)
   const {data: currenciesData, isLoading: isCurrenciesDataLoading} =
     useAPIResponse<ICurrencyListPage>(
       `${APIURL.CURRENCIES}`,
       {method: HttpMethod.GET},
-      // Info: (20240325 - Liz) 預設值 ?page=1&sort=asc&search=&type=
+      // Info: (20240325 - Liz) 預設值 ?page=1&offset=10&sort=asc&search=&type=
       {
         page: activePage,
+        offset: ITEM_PER_PAGE,
         sort: sortingReq,
         search: search,
         type: filteredTypeByChainId,
@@ -62,12 +67,7 @@ const AllCurrenciesPageBody = () => {
 
   // Info: (20240308 - Liz) 下拉式選單選項(chain id)由 API 回傳
   const chainNameTypes = currenciesData?.chainNameTypes ?? [];
-  const typeOptions = [typeOptionDefault, ...chainNameTypes];
-
-  // Info: (20240308 - Liz) 當搜尋、篩選、排序的條件改變時，將 activePage 設為 1。
-  useEffect(() => {
-    setActivePage(1);
-  }, [search, filteredType, sorting]);
+  const typeOptions = [defaultOption, ...chainNameTypes];
 
   // Info: (20240308 - Liz) 顯示貨幣列表
   const currenciesList =
@@ -137,6 +137,7 @@ const AllCurrenciesPageBody = () => {
             {SearchBarWithKeyDown({
               searchBarPlaceholder: t('CURRENCIES_PAGE.SEARCH_PLACEHOLDER'),
               setSearch: setSearch,
+              setActivePage: setActivePage,
             })}
           </div>
           <div className="flex w-full flex-col items-center justify-between lg:flex-row">
@@ -146,6 +147,7 @@ const AllCurrenciesPageBody = () => {
                 sorting={filteredType}
                 setSorting={setFilteredType}
                 bgColor="bg-darkPurple"
+                setActivePage={setActivePage}
               />
             </div>
 
@@ -156,6 +158,7 @@ const AllCurrenciesPageBody = () => {
                 sorting={sorting}
                 setSorting={setSorting}
                 bgColor="bg-darkPurple"
+                setActivePage={setActivePage}
               />
             </div>
           </div>

src/components/block_produced_section/block_produced_section.tsx

@@ -131,6 +131,7 @@ const BlockProducedHistorySection = ({
                 period={period ?? periodDefault}
                 setFilteredPeriod={setPeriod ?? setPeriodDefault}
                 isLinearBg
+                setActivePage={setActivePage ?? setActivePageDefault}
                 // loading={addressDetailsCtx.blocksLoading}
                 // datePickerHandler={blockDateFilterHandler}
               />
@@ -146,6 +147,7 @@ const BlockProducedHistorySection = ({
                 sortingOptions={sortOldAndNewOptions}
                 // loading={addressDetailsCtx.blocksLoading}
                 sortPrefix={`blocks`}
+                setActivePage={setActivePage ?? setActivePageDefault}
               />
             </div>
           </div>
@@ -158,6 +160,7 @@ const BlockProducedHistorySection = ({
           {SearchBarWithKeyDown({
             searchBarPlaceholder: t('COMMON.BLOCK_PRODUCED_HISTORY_PLACEHOLDER'),
             setSearch: setSearch ?? setSearchDefault,
+            setActivePage: setActivePage ?? setActivePageDefault,
           })}
         </div>
         {/* Info: (20231103 - Julian) Address List */}

src/components/block_tab/block_tab.tsx

@@ -32,17 +32,19 @@ const BlockTab = ({chainDetailLoading, activePage, setActivePage}: IBlockTabProp
   const [search, setSearch] = useState('');
   const [period, setPeriod] = useState(default30DayPeriod);
   const [sorting, setSorting] = useState<string>(sortOldAndNewOptions[0]);
-  // const [activePage, setActivePage] = useState(1);
 
+  // Info: (20240410 - Liz) Call API to get block data (API-006)
   const {data: blockData, isLoading: isBlockLoading} = useAPIResponse<IBlockList>(
     `${APIURL.CHAINS}/${chainId}/block`,
     {method: HttpMethod.GET},
+    // Info: (20240410 - Liz) 預設值 ?page=1&offset=10&sort=desc&search=&start_date=&end_date=
     {
+      page: activePage,
+      offset: ITEM_PER_PAGE,
+      sort: convertStringToSortingType(sorting),
       search: search,
       start_date: period.startTimeStamp === 0 ? '' : period.startTimeStamp,
       end_date: period.endTimeStamp === 0 ? '' : period.endTimeStamp,
-      sort: convertStringToSortingType(sorting),
-      page: activePage,
     }
   );
 
@@ -79,13 +81,18 @@ const BlockTab = ({chainDetailLoading, activePage, setActivePage}: IBlockTabProp
           {SearchBarWithKeyDown({
             searchBarPlaceholder: t('CHAIN_DETAIL_PAGE.SEARCH_PLACEHOLDER_BLOCKS'),
             setSearch: setSearch,
+            setActivePage: setActivePage,
           })}
         </div>
         <div className="flex w-full flex-col items-center space-y-2 pt-16 lg:flex-row lg:justify-between lg:space-y-0">
           {/* Info: (20231101 - Julian) Date Picker */}
           <div className="flex w-full items-center text-base lg:w-fit lg:space-x-2">
             <p className="hidden text-lilac lg:block">{t('DATE_PICKER.DATE')} :</p>
-            <DatePicker period={period} setFilteredPeriod={setPeriod} />
+            <DatePicker
+              period={period}
+              setFilteredPeriod={setPeriod}
+              setActivePage={setActivePage}
+            />
           </div>
           {/* Info: (20230904 - Julian) Sorting Menu */}
           <div className="relative flex w-full items-center pb-2 text-base lg:w-fit lg:space-x-2 lg:pb-0">
@@ -95,6 +102,7 @@ const BlockTab = ({chainDetailLoading, activePage, setActivePage}: IBlockTabProp
               sorting={sorting}
               setSorting={setSorting}
               bgColor="bg-darkPurple"
+              setActivePage={setActivePage}
             />
           </div>
         </div>