Merge pull request #2180 from jk-labs-inc/staging

patch PR 5 of week ending 8/27/24

packages/react-app-revamp/components/ChargeLayout/components/Submission/index.tsx

@@ -1,58 +1,59 @@
 import Collapsible from "@components/UI/Collapsible";
+import { chains } from "@config/wagmi";
+import { extractPathSegments } from "@helpers/extractPath";
 import { formatBalance } from "@helpers/formatBalance";
 import shortenEthereumAddress from "@helpers/shortenEthereumAddress";
 import { ChevronUpIcon } from "@heroicons/react/24/outline";
-import { SplitFeeDestination } from "@hooks/useDeployContest/types";
+import { Charge } from "@hooks/useDeployContest/types";
+import { GetBalanceReturnType } from "@wagmi/core";
 import Image from "next/image";
+import { usePathname } from "next/navigation";
 import { FC, useState } from "react";
+import { formatEther } from "viem";
+import { useAccount } from "wagmi";
 import ChargeLayoutCommisionDetails from "../CommisionDetails";
 
 interface ChargeLayoutSubmissionProps {
-  userAddress: string;
-  balance: string;
-  entryChargeFormatted: string;
-  splitFeeDestination: SplitFeeDestination;
-  commisionValue: string;
-  nativeCurrencySymbol: string;
-  nativeCurrencyLabel: string;
-  insufficientBalance: boolean;
+  charge: Charge;
+  accountData: GetBalanceReturnType;
 }
 
