Merge pull request #57 from GeneralMagicio/fix/feedback_issues

Fix: post-QA issues

app/allocation/components/BudgetAllocation.tsx

@@ -20,6 +20,9 @@ interface IBudgetAllocationProps extends BudgetCategory {
   delegations: number
   loading: boolean
   username?: string
+  isBadgeholder: boolean
+  bhCategory: string
+  categorySlug: string
   onDelegate: () => void
   onScore: () => void
 }
@@ -33,6 +36,9 @@ const BudgetAllocation: React.FC<IBudgetAllocationProps> = ({
   loading,
   progress = CollectionProgressStatusEnum.Pending,
   username,
+  isBadgeholder,
+  bhCategory,
+  categorySlug,
   onScore,
   onDelegate,
 }) => {
@@ -55,6 +61,9 @@ const BudgetAllocation: React.FC<IBudgetAllocationProps> = ({
             progress={progress}
             delegations={delegations}
             isAutoConnecting={isAutoConnecting}
+            isBadgeholder={isBadgeholder}
+            bhCategory={bhCategory}
+            categorySlug={categorySlug}
           />
         );
     }

app/allocation/components/CategoryAllocation.tsx

@@ -34,6 +34,9 @@ interface CategoryAllocationProps extends TCategory {
   delegations: number
   loading: boolean
   username?: string
+  isBadgeholder: boolean
+  bhCategory: string
+  categorySlug: string
   onDelegate: () => void
   onScore: () => void
   onLockClick: () => void
@@ -53,6 +56,9 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
   delegations,
   loading,
   username,
+  isBadgeholder,
+  bhCategory,
+  categorySlug,
   onDelegate,
   onScore,
   onLockClick,
@@ -104,6 +110,9 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
             progress={progress}
             isAutoConnecting={isAutoConnecting}
             delegations={delegations}
+            isBadgeholder={isBadgeholder}
+            bhCategory={bhCategory}
+            categorySlug={categorySlug}
           />
         );
     }

app/allocation/components/EOA/ConnectEOAModal.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import Image from 'next/image';
 import { useActiveWallet } from 'thirdweb/react';
 import { Step } from './EmailLoginModal';
@@ -7,29 +7,47 @@ import { axiosInstance } from '@/app/utils/axiosInstance';
 type TConnectEOAModalProps = {
   email: string
   setStep: (step: number) => void
-}
+};
 
