Mattupham/fe 784 portfolio v2 open orders / limit orders

packages/web/components/complex/portfolio/open-orders.tsx

@@ -0,0 +1,135 @@
+import { CoinPretty, Dec, Int, PricePretty } from "@keplr-wallet/unit";
+import { DEFAULT_VS_CURRENCY } from "@osmosis-labs/server";
+import React, { FunctionComponent } from "react";
+
+import { FallbackImg } from "~/components/assets";
+import { LinkButton } from "~/components/buttons/link-button";
+import { useTranslation } from "~/hooks";
+import { useOrderbookAllActiveOrders } from "~/hooks/limit-orders/use-orderbook";
+import { useStore } from "~/stores";
+import { formatFiatPrice } from "~/utils/formatter";
+import { formatPretty } from "~/utils/formatter";
+
+const OPEN_ORDERS_LIMIT = 5;
+
+export const OpenOrders: FunctionComponent = () => {
+  const { t } = useTranslation();
+
+  const { accountStore } = useStore();
+  const wallet = accountStore.getWallet(accountStore.osmosisChainId);
+
+  const { orders, isLoading } = useOrderbookAllActiveOrders({
+    userAddress: wallet?.address ?? "",
+    pageSize: 100,
+  });
+
+  const openOrders = orders
+    ?.filter((order) => order.status === "open")
+    .slice(0, OPEN_ORDERS_LIMIT);
+
+  const hasOpenOrders = openOrders?.length > 0;
+
+  if (isLoading || !hasOpenOrders) return null;
+
+  return (
+    <div className="flex w-full flex-col py-3">
+      <div className="flex cursor-pointer items-center justify-between gap-3">
+        <h6 className="py-3">{t("portfolio.openOrders")}</h6>
+        <LinkButton
+          href="/transactions?tab=orders"
+          className="-mx-2 text-osmoverse-400"
+          label={t("portfolio.seeAll")}
+          ariaLabel={t("portfolio.seeAll")}
+          size="md"
+        />
+      </div>
+      <div className="w-full flex-col justify-between self-stretch">
+        {openOrders?.map(
+          (
+            { baseAsset, quoteAsset, order_direction, output, placed_quantity },
+            index
+          ) => {
+            const baseAssetLogo =
+              baseAsset?.rawAsset.logoURIs.svg ??
+              baseAsset?.rawAsset.logoURIs.png ??
+              "";
+
+            // example: 0.01 OSMO
+            const formattedBuySellToken = formatPretty(
+              new CoinPretty(
+                {
+                  coinDecimals: baseAsset?.decimals ?? 0,
+                  coinDenom: baseAsset?.symbol ?? "",
+                  coinMinimalDenom: baseAsset?.coinMinimalDenom ?? "",
+                },
+                order_direction === "ask" ? placed_quantity : output
+              )
+            );
+
+            // example: $0.01
+            const formattedFiatPrice = formatFiatPrice(
+              new PricePretty(
+                DEFAULT_VS_CURRENCY,
+                order_direction === "bid"
+                  ? placed_quantity /
+                    Number(
+                      new Dec(10)
+                        .pow(new Int(quoteAsset?.decimals ?? 0))
+                        .toString()
+                    )
+                  : output.quo(
+                      new Dec(10).pow(new Int(quoteAsset?.decimals ?? 0))
+                    )
+              ),
+              2
+            );
+
+            // example: 0.01 USDC
+            const formattedQuoteAsset = formatPretty(
+              new CoinPretty(
+                {
+                  coinDecimals: quoteAsset?.decimals ?? 0,
+                  coinDenom: quoteAsset?.symbol ?? "",
+                  coinMinimalDenom: quoteAsset?.coinMinimalDenom ?? "",
+                },
+                order_direction === "ask" ? output : placed_quantity
+              )
+            );
+
+            const buySellText =
+              order_direction === "bid"
+                ? t("portfolio.buy")
+                : t("portfolio.sell");
+
+            return (
+              <div key={index} className="-mx-2 flex justify-between gap-4 p-2">
+                <FallbackImg
+                  src={baseAssetLogo}
+                  alt={`${baseAsset?.symbol} icon`}
+                  fallbacksrc="/icons/question-mark.svg"
+                  width={32}
+                  height={32}
+                  className="inline-block"
+                />
+                <div className="flex h-full flex-col justify-between overflow-hidden whitespace-nowrap">
+                  <span className="body2 overflow-hidden overflow-ellipsis">
+                    {buySellText} {baseAsset?.currency?.coinDenom}{" "}
+                  </span>
+                  <span className="caption overflow-hidden overflow-ellipsis text-osmoverse-300">
+                    {formattedBuySellToken}
+                  </span>
+                </div>
+                <div className="body2 ml-auto flex h-full flex-col justify-between overflow-ellipsis whitespace-nowrap text-right">
+                  {formattedFiatPrice}
+                  <span className="caption text-osmoverse-300">
+                    {formattedQuoteAsset}
+                  </span>
+                </div>
+              </div>
+            );
+          }
+        )}
+      </div>
+    </div>
+  );
+};