-const ChargeLayoutSubmission: FC<ChargeLayoutSubmissionProps> = ({
-  userAddress,
-  balance,
-  nativeCurrencySymbol,
-  nativeCurrencyLabel,
-  entryChargeFormatted,
-  commisionValue,
-  splitFeeDestination,
-  insufficientBalance,
-}) => {
+const ChargeLayoutSubmission: FC<ChargeLayoutSubmissionProps> = ({ charge, accountData }) => {
   const [isEntryChargeDetailsOpen, setIsEntryChargeDetailsOpen] = useState(false);
+  const { address } = useAccount();
+  const asPath = usePathname();
+  const { chainName } = extractPathSegments(asPath ?? "");
+  const chainUnitLabel = chains.find((c: { name: string }) => c.name.toLowerCase() === chainName.toLowerCase())
+    ?.nativeCurrency.symbol;
+  const chargeAmount = charge.type.costToPropose;
+  const insufficientBalance = accountData.value < chargeAmount;
+  const entryChargeFormatted = formatEther(BigInt(chargeAmount));
+  const entryChargeHalfFormatted = formatEther(BigInt(chargeAmount / 2));
+  const commissionValue = charge.percentageToCreator > 0 ? entryChargeHalfFormatted : entryChargeFormatted;
+  const accountBalance = formatEther(accountData.value);
 
   return (
     <div className="flex flex-col gap-2 w-full md:w-[344px]">
       <div className="flex gap-8">
         <div className="flex flex-col">
           <div className="flex gap-3">
             <Image
-              src={`${insufficientBalance ? "/contest/wallet-entry-insufficient.svg" : "/contest/wallet-entry.svg"}`}
+              src={insufficientBalance ? "/contest/wallet-entry-insufficient.svg" : "/contest/wallet-entry.svg"}
               height={20}
               width={22}
               alt="wallet"
             />
-            <p className={`text-[16px] ${insufficientBalance ? "text-negative-11" : "text-neutral-9"}  font-bold`}>
-              {shortenEthereumAddress(userAddress ?? "")}
+            <p className={`text-[16px] ${insufficientBalance ? "text-negative-11" : "text-neutral-9"} font-bold`}>
+              {shortenEthereumAddress(address ?? "")}
             </p>
           </div>
-          {insufficientBalance ? <p className="text-negative-11 text-[16px]">insufficient funds</p> : null}
+          {insufficientBalance && <p className="text-negative-11 text-[16px]">insufficient funds</p>}
         </div>
-
         <p className={`text-[16px] ${insufficientBalance ? "text-negative-11" : "text-neutral-9"} ml-auto font-bold`}>
-          {formatBalance(balance)} {nativeCurrencySymbol} available
+          {formatBalance(accountBalance)} {accountData.symbol} available
         </p>
       </div>
-      <div className={`flex flex-col`}>
+      <div className="flex flex-col">
         <div className="flex items-center">
           <div
             className="flex gap-2 cursor-pointer"
@@ -67,16 +68,15 @@ const ChargeLayoutSubmission: FC<ChargeLayoutSubmissionProps> = ({
               <ChevronUpIcon height={20} className="text-neutral-9" />
             </button>
           </div>
-
           <p className="text-[16px] text-neutral-9 ml-auto">
-            {entryChargeFormatted} {nativeCurrencyLabel} (+gas)
+            {entryChargeFormatted} {chainUnitLabel} (+gas)
           </p>
         </div>
         <Collapsible isOpen={isEntryChargeDetailsOpen}>
           <ChargeLayoutCommisionDetails
-            splitFeeDestination={splitFeeDestination}
-            commisionValue={commisionValue}
-            nativeCurrencyLabel={nativeCurrencyLabel}
+            splitFeeDestination={charge.splitFeeDestination}
+            commisionValue={commissionValue}
+            nativeCurrencyLabel={chainUnitLabel ?? ""}
           />
         </Collapsible>
       </div>

packages/react-app-revamp/components/ChargeLayout/components/Vote/components/ChargeInfo/index.tsx

@@ -0,0 +1,40 @@
+import { chains } from "@config/wagmi";
+import { extractPathSegments } from "@helpers/extractPath";
+import { Charge, VoteType } from "@hooks/useDeployContest/types";
+import { usePathname } from "next/navigation";
+import React from "react";
+import { formatEther } from "viem";
+
+interface ChargeInfoProps {
+  charge: Charge;
+}
+
+const ChargeInfo: React.FC<ChargeInfoProps> = ({ charge }) => {
+  const asPath = usePathname();
+  const { chainName } = extractPathSegments(asPath ?? "");
+  const chainUnitLabel = chains.find((c: { name: string }) => c.name.toLowerCase() === chainName.toLowerCase())
+    ?.nativeCurrency.symbol;
+  const chargeAmount = charge.type.costToVote;
+  const chargeLabel = charge.voteType === VoteType.PerVote ? "charge per vote" : "charge to vote";
+  const entryChargeFormatted = formatEther(BigInt(chargeAmount));
+
+  if (charge.type.costToPropose === 0 && charge.type.costToVote === 0) {
+    return (
+      <div className="flex justify-between text-neutral-9 text-[16px]">
+        <p>charge to vote:</p>
+        <p>gas fees only</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex justify-between text-neutral-9 text-[16px]">
+      <p>{chargeLabel}:</p>
+      <p>
+        {entryChargeFormatted} {chainUnitLabel}
+      </p>
+    </div>
+  );
+};
+
+export default ChargeInfo;

packages/react-app-revamp/components/ChargeLayout/components/Vote/components/MyVotes/index.tsx

@@ -0,0 +1,44 @@
+import { formatBalance } from "@helpers/formatBalance";
+import { formatNumberAbbreviated } from "@helpers/formatNumber";
+import { Charge, VoteType } from "@hooks/useDeployContest/types";
+import React from "react";
+import { useAccount, useBalance } from "wagmi";
+
+interface MyVotesProps {
+  amountOfVotes: number;
+  charge: Charge | null;
+  chainId?: number;
+}
+
+const MyVotes: React.FC<MyVotesProps> = ({ charge, amountOfVotes, chainId }) => {
+  const { address } = useAccount();
+  const { data: balanceData } = useBalance({
+    address,
+    chainId,
+  });
+
+  const insufficientBalance = charge && balanceData ? balanceData.value < BigInt(charge.type.costToVote) : false;
+
+  return (
+    <div
+      className={`flex justify-between items-center text-[16px] ${insufficientBalance ? "text-negative-11" : "text-neutral-11"} transition-colors duration-300`}
+    >
+      <span className="text-neutral-11">my votes:</span>
+      <div className="flex items-center gap-2">
+        {balanceData && charge?.voteType === VoteType.PerVote && (
+          <>
+            <span className="text-neutral-14">
+              {formatBalance(balanceData.formatted)} {balanceData.symbol}
+            </span>
+            <span className="text-neutral-14">=</span>
+          </>
+        )}
+        <span className="text-neutral-11">
+          {formatNumberAbbreviated(amountOfVotes)} vote{amountOfVotes !== 1 ? "s" : ""}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default MyVotes;

packages/react-app-revamp/components/ChargeLayout/components/Vote/components/TotalCharge/index.tsx

@@ -0,0 +1,50 @@
+import { chains } from "@config/wagmi";
+import { extractPathSegments } from "@helpers/extractPath";
+import { Charge } from "@hooks/useDeployContest/types";
+import { usePathname } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { formatEther } from "viem";
+interface TotalChargeProps {
+  charge: Charge;
+  amountOfVotes: number;
+}
+
+const TotalCharge: React.FC<TotalChargeProps> = ({ charge: contestCharge, amountOfVotes }) => {
+  const [totalCharge, setTotalCharge] = useState("0");
+  const asPath = usePathname();
+  const { chainName } = extractPathSegments(asPath ?? "");
+  const chainUnitLabel = chains.find((c: { name: string }) => c.name.toLowerCase() === chainName.toLowerCase())
+    ?.nativeCurrency.symbol;
+
+  useEffect(() => {
+    if (isNaN(amountOfVotes)) {
+      setTotalCharge("0");
+      return;
+    }
+
+    if (contestCharge.type.costToVote === 0 && contestCharge.type.costToPropose === 0) {
+      setTotalCharge("0");
+      return;
+    }
+
+    if (contestCharge.voteType === "PerVote") {
+      const chargeAmount = parseFloat(formatEther(BigInt(contestCharge.type.costToVote)));
+      const multipliedCharge = chargeAmount * amountOfVotes;
+      const charge = +multipliedCharge.toFixed(6);
+      setTotalCharge(charge.toString());
+    } else {
+      setTotalCharge(formatEther(BigInt(contestCharge.type.costToVote)));
+    }
+  }, [contestCharge, amountOfVotes]);
+
+  return (
+    <div className="flex items-center justify-between text-neutral-11 text-[16px]">
+      <p>total charge:</p>
+      <p className="text-[24px] font-bold">
+        {totalCharge} {chainUnitLabel}
+      </p>
+    </div>
+  );
+};
+
+export default TotalCharge;