@orderly.network/ui 3.0.1 → 3.0.2-alpha.0

package/dist/index.mjs

@@ -1446,25 +1446,50 @@ var ChainIcon = (props) => {
     }
   );
 };
+var BASE_URL = "https://oss.orderly.network/static";
 var TokenIcon = (props) => {
-  const url = useMemo(() => {
+  const { primaryUrl, fallbackUrl } = useMemo(() => {
     if (props.url) {
-      return props.url;
+      return { primaryUrl: props.url, fallbackUrl: props.url };
     }
     let name = props.name;
+    let hasBroker = false;
+    let brokerId;
     if (typeof props.symbol === "string") {
-      const arr = props.symbol?.split("_");
-      name = arr[1];
+      const arr = props.symbol.split("_");
+      if (arr.length >= 2) {
+        name = arr[1];
+      }
+      brokerId = arr[3]?.trim();
+      hasBroker = !!brokerId;
+    }
+    if (!name) {
+      return { primaryUrl: void 0, fallbackUrl: void 0 };
     }
-    return `https://oss.orderly.network/static/symbol_logo/${name}.png`;
+    const symbolUrl = `${BASE_URL}/symbol_logo/${name}.png`;
+    const brokerName = hasBroker && brokerId ? `${name}_${brokerId}` : name;
+    const brokerUrl = `${BASE_URL}/broker_symbol_logo/${brokerName}.png`;
+    return {
+      primaryUrl: hasBroker ? brokerUrl : symbolUrl,
+      fallbackUrl: symbolUrl
+    };
   }, [props.name, props.symbol, props.url]);
+  const [currentSrc, setCurrentSrc] = useState(primaryUrl);
+  useEffect(() => {
+    setCurrentSrc(primaryUrl);
+  }, [primaryUrl]);
   return /* @__PURE__ */ jsx(
     Avatar,
     {
       size: props.size,
-      src: url,
+      src: currentSrc,
       alt: props.name,
-      className: props.className
+      className: props.className,
+      onLoadingStatusChange: (status) => {
+        if (status === "error" && primaryUrl !== fallbackUrl) {
+          setCurrentSrc((prev) => prev === primaryUrl ? fallbackUrl : prev);
+        }
+      }
     }
   );
 };
@@ -4744,7 +4769,7 @@ function useMediaQuery(query) {
 
 // src/hooks/useScreen.ts
 function useScreen() {
-  const isMobile = useMediaQuery("(max-width: 768px)");
+  const isMobile = useMediaQuery("(max-width: 1023.98px)");
   return {
     isMobile,
     isDesktop: !isMobile
@@ -9317,13 +9342,13 @@ var DateRangePicker = (props) => {
   );
   const [isMobileView, setIsMobileView] = useState(false);
   const update = useDebouncedCallback((width) => {
-    setIsMobileView(width <= 768);
+    setIsMobileView(width < 1024);
   }, 100);
   useEffect(() => {
     const handleResize = () => {
       update(window.innerWidth);
     };
-    setIsMobileView(window.innerWidth <= 768);
+    setIsMobileView(window.innerWidth < 1024);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);