Increase limit of cow orders, add swr on orderDetails, and change pri…

…ce information to 4 decimals and fix token images (#50) * increase limit of cow order fetcher to 1000 * change prices to 4 decimals on order review * add swr to refatch order details * increase decimals of current market price * update oracles on invert tokens * fix token images not found error
bleu · Jul 4, 2024 · b883ad0 · b883ad0
1 parent 6ef2354
commit b883ad0
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 37 deletions.
diff --git a/src/app/[chainId]/[safeAddress]/[orderId]/page.tsx b/src/app/[chainId]/[safeAddress]/[orderId]/page.tsx
@@ -14,14 +14,21 @@ export default async function OrderPage({
     orderId: string;
   };
 }) {
-  const order = await getProcessedStopLossOrder({
+  const defaultOrder = await getProcessedStopLossOrder({
     chainId: params.chainId,
     orderId: params.orderId,
     address: params.safeAddress,
   });
 
-  if (order) {
-    return <OrderDetails order={order} />;
+  if (defaultOrder) {
+    return (
+      <OrderDetails
+        defaultOrder={defaultOrder}
+        orderId={params.orderId}
+        chainId={params.chainId}
+        address={params.safeAddress}
+      />
+    );
   }
 
   notFound();

diff --git a/src/components/CurrentMarketPrice.tsx b/src/components/CurrentMarketPrice.tsx
@@ -13,10 +13,10 @@ export function CurrentMarketPrice() {
     name: ["tokenSell", "tokenBuy", "marketPrice"],
   });
 
-  if (!tokenSell || !tokenBuy || !marketPrice) return null;
+  if (!tokenSell || !tokenBuy || !marketPrice || marketPrice <= 0) return null;
   return (
     <span className="text-xs">
-      Current market price: {tokenSell.symbol} = {formatNumber(marketPrice, 2)}{" "}
+      Current market price: {tokenSell.symbol} = {formatNumber(marketPrice, 4)}{" "}
       {tokenBuy.symbol}
     </span>
   );

diff --git a/src/components/InvertTokensSeparator.tsx b/src/components/InvertTokensSeparator.tsx
@@ -3,12 +3,14 @@ import { UpdateIcon } from "@radix-ui/react-icons";
 import { memo } from "react";
 import { useFormContext } from "react-hook-form";
 
+import { useSwapCardContext } from "#/contexts/swapCardContext";
 import { SwapData } from "#/lib/types";
 
 export const InvertTokensSeparator = memo(InvertTokensSeparatorComponent);
 
 function InvertTokensSeparatorComponent() {
   const { getValues, setValue } = useFormContext<SwapData>();
+  const { updateOracle } = useSwapCardContext();
 
   function invertTokens() {
     const [
@@ -35,6 +37,7 @@ function InvertTokensSeparatorComponent() {
     if (limitPrice) setValue("limitPrice", 1 / limitPrice);
     if (strikePrice) setValue("strikePrice", 1 / strikePrice);
     if (marketPrice) setValue("marketPrice", 1 / marketPrice);
+    updateOracle({ tokenSell: tokenBuy, tokenBuy: tokenSell });
   }
 
   return (

diff --git a/src/components/OrderDetails.tsx b/src/components/OrderDetails.tsx
@@ -11,13 +11,15 @@ import {
 import { ArrowLeftIcon, CopyIcon } from "@radix-ui/react-icons";
 import { useSafeAppsSDK } from "@safe-global/safe-apps-react-sdk";
 import Link from "next/link";
+import useSWR from "swr";
 import { Address, formatUnits } from "viem";
 
 import { LinkComponent } from "#/components/Link";
 import { OrderInformation } from "#/components/OrderInformation";
 import { StatusBadge } from "#/components/StatusBadge";
 import { TokenLogo } from "#/components/TokenLogo";
 import { InfoTooltip } from "#/components/Tooltip";
+import { getProcessedStopLossOrder } from "#/lib/orderFetcher";
 import { ChainId } from "#/lib/publicClients";
 import { formatTimeDelta } from "#/lib/timeDelta";
 import { StopLossOrderTypeWithCowOrders } from "#/lib/types";
@@ -29,10 +31,27 @@ import {
 } from "#/utils";
 
 export function OrderDetails({
-  order,
+  defaultOrder,
+  orderId,
+  chainId,
+  address,
 }: {
-  order: StopLossOrderTypeWithCowOrders;
+  defaultOrder: StopLossOrderTypeWithCowOrders;
+  orderId: string;
+  address: Address;
+  chainId: ChainId;
 }) {
+  const orderFetcher = async () => {
+    return await getProcessedStopLossOrder({
+      chainId,
+      orderId,
+      address,
+    });
+  };
+  const { data: order } = useSWR(["orderDetails"], orderFetcher, {
+    fallbackData: defaultOrder,
+  });
+
   const { safe } = useSafeAppsSDK();
   const orderDateTime = formatDateTime(
     epochToDate(Number(order?.blockTimestamp))
@@ -108,7 +127,7 @@ export function OrderDetails({
             label="Status"
             tooltipText="The status can be Created, Posted, Fulfilled, Expired and Cancelled"
           >
-            <StatusBadge status={order?.status} />
+            <StatusBadge status={order?.status || ""} />
           </OrderInformation>
           <OrderInformation
             label="Submission Time"

diff --git a/src/components/ReviewOrdersDialog.tsx b/src/components/ReviewOrdersDialog.tsx
@@ -148,13 +148,23 @@ function OrderTab({ order }: { order: DraftOrder }) {
         <div className="w-full flex flex-col gap-1 mt-2">
           <OraclePriceWarning draftOrder={order} />
           <OrderInformation title="Trigger price">
-            {order.tokenSell.symbol} price bellow{" "}
-            {formatNumber(order.strikePrice, 2)} {order.tokenBuy.symbol}
+            {order.tokenSell.symbol} = {formatNumber(order.strikePrice, 4)}{" "}
+            {order.tokenBuy.symbol}
           </OrderInformation>
           <OrderInformation title="Limit price">
-            {order.tokenSell.symbol} price bellow{" "}
-            {formatNumber(order.limitPrice, 2)} {order.tokenBuy.symbol}
+            {order.tokenSell.symbol} = {formatNumber(order.limitPrice, 4)}{" "}
+            {order.tokenBuy.symbol}
           </OrderInformation>
+          <OrderInformation title="Current oracle price">
+            {order.tokenSell.symbol} = {formatNumber(order.oraclePrice, 4)}{" "}
+            {order.tokenBuy.symbol}
+          </OrderInformation>
+          {order.marketPrice && (
+            <OrderInformation title="Current market price">
+              {order.tokenSell.symbol} = {formatNumber(order.marketPrice, 4)}{" "}
+              {order.tokenBuy.symbol}
+            </OrderInformation>
+          )}
           <OrderInformation title="Type">
             {order.partiallyFillable ? "Partial fillable" : "Fill or Kill"}
           </OrderInformation>
@@ -167,9 +177,6 @@ function OrderTab({ order }: { order: DraftOrder }) {
           <OrderInformation title={`${order.tokenBuy.symbol} oracle`}>
             <AddressWithLink address={order.tokenBuyOracle} />
           </OrderInformation>
-          <OrderInformation title="Current oracle price">
-            {formatNumber(order.oraclePrice, 2)}
-          </OrderInformation>
           <OrderInformation title="Oracles condition">
             Last update on the last{" "}
             {formatNumber(order.maxHoursSinceOracleUpdates, 2)} hour

diff --git a/src/components/TokenLogo.tsx b/src/components/TokenLogo.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import Image from "next/image";
-import { useEffect, useState } from "react";
+import { useState } from "react";
+import { Address, getAddress } from "viem";
 import { gnosis, mainnet, sepolia } from "viem/chains";
 
 import { cowTokenList } from "#/lib/cowTokenList";
@@ -22,7 +23,7 @@ const tokenUrlRoot =
   "https://raw.githubusercontent.com/cowprotocol/token-lists/main/src/public/images";
 
 export const cowprotocolTokenLogoUrl = (address?: string, chainId?: ChainId) =>
-  `${tokenUrlRoot}/${chainId}/${address?.toLowerCase()}/logo.png`;
+  `${tokenUrlRoot}/${chainId}/${address}/logo.png`;
 
 export const cowTokenListLogoUrl = (address?: string, chainId?: ChainId) => {
   return cowTokenList.find(
@@ -52,36 +53,30 @@ export const TokenLogo = ({
   className,
   quality,
 }: ImageFallbackProps) => {
-  const [imagesSrc, setImagesSrc] = useState<string[]>([
-    cowprotocolTokenLogoUrl(tokenAddress, chainId),
-    cowprotocolTokenLogoUrl(tokenAddress, 1),
+  const imagesSrc = [
+    cowprotocolTokenLogoUrl(tokenAddress?.toLowerCase(), chainId),
+    cowprotocolTokenLogoUrl(getAddress(tokenAddress as Address), chainId),
+    cowprotocolTokenLogoUrl(tokenAddress?.toLowerCase(), 1),
+    cowprotocolTokenLogoUrl(getAddress(tokenAddress as Address), 1),
     cowTokenListLogoUrl(tokenAddress, chainId),
     cowTokenListLogoUrl(tokenAddress, 1),
     trustTokenLogoUrl(tokenAddress, chainId),
-    trustTokenLogoUrl(tokenAddress, 1),
+    trustTokenLogoUrl(tokenAddress?.toLowerCase(), chainId),
+    trustTokenLogoUrl(getAddress(tokenAddress as Address), chainId),
+    trustTokenLogoUrl(tokenAddress?.toLowerCase(), 1),
+    trustTokenLogoUrl(getAddress(tokenAddress as Address), 1),
     FALLBACK_SRC,
-  ] as string[]);
+  ];
   const [index, setIndex] = useState(0);
 
-  useEffect(() => {
-    setImagesSrc([
-      cowprotocolTokenLogoUrl(tokenAddress, chainId),
-      cowprotocolTokenLogoUrl(tokenAddress, 1),
-      trustTokenLogoUrl(tokenAddress, chainId),
-      trustTokenLogoUrl(tokenAddress, 1),
-      FALLBACK_SRC,
-    ] as string[]);
-    setIndex(0);
-  }, [tokenAddress, chainId]);
-
   return (
     <Image
       className={className}
       width={Number(width)}
       height={Number(height)}
       quality={quality}
       alt={alt || ""}
-      src={imagesSrc[index]}
+      src={imagesSrc[index] || FALLBACK_SRC}
       onError={() => {
         if (index < imagesSrc.length - 1) {
           setIndex(index + 1);

diff --git a/src/contexts/tokensContext.tsx b/src/contexts/tokensContext.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useSafeAppsSDK } from "@safe-global/safe-apps-react-sdk";
-import React from "react";
+import React, { useEffect } from "react";
 
 import { cowTokenList } from "#/lib/cowTokenList";
 import { ChainId } from "#/lib/publicClients";
@@ -44,7 +44,7 @@ export const TokensContextProvider = ({
 
   const [importedTokenList, setImportedTokenList] = React.useState<
     ITokenWithChainId[]
-  >(fetchFromLocalStorage("importedTokens") || []);
+  >([]);
   const [tokenPricesMapping, setTokenPricesMapping] =
     React.useState<Record<string, number>>();
 
@@ -96,6 +96,14 @@ export const TokensContextProvider = ({
     );
   }
 
+  useEffect(() => {
+    const importedTokens =
+      fetchFromLocalStorage<ITokenWithChainId[]>("importedTokens");
+    setImportedTokenList(
+      importedTokens?.filter((token) => token.chainId === chainId) || []
+    );
+  }, [chainId]);
+
   return (
     <TokensContext.Provider
       value={{

diff --git a/src/lib/cowApi/fetchCowOrder.ts b/src/lib/cowApi/fetchCowOrder.ts
@@ -6,6 +6,6 @@ import { CowOrder } from "../types";
 
 export async function getCowOrders(userAddress: Address, chainId: ChainId) {
   const baseUrl = COW_API_URL_BY_CHAIN_ID[chainId];
-  const url = `${baseUrl}/api/v1/account/${userAddress}/orders`;
+  const url = `${baseUrl}/api/v1/account/${userAddress}/orders?limit=1000`;
   return await fetcher<CowOrder[]>(url);
 }