Minor ux fixes

helium · Oct 13, 2023 · 14e051d · 14e051d
1 parent 735c77e
commit 14e051d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/components/LockTokensAccount.tsx b/components/LockTokensAccount.tsx
@@ -30,6 +30,7 @@ import { VotingPowerBox } from "./VotingPowerBox";
 import { useAsync } from "react-async-hook";
 import axios from "axios";
 import { LAMPORTS_PER_SOL } from "@solana/web3.js";
+import { useWalletModal } from "@solana/wallet-adapter-react-ui";
 
 function daysToSecs(days: number): number {
   return days * 60 * 60 * 24;
@@ -59,6 +60,7 @@ export const LockTokensAccount: React.FC = (props) => {
     refetch: refetchState,
     mint,
   } = useHeliumVsrState();
+  const { setVisible } = useWalletModal();
   const { symbol: tokenName } = useMetaplexMetadata(mint);
   const canDelegate = true;
 
@@ -263,7 +265,10 @@ export const LockTokensAccount: React.FC = (props) => {
             </div>
           </div>
         ) : (
-          <div className="shadow-lg bg-hv-gray-750 flex flex-col items-center justify-center p-6 rounded-lg">
+          <div
+            onClick={() => setVisible(true)}
+            className="cursor-pointer shadow-lg bg-hv-gray-750 flex flex-col items-center justify-center p-6 rounded-lg"
+          >
             <BsLink45Deg className="h-6 mb-1 text-primary-light w-6" />
             <span className="text-fgd-1 text-sm">Connect your wallet</span>
           </div>

diff --git a/components/VoteOptionsSection.tsx b/components/VoteOptionsSection.tsx
@@ -13,6 +13,7 @@ import { FiSettings } from "react-icons/fi";
 import { useWallet } from "@solana/wallet-adapter-react";
 import { BsLink45Deg } from "react-icons/bs";
 import { useNetwork } from "../hooks/useNetwork";
+import { useWalletModal } from "@solana/wallet-adapter-react-ui";
 
 const VoteOptionsSection: React.FC<{
   outcomes: Outcome[];
@@ -36,7 +37,8 @@ const VoteOptionsSection: React.FC<{
 
   const { amountLocked, loading } = useHeliumVsrState();
   const noVotingPower = !loading && (!amountLocked || amountLocked.isZero());
-  const { network } = useNetwork()
+  const { network } = useNetwork();
+  const { setVisible } = useWalletModal();
 
   useNotifyError(voteErr, "Failed to vote");
   useNotifyError(relErr, "Failed to relinquish vote");
@@ -62,7 +64,10 @@ const VoteOptionsSection: React.FC<{
 
           <div className="w-full">
             {!connected && (
-              <div className="text-white flex flex-col items-center justify-center">
+              <div
+                onClick={() => setVisible(true)}
+                className="cursor-pointer text-white flex flex-col items-center justify-center"
+              >
                 <BsLink45Deg className="h-6 mb-1 text-primary-light w-6" />
                 <span className="text-fgd-1 text-sm">Connect your wallet</span>
               </div>
@@ -78,8 +83,15 @@ const VoteOptionsSection: React.FC<{
                 </span>
               </Link>
             )}
+            {connected && !noVotingPower && (
+              <p className="text-white mb-2">
+                To vote, click on any option. To remove your vote, click the
+                option again.
+              </p>
+            )}
 
-            {connected && !noVotingPower &&
+            {connected &&
+              !noVotingPower &&
               outcomes?.map((o, i, { length }) => (
                 <VoteOption
                   voting={currVote == o.index && (voting || relinquishing)}

diff --git a/hooks/useNetwork.ts b/hooks/useNetwork.ts
@@ -4,7 +4,7 @@ import { useCallback } from "react";
 
 const networksToMint = {
   Helium: HNT_MINT,
-  'Helium Mobile': MOBILE_MINT,
+  'Helium MOBILE': MOBILE_MINT,
   'Helium IOT': IOT_MINT,
 };