packages/web/components/complex/portfolio/portfolio-page.tsx

@@ -5,6 +5,7 @@ import { FunctionComponent } from "react";
 
 import { Allocation } from "~/components/complex/portfolio/allocation";
 import { AssetsOverview } from "~/components/complex/portfolio/assets-overview";
+import { OpenOrders } from "~/components/complex/portfolio/open-orders";
 import { UserPositionsSection } from "~/components/complex/portfolio/user-positions";
 import { UserZeroBalanceTableSplash } from "~/components/complex/portfolio/user-zero-balance-table-splash";
 import { WalletDisconnectedSplash } from "~/components/complex/portfolio/wallet-disconnected-splash";
@@ -166,7 +167,10 @@ export const PortfolioPage: FunctionComponent = observer(() => {
                 <Allocation allocation={allocation} />
               )}
             </div>
-            <RecentActivity />
+            <div className="flex w-full flex-col">
+              {featureFlags.limitOrders && <OpenOrders />}
+              <RecentActivity />
+            </div>
           </aside>
         </>
       ) : (

packages/web/components/transactions/recent-activity/recent-activity.tsx

@@ -15,7 +15,7 @@ const ACTIVITY_LIMIT = 5;
 const RecentActivitySkeleton = () => {
   return (
     <>
-      {Array.from({ length: 5 }).map((_, index) => (
+      {Array.from({ length: ACTIVITY_LIMIT }).map((_, index) => (
         <div key={index} className="-mx-2 flex justify-between gap-4 p-2">
           <Skeleton className="h-9 w-1/3 " />
           <Skeleton className="h-9 w-1/5" />
@@ -53,8 +53,8 @@ export const RecentActivity: FunctionComponent = observer(() => {
 
   return (
     <div className="flex w-full flex-col py-3">
-      <div className="flex cursor-pointer items-center justify-between gap-3 py-3">
-        <h6>{t("portfolio.recentActivity")}</h6>
+      <div className="flex cursor-pointer items-center justify-between gap-3">
+        <h6 className="py-3">{t("portfolio.recentActivity")}</h6>
         <LinkButton
           href="/transactions"
           className="-mx-2 text-osmoverse-400"

packages/web/localizations/de.json

@@ -254,6 +254,7 @@
   },
   "portfolio": {
     "buy": "Kaufen",
+    "sell": "Verkaufen",
     "yourBalances": "Ihre Guthaben",
     "yourPositions": "Ihre Positionen",
     "searchBalances": "Guthaben suchen",
@@ -279,7 +280,8 @@
     "hideSmallBalances": "Kleine Guthaben verbergen",
     "cypherSpend": "Osmose-Bezahlung",
     "cypherOrder": "Bestellen Sie jetzt Ihre Karte",
-    "cypherBeta": "Beta"
+    "cypherBeta": "Beta",
+    "openOrders": "Offene Bestellungen"
   },
   "buyTokens": "Kaufen Sie Token",
   "components": {

packages/web/localizations/en.json

@@ -254,6 +254,7 @@
   },
   "portfolio": {
     "buy": "Buy",
+    "sell": "Sell",
     "yourBalances": "Your balances",
     "yourPositions": "Your positions",
     "searchBalances": "Search balances",
@@ -279,7 +280,8 @@
     "hideSmallBalances": "Hide small balances",
     "cypherSpend": "Osmosis Pay",
     "cypherOrder": "Order your card now",
-    "cypherBeta": "Beta"
+    "cypherBeta": "Beta",
+    "openOrders": "Open Orders"
   },
   "buyTokens": "Buy tokens",
   "components": {

packages/web/localizations/es.json

@@ -254,6 +254,7 @@
   },
   "portfolio": {
     "buy": "Comprar",
+    "sell": "Vender",
     "yourBalances": "Sus saldos",
     "yourPositions": "Tus posiciones",
     "searchBalances": "Buscar saldos",
@@ -279,7 +280,8 @@
     "hideSmallBalances": "Ocultar pequeños saldos",
     "cypherSpend": "Pago por ósmosis",
     "cypherOrder": "Pide tu tarjeta ahora",
-    "cypherBeta": "Beta"
+    "cypherBeta": "Beta",
+    "openOrders": "Órdenes abiertas"
   },
   "buyTokens": "Comprar fichas",
   "components": {

packages/web/localizations/fa.json

@@ -254,6 +254,7 @@
   },
   "portfolio": {
     "buy": "خرید کنید",
+    "sell": "فروش",
     "yourBalances": "موجودی شما",
     "yourPositions": "موقعیت های شما",
     "searchBalances": "جستجوی موجودی",
@@ -279,7 +280,8 @@
     "hideSmallBalances": "توازن های کوچک را پنهان کنید",
     "cypherSpend": "اسمز پرداخت",
     "cypherOrder": "همین الان کارت خود را سفارش دهید",
-    "cypherBeta": "بتا"
+    "cypherBeta": "بتا",
+    "openOrders": "باز کردن سفارشات"
   },
   "buyTokens": "خرید توکن",
   "components": {

packages/web/localizations/fr.json

@@ -254,6 +254,7 @@
   },
   "portfolio": {
     "buy": "Acheter",
+    "sell": "Vendre",
     "yourBalances": "Vos soldes",
     "yourPositions": "Vos postes",
     "searchBalances": "Rechercher des soldes",
@@ -279,7 +280,8 @@
     "hideSmallBalances": "Masquer les petits soldes",
     "cypherSpend": "Paiement par osmose",
     "cypherOrder": "Commandez votre carte maintenant",
-    "cypherBeta": "Bêta"
+    "cypherBeta": "Bêta",
+    "openOrders": "Commandes ouvertes"
   },
   "buyTokens": "Acheter jetons",
   "components": {

packages/web/localizations/gu.json

@@ -254,6 +254,7 @@
   },
   "portfolio": {
     "buy": "ખરીદો",
+    "sell": "વેચો",
     "yourBalances": "તમારું બેલેન્સ",
     "yourPositions": "તમારી સ્થિતિ",
     "searchBalances": "બેલેન્સ શોધો",
@@ -279,7 +280,8 @@
     "hideSmallBalances": "નાના બેલેન્સ છુપાવો",
     "cypherSpend": "ઓસ્મોસિસ પે",
     "cypherOrder": "હવે તમારું કાર્ડ ઓર્ડર કરો",
-    "cypherBeta": "બેટા"
+    "cypherBeta": "બેટા",
+    "openOrders": "ઓર્ડર ખોલો"
   },
   "buyTokens": "ટોકન્સ ખરીદો",
   "components": {

packages/web/localizations/hi.json

@@ -254,6 +254,7 @@
   },
   "portfolio": {
     "buy": "खरीदना",
+    "sell": "बेचना",
     "yourBalances": "आपका शेष",
     "yourPositions": "आपके पद",
     "searchBalances": "शेष राशि खोजें",
@@ -279,7 +280,8 @@
     "hideSmallBalances": "छोटे शेष राशि छिपाएँ",
     "cypherSpend": "ऑस्मोसिस पे",
     "cypherOrder": "अपना कार्ड अभी ऑर्डर करें",
-    "cypherBeta": "बीटा"
+    "cypherBeta": "बीटा",
+    "openOrders": "खुले आदेश"
   },
   "buyTokens": "टोकन खरीदें",
   "components": {

packages/web/localizations/ja.json

@@ -254,6 +254,7 @@
   },
   "portfolio": {
     "buy": "買う",
+    "sell": "売る",
     "yourBalances": "残高",
     "yourPositions": "あなたの立場",
     "searchBalances": "残高を検索",
@@ -279,7 +280,8 @@
     "hideSmallBalances": "少額残高を非表示にする",
     "cypherSpend": "オズモーシスペイ",
     "cypherOrder": "今すぐカードを注文する",
-    "cypherBeta": "ベータ"
+    "cypherBeta": "ベータ",
+    "openOrders": "オープン注文"
   },
   "buyTokens": "トークンを購入する",
   "components": {

packages/web/localizations/ko.json

@@ -254,6 +254,7 @@
   },
   "portfolio": {
     "buy": "구입하다",
+    "sell": "팔다",
     "yourBalances": "잔액",
     "yourPositions": "귀하의 직위",
     "searchBalances": "잔액 검색",
@@ -279,7 +280,8 @@
     "hideSmallBalances": "소액 잔액 숨기기",
     "cypherSpend": "오스모시스 페이",
     "cypherOrder": "지금 카드를 주문하세요",
-    "cypherBeta": "베타"
+    "cypherBeta": "베타",
+    "openOrders": "미결 주문"
   },
   "buyTokens": "토큰 구매",
   "components": {

packages/web/localizations/pl.json

@@ -254,6 +254,7 @@
   },
   "portfolio": {
     "buy": "Kupić",
+    "sell": "Sprzedać",
     "yourBalances": "Twoje saldo",
     "yourPositions": "Twoje pozycje",
     "searchBalances": "Wyszukaj salda",
@@ -279,7 +280,8 @@
     "hideSmallBalances": "Ukryj małe salda",
     "cypherSpend": "Osmoza Płaca",
     "cypherOrder": "Zamów swoją kartę już teraz",
-    "cypherBeta": "Beta"
+    "cypherBeta": "Beta",
+    "openOrders": "Otwarte zamówienia"
   },
   "buyTokens": "Kup tokeny",
   "components": {

packages/web/localizations/pt-br.json

@@ -254,6 +254,7 @@
   },
   "portfolio": {
     "buy": "Comprar",
+    "sell": "Vender",
     "yourBalances": "Seus saldos",
     "yourPositions": "Suas posições",
     "searchBalances": "Pesquisar saldos",
@@ -279,7 +280,8 @@
     "hideSmallBalances": "Ocultar pequenos saldos",
     "cypherSpend": "Pagamento por osmose",
     "cypherOrder": "Peça já o seu cartão",
-    "cypherBeta": "Beta"
+    "cypherBeta": "Beta",
+    "openOrders": "Ordens abertas"
   },
   "buyTokens": "Comprar tokens",
   "components": {

packages/web/localizations/ro.json

@@ -254,6 +254,7 @@
   },
   "portfolio": {
     "buy": "Cumpără",
+    "sell": "Vinde",
     "yourBalances": "Soldurile tale",
     "yourPositions": "Pozițiile tale",
     "searchBalances": "Căutați solduri",
@@ -279,7 +280,8 @@
     "hideSmallBalances": "Ascunde soldurile mici",
     "cypherSpend": "Plată osmoză",
     "cypherOrder": "Comanda cardul tau acum",
-    "cypherBeta": "Beta"
+    "cypherBeta": "Beta",
+    "openOrders": "Comenzi deschise"
   },
   "buyTokens": "Cumpărați jetoane",
   "components": {