Merge branch 'develop' of https://github.com/XLabs/wormscan-ui

XLabs · Dec 17, 2024 · 5b16868 · 5b16868
2 parents 6575483 + e7c71af
commit 5b16868
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wormscan-ui",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "private": true,
   "source": "src/index.html",
   "@parcel/resolver-default": {

diff --git a/src/components/atoms/Select/index.tsx b/src/components/atoms/Select/index.tsx
@@ -58,6 +58,7 @@ const Select = ({
   value,
 }: Props) => {
   const [isOpen, setIsOpen] = useState(keepOpen);
+  const [inputValue, setInputValue] = useState("");
   const ref = useRef<HTMLDivElement>(null);
 
   const handleOutsideClick = () => {
@@ -86,8 +87,8 @@ const Select = ({
           <div className="select-searchable-menu">
             <SelectPrimitive
               aria-label={ariaLabel}
-              autoFocus
               backspaceRemovesValue={false}
+              blurInputOnSelect
               className="select"
               classNamePrefix="select"
               components={{
@@ -141,6 +142,12 @@ const Select = ({
                 onValueChange(v);
                 if (closeOnSelect) setIsOpen(false);
               }}
+              onInputChange={newValue => setInputValue(newValue)}
+              onKeyDown={e => {
+                if (e.key === "Enter" && !inputValue.trim()) {
+                  e.preventDefault();
+                }
+              }}
               options={items}
               placeholder="Search"
               styles={{

diff --git a/src/components/organisms/ChainActivity/index.tsx b/src/components/organisms/ChainActivity/index.tsx
@@ -780,6 +780,7 @@ const ChainActivity = () => {
               startDateDisplayed={startDateDisplayed}
               endDateDisplayed={endDateDisplayed}
               isDesktop={isDesktop}
+              showDateRange
             />
 
             <Select
@@ -950,16 +951,6 @@ const ChainActivity = () => {
                       })
                     : "All Chains"}
                 </div>
-
-                <div className="chain-activity-chart-top-filters-legends-target-range">
-                  {fromDateFormatted && toDateFormatted && (
-                    <>
-                      {fromDateFormatted}
-                      <ArrowRightIcon />
-                      {toDateFormatted}
-                    </>
-                  )}
-                </div>
               </div>
             </div>
           </div>

diff --git a/src/components/organisms/ChainActivity/styles.scss b/src/components/organisms/ChainActivity/styles.scss
@@ -87,6 +87,10 @@
         top: 0px;
         transform: scale(0.94);
 
+        @media only screen and (max-width: 1240px) {
+          right: 88px;
+        }
+
         &.is-testnet {
           right: 192px;
         }
@@ -273,7 +277,7 @@
 
             & > span {
               @include desktop {
-                @media screen and (max-width: 1260px) {
+                @media screen and (max-width: 1310px) {
                   display: none;
                 }
               }
@@ -340,13 +344,6 @@
                 overflow: auto;
                 gap: 12px;
               }
-
-              &-range {
-                @include centered-row;
-                @include text-roboto-body-400;
-                color: var(--color-gray-500);
-                margin-left: auto;
-              }
             }
           }
         }
@@ -396,9 +393,8 @@
             @include desktop {
               height: 36px;
 
-              @media only screen and (max-width: 1100px) {
-                font-size: 12px;
-                width: 40px;
+              @media only screen and (max-width: 1240px) {
+                padding-right: 140px;
               }
             }
           }

diff --git a/src/pages/Tx/index.tsx b/src/pages/Tx/index.tsx
@@ -34,6 +34,8 @@ import { getChainName } from "src/utils/wormhole";
 import {
   getAlgorandTokenInfo,
   getSolanaCctp,
+  getSuiCctp,
+  ISolanaSuiCctpResponse,
   tryGetAddressInfo,
   tryGetWrappedToken,
 } from "src/utils/cryptoToolkit";
@@ -323,8 +325,18 @@ const Tx = () => {
         }
         // second error, if hash is solana-like, check if its manual cctp
         if (errCount === 1 && canBeSolanaTxHash) {
-          getSolanaCctp(network, txHash)
-            .then(resp => {
+          Promise.all([
+            getSolanaCctp(network, txHash).catch(() => null),
+            getSuiCctp(network, txHash).catch(() => null),
+          ]).then(([solanaResp, suiResp]) => {
+            const resp: ISolanaSuiCctpResponse = solanaResp || suiResp;
+            const chain = solanaResp
+              ? chainToChainId("Solana")
+              : suiResp
+              ? chainToChainId("Sui")
+              : null;
+
+            if (resp && chain) {
               cancelRequests.current = true;
               const toChain = getCctpDomain(resp.destinationDomain);
 
@@ -334,7 +346,7 @@ const Tx = () => {
                     hex: resp.contractAddress,
                     native: resp.contractAddress,
                   },
-                  emitterChain: 1,
+                  emitterChain: chain,
                   id: null,
                   content: {
                     payload: null,
@@ -343,13 +355,13 @@ const Tx = () => {
                       appIds: [CCTP_MANUAL_APP_ID],
                       fee: "0",
                       feeAddress: "",
-                      feeChain: 1,
+                      feeChain: chain,
                       fromAddress: resp.sourceAddress,
-                      fromChain: 1,
+                      fromChain: chain,
                       toAddress: resp.targetAddress,
                       toChain: toChain,
                       tokenAddress: resp.sourceTokenAddress,
-                      tokenChain: 1,
+                      tokenChain: chain,
                       overwriteTargetTokenAddress: getUsdcAddress(network, toChain),
                       overwriteTargetTokenChain: toChain,
                     },
@@ -362,7 +374,7 @@ const Tx = () => {
                   status: "external_tx",
                   sequence: "",
                   sourceChain: {
-                    chainId: 1,
+                    chainId: chain,
                     timestamp: new Date(resp.timestamp),
                     from: resp.sourceAddress,
                     status: undefined,
@@ -377,8 +389,10 @@ const Tx = () => {
 
               setErrorCode(undefined);
               setIsLoading(false);
-            })
-            .catch(() => (cancelRequests.current = false));
+            } else {
+              cancelRequests.current = false;
+            }
+          });
         }
 
         if (errCount === 2) {

diff --git a/src/pages/Txs/Information/Filters/index.tsx b/src/pages/Txs/Information/Filters/index.tsx
@@ -177,6 +177,23 @@ const Filters = ({ params, setIsPaginationLoading }: Props) => {
     setEndDateDisplayed(params.to ? new Date(params.to) : null);
   }, [params]);
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Enter" && showFilters) {
+        event.preventDefault();
+
+        if (!disableApplyButton) {
+          applyFilters();
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [applyFilters, disableApplyButton, showFilters]);
+
   return (
     <div className="filters">
       {showFilters && !isDesktop && <div className="filters-bg" />}

diff --git a/src/pages/Txs/Information/Filters/styles.scss b/src/pages/Txs/Information/Filters/styles.scss
@@ -123,7 +123,7 @@
       }
 
       @include bigDesktop {
-        left: 268px;
+        left: 221px;
       }
     }
 

diff --git a/src/pages/Txs/Information/index.tsx b/src/pages/Txs/Information/index.tsx
@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import { useLocation } from "react-router-dom";
 import { Column } from "react-table";
-import { IParams, PAGE_SIZE, TransactionOutput } from "..";
+import { IParams, TransactionOutput } from "..";
 import { Table } from "src/components/organisms";
 import { Pagination } from "src/components/atoms";
 import { useNavigateCustom, useWindowSize } from "src/utils/hooks";

diff --git a/src/pages/Txs/index.tsx b/src/pages/Txs/index.tsx
@@ -75,15 +75,15 @@ const Txs = () => {
 
   const [searchParams, setSearchParams] = useSearchParams();
   const params: IParams = {
-    page: searchParams.get("page") || null,
-    address: searchParams.get("address") || null,
-    appId: searchParams.get("appId") || null,
-    exclusiveAppId: searchParams.get("exclusiveAppId") || null,
-    sourceChain: searchParams.get("sourceChain") || null,
-    targetChain: searchParams.get("targetChain") || null,
-    payloadType: searchParams.get("payloadType") || null,
-    from: searchParams.get("from") || null,
-    to: searchParams.get("to") || null,
+    page: searchParams.get("page") || "",
+    address: searchParams.get("address") || "",
+    appId: searchParams.get("appId") || "",
+    exclusiveAppId: searchParams.get("exclusiveAppId") || "",
+    sourceChain: searchParams.get("sourceChain") || "",
+    targetChain: searchParams.get("targetChain") || "",
+    payloadType: searchParams.get("payloadType") || "",
+    from: searchParams.get("from") || "",
+    to: searchParams.get("to") || "",
   };
 
   useEffect(() => {

diff --git a/src/utils/cryptoToolkit.ts b/src/utils/cryptoToolkit.ts
@@ -18,7 +18,7 @@ interface IAlgorandTokenResponse {
   symbol?: string;
 }
 
-interface ISolanaCctpResponse {
+export interface ISolanaSuiCctpResponse {
   amount: string;
   contractAddress: string;
   destinationDomain: number;
@@ -194,9 +194,22 @@ export const getSolanaCctp = async (network: Network, txHash: string) => {
       `${BFF_URL}/getSolanaCctp?network=${network}&txHash=${txHash}`,
     );
 
-    const solanaCctpResponse = (await solanaCctpRequest.json()) as ISolanaCctpResponse | null;
+    const solanaCctpResponse = (await solanaCctpRequest.json()) as ISolanaSuiCctpResponse | null;
     return solanaCctpResponse;
   } catch (e) {
     return null;
   }
 };
+
+export const getSuiCctp = async (network: Network, txHash: string) => {
+  try {
+    const suiCctpRequest = await fetchWithTimeout(
+      `${BFF_URL}/getSuiCctp?network=${network}&txHash=${txHash}`,
+    );
+
+    const suiCctpResponse = (await suiCctpRequest.json()) as ISolanaSuiCctpResponse | null;
+    return suiCctpResponse;
+  } catch (e) {
+    return null;
+  }
+};
diff --git a/src/utils/fetchWithRPCsFallthrough.ts b/src/utils/fetchWithRPCsFallthrough.ts
@@ -525,7 +525,11 @@ export async function fetchWithRpcFallThrough(env: Environment, searchValue: str
 
         const toChain = getCctpDomain(destinationDomain);
         const toAddress =
-          toChain === 1 ? hexToBase58(mintRecipient) : "0x" + mintRecipient.substring(26);
+          toChain === chainToChainId("Sui")
+            ? mintRecipient
+            : toChain === chainToChainId("Solana")
+            ? hexToBase58(mintRecipient)
+            : "0x" + mintRecipient.substring(26);
 
         return {
           amount: "" + formatUnits(amount.toString(), 6),
@@ -591,6 +595,7 @@ export const getCctpDomain = (dom: number) => {
   if (dom === 5) return chainToChainId("Solana");
   if (dom === 6) return chainToChainId("Base");
   if (dom === 7) return chainToChainId("Polygon");
+  if (dom === 8) return chainToChainId("Sui");
   return null;
 };
 
@@ -603,6 +608,8 @@ export const getUsdcAddress = (network: Network, chain: ChainId) => {
     if (chain === chainToChainId("Solana")) return "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v";
     if (chain === chainToChainId("Base")) return "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913";
     if (chain === chainToChainId("Polygon")) return "0x3c499c542cef5e3811e1192ce70d8cc03d5c3359";
+    if (chain === chainToChainId("Sui"))
+      return "0xdba34672e30cb065b1f93e3ab55318768fd6fef66c15942c9f7cb846e2f900e7::usdc::USDC";
   } else {
     if (chain === chainToChainId("Ethereum")) return "0x07865c6e87b9f70255377e024ace6630c1eaa37f";
     if (chain === chainToChainId("Avalanche")) return "0x5425890298aed601595a70ab815c96711a31bc65";
@@ -611,6 +618,8 @@ export const getUsdcAddress = (network: Network, chain: ChainId) => {
     if (chain === chainToChainId("Solana")) return "4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU";
     if (chain === chainToChainId("Base")) return "0xf175520c52418dfe19c8098071a252da48cd1c19";
     if (chain === chainToChainId("Polygon")) return "0x9999f7fea5938fd3b1e26a12c3f2fb024e194f97";
+    if (chain === chainToChainId("Sui"))
+      return "0xa1ec7fc00a6f40db9693ad1415d0c193ad3906494428cf252621037bd7117e29::usdc::USDC";
   }
   return null;
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -123,7 +123,7 @@ @@
           }
           @include bigDesktop {
-            left: 268px;
+            left: 221px;
           }
         }
@@ Expand Down @@