pull from source repo

.gitignore

@@ -18,6 +18,7 @@
 # misc
 .DS_Store
 *.pem
+.env
 
 # debug
 npm-debug.log*
@@ -32,3 +33,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# TypeScript cache
+*.tsbuildinfo

components/Button.tsx

@@ -14,11 +14,14 @@ const Button: FunctionComponent<ButtonProps> = ({
   className,
   disabled,
   isLoading,
+  small,
   ...props
 }) => {
   return (
     <button
-      className={`${className} default-transition font-bold px-4 py-2.5 rounded-full text-sm focus:outline-none ${
+      className={`${className} default-transition font-bold px-4 rounded-full ${
+        small ? 'py-1' : 'py-2.5'
+      } text-sm focus:outline-none ${
         disabled
           ? 'bg-bkg-4 cursor-not-allowed text-fgd-2'
           : 'bg-primary-light text-bkg-2 hover:bg-primary-dark'

components/CancelProposalModal.tsx

@@ -18,7 +18,7 @@ type CancelProposalModalProps = {
 const CancelProposalModal = ({ onClose, isOpen }: CancelProposalModalProps) => {
   const wallet = useWalletStore((s) => s.current)
   const connection = useWalletStore((s) => s.connection)
-  const fetchRealm = useWalletStore((s) => s.actions.fetchRealm)
+  const fetchProposal = useWalletStore((s) => s.actions.fetchProposal)
   const { realmInfo } = useRealm()
   const { proposal } = useProposal()
 
@@ -39,7 +39,7 @@ const CancelProposalModal = ({ onClose, isOpen }: CancelProposalModalProps) => {
 
         onClose()
 
-        await fetchRealm(realmInfo.programId, realmInfo.realmId)
+        await fetchProposal(proposal.pubkey)
       }
     } catch (error) {
       notify({

components/FinalizeVotesModal.tsx

@@ -24,7 +24,7 @@ const FinalizeVotesModal = ({
 }: FinalizeVotesModalProps) => {
   const wallet = useWalletStore((s) => s.current)
   const connection = useWalletStore((s) => s.connection)
-  const fetchRealm = useWalletStore((s) => s.actions.fetchRealm)
+  const fetchProposal = useWalletStore((s) => s.actions.fetchProposal)
   const { realmInfo } = useRealm()
 
   const handleFinalizeVote = async () => {
@@ -42,7 +42,7 @@ const FinalizeVotesModal = ({
 
         onClose()
 
-        await fetchRealm(realmInfo!.programId, realmInfo!.realmId)
+        await fetchProposal(proposal.pubkey)
       }
     } catch (error) {
       notify({

components/ProposalActions.tsx

@@ -0,0 +1,137 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { useEffect, useState } from 'react'
+import { useHasVoteTimeExpired } from '../hooks/useHasVoteTimeExpired'
+import useRealm from '../hooks/useRealm'
+import { getSignatoryRecordAddress, ProposalState } from '../models/accounts'
+import useWalletStore from '../stores/useWalletStore'
+import Button, { SecondaryButton } from './Button'
+import CancelProposalModal from './CancelProposalModal'
+import FinalizeVotesModal from './FinalizeVotesModal'
+import SignOffProposalModal from './SignOffProposalModal'
+
+const ProposalActionsPanel = () => {
+  const { governance, proposal, proposalOwner } = useWalletStore(
+    (s) => s.selectedProposal
+  )
+  const { realmInfo } = useRealm()
+  const wallet = useWalletStore((s) => s.current)
+  const connected = useWalletStore((s) => s.connected)
+  const hasVoteTimeExpired = useHasVoteTimeExpired(governance, proposal!)
+  const signatories = useWalletStore((s) => s.selectedProposal.signatories)
+
+  const [showSignOffModal, setShowSignOffModal] = useState(false)
+  const [signatoryRecord, setSignatoryRecord] = useState<any>(undefined)
+  const [showFinalizeVoteModal, setShowFinalizeVoteModal] = useState(false)
+  const [showCancelModal, setShowCancelModal] = useState(false)
+
+  const canFinalizeVote =
+    hasVoteTimeExpired === true &&
+    connected &&
+    proposal?.info.state === ProposalState.Voting
+
+  const walletPk = wallet?.publicKey
+
+  useEffect(() => {
+    const setup = async () => {
+      if (proposal && realmInfo && walletPk) {
+        const signatoryRecordPk = await getSignatoryRecordAddress(
+          realmInfo.programId,
+          proposal.pubkey,
+          walletPk
+        )
+
+        if (signatoryRecordPk && signatories) {
+          setSignatoryRecord(signatories[signatoryRecordPk.toBase58()])
+        }
+      }
+    }
+
+    setup()
+  }, [proposal, realmInfo, walletPk])
+
+  const canSignOff =
+    signatoryRecord &&
+    (proposal?.info.state === ProposalState.Draft ||
+      proposal?.info.state === ProposalState.SigningOff)
+
+  const canCancelProposal =
+    proposal &&
+    governance &&
+    proposalOwner &&
+    wallet?.publicKey &&
+    proposal.info.canWalletCancel(
+      governance.info,
+      proposalOwner.info,
+      wallet.publicKey
+    )
+
+  return (
+    <>
+      {ProposalState.Cancelled === proposal?.info.state ||
+      ProposalState.Succeeded === proposal?.info.state ||
+      ProposalState.Defeated === proposal?.info.state ||
+      (!canCancelProposal && !canSignOff && canFinalizeVote) ? null : (
+        <div>
+          <div className="bg-bkg-2 rounded-lg p-6 space-y-6 flex justify-center items-center text-center flex-col w-full mt-4">
+            {canSignOff && (
+              <Button
+                className="w-1/2"
+                onClick={() => setShowSignOffModal(true)}
+                disabled={!connected || !canSignOff}
+              >
+                Sign Off
+              </Button>
+            )}
+
+            {canCancelProposal && (
+              <SecondaryButton
+                className="w-1/2"
+                onClick={() => setShowCancelModal(true)}
+                disabled={!connected}
+              >
+                Cancel
+              </SecondaryButton>
+            )}
+
+            {canFinalizeVote && (
+              <Button
+                className="w-1/2"
+                onClick={() => setShowFinalizeVoteModal(true)}
+                disabled={!connected || !canFinalizeVote}
+              >
+                Finalize
+              </Button>
+            )}
+          </div>
+
+          {showSignOffModal && (
+            <SignOffProposalModal
+              isOpen={showSignOffModal && canSignOff}
+              onClose={() => setShowSignOffModal(false)}
+              signatoryRecord={signatoryRecord}
+            />
+          )}
+
+          {showFinalizeVoteModal && (
+            <FinalizeVotesModal
+              isOpen={showFinalizeVoteModal && canFinalizeVote}
+              onClose={() => setShowFinalizeVoteModal(false)}
+              proposal={proposal}
+              governance={governance}
+            />
+          )}
+
+          {showCancelModal && (
+            <CancelProposalModal
+              // @ts-ignore
+              isOpen={showCancelModal && canCancelProposal}
+              onClose={() => setShowCancelModal(false)}
+            />
+          )}
+        </div>
+      )}
+    </>
+  )
+}
+
+export default ProposalActionsPanel

components/SignOffProposalModal.tsx

@@ -23,7 +23,7 @@ const SignOffProposalModal = ({
 }: SignOffProposalModalProps) => {
   const wallet = useWalletStore((s) => s.current)
   const connection = useWalletStore((s) => s.connection)
-  const fetchRealm = useWalletStore((s) => s.actions.fetchRealm)
+  const fetchProposal = useWalletStore((s) => s.actions.fetchProposal)
   const { realmInfo } = useRealm()
   const { proposal } = useProposal()
 
@@ -42,7 +42,7 @@ const SignOffProposalModal = ({
 
         onClose()
 
-        await fetchRealm(realmInfo.programId, realmInfo.realmId)
+        await fetchProposal(proposal.pubkey)
       }
     } catch (error) {
       notify({

components/VoteCommentModal.tsx

@@ -6,7 +6,7 @@ import useWalletStore from '../stores/useWalletStore'
 import useRealm from '../hooks/useRealm'
 import { castVote } from '../actions/castVote'
 import { Vote } from '../models/instructions'
-import Button, { LinkButton } from './Button'
+import Button, { SecondaryButton } from './Button'
 // import { notify } from '../utils/notifications'
 import Loading from './Loading'
 import Modal from './Modal'
@@ -88,26 +88,33 @@ const VoteCommentModal: FunctionComponent<VoteCommentModalProps> = ({
   return (
     <Modal onClose={onClose} isOpen={isOpen}>
       <h2>Confirm your vote</h2>
+
       <Tooltip content="This will be stored on-chain and displayed publically in the discussion on this proposal">
-        <label className="border-b border-dashed border-fgd-3 inline-block leading-4 text-fgd-1 text-sm hover:cursor-help hover:border-b-0">
+        <label className="border- mt-4 border-dashed border-fgd-3 inline-block leading-4 text-fgd-1 text-sm hover:cursor-help hover:border-b-0">
           Leave a comment
         </label>
         <span className="ml-1 text-xs text-fgd-3">(Optional)</span>
       </Tooltip>
+
       <Input
         className="mt-1.5"
         value={comment}
         type="text"
         onChange={(e) => setComment(e.target.value)}
         // placeholder={`Let the DAO know why you vote '${voteString}'`}
       />
-      <div className="flex items-center pt-6">
-        <Button onClick={() => submitVote(vote)}>
+
+      <div className="flex items-center justify-center mt-8">
+        <SecondaryButton className="w-44 mr-4" onClick={onClose}>
+          Cancel
+        </SecondaryButton>
+
+        <Button
+          className="w-44 flex items-center justify-center"
+          onClick={() => submitVote(vote)}
+        >
           {submitting ? <Loading /> : <span>{voteString} Proposal</span>}
         </Button>
-        <LinkButton className="ml-4 text-th-fgd-1" onClick={onClose}>
-          Cancel
-        </LinkButton>
       </div>
     </Modal>
   )