Feat/capped trade

.env.example

@@ -1,2 +1,4 @@
 NEXT_PUBLIC_REOWN_PROJECTID=
 NEXT_PUBLIC_GNOSIS_RPC=
+# https://thegraph.com/explorer/subgraphs/AAA1vYjxwFHzbt6qKwLHNcDSASyr1J1xVViDH8gTMFMR?view=Query&chain=arbitrum-one
+NEXT_PUBLIC_ALGEBRA_SUBGRAPH=

.eslintrc.json

@@ -5,7 +5,7 @@
     "plugin:prettier/recommended",
     "prettier"
   ],
-  "ignorePatterns": ["**/**/generated.ts"],
+  "ignorePatterns": ["**/generated.ts", "src/hooks/liquidity/gql/*"],
   "rules": {
     "max-len": [
       "warn",

.gitignore

@@ -37,3 +37,6 @@ next-env.d.ts
 
 # wagmi generated
 /src/generated.ts
+
+# gql
+/src/hooks/liquidity/gql

codegen.ts

@@ -0,0 +1,29 @@
+import { CodegenConfig } from "@graphql-codegen/cli";
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: [process.env.NEXT_PUBLIC_ALGEBRA_SUBGRAPH!],
+  documents: ["src/hooks/liquidity/swapr.graphql"],
+  generates: {
+    "./src/hooks/liquidity/gql/gql.ts": {
+      // preset: "client",
+      plugins: [
+        "typescript",
+        "typescript-operations",
+        "typescript-graphql-request",
+      ],
+      config: {
+        strictScalars: true,
+        scalars: {
+          BigDecimal: "string",
+          BigInt: "string",
+          Int8: "string",
+          Bytes: "`0x${string}`",
+          Timestamp: "string",
+        },
+      },
+    },
+  },
+};
+
+export default config;

package.json

@@ -4,10 +4,11 @@
   "private": true,
   "scripts": {
     "dev": "yarn generate && next dev",
-    "build": "next build",
+    "build": "yarn generate && next build",
     "start": "next start",
     "lint": "next lint --fix",
-    "generate": "wagmi generate"
+    "generate": "wagmi generate && yarn generate:gql",
+    "generate:gql": "dotenv -e .env.local -- graphql-codegen"
   },
   "dependencies": {
     "@cowprotocol/cow-sdk": "^5.10.3",
@@ -17,10 +18,13 @@
     "@swapr/sdk": "https://github.com/seer-pm/swapr-sdk#6dea7e63f7e05c84a4374717ee1ad5baca86f7de",
     "@tanstack/react-query": "^5.74.4",
     "@wagmi/core": "^2.17.3",
+    "@yornaath/batshit": "^0.11.1",
     "clsx": "^2.1.1",
     "ethers": "5.8.0",
+    "graphql-request": "^7.3.1",
     "graphql-tag": "^2.12.6",
     "lightweight-charts": "^5.0.8",
+    "micro-memoize": "^4.2.0",
     "next": "14.2.28",
     "next-themes": "^0.4.6",
     "pino-pretty": "^13.0.0",
@@ -33,12 +37,17 @@
     "wagmi": "^2.15.6"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "^5.0.2",
+    "@graphql-codegen/typescript": "^5.0.2",
+    "@graphql-codegen/typescript-graphql-request": "^6.3.0",
+    "@graphql-codegen/typescript-operations": "^5.0.2",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/postcss": "^4.1.4",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@wagmi/cli": "^2.3.1",
+    "dotenv-cli": "^10.0.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.28",
     "eslint-config-prettier": "^10.1.2",

src/app/(homepage)/components/ParticipateSection/Mint/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from "react";
 
-import { Card } from "@kleros/ui-components-library";
+import { Accordion, Card } from "@kleros/ui-components-library";
 import clsx from "clsx";
 import { useToggle } from "react-use";
 import { useAccount, useBalance } from "wagmi";
@@ -112,9 +112,7 @@ const Mint: React.FC = () => {
 
       <Card
         className={clsx(
-          "border-klerosUIComponentsSecondaryBlue relative grid h-auto w-full",
-          "px-4 pt-6 pb-12",
-          "grid w-full grid-cols-[repeat(auto-fit,minmax(200px,260px))] place-content-center gap-4",
+          "border-klerosUIComponentsSecondaryBlue relative h-auto w-full",
         )}
       >
         <div
@@ -132,25 +130,47 @@ const Mint: React.FC = () => {
             )}
           />
         </div>
-        {markets.map(({ name, color }, i) => (
-          <ProjectAmount
-            key={name}
-            {...{ name, color }}
-            balance={marketBalances?.data?.[i].result as bigint}
-            amount={((): bigint => {
-              if (!isSplit) {
-                if (minMarketBalance) {
-                  return minMarketBalance;
-                }
-              } else if (isSDaiSelected) {
-                return amount;
-              } else if (resultDeposit.data) {
-                return resultDeposit.data.result;
-              }
-              return 0n;
-            })()}
-          />
-        ))}
+        <Accordion
+          className={clsx(
+            "w-full border-none",
+            "[&_#expand-button]:h-12 [&_#expand-button]:border-none",
+            "[&>div]:my-0",
+          )}
+          items={[
+            {
+              title: "",
+              body: (
+                <div
+                  className={clsx(
+                    "grid w-full grid-cols-[repeat(auto-fit,minmax(200px,260px))] place-content-center gap-4",
+                    "px-4 pb-12",
+                  )}
+                >
+                  {markets.map(({ name, color }, i) => (
+                    <ProjectAmount
+                      key={name}
+                      {...{ name, color }}
+                      balance={marketBalances?.data?.[i].result as bigint}
+                      amount={((): bigint => {
+                        if (!isSplit) {
+                          if (minMarketBalance) {
+                            return minMarketBalance;
+                          }
+                        } else if (isSDaiSelected) {
+                          return amount;
+                        } else if (resultDeposit.data) {
+                          return resultDeposit.data.result;
+                        }
+                        return 0n;
+                      })()}
+                    />
+                  ))}
+                </div>
+              ),
+            },
+          ]}
+        />
+
         {isSplit ? (
           isSDaiSelected ? (
             <SDaiButton

src/app/(homepage)/components/ParticipateSection/index.tsx

@@ -1,9 +1,28 @@
+import { useMemo } from "react";
+
 import { Card } from "@kleros/ui-components-library";
 
+import { useGetWinningOutcomes } from "@/hooks/useGetWinningOutcomes";
+
+import { isUndefined } from "@/utils";
+
+import { parentConditionId } from "@/consts/markets";
+
 import Mint from "./Mint";
 import RedeemParentMarket from "./RedeemParentMarket";
 
 const ParticipateSection: React.FC = () => {
+  const { data: parentWinningOutcomes } =
+    useGetWinningOutcomes(parentConditionId);
+
+  const isParentResolved = useMemo(
+    () =>
+      isUndefined(parentWinningOutcomes)
+        ? false
+        : parentWinningOutcomes.some((val) => val === true),
+    [parentWinningOutcomes],
+  );
+
   return (
     <div className="mt-12 flex w-full flex-col gap-4">
       <h2 className="text-klerosUIComponentsPrimaryText text-2xl font-semibold">
@@ -23,7 +42,7 @@ const ParticipateSection: React.FC = () => {
           you want to predict.
         </p>
       </Card>
-      <RedeemParentMarket />
+      {isParentResolved ? <RedeemParentMarket /> : null}
     </div>
   );
 };

src/app/(homepage)/components/ProjectFunding/PredictPopup/ActionButtons/DefaultPredictButton.tsx

@@ -25,6 +25,7 @@ const DefaultPredictButton: React.FC<{ toggleIsOpen?: () => void }> = ({
     market,
     isLoading,
     hasLiquidity,
+    cappedUnderlyingAmount,
   } = useMarketContext();
   const { underlyingToken } = market;
 
@@ -39,20 +40,20 @@ const DefaultPredictButton: React.FC<{ toggleIsOpen?: () => void }> = ({
 
   const isAllowance = useMemo(
     () =>
-      typeof allowance !== "undefined" &&
-      typeof underlyingBalance !== "undefined" &&
-      allowance < underlyingBalance,
-    [allowance, underlyingBalance],
+      !isUndefined(allowance) &&
+      !isUndefined(cappedUnderlyingAmount) &&
+      allowance < cappedUnderlyingAmount,
+    [allowance, cappedUnderlyingAmount],
   );
 
   const { writeContractAsync: increaseAllowance } = useWriteErc20Approve();
 
   const handleAllowance = useCallback(async () => {
     try {
-      if (!isUndefined(underlyingBalance)) {
+      if (!isUndefined(cappedUnderlyingAmount)) {
         const hash = await increaseAllowance({
           address: underlyingToken,
-          args: [SWAPR_CONTRACT, underlyingBalance],
+          args: [SWAPR_CONTRACT, cappedUnderlyingAmount],
         });
         await waitForTransactionReceipt(wagmiConfig, {
           hash,
@@ -67,7 +68,7 @@ const DefaultPredictButton: React.FC<{ toggleIsOpen?: () => void }> = ({
     wagmiConfig,
     increaseAllowance,
     refetchAllowance,
-    underlyingBalance,
+    cappedUnderlyingAmount,
     underlyingToken,
   ]);
 

src/app/(homepage)/components/ProjectFunding/index.tsx

@@ -32,6 +32,8 @@ const ProjectFunding: React.FC = ({}) => {
     details,
     marketId,
     underlyingToken,
+    minValue,
+    maxValue,
   } = market;
 
   return (
@@ -68,6 +70,8 @@ const ProjectFunding: React.FC = ({}) => {
               isDisabled={!hasLiquidity}
               aria-label="Prediction"
               className="w-auto [&_input]:border-none"
+              minValue={minValue}
+              maxValue={maxValue}
               value={
                 !isUndefined(prediction) ? prediction / precision : undefined
               }