From a4d757a08c95d50e8865e1e9f97022246880043f Mon Sep 17 00:00:00 2001
From: Picodes <41673773+Picodes@users.noreply.github.com>
Date: Thu, 19 Dec 2024 12:59:13 +0100
Subject: [PATCH] chore: renaming (#53)

---
 .../participate/Participate.client.tsx        |  71 ---------
 .../element/participate/Participate.tsx       | 135 ++++++++++++++++++
 2 files changed, 135 insertions(+), 71 deletions(-)
 delete mode 100644 src/components/element/participate/Participate.client.tsx
 create mode 100644 src/components/element/participate/Participate.tsx

diff --git a/src/components/element/participate/Participate.client.tsx b/src/components/element/participate/Participate.client.tsx
deleted file mode 100644
index 30300940..00000000
--- a/src/components/element/participate/Participate.client.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { Opportunity } from "@merkl/api";
-import { Box, Button, Group, Input, Select, Space, Text } from "dappkit";
-import TransactionButton from "packages/dappkit/src/components/dapp/TransactionButton";
-import { useMemo, useState } from "react";
-import useParticipate from "src/hooks/useParticipate";
-import { formatUnits } from "viem";
-import Token from "../token/Token";
-
-export type ParticipateProps = {
-  opportunity: Opportunity;
-};
-
-export default function Participate({ opportunity }: ParticipateProps) {
-  const [tokenAddress, setTokenAddress] = useState();
-  const [amount, setAmount] = useState<bigint>(0n);
-  const {
-    target,
-    balance,
-    token: inputToken,
-    transaction,
-  } = useParticipate(opportunity.chainId, opportunity.protocol?.id, opportunity.identifier, tokenAddress, amount);
-
-  console.log("tx", transaction, opportunity.identifier, target);
-
-  const balanceOptions = useMemo(
-    () =>
-      balance?.reduce(
-        (obj, token) =>
-          Object.assign(obj, {
-            [token.address]: (
-              <>
-                <Token key={token.address} value token={token} />({formatUnits(token?.balance, token?.decimals)})
-              </>
-            ),
-          }),
-        {},
-      ) ?? {},
-    [balance],
-  );
-  return (
-    <>
-      <Box>
-        <Box size="sm" look="soft" className="flex-row [&>*]:grow">
-          <Button look="bold" className="justify-center">
-            Deposit
-          </Button>
-          <Button look="soft" className="justify-center">
-            {target && "TARGET"}
-          </Button>
-        </Box>
-        <Group>
-          <Input.BigInt state={[amount, setAmount]} base={inputToken?.decimals ?? 18} placeholder="0.0" />
-          <Select
-            state={[tokenAddress, setTokenAddress]}
-            loading={!balanceOptions}
-            placeholder="Token"
-            options={balanceOptions}
-          />
-        </Group>
-        <Input header={<Text size="xs">token0</Text>} />
-        <Input header={<Text size="xs">token1</Text>} />
-        <TransactionButton tx={transaction?.approval}>Approve</TransactionButton>
-        <TransactionButton tx={transaction?.transaction}>Participate</TransactionButton>
-      </Box>
-      <Space size="md" />
-      <Text className="text-center w-full" size="sm">
-        Warning about the fiability of the feature
-      </Text>
-    </>
-  );
-}
diff --git a/src/components/element/participate/Participate.tsx b/src/components/element/participate/Participate.tsx
new file mode 100644
index 00000000..d4289c75
--- /dev/null
+++ b/src/components/element/participate/Participate.tsx
@@ -0,0 +1,135 @@
+import type { Opportunity } from "@merkl/api";
+import { Button, Group, Icon, Input, PrimitiveTag, Text, Value } from "dappkit";
+import { Fmt } from "packages/dappkit/src/utils/formatter.service";
+import { Suspense, useState } from "react";
+import useOpportunity from "src/hooks/resources/useOpportunity";
+import useParticipate from "src/hooks/useParticipate";
+import OpportunityShortCard from "../opportunity/OpportunityShortCard";
+import TokenSelect from "../token/TokenSelect";
+import Interact from "./Interact.client";
+
+export type ParticipateProps = {
+  opportunity: Opportunity;
+  displayOpportunity?: boolean;
+  displayMode?: boolean | "withdraw" | "deposit";
+  displayLinks?: boolean;
+};
+
+export default function Participate({
+  opportunity,
+  displayOpportunity,
+  displayMode,
+  displayLinks,
+}: ParticipateProps) {
+  const [tokenAddress, setTokenAddress] = useState();
+  const [amount, setAmount] = useState<bigint>(0n);
+  const [mode] = useState<"deposit" | "withdraw">(
+    typeof displayMode === "string" ? displayMode : "deposit"
+  );
+
+  const {
+    target,
+    balance,
+    token: inputToken,
+    loading,
+  } = useParticipate(
+    opportunity.chainId,
+    opportunity.protocol?.id,
+    opportunity.identifier,
+    tokenAddress
+  );
+  const { link } = useOpportunity(opportunity);
+
+  // const switchModeButton = useMemo(() => {
+  //   if (typeof displayMode === "boolean" && !displayMode) return;
+  //   switch (mode) {
+  //     case "deposit":
+  //       return (
+  //         <Button onClick={() => setMode("withdraw")} size="sm">
+  //           Withdraw
+  //         </Button>
+  //       );
+  //     case "withdraw":
+  //       return (
+  //         <Button onClick={() => setMode("deposit")} size="sm">
+  //           Supply
+  //         </Button>
+  //       );
+  //   }
+  // }, [mode]);
+
+  return (
+    <>
+      {displayOpportunity && <OpportunityShortCard opportunity={opportunity} />}
+      {displayLinks && (
+        <Group className="w-full justify-between">
+          <Group>
+            {opportunity.protocol && (
+              <Button
+                external
+                to={opportunity.protocol?.url}
+                disabled={!opportunity.protocol?.url}
+                size="md"
+                look="base"
+              >
+                Visit {opportunity.protocol.name}
+                <Icon remix="RiArrowRightUpLine" />
+              </Button>
+            )}
+          </Group>
+          <Group className="flex-col justify-center">
+            <Button to={link} size="md" look="soft">
+              More info <Icon remix="RiArrowRightLine" />
+            </Button>
+          </Group>
+        </Group>
+      )}
+      <Group>
+        <Input.BigInt
+          className="w-full"
+          state={[amount, (a) => setAmount(a)]}
+          base={inputToken?.decimals ?? 18}
+          header={
+            <Group className="justify-between w-full">
+              <Text>{mode === "deposit" ? "Supply" : "Withdraw"}</Text>
+              <Group>
+                <Text>Balance</Text>
+                {inputToken && (
+                  <Value format="$0,0.#">
+                    {Fmt.toPrice(inputToken.balance, inputToken)}
+                  </Value>
+                )}
+                <PrimitiveTag
+                  onClick={() => {
+                    setAmount(BigInt(inputToken?.balance ?? "0"));
+                  }}
+                  size="xs"
+                >
+                  Max
+                </PrimitiveTag>
+              </Group>
+            </Group>
+          }
+          suffix={
+            <TokenSelect
+              balances
+              state={[tokenAddress, setTokenAddress]}
+              tokens={balance}
+            />
+          }
+          placeholder="0.0"
+        />
+        {/* biome-ignore lint/complexity/noUselessFragments: <explanation> */}
+        <Suspense fallback={<></>}>
+          <Interact
+            disabled={!loading && !target}
+            target={target}
+            inputToken={inputToken}
+            amount={amount}
+            opportunity={opportunity}
+          />
+        </Suspense>
+      </Group>
+    </>
+  );
+}