Added election tokens, Removed whistleblower banner (#227)

src/App.js

@@ -1,12 +1,12 @@
 import 'regenerator-runtime/runtime';
 import React, { useEffect } from 'react';
 import { ToastContainer } from 'react-toastify';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import IndexPage from './pages/index';
 import ScoreboardPage from './pages/Scoreboard';
 import CommunitySBTPage from './pages/CommunitySBT';
 import { URLs } from './utils/constants';
 import ProgressTracker from './components/common/ProgressTracker';
 import CustomHeader from './components/common/Header';
 import CustomFooter from './components/common/Footer';
 import ActivatePage from './pages/Activate';
@@ -17,7 +17,8 @@
 const Wrapper = ({ children }) => {
   return (
     <>
-      <ProgressTracker />
+      {/* commenting for right now -> IAH FV minting is at hault */}
+      {/* <ProgressTracker /> */}
       <CustomHeader />
       {children}
       <CustomFooter />

src/components/common/ProgressTracker.jsx

@@ -3,13 +3,12 @@
 import { getConfig } from '../../utils/config';
 import { formatNumberWithComma } from '../../utils/utilityFunctions';
 import { useSelector } from 'react-redux';
 import { Links, ReducerNames } from '../../utils/constants';
 
 const ProgressTracker = () => {
   const ProgressMeterMax = process.env.REACT_APP_PROGRESS_METER_MAX ?? 3000;
   const [humansRegistered, setHumansRegistered] = useState(0);
   const { showTracker } = useSelector((state) => state[ReducerNames.PROGRESS]);
-  const { fvToken } = useSelector((state) => state[ReducerNames.SBT]);
 
   const fetchHumansRegistered = async () => {
     try {
@@ -36,7 +35,7 @@
 
   const getRegisteredPercentage = useCallback(
     () => (humansRegistered / ProgressMeterMax) * 100,
     [humansRegistered]
   );
 
   // to make sure the the right corner is not clipped much with increasing width
@@ -60,7 +59,7 @@
     return (
       <div className="text-center text-md">
         <>
-          {/* <div className="bg-purple-400 h-[45px] md:h-[40px] relative">
+          <div className="bg-purple-400 h-[45px] md:h-[40px] relative">
             <div
               className="bg-yellow-400 absolute left-0 top-0 h-full"
               style={{
@@ -69,46 +68,8 @@
               }}
             ></div>
             <h2 className="px-1 md:px-0 relative flex gap-3 h-full justify-center items-center z-10 font-bold">
-              JOIN {humansRegistered} HUMANS TO REACH {ReadableNumber} VOTERS
-              <button
-                className="text-xs md:text-sm rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-1 md:px-3 py-1 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700 "
-                onClick={() => window.open(Links.ELECTIONS, '_blank')}
-              >
-                Vote Now
-              </button>
+              JOIN {humansRegistered} HUMANS TO REACH {ReadableNumber} HUMANS
             </h2>
-          </div> */}
-          <div className="p-2 w-full bg-gradient-to-r from-purple-600 to-indigo-600">
-            {fvToken ? (
-              <div className="flex justify-center gap-5 items-center">
-                <p className="text-yellow-400 ">
-                  Learn about how to protect integrity of the election and how
-                  to submit to the Whistleblower Bounty Program
-                </p>
-                <button
-                  className="bg-yellow-300 rounded-lg py-1.5 px-2 text-sm"
-                  onClick={() => window.open(Links.WHISTLEBLOWER, '_blank')}
-                >
-                  Learn More
-                </button>
-              </div>
-            ) : (
-              <div className="flex justify-center gap-5 items-center">
-                <h4 className="text-yellow-400 font-bold">
-                  JOIN THE HUMANS OF NEAR
-                </h4>
-                <p className="text-gray-300">
-                  Unlock Elections, Governance, & Community Treasury with{' '}
-                  {ReadableNumber} Humans on NEAR
-                </p>
-                <button
-                  className="bg-yellow-300 rounded-lg py-1.5 px-2 text-sm"
-                  onClick={() => window.open(Links.ELECTIONS, '_blank')}
-                >
-                  Vote Now
-                </button>
-              </div>
-            )}
           </div>
         </>
       </div>

src/components/common/TokensGrid.jsx

@@ -15,6 +15,9 @@ const TokensGrid = () => {
     gwgCoreContributor,
     modToken,
     iVotedToken,
+    coaToken,
+    homToken,
+    tcToken,
   } = useSelector((state) => state[ReducerNames.SBT]);
 
   return (
@@ -118,6 +121,33 @@ const TokensGrid = () => {
           <TokenDetails data={iVotedToken} />
         </Item>
       )}
+      {coaToken && (
+        <Item imageSrc={ImageSrc.CoA}>
+          <ValidTokenComponent />
+          <h2 className="font-bold text-3xl my-1 mb-5">
+            My Council of Advisor Soul Bound Token
+          </h2>
+          <TokenDetails data={coaToken} />
+        </Item>
+      )}
+      {homToken && (
+        <Item imageSrc={ImageSrc.HoM}>
+          <ValidTokenComponent />
+          <h2 className="font-bold text-3xl my-1 mb-5">
+            My House of Merit Soul Bound Token
+          </h2>
+          <TokenDetails data={homToken} />
+        </Item>
+      )}
+      {tcToken && (
+        <Item imageSrc={ImageSrc.TC}>
+          <ValidTokenComponent />
+          <h2 className="font-bold text-3xl my-1 mb-5">
+            My Transparency Commission Soul Bound Token
+          </h2>
+          <TokenDetails data={tcToken} />
+        </Item>
+      )}
     </div>
   );
 };

src/components/fractalVerification/SuccessPage.jsx

@@ -1,111 +1,15 @@
-import React, { Fragment, useRef, useState } from 'react';
+import React from 'react';
 import { CircleWavyCheck } from '../../images/CircleWavyCheck';
 import TokensGrid from '../common/TokensGrid';
-import { OutlineButton, PrimaryButton } from '../common/Buttons';
-import { ImageSrc, Links } from '../../utils/constants';
-import { Dialog, Transition } from '@headlessui/react';
 import { useDispatch } from 'react-redux';
 import { updateShowConfetti } from '../../redux/reducer/commonReducer';
-import { Link } from '../common/Link';
 
 export const SuccesVerification = () => {
-  const [showModal, setShowModal] = useState(true);
   const dispatch = useDispatch();
-
-  function removeModal() {
-    setShowModal(false);
-    dispatch(updateShowConfetti(true));
-  }
-
-  const cancelButtonRef = useRef(null);
+  dispatch(updateShowConfetti(true));
 
   return (
     <div>
-      <Transition.Root show={showModal} as={Fragment}>
-        <Dialog
-          initialFocus={cancelButtonRef}
-          as="div"
-          className="relative z-10"
-          onClose={setShowModal}
-        >
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-40 transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-xl">
-                  <div className="p-16 flex flex-col gap-5 text-center justify-center">
-                    <img
-                      width="60px"
-                      height="60px"
-                      className="self-center"
-                      src={ImageSrc.ELECTION_ICON}
-                    />
-                    <h2 className="font-semibold text-xl">
-                      Before you vote in the general election, learn about the
-                      Whistleblower Bounty Program.
-                    </h2>
-                    <p>
-                      The{' '}
-                      <Link link={Links.WHISTLEBLOWER}>
-                        Whistleblower bounty program
-                      </Link>{' '}
-                      offers up to 2,500 NEAR for whistleblowers who come
-                      forward to share instances of vote buying, account buying,
-                      election fraud, and other violations of the{' '}
-                      <Link link={Links.FAIR_VOTING_POLICY}>
-                        Fair voting policy.
-                      </Link>
-                      <br />
-                      <br />
-                      Please make sure to read and understand the{' '}
-                      <Link link={Links.FAIR_VOTING_POLICY}>
-                        Fair voting policy
-                      </Link>
-                      , which outlines the responsibilities of each voter.
-                    </p>
-                    <div className="flex gap-2 justify-center">
-                      <OutlineButton
-                        ref={cancelButtonRef}
-                        onClick={removeModal}
-                        classes="border-purple-600 text-purple-600"
-                      >
-                        Cancel
-                      </OutlineButton>
-                      <PrimaryButton
-                        ref={cancelButtonRef}
-                        onClick={removeModal}
-                      >
-                        <p className="text-sm">
-                          I understand my responsibilities as a voter
-                        </p>
-                      </PrimaryButton>
-                    </div>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
       <div className="w-full">
         <div className="flex items-center justify-center w-20 h-20 rounded-full border-2 border-green-400">
           <div className="flex items-center justify-center w-full h-full rounded-full border-2 border-green-500 bg-green-200 shadow-green-400 shadow-[inset_0_0px_4px_#FFFFFF]">

src/pages/CommunitySBT.jsx

@@ -126,6 +126,28 @@ const CommunitySBTPage = () => {
               isAvailable={true}
               onClick={() => window.open(Links.ELECTIONS, '_blank')}
             />
+            <ImageTextBlock
+              imageSrc={ImageSrc.HoM}
+              title="House of Merit"
+              description="As a member of the inaugural HoM, you hold the responsibility of managing the treasury and directing capital deployment to foster the growth of the ecosystem."
+              isAvailable={true}
+              buttonText="Minted"
+            />
+            <ImageTextBlock
+              imageSrc={ImageSrc.CoA}
+              title="Council of Advisors"
+              description="As a member of the inaugural CoA, you hold the power of vetoing proposals from the HoM and guiding the deployment of the Community Treasury."
+              isAvailable={true}
+              buttonText="Minted"
+            />
+            <ImageTextBlock
+              imageSrc={ImageSrc.TC}
+              title="Transparency Commission"
+              description="As a member of the inaugural TC, you are in charge of keeping behavior of elected officials clean and making sure cartels do not form in the ecosystem."
+              isAvailable={true}
+              buttonText="Minted"
+            />
+
             <ImageTextBlock
               imageSrc={ImageSrc.CreativeSBT}
               title="Creative"

src/pages/auth/Home.jsx

@@ -42,7 +42,7 @@ const Home = () => {
       fetchVibeToken();
       fetchKudosToken();
       fetchModsToken();
-      fetchIVotedToken();
+      fetchElectionsToken();
     }
   }, [activePageIndex]);
 
@@ -116,7 +116,7 @@ const Home = () => {
     }
   };
 
-  const fetchIVotedToken = async () => {
+  const fetchElectionsToken = async () => {
     try {
       const data = await wallet.viewMethod({
         contractId: app_contract,
@@ -133,10 +133,22 @@ const Home = () => {
           if (token.metadata.class === 1) {
             dispatch(updateTokens({ type: TokenTypes.I_VOTED, value: token }));
           }
+          // class2=HoM
+          if (token.metadata.class === 2) {
+            dispatch(updateTokens({ type: TokenTypes.HoM, value: token }));
+          }
+          // class3=CoA
+          if (token.metadata.class === 3) {
+            dispatch(updateTokens({ type: TokenTypes.CoA, value: token }));
+          }
+          // class4=TC
+          if (token.metadata.class === 4) {
+            dispatch(updateTokens({ type: TokenTypes.TC, value: token }));
+          }
         }
       }
     } catch (error) {
-      toast.error('An error occured while fetching I Voted SBT details');
+      toast.error('An error occured while fetching election token details');
     }
   };
 

src/redux/reducer/sbtsReducer.js

@@ -60,6 +60,9 @@ export const sbtReducer = createSlice({
     gwgCoreContributor: null,
     modToken: null,
     iVotedToken: null,
+    coaToken: null,
+    homToken: null,
+    tcToken: null,
   },
   reducers: {
     updateTokens: (state, action) => {
@@ -98,6 +101,15 @@ export const sbtReducer = createSlice({
         case TokenTypes.I_VOTED:
           state.iVotedToken = value;
           break;
+        case TokenTypes.CoA:
+          state.coaToken = value;
+          break;
+        case TokenTypes.HoM:
+          state.homToken = value;
+          break;
+        case TokenTypes.TC:
+          state.tcToken = value;
+          break;
         default:
           break;
       }
@@ -112,7 +124,10 @@ export const sbtReducer = createSlice({
         state.ndcContributor ||
         state.gwgCoreContributor ||
         state.modToken ||
-        state.iVotedToken;
+        state.iVotedToken ||
+        state.coaToken ||
+        state.homToken ||
+        state.tcToken;
     },
     handleErrorMessage: (state, action) => {
       state.error = action.payload;
@@ -130,6 +145,9 @@ export const sbtReducer = createSlice({
       state.ndcContributor = null;
       state.modToken = null;
       state.iVotedToken = null;
+      state.tcToken = null;
+      state.coaToken = null;
+      state.homToken = null;
     },
     updateTokenRemoveStatus: (state, action) => {
       state.tokenRemoveSuccess = !state.tokenRemoveSuccess;

src/utils/constants.js

@@ -35,6 +35,9 @@ export const TokenTypes = {
   GWG__Core_Contributor: 'GWG Core Contributor',
   MOD: 'Mod',
   I_VOTED: 'I Voted',
+  CoA: 'CoA',
+  HoM: 'HoM',
+  TC: 'TC',
 };
 
 export const ReducerNames = {
@@ -114,6 +117,9 @@ export const ImageSrc = {
     'https://bafkreidrd4ci3p23e7zttaq5ukpzeddyzvfdm37x3xomju3rgeq77f2dba.ipfs.nftstorage.link/',
   Astra:
     'https://bafkreig2uojfxnf4bto6wuzaylec7wjmo4lznv6nz42fpas2bb4wuueehe.ipfs.nftstorage.link/',
+  HoM: 'https://bafybeifwzgubzysrir7pcnrkstxsgtxferm2qesu3hduasuaucwnn7enyu.ipfs.nftstorage.link/',
+  CoA: 'https://bafybeidw2rljcg3okollcnycryk2zc6zk3ykbygzattagdpjbagqp4cebm.ipfs.nftstorage.link/',
+  TC: 'https://bafybeid5xdhn6zx3s5htfuvzlueeyxgylejevnumlbxjfxc7a6g27bhr7u.ipfs.nftstorage.link/',
 };
 
 export const Links = {