Merge pull request #62 from bleu/jose/cow-316-id-add-a-pagination-to-…

…order-lists-in-cow-swap-there-are-10

refactor orders table into consolidated table

next.config.mjs

@@ -1,8 +1,13 @@
 /** @type {import('next').NextConfig} */
 const moduleExports = {
   experimental: {
-    reactCompiler: true,
+    ppr: true,
+    reactCompiler: {
+      compilationMode: "annotation",
+    },
+
   },
+
   webpack: (config) => {
     config.externals.push('pino-pretty');
     return config;

package.json

@@ -22,7 +22,7 @@
     "test:watch": "pnpm exec jest --watchAll --verbose"
   },
   "dependencies": {
-    "@bleu/ui": "^0.1.125",
+    "@bleu/ui": "^0.1.126",
     "@cowprotocol/app-data": "^2.1.0",
     "@graphql-codegen/typescript": "^4.0.9",
     "@graphql-codegen/typescript-operations": "^4.2.3",
@@ -58,10 +58,11 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "@safe-global/safe-apps-react-sdk": "^4.7.2",
     "@safe-global/safe-apps-sdk": "^9.1.0",
-    "@safe-global/safe-gateway-typescript-sdk": "^3.21.10",
-    "@tanstack/react-query": "^5.51.1",
+    "@safe-global/safe-gateway-typescript-sdk": "^3.22.0",
+    "@tanstack/react-query": "^5.51.9",
+    "@tanstack/react-table": "^8.19.3",
     "@testing-library/jest-dom": "^6.4.6",
-    "@wagmi/core": "^2.11.8",
+    "@wagmi/core": "^2.12.2",
     "babel-plugin-react-compiler": "0.0.0-experimental-696af53-20240625",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -91,7 +92,7 @@
     "vaul": "^0.9.1",
     "viem": "^2.17.4",
     "vocs": "1.0.0-alpha.54",
-    "wagmi": "^2.10.11",
+    "wagmi": "^2.11.2",
     "zod": "^3.23.8",
     "zustand": "^4.5.4"
   },
@@ -101,7 +102,7 @@
     "@next/eslint-plugin-next": "^14.2.5",
     "@types/dagre": "^0.7.52",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.14.11",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",

src/app/[chainId]/[safeAddress]/page.tsx

@@ -1,16 +1,18 @@
-import { OrderTabs } from "#/components/OrdersTabs";
+import { ConsolidatedOrdersTable } from "#/components/ConsolidatedOrdersTable";
 import { SwapCard } from "#/components/swap-card/SwapCard";
 import { TxPendingDialog } from "#/components/TxPendingDialog";
 
 export default function Page() {
   return (
     <>
       <TxPendingDialog />
-      <div className="flex size-full mb-2 mt-16 px-8 gap-6">
-        <div className="mx-auto w-1/3">
+      <div className="grid grid-cols-3 p-8 gap-4">
+        <div className="col-span-1">
           <SwapCard />
         </div>
-        <OrderTabs />
+        <div className="col-span-2">
+          <ConsolidatedOrdersTable />
+        </div>
       </div>
     </>
   );

src/app/globals.css

@@ -19,10 +19,10 @@ div[data-rk] {
 
 @layer base {
   :root {
+    --background: 238 53% 12%;
+    --foreground: 0 0% 100%;
     --border: 238 53% 12%;
     --input: 201 100% 67%;
-    --background: 238 53% 12%;
-    --foreground: 238 42% 16%;
     --primary: 201 100% 67%;
     --primary-foreground: 198 42% 6%;
     --secondary: 266 83% 57%;
@@ -33,13 +33,11 @@ div[data-rk] {
     --muted-foreground: 203 13% 88%;
     --accent: 201 100% 67%;
     --accent-foreground: 198 42% 6%;
-
     --popover: 238 42% 16%;
     --popover-foreground: 0 0% 100%;
     --card: 238 42% 16%;
     --card-foreground: 0 0% 100%;
     --radius: 20px;
-
     --highlight: 42 100% 71%;
     --info: 203 13% 88%;
     --success: 162 99% 40%;
@@ -50,8 +48,14 @@ div[data-rk] {
     @apply border-border;
   }
   body {
-    /* font-feature-settings: "rlig" 1, "calt" 1); */
     font-synthesis-weight: none;
     text-rendering: optimizeLegibility;
+    @apply bg-background text-foreground;
+  }
+}
+
+@media (max-width: 640px) {
+  .container {
+    @apply px-4;
   }
 }

src/app/page.tsx

@@ -1,10 +1,9 @@
 "use client";
 
+import { Spinner } from "@bleu/ui";
 import { useSafeAppsSDK } from "@safe-global/safe-apps-react-sdk";
 import { redirect } from "next/navigation";
 
-import { Spinner } from "#/components/ui/spinner";
-
 export default function Page() {
   const { safe } = useSafeAppsSDK();
   if (safe.chainId && safe.safeAddress) {

src/components/AdvancedSettingsDialog.tsx

@@ -90,7 +90,7 @@ export function AdvancedSettingsDialog() {
         />
         <DialogContent
           className={cn(
-            "data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] translate-x-[-50%] translate-y-[-50%] rounded-lg focus:outline-none bg-foreground  w-[90vw] max-w-[450px] p-[25px]",
+            "data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] translate-x-[-50%] translate-y-[-50%] rounded-lg focus:outline-none bg-muted  w-[90vw] max-w-[450px] p-[25px]",
           )}
         >
           <div className="flex flex-col justify-between w-full">
@@ -110,7 +110,7 @@ export function AdvancedSettingsDialog() {
               name="receiver"
               label="Receiver"
               placeholder="0xabc...123"
-              tooltipText={TOOLTIP_DESCRIPTIONS.RECIPIENT}
+              tooltipText={TOOLTIP_DESCRIPTIONS.RECEIVER}
               extraLabelElement={
                 <BlockExplorerLink
                   type="address"