UI updates

src/components/common/Buttons.jsx

@@ -1,8 +1,15 @@
 import React from 'react';
 
-export const OutlineButton = ({ onClick, children, classes, disabled }) => {
+export const OutlineButton = ({
+  onClick,
+  children,
+  classes,
+  disabled,
+  ref,
+}) => {
   return (
     <button
+      ref={ref}
       type="button"
       onClick={onClick}
       className={
@@ -16,9 +23,16 @@ export const OutlineButton = ({ onClick, children, classes, disabled }) => {
   );
 };
 
-export const PrimaryButton = ({ onClick, children, classes, disabled }) => {
+export const PrimaryButton = ({
+  onClick,
+  children,
+  classes,
+  disabled,
+  ref,
+}) => {
   return (
     <button
+      ref={ref}
       onClick={onClick}
       disabled={disabled}
       className={

src/components/common/ProgressTracker.jsx

@@ -3,12 +3,13 @@
 import { getConfig } from '../../utils/config';
 import { formatNumberWithComma } from '../../utils/utilityFunctions';
 import { useSelector } from 'react-redux';
-import { ReducerNames } from '../../utils/constants';
+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 {
@@ -35,7 +36,7 @@
 
   const getRegisteredPercentage = useCallback(
     () => (humansRegistered / ProgressMeterMax) * 100,
     [humansRegistered]
   );
 
   // to make sure the the right corner is not clipped much with increasing width
@@ -71,26 +72,42 @@
               JOIN {humansRegistered} HUMANS TO REACH {ReadableNumber} VOTERS
             </h2>
           </div>
-
-          <div className="p-2 w-full bg-gradient-to-r from-purple-600 to-indigo-600 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(
-                  'https://pages.near.org/blog/ndc-v1-governance-elections-faq/',
-                  '_blank'
-                )
-              }
-            >
-              Learn More
-            </button>
+          <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(
+                      'https://pages.near.org/blog/ndc-v1-governance-elections-faq/',
+                      '_blank'
+                    )
+                  }
+                >
+                  Learn More
+                </button>
+              </div>
+            )}
           </div>
         </>
       </div>

src/components/fractalVerification/FvVerificationTabs.jsx

@@ -10,10 +10,13 @@
 import { insertUserData, log_event } from '../../utils/utilityFunctions';
 import ReactConfetti from 'react-confetti';
 import { ImageSrc, ReducerNames } from '../../utils/constants';
-import { setActivePageIndex } from '../../redux/reducer/commonReducer';
+import {
+  setActivePageIndex,
+  updateShowConfetti,
+} from '../../redux/reducer/commonReducer';
 
 const FvVerificationTabs = ({ tabs, error }) => {
-  const { activePageIndex, isSuccessSBTPage } = useSelector(
+  const { activePageIndex, isSuccessSBTPage, showConfetti } = useSelector(
     (state) => state[ReducerNames.COMMON]
   );
   const dispatch = useDispatch();
@@ -23,7 +26,6 @@
     redirect_uri: '',
   });
   const [loading, setLoading] = useState(true);
-  const [showConfetti, setShowConfetti] = useState(false);
   const { executeRecaptcha } = useGoogleReCaptcha();
 
   async function checkIsUserVerified() {
@@ -89,19 +91,18 @@
     } else {
       setLoading(false);
     }
   }, [executeRecaptcha]);
 
   useEffect(() => {
-    if (isSuccessSBTPage) {
-      setShowConfetti(true);
+    if (showConfetti) {
       let timer = setTimeout(() => {
-        setShowConfetti(false);
+        dispatch(updateShowConfetti(false));
       }, 5000);
       return () => {
         clearTimeout(timer);
       };
     }
-  }, [isSuccessSBTPage]);
+  }, [showConfetti]);
 
   return (
     <>

src/components/fractalVerification/SuccessPage.jsx

@@ -1,29 +1,125 @@
-import React, { useEffect, useState } from 'react';
-import ReactConfetti from 'react-confetti';
+import React, { Fragment, useRef, useState } 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';
 
 export const SuccesVerification = () => {
-  const [showConfetti, setShowConfetti] = useState(true);
+  const [showModal, setShowModal] = useState(true);
+  const dispatch = useDispatch();
 
-  useEffect(() => {
-    let timer = setTimeout(() => {
-      setShowConfetti(false);
-    }, 5000);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
+  const Link = ({ link, text }) => {
+    return (
+      <span
+        onClick={() => window.open(link, '_blank')}
+        className="text-purple-600 cursor-pointer decoration-solid underline"
+      >
+        {text}
+      </span>
+    );
+  };
+
+  function removeModal() {
+    setShowModal(false);
+    dispatch(updateShowConfetti(true));
+  }
+
+  const cancelButtonRef = useRef(null);
 
   return (
-    <div className="w-full">
-      {showConfetti && (
-        <ReactConfetti
-          width={document.body.offsetWidth}
-          height={document.body.offsetHeight}
-        />
-      )}
-      <div>
+    <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
+                        text=" Whistleblower bounty program"
+                        link={Links.WHISTLEBLOWER}
+                      />{' '}
+                      offers up to 2,000 NEAR for whistleblowers who come
+                      forward to share instances of vote buying, account buying,
+                      election fraud, and other violations of the{' '}
+                      <Link
+                        text="Fair voting policy."
+                        link={Links.FAIR_VOTING_POLICY}
+                      />
+                      <br />
+                      <br />
+                      Please make sure to read and understand the{' '}
+                      <Link
+                        text="Fair voting policy"
+                        link={Links.FAIR_VOTING_POLICY}
+                      />
+                      , 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]">
             <CircleWavyCheck styles={'w-12 h-12 stroke-black-300 svg-green'} />

src/components/fractalVerification/TabScreens.jsx

@@ -135,10 +135,13 @@ export const MintSBT = ({ setError, isError }) => {
                       We will be back in a bit.
                     </h1>
                     <p>
-                      This system is undergoing maintenance to ensure you get
-                      the best experience. Please check back later!
+                      We have been impacted by the Aug 2, 2023 NEAR mainnet
+                      upgrade which unfortunately contained a runtime error and
+                      caused unexpected contract behavior. The Pagoda protocol
+                      team is working on patching the mainnet. Please check back
+                      later!
                     </p>
-                    <p>Thank you for your understanding!</p>
+                    <p>Thank you for your patience!</p>
                   </div>
                 </Dialog.Panel>
               </Transition.Child>

src/pages/CommunitySBT.jsx

@@ -127,6 +127,11 @@ const CommunitySBTPage = () => {
               title="Genius"
               description="This SBT is a testament to your genius and visionary prowess, propelling the NEAR ecosystem to new heights with brilliant ideas. Unleash its power and shape the future like never before!"
             />
+            <ImageTextBlock
+              imageSrc={ImageSrc.IVotedSBT}
+              title="I VOTED SBT"
+              description="Celebrate your participation in the inaugural NDC election. It is important to mint this SBT to show off your voting record, to vote on future referendums, and much more."
+            />
           </div>
         </div>
       </div>

src/redux/reducer/commonReducer.js

@@ -8,6 +8,7 @@ export const commonReducer = createSlice({
     isAdmin: false,
     activePageIndex: null, // for verification screens
     isSuccessSBTPage: false, // to show success page
+    showConfetti: false,
   },
   reducers: {
     updateUserLogin: (state, action) => {
@@ -22,6 +23,9 @@ export const commonReducer = createSlice({
     updateAdminLogin: (state, action) => {
       state.isAdmin = action.payload;
     },
+    updateShowConfetti: (state, action) => {
+      state.showConfetti = action.payload;
+    },
   },
 });
 
@@ -30,6 +34,7 @@ export const {
   setActivePageIndex,
   setSuccessSBTPage,
   updateAdminLogin,
+  updateShowConfetti,
 } = commonReducer.actions;
 
 export default commonReducer.reducer;

src/utils/constants.js

@@ -96,8 +96,14 @@ export const ImageSrc = {
     'https://bafkreialtxsodm5coxfkkec4ybakyghk7horpxnyuifg4la4ye6vjhlf64.ipfs.nftstorage.link/',
   CommunityFund:
     'https://bafkreicvwvjtybib7nodjus5ynomjasp3xskz2et5tkrx6k7t3h7dsq2za.ipfs.nftstorage.link/',
+  ELECTION_ICON:
+    'https://bafkreidrd4ci3p23e7zttaq5ukpzeddyzvfdm37x3xomju3rgeq77f2dba.ipfs.nftstorage.link/',
 };
 
 export const Links = {
   KUDOS_WIDGET: 'https://near.org/kudos.ndctools.near/widget/NDC.Kudos.Main',
+  WHISTLEBLOWER:
+    'https://medium.com/@neardigitalcollective/introducing-ndc-whistleblower-bounty-program-d4fe1b9fc5a0',
+  FAIR_VOTING_POLICY:
+    'https://bafkreifb4ahfglbq3knjtecqfvyhwb2nycozc3azn3gzanwzbe2xpynniu.ipfs.nftstorage.link/',
 };

src/utils/nearWallet.js

@@ -49,7 +49,7 @@ const meteorWallet = setupMeteorWallet({
   iconUrl: meteorIconUrl,
 });
 
-const DEFAULT_TGAS = '60000000000000';
+const DEFAULT_TGAS = '90000000000000';
 const NO_DEPOSIT = '0';
 
 // Wallet that simplifies using the wallet selector