Merge pull request #194 from BreadchainCoop/sb-181-4

LP Vaults: Update VotingPower panel
BreadchainCoop · Jan 11, 2025 · c4bee22 · c4bee22
2 parents 63c47ce + 8c53bbb
commit c4bee22
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 21 deletions.
diff --git a/src/app/governance/layout.tsx b/src/app/governance/layout.tsx
@@ -87,7 +87,7 @@ function NavLink({
       className={clsx(
         "flex flex-row items-center gap-2 dark:text-breadgray-ultra-white transition-all font-semibold",
         currentPath !== props.href &&
-          "opacity-50 dark:hover:text-breadpink-shaded hover:text-breadpink-500 hover:opacity-100"
+          "opacity-50 dark:hover:text-breadgray-ultra-white hover:text-breadpink-500 hover:opacity-100"
       )}
     >
       {children}

diff --git a/src/app/governance/lp-vaults/LPVotingPowerPage.tsx b/src/app/governance/lp-vaults/LPVotingPowerPage.tsx
@@ -58,12 +58,29 @@ function TitleSection() {
       <h1 className="font-bold text-2xl text-breadgray-grey100 dark:text-breadgray-ultra-white">
         Voting Power LP Vaults
       </h1>
-      <p className="text-breadgray-rye dark:text-breadgray-grey max-w-xl">
-        Lock your LP tokens in the vault(s) below to receive voting power and
-        participate in Breadchain Cooperative governance voting cycles. When
-        locking your LP tokens you receive voting power for the next voting
-        cycle.
-      </p>
+      <div className="max-w-xl text-breadgray-rye dark:text-breadgray-grey">
+        <p className=" ">
+          This page lets you provide liquidity for BREAD while maintaining your
+          voting power for governing the monthly BREAD crowdstaking yield
+          distribution. By staking your LP tokens into a vault, you still get
+          your voting power as if you are holding BREAD normally.
+        </p>
+        <h4 className="mt-4 mb-2 font-bold">Get Started:</h4>
+        <ol className="list-decimal ml-4">
+          <li>
+            <b>Provide Liquidity:</b> Add liquidity for BREAD on the listed
+            liquidity pool of the vault to receive LP tokens.
+          </li>
+          <li>
+            <b>Stake Your LP Tokens:</b> Deposit your LP tokens into the vault
+            to retain your governance rights.
+          </li>
+          <li>
+            <b>Participate in Governance:</b> Share your preferences for the
+            monthly distribution on the vote page.
+          </li>
+        </ol>
+      </div>
     </div>
   );
 }
diff --git a/src/app/governance/lp-vaults/components/SelectTransaction.tsx b/src/app/governance/lp-vaults/components/SelectTransaction.tsx
@@ -71,7 +71,7 @@ function RadioInput({
       <label
         htmlFor={name}
         className={clsx(
-          "col-start-1 row-start-1 rounded-full text-lg border dark:border-[#00000000] font-bold py-2 flex gap-4 px-8 items-end justify-center leading-none text-breadgray-rye transition-colors",
+          "col-start-1 row-start-1 rounded-full text-lg border dark:border-[#00000000] font-bold py-2 flex gap-4 px-8 items-end justify-center leading-none text-breadgray-rye cursor-pointer transition-colors",
           isSelected
             ? "border-breadviolet-shaded dark:border-breadpink-300 text-breadpink-300 bg-breadpink-700 bg-opacity-10"
             : "z-30 bg-breadgray-light-grey dark:text-breadgray-light-grey hover:bg-breadpink-700/10 hover:border-breadpink-700/10 hover:text-breadpink-300 bg-opacity-30"
@@ -85,7 +85,7 @@ function RadioInput({
         id={name}
         name="vault-transaction-type"
         value={name}
-        className="col-start-1 row-start-1 opacity-0 cursor-pointer"
+        className="col-start-1 row-start-1 opacity-0"
         onChange={setTransactionType}
       />
     </div>

diff --git a/src/app/governance/lp-vaults/components/VotingPowerPanel.tsx b/src/app/governance/lp-vaults/components/VotingPowerPanel.tsx
@@ -46,7 +46,7 @@ export function VotingPowerPanel() {
   };
 
   return (
-    <div className="w-full md:max-w-[24rem] m-auto">
+    <div className="w-full md:w-[380px] m-auto">
       <CardBox>
         <div className="p-4 flex flex-col items-center gap-4">
           <h2 className="font-medium text-xl leading-none dark:text-breadgray-light-grey">
@@ -81,19 +81,15 @@ export function VotingPowerPanel() {
             <div className="flex items-center gap-2 font-medium text-xs text-breadgray-rye dark:text-breadgray-grey">
               <span className="pb-1">Accessible voting power</span>
               <Tooltip>
-                Your total available voting power for voting cycle #
+                Your total available voting power for the current voting cycle #
                 {distributions ? distributions.length + 1 + "." : "-"}
               </Tooltip>
             </div>
           </div>
 
           {/* voting power grid */}
           <div className="w-full grid grid-cols-[repeat(2, max-content)] gap-3">
-            {user.status === "CONNECTED" ? (
-              <DividerWithText text="Breakdown" />
-            ) : (
-              <Divider />
-            )}
+            <DividerWithText text="Breakdown" />
 
             <p className="text-breadgray-rye dark:text-breadgray-grey">
               Voting power from locked LP
@@ -116,11 +112,7 @@ export function VotingPowerPanel() {
                 ? formatBalance(Number(votingPower.bread.value) / 10 ** 18, 1)
                 : "-"}
             </span>
-            {user.status === "CONNECTED" ? (
-              <DividerWithText text="Source(s)" />
-            ) : (
-              <Divider />
-            )}
+            <DividerWithText text="Source(s)" />
 
             <p className="text-breadgray-rye dark:text-breadgray-grey">
               Total locked LP tokens
@@ -168,6 +160,12 @@ export function VotingPowerPanel() {
                   <PendingVotingPowerDisplay user={user} />
                 </span>
               </>
+            ) : (
+              <></>
+            )}
+
+            {user.status === "CONNECTED" ? (
+              <></>
             ) : (
               <div className="col-span-2 pt-3">
                 <AccountMenu size="large" fullWidth>