-const ConnectEOAModal: FC<TConnectEOAModalProps> = ({
-  email,
-  setStep,
-}) => {
+const ConnectEOAModal: FC<TConnectEOAModalProps> = ({ email, setStep }) => {
   const wallet = useActiveWallet();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
 
   const connectEOA = async () => {
-    if (!wallet) return;
-    const msg = 'Sign in with Thirdweb wallet';
-    const account = wallet?.getAccount();
+    setLoading(true);
+    setError(null);
+
+    if (!wallet) {
+      setError('Unable to connect to your wallet');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const msg = 'Sign in with Thirdweb wallet';
+      const account = wallet?.getAccount();
 
-    if (!account) return;
+      if (!account) {
+        setError('Unable to connect to your wallet');
+        setLoading(false);
+        return;
+      }
 
-    const signature = await account.signMessage({ message: msg });
+      const signature = await account.signMessage({ message: msg });
 
-    await axiosInstance.post('auth/thirdweb/login', {
-      message: msg,
-      signature,
-      address: account.address,
-    });
-    setStep(Step.SUCCESS);
+      await axiosInstance.post('auth/thirdweb/login', {
+        message: msg,
+        signature,
+        address: account.address,
+      });
+      setLoading(false);
+      setStep(Step.SUCCESS);
+    }
+    catch (err) {
+      setError('An error occurred while connecting to your wallet');
+      setLoading(false);
+    }
   };
 
   return (
@@ -54,11 +72,21 @@ const ConnectEOAModal: FC<TConnectEOAModalProps> = ({
         <p className="text-gray-400">
           Please link this with your connected ETH address to continue.
         </p>
+
+        {error && (
+          <div className="mt-4 flex w-[90%] flex-col items-start gap-1 rounded-lg border border-primary bg-status-bg-error px-3 py-2">
+            <p className="text-sm font-semibold text-primary">
+              An error occurred!
+            </p>
+            <p className="text-center text-xs text-dark-500">{error}</p>
+          </div>
+        )}
+
         <button
           className="my-4 w-full rounded-lg border bg-primary px-4 py-2 font-semibold text-white transition duration-300"
           onClick={connectEOA}
         >
-          Connect
+          {loading ? 'Connecting...' : 'Connect'}
         </button>
       </div>
     </div>

app/allocation/components/EOA/EmailLoginModal.tsx

@@ -183,6 +183,7 @@ const EmailLoginModal = ({ closeModal, selectedCategoryId }: TEmailLoginModalPro
                     handleGoBack={goBack}
                     setStep={setStep}
                     resendOTP={sendOTP}
+                    closeModal={closeModal}
                   />
                 )}
           </div>

app/allocation/components/EOA/MethodSelection.tsx

@@ -31,6 +31,7 @@ export const MethodSelection: FC<IMethodSelectionProps> = ({
   setOtpData,
   sendOTP,
   setStep,
+  closeModal,
 }) => {
   const { connect } = useConnect();
 
@@ -50,21 +51,17 @@ export const MethodSelection: FC<IMethodSelectionProps> = ({
       const smartWallet = await createSmartWalletFromEOA(account);
       setOAuthData({ ...oAuthData, loading: false });
 
+      connect(smartWallet);
+
       if (!personalWalletId) {
-        setOAuthData({
-          ...oAuthData,
-          loading: true,
-          error: 'There was a problem connecting to your Google account',
-        });
+        setStep(Step.CONNECT_EOA);
+        setPickedMethod(null);
       }
       else {
-        console.log('Connecting to smart wallet');
-        connect(smartWallet);
-        setStep(Step.CONNECT_EOA);
+        closeModal();
       }
     }
     catch (error: any) {
-      console.error(error);
       setOAuthData({
         ...oAuthData,
         loading: true,

app/allocation/components/EOA/OTPVerification.tsx

@@ -21,6 +21,7 @@ interface IOTPVerificationProps {
   handleGoBack: () => void
   setStep: (step: number) => void
   resendOTP: () => void
+  closeModal: () => void
 }
 
 const FIVE_MINUTES = 1 * 60 * 1000;
@@ -32,6 +33,7 @@ export const OTPVerification: FC<IOTPVerificationProps> = ({
   handleGoBack,
   setStep,
   resendOTP,
+  closeModal,
 }) => {
   const { connect } = useConnect();
 
@@ -118,16 +120,19 @@ export const OTPVerification: FC<IOTPVerificationProps> = ({
 
       const smartWallet = await createSmartWalletFromEOA(account);
 
+      setOtpData({
+        ...otpData,
+        loading: false,
+        otpStatus: OtpStatus.VERIFIED,
+      });
+
+      connect(smartWallet);
+
       if (!personalWalletId) {
-        setOtpData({
-          ...otpData,
-          loading: false,
-          otpStatus: OtpStatus.INCORRECT,
-        });
+        setStep(Step.CONNECT_EOA);
       }
       else {
-        connect(smartWallet);
-        setStep(Step.CONNECT_EOA);
+        closeModal();
       }
     }
     catch {

app/allocation/components/ProgressCards/PendingCategory.tsx

@@ -6,6 +6,9 @@ type TPendingCategoryProps = {
   progress: string
   isAutoConnecting: boolean
   delegations?: number
+  isBadgeholder: boolean
+  bhCategory: string
+  categorySlug: string
 };
 
 const PendingCategory = ({
@@ -14,26 +17,33 @@ const PendingCategory = ({
   isAutoConnecting,
   delegations,
   progress,
+  isBadgeholder,
+  bhCategory,
+  categorySlug,
 }: TPendingCategoryProps) => {
   return (
     <div className="flex w-full flex-col items-center justify-center gap-2">
       <div className="flex w-full items-center justify-between">
         <button
           onClick={onScore}
-          className={`w-[48%] whitespace-nowrap rounded-md py-3 text-sm font-medium ${
-            isAutoConnecting
+          className={`whitespace-nowrap rounded-md py-3 text-sm font-medium ${
+            isAutoConnecting || (isBadgeholder && bhCategory !== categorySlug)
               ? 'border bg-gray-300 text-gray-600'
               : 'bg-primary text-white'
+          } ${
+            isBadgeholder && bhCategory === categorySlug ? 'w-full' : 'w-[48%]'
           }`}
-          disabled={isAutoConnecting}
+          disabled={
+            isAutoConnecting || (isBadgeholder && bhCategory !== categorySlug)
+          }
         >
           Vote
         </button>
         <button
           onClick={onDelegate}
           className={`w-[48%] rounded-md border py-3 text-sm font-medium ${
             isAutoConnecting ? 'bg-gray-300 text-gray-600' : 'text-gray-700'
-          }`}
+          } ${isBadgeholder && bhCategory === categorySlug ? 'hidden' : ''}`}
           disabled={isAutoConnecting}
         >
           Delegate
@@ -53,14 +63,12 @@ const PendingCategory = ({
           </p>
         </div>
       )}
-      {progress === 'WIP' && (
+      {progress === 'WIP'
+      && !(isBadgeholder && bhCategory !== categorySlug) && (
         <div className="flex w-full justify-center gap-2 rounded-xl border border-[#FFA15A] bg-[#FFF7ED] py-1">
           <p className="text-xs font-medium text-[#FFA15A]">Voting</p>
         </div>
       )}
-      {/* <div className="flex w-full justify-center gap-2 rounded-xl border border-[#17B26A] bg-[#ECFDF3] py-1">
-        <p className="text-xs font-medium text-[#17B26A]">Voting</p>
-      </div> */}
     </div>
   );
 };