[SWA-185][FEAT] - Strategies module + "Popular Strategies" tab (#123)

* feat(STK-185): Strategies module + "Popular Strategies" tab --------- Co-authored-by: Berteotti <berteotti2@gmail.com>
SwaprHQ · Nov 9, 2023 · 0016c7c · 0016c7c
1 parent f701e9d
commit 0016c7c
Show file tree

Hide file tree

Showing 27 changed files with 769 additions and 287 deletions.
diff --git a/packages/app/app/layout.tsx b/packages/app/app/layout.tsx
@@ -48,7 +48,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
       <body className="font-sans bg-fixed bg-surface-25 bg-auto-100 bg-matrix-and-green-gradient text-em-high">
         <Providers>
           <Navbar />
-          <div className="px-4 mx-auto md:px-0">{children}</div>
+          <div className="px-4 py-12 md:py-16 mx-auto md:px-0">{children}</div>
         </Providers>
       </body>
     </html>

diff --git a/packages/app/app/page.tsx b/packages/app/app/page.tsx
@@ -1,9 +1,10 @@
-import { Stackbox } from "@/components";
+import { Stackbox, Strategies } from "@/components";
 
 export default function Home() {
   return (
-    <div className="w-full mx-auto">
+    <div className="w-full py-10 mx-auto space-y-8">
       <Stackbox />
+      <Strategies />
     </div>
   );
 }
diff --git a/packages/app/app/stacks/layout.tsx b/packages/app/app/stacks/layout.tsx
@@ -5,5 +5,5 @@ export const metadata = {
 };
 
 export default function YourStacksLayout({ children }: PropsWithChildren) {
-  return <div className="max-w-5xl pt-12 mx-auto md:pt-24">{children}</div>;
+  return <div className="max-w-5xl mx-auto md:pt-24">{children}</div>;
 }
diff --git a/packages/app/app/stacks/stacksOrders.tsx b/packages/app/app/stacks/stacksOrders.tsx
@@ -3,30 +3,26 @@
 import { useCallback, useEffect, useState } from "react";
 import { cx } from "class-variance-authority";
 import { Tab } from "@headlessui/react";
+
 import {
   StackOrder,
   filterActiveOrders,
   filterCancelledOrders,
   filterCompletedOrders,
   getStackOrders,
 } from "@/models/stack-order";
+import { getOrders } from "@/models/order";
 import { ChainId } from "@stackly/sdk";
-import { BodyText, ButtonLink, HeadingText, buttonStyles } from "@/ui";
-import { StacksTable } from "@/components";
+import { BodyText, ButtonLink, HeadingText } from "@/ui";
+import { StacksTable, tabButtonStyles } from "@/components";
+
 import EmptyState from "./empty-state";
-import { getOrders } from "@/models/order";
-import { twMerge } from "tailwind-merge";
 
 export interface StackOrdersProps {
   address: string;
   chainId: ChainId;
 }
 
-const tabButtonStyles = twMerge(
-  buttonStyles({ variant: "secondary" }),
-  "bg-transperant border border-transparent text-em-high font-semibold ui-selected:bg-surface-75 ui-not-selected:text-em-low  hover:bg-surface-50 hover:border-surface-75 focus:ring-0"
-);
-
 export const StackOrders = ({ chainId, address }: StackOrdersProps) => {
   const [loading, setLoading] = useState(true);
   const [currentStackOrders, setCurrentStackOrders] = useState<StackOrder[]>(

diff --git a/packages/app/components/StackedTokenLogoPair.tsx b/packages/app/components/StackedTokenLogoPair.tsx
diff --git a/packages/app/components/StacksTable.tsx b/packages/app/components/StacksTable.tsx
@@ -14,7 +14,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/ui";
-import { StackedTokenLogoPair, StackModal } from "@/components";
+import { StackModal, TokenLogoPair } from "@/components";
 import {
   totalFundsAmountWithTokenText,
   orderPairSymbolsText,
@@ -70,7 +70,10 @@ export const StacksTable = ({
           {stackOrders.map((order) => (
             <TableRow key={order.id}>
               <TableCell className="flex items-center font-medium w-max">
-                <StackedTokenLogoPair order={order} />
+                <TokenLogoPair
+                  buyToken={order.buyToken}
+                  sellToken={order.sellToken}
+                />
                 <div className="ml-3 space-y-0.5">
                   <BodyText weight="bold">
                     {formatTokenValue(totalStacked(order))}

diff --git a/packages/app/components/TokenIcon.tsx b/packages/app/components/TokenIcon.tsx
@@ -8,9 +8,11 @@ import { twMerge } from "tailwind-merge";
 import { useTokenListContext } from "@/contexts";
 import { Token } from "@/models/token";
 
+export type TokenLogoSize = "3xs" | "2xs" | "xs" | "sm" | "md" | "lg";
+
 interface TokenIconProps {
   className?: string;
-  size?: "lg" | "md" | "sm" | "xs" | "2xs";
+  size?: TokenLogoSize;
   token: Token;
 }
 
@@ -61,6 +63,7 @@ export const tokenIconStyles = cva(
         sm: ["w-6 h-6 text-[5px]"],
         xs: ["w-5 h-5 text-[4px]"],
         "2xs": ["w-4 h-4 text-[4px]"],
+        "3xs": ["w-3 h-3 text-[3px]"],
       },
     },
     defaultVariants: {

diff --git a/packages/app/components/TokenLogoPair.tsx b/packages/app/components/TokenLogoPair.tsx
@@ -0,0 +1,21 @@
+import { TokenIcon, TokenLogoSize } from "@/components/TokenIcon";
+import { Token } from "@/models/token";
+
+interface TokenLogoPairProps {
+  buyToken: Token;
+  buyTokenSize?: TokenLogoSize;
+  sellToken: Token;
+  sellTokenSize?: TokenLogoSize;
+}
+
+export const TokenLogoPair = ({
+  buyToken,
+  buyTokenSize = "lg",
+  sellToken,
+  sellTokenSize = "xs",
+}: TokenLogoPairProps) => (
+  <div className="flex items-end">
+    <TokenIcon token={buyToken} size={buyTokenSize} />
+    <TokenIcon token={sellToken} size={sellTokenSize} className="-ml-2" />
+  </div>
+);
diff --git a/packages/app/components/index.ts b/packages/app/components/index.ts
@@ -1,23 +1,15 @@
-import { ConnectButton } from "./ConnectButton";
-import { Navbar } from "./navbar/Navbar";
-import { SelectNetwork } from "./SelectNetwork";
-import { DialogConfirmTransactionLoading } from "./DialogConfirmTransactionLoading";
-import { StackedTokenLogoPair } from "./StackedTokenLogoPair";
-import TokenPicker from "./token-picker/TokenPicker";
-
+export * from "./navbar";
+export * from "./stack-modal";
 export * from "./stackbox";
+export * from "./strategies";
+export * from "./tabs";
+export * from "./token-picker";
+export * from "./BetaNFTModal";
+export * from "./ConnectButton";
+export * from "./DatePicker";
+export * from "./DialogConfirmTransactionLoading";
 export * from "./FromToStackTokenPair";
+export * from "./SelectNetwork";
 export * from "./StacksTable";
 export * from "./TokenIcon";
-export * from "./DatePicker";
-export * from "./stack-modal";
-export * from "./BetaNFTModal";
-
-export {
-  ConnectButton,
-  Navbar,
-  SelectNetwork,
-  TokenPicker,
-  StackedTokenLogoPair,
-  DialogConfirmTransactionLoading,
-};
+export * from "./TokenLogoPair";
diff --git a/packages/app/components/stack-modal/StackModal.tsx b/packages/app/components/stack-modal/StackModal.tsx
@@ -39,9 +39,9 @@ import { getDCAOrderContract } from "@stackly/sdk";
 import { getExplorerLink } from "@/utils/transaction";
 import { useEthersSigner } from "@/utils/ethers";
 import {
-  StackedTokenLogoPair,
   DialogConfirmTransactionLoading,
   FromToStackTokenPair,
+  TokenLogoPair,
 } from "@/components";
 import { StackProgress } from "@/components/stack-modal/StackProgress";
 import { StackOrdersTable } from "@/components/stack-modal/StackOrdersTable";
@@ -144,7 +144,10 @@ export const StackModal = ({
         <ModalHeader>
           <div className="flex items-center justify-between w-full">
             <div className="flex items-center space-x-2">
-              <StackedTokenLogoPair order={stackOrder} />
+              <TokenLogoPair
+                buyToken={stackOrder.buyToken}
+                sellToken={stackOrder.sellToken}
+              />
               {chain?.id && (
                 <Link
                   passHref