Use a single spritesheet instead of individual image requests for network logos

README.md

@@ -23,5 +23,5 @@ This repository contains implementation of Layerswap UI
   NEXT_PUBLIC_LS_API = https://api-dev.layerswap.cloud/
   NEXT_PUBLIC_API_KEY = mainnet #sandbox for testnets
   NEXT_PUBLIC_IDENTITY_API = https://identity-api-dev.layerswap.cloud/
+  NEXT_PUBLIC_IMAGE_STORAGE = https://layerswap-images.s3.eu-north-1.amazonaws.com/logos/
   ```
-

components/Input/NetworkFormField.tsx

@@ -2,7 +2,7 @@ import { useFormikContext } from "formik";
 import { forwardRef, useCallback, useEffect, useState } from "react";
 import { useSettingsState } from "../../context/settings";
 import { SwapDirection, SwapFormValues } from "../DTOs/SwapFormValues";
-import { ISelectMenuItem, SelectMenuItem } from "../Select/Shared/Props/selectMenuItem";
+import { ILogoCoordinates, ILogoMetadata, ISelectMenuItem, SelectMenuItem } from "../Select/Shared/Props/selectMenuItem";
 import CommandSelectWrapper from "../Select/Command/CommandSelectWrapper";
 import { ResolveExchangeOrder, ResolveNetworkOrder, SortAscending } from "../../lib/sorting"
 import NetworkSettings from "../../lib/NetworkSettings";
@@ -18,6 +18,8 @@ import CurrencyGroupFormField from "./CEXCurrencyFormField";
 import { QueryParams } from "../../Models/QueryParams";
 import { resolveExchangesURLForSelectedToken, resolveNetworkRoutesURL } from "../../helpers/routes";
 import RouteIcon from "./RouteIcon";
+import AppSettings from "../../lib/AppSettings";
+import NetworkLogo from "./NetworkLogo";
 
 type Props = {
     direction: SwapDirection,
@@ -60,6 +62,15 @@ const NetworkFormField = forwardRef(function NetworkFormField({ direction, label
 
     const networkRoutesURL = resolveNetworkRoutesURL(direction, values)
     const apiClient = new LayerSwapApiClient()
+
+    const metadataURL = `${AppSettings.ImageStorage}metadata.json`
+    const {
+        data: metadata,
+        isLoading: metadataLoading,
+    } = useSWR<ApiResponse<ILogoMetadata[]> | ILogoMetadata[]>(`${metadataURL}`, apiClient.outboundFetcher, { keepPreviousData: true })
+
+    const [logoMetadata, setLogoMetadata] = useState<ILogoMetadata[]>([])
+
     const {
         data: routes,
         isLoading,
@@ -76,6 +87,10 @@ const NetworkFormField = forwardRef(function NetworkFormField({ direction, label
 
     const [exchangesData, setExchangesData] = useState<Exchange[]>(direction === 'from' ? sourceExchanges : destinationExchanges)
 
+    useEffect(() => {
+        if (!metadataLoading && metadata) setLogoMetadata(metadata as ILogoMetadata[])
+    }, [metadata])
+
     useEffect(() => {
         if (!exchnagesDataLoading && exchanges?.data) setExchangesData(exchanges.data)
     }, [exchanges])
@@ -89,12 +104,12 @@ const NetworkFormField = forwardRef(function NetworkFormField({ direction, label
     if (direction === "from") {
         placeholder = "Source";
         searchHint = "Swap from";
-        menuItems = GenerateMenuItems(routesData, toExchange || disableExchanges ? [] : exchangesData, direction, !!(from && lockFrom), query);
+        menuItems = GenerateMenuItems(routesData, toExchange || disableExchanges ? [] : exchangesData, direction, !!(from && lockFrom), query, logoMetadata);
     }
     else {
         placeholder = "Destination";
         searchHint = "Swap to";
-        menuItems = GenerateMenuItems(routesData, fromExchange || disableExchanges ? [] : exchangesData, direction, !!(to && lockTo), query);
+        menuItems = GenerateMenuItems(routesData, fromExchange || disableExchanges ? [] : exchangesData, direction, !!(to && lockTo), query, logoMetadata);
     }
 
     const value = menuItems.find(x => !x.isExchange ?
@@ -169,7 +184,16 @@ function groupByType(values: ISelectMenuItem[]) {
     return groups;
 }
 
-function GenerateMenuItems(routes: RouteNetwork[] | undefined, exchanges: Exchange[], direction: SwapDirection, lock: boolean, query: QueryParams): (SelectMenuItem<RouteNetwork | Exchange> & { isExchange: boolean })[] {
+function getLogoCoords(logoMetadata: ILogoMetadata[], url: string): ILogoCoordinates {
+    const name = url.split('/').pop();
+    const metadata = logoMetadata?.find(l => l.filename === name);
+    return {
+        x: metadata?.x || 0,
+        y: metadata?.y || 0
+    }
+}
+
+function GenerateMenuItems(routes: RouteNetwork[] | undefined, exchanges: Exchange[], direction: SwapDirection, lock: boolean, query: QueryParams, logoMetadata: ILogoMetadata[]): (SelectMenuItem<RouteNetwork | Exchange> & { isExchange: boolean })[] {
     const mappedLayers = routes?.map(r => {
         const isNewlyListed = r?.tokens?.every(t => new Date(t?.listing_date)?.getTime() >= new Date().getTime() - ONE_WEEK);
         const badge = isNewlyListed ? (
@@ -185,6 +209,8 @@ function GenerateMenuItems(routes: RouteNetwork[] | undefined, exchanges: Exchan
         const order = ResolveNetworkOrder(r, direction, isNewlyListed)
         const routeNotFound = isAvailable && !r.tokens?.some(r => r.status === 'active');
 
+        const logoCoords = getLogoCoords(logoMetadata, r.logo)
+
         const res: SelectMenuItem<RouteNetwork> & { isExchange: boolean } = {
             baseObject: r,
             id: r.name,
@@ -196,6 +222,7 @@ function GenerateMenuItems(routes: RouteNetwork[] | undefined, exchanges: Exchan
             isExchange: false,
             badge,
             leftIcon: <RouteIcon direction={direction} isAvailable={isAvailable} routeNotFound={routeNotFound} type="network" />,
+            logo: <NetworkLogo x={logoCoords.x} y={logoCoords.y} />
         }
         return res;
     }).sort(SortAscending) || [];

components/Input/NetworkLogo.tsx

@@ -0,0 +1,35 @@
+import { FC } from "react";
+
+import AppSettings from "../../lib/AppSettings";
+
+type Props = {
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  className?: string;
+};
+
+const NetworkLogo: FC<Props> = (props) => {
+  const {
+    x = 0,
+    y = 0,
+    width = 24,
+    height = 24,
+    className = "rounded-md",
+  } = props;
+  const url = `${AppSettings.ImageStorage}spritesheet.png`;
+
+  return (
+    <div
+      className={className}
+      style={{
+        background: `url('${url}') -${x}px -${y}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+      }}
+    ></div>
+  );
+};
+
+export default NetworkLogo;

components/Select/Command/CommandSelectWrapper.tsx

@@ -60,15 +60,20 @@ export default function CommandSelectWrapper<T>({
                         {
                             value?.imgSrc && <div className="flex items-center">
                                 <div className="flex-shrink-0 h-6 w-6 relative">
-                                    <Image
-                                        src={value.imgSrc}
-                                        alt="Project Logo"
-                                        height="40"
-                                        width="40"
-                                        loading="eager"
-                                        priority
-                                        className="rounded-md object-contain"
+                                     {value.logo ? (
+                                        value.logo
+                                    ) : (
+                                        // TODO: Clarify if the logo should be loaded like network logo
+                                        <Image
+                                            src={value.imgSrc}
+                                            alt="Project Logo"
+                                            height="40"
+                                            width="40"
+                                            loading="eager"
+                                            priority
+                                            className="rounded-md object-contain"
                                     />
+                                )}
                                 </div>
                             </div>
                         }

components/Select/Shared/Props/selectMenuItem.tsx

@@ -1,3 +1,16 @@
+export interface ILogoMetadata {
+    filename: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export interface ILogoCoordinates {
+    x?: number;
+    y?: number;
+}
+
 export class SelectMenuItem<T> implements ISelectMenuItem {
     id: string;
     name: string;
@@ -8,6 +21,7 @@ export class SelectMenuItem<T> implements ISelectMenuItem {
     group?: string;
     details?: JSX.Element | JSX.Element[];
     badge?: JSX.Element | JSX.Element[];
+    logo?: JSX.Element | JSX.Element[];
     leftIcon?: JSX.Element | JSX.Element[];
     baseObject: T;
     constructor(baseObject: T, id: string, name: string, order: number, imgSrc: string, isAvailable: boolean, group?: string, details?: JSX.Element | JSX.Element[]) {
@@ -33,4 +47,5 @@ export interface ISelectMenuItem {
     badge?: JSX.Element | JSX.Element[];
     leftIcon?: JSX.Element | JSX.Element[];
     order?: number;
+    logo?: JSX.Element | JSX.Element[];
 }

components/Select/Shared/SelectItem.tsx

@@ -1,8 +1,8 @@
-import { ISelectMenuItem } from "./Props/selectMenuItem";
 import Image from 'next/image';
 
-export default function SelectItem({ item }: { item: ISelectMenuItem }) {
+import { ISelectMenuItem } from "./Props/selectMenuItem";
 
+export default function SelectItem({ item }: { item: ISelectMenuItem }) {
     return (
         <div className={`${item?.displayName ? "px-3" : "px-1.5"} flex items-center justify-between gap-3 w-full overflow-hidden`}>
             <div className={`${item?.displayName ? "gap-2.5" : "gap-3"} relative flex items-center  pl-1 w-full`}>
@@ -13,14 +13,19 @@ export default function SelectItem({ item }: { item: ISelectMenuItem }) {
                 }
                 <div className={`${item?.displayName ? "h-9 w-9" : "h-6 w-6"} flex-shrink-0 relative`}>
                     {item.imgSrc && (
-                        <Image
-                            src={item.imgSrc}
-                            alt="Project Logo"
-                            height="40"
-                            width="40"
-                            loading="eager"
-                            className="rounded-md object-contain"
-                        />
+                        item.logo ? (
+                            item.logo
+                        ) : (
+                            // TODO: Clarify if the logo should be loaded like network logo
+                            <Image
+                                src={item.imgSrc}
+                                alt="Project Logo"
+                                height="40"
+                                width="40"
+                                loading="eager"
+                                className="rounded-md object-contain"
+                            />
+                        )
                     )}
                 </div>
                 <div className="flex justify-between w-full">

lib/AppSettings.ts

@@ -3,4 +3,5 @@ export default class AppSettings {
     static LayerswapApiUri?: string = process.env.NEXT_PUBLIC_LS_API
     static ExplorerURl: string = `https://www.layerswap.io/explorer/`
     static ApiVersion?: string = process.env.NEXT_PUBLIC_API_VERSION
+    static ImageStorage?: string = process.env.NEXT_PUBLIC_IMAGE_STORAGE
 }

lib/layerSwapApiClient.ts

@@ -24,6 +24,8 @@ export default class LayerSwapApiClient {
 
     fetcher = (url: string) => this.AuthenticatedRequest<ApiResponse<any>>("GET", url)
 
+    outboundFetcher = (url: string) => this.OutboundRequest<ApiResponse<any>>("GET", url)
+
     async GetRoutesAsync(direction: 'sources' | 'destinations'): Promise<ApiResponse<NetworkWithTokens[]>> {
         return await this.UnauthenticatedRequest<ApiResponse<NetworkWithTokens[]>>("GET", `/${direction}?include_unmatched=true&include_swaps=true&include_unavailable=true`)
     }
@@ -112,6 +114,21 @@ export default class LayerSwapApiClient {
                 }
             });
     }
+
+    private async OutboundRequest<T extends EmptyApiResponse>(method: Method, uri: string, data?: any, header?: {}): Promise<T> {
+        return await this._unauthInterceptor(uri, { method: method, data: data, headers: { 'Access-Control-Allow-Origin': '*', ...(header ? header : {}) } })
+            .then(res => {
+                return res?.data;
+            })
+            .catch(async reason => {
+                if (reason instanceof AuthRefreshFailedError) {
+                    return Promise.resolve(new EmptyApiResponse());
+                }
+                else {
+                    return Promise.reject(reason);
+                }
+            });
+    }
 }
 
 export type DepositAddress = {