Add a form to edit wallet rules (solana-labs#1345)

actions/createProposal.ts

@@ -71,7 +71,8 @@ export const createProposal = async (
   proposalIndex: number,
   instructionsData: InstructionDataWithHoldUpTime[],
   isDraft: boolean,
-  client?: VotingClient
+  client?: VotingClient,
+  callbacks?: Parameters<typeof sendTransactionsV3>[0]['callbacks']
 ): Promise<PublicKey> => {
   const instructions: TransactionInstruction[] = []
 
@@ -227,6 +228,7 @@ export const createProposal = async (
     })
 
     await sendTransactionsV3({
+      callbacks,
       connection,
       wallet,
       transactionInstructions: txes,
@@ -279,6 +281,7 @@ export const createProposal = async (
     })
 
     await sendTransactionsV3({
+      callbacks,
       connection,
       wallet,
       transactionInstructions: txes,

components/treasuryV2/Details/WalletDetails/Info/Rules/index.tsx

@@ -12,6 +12,7 @@ import { VoteTipping } from '@solana/spl-governance'
 import cx from 'classnames'
 import React, { useState } from 'react'
 import { BigNumber } from 'bignumber.js'
+import { useRouter } from 'next/router'
 
 import { formatNumber } from '@utils/formatNumber'
 import { ntext } from '@utils/ntext'
@@ -21,6 +22,7 @@ import useRealm from '@hooks/useRealm'
 import Tooltip from '@components/Tooltip'
 import { DISABLED_VOTER_WEIGHT } from '@tools/constants'
 import Address from '@components/Address'
+import useQueryContext from '@hooks/useQueryContext'
 
 import Section from '../../../Section'
 import TokenIcon from '../../../../icons/TokenIcon'
@@ -66,14 +68,27 @@ export function durationStr(duration: number, short = false) {
   return count + (short ? 's' : ' ' + ntext(count, 'second'))
 }
 
+function votingLengthText(time: number) {
+  const hours = time / UNIX_HOUR
+  const days = Math.floor(hours / 24)
+  const remainingHours = (time - days * UNIX_DAY) / UNIX_HOUR
+
+  return (
+    durationStr(days * UNIX_DAY) +
+    (remainingHours ? ` ${durationStr(remainingHours * UNIX_HOUR)}` : '')
+  )
+}
+
 interface Props {
   className?: string
   wallet: Wallet
 }
 
 export default function Rules(props: Props) {
   const [editRulesOpen, setEditRulesOpen] = useState(false)
-  const { ownVoterWeight } = useRealm()
+  const { ownVoterWeight, symbol } = useRealm()
+  const router = useRouter()
+  const { fmtUrlWithCluster } = useQueryContext()
 
   const programVersion = useProgramVersion()
 
@@ -123,7 +138,15 @@ export default function Rules(props: Props) {
                 'disabled:opacity-50'
               )}
               disabled={!canEditRules}
-              onClick={() => setEditRulesOpen(true)}
+              onClick={() => {
+                if (props.wallet.governanceAccount) {
+                  router.push(
+                    fmtUrlWithCluster(
+                      `/realm/${symbol}/governance/${props.wallet.governanceAccount.pubkey.toBase58()}/edit`
+                    )
+                  )
+                }
+              }}
             >
               <PencilIcon className="h-4 w-4 stroke-primary-light" />
               <div>Edit Rules</div>
@@ -138,8 +161,17 @@ export default function Rules(props: Props) {
               <div className="grid grid-cols-2 gap-8">
                 <Section
                   icon={<CalendarIcon />}
-                  name="Max Voting Time"
-                  value={durationStr(props.wallet.rules.common.maxVotingTime)}
+                  name="Unrestricted Voting Time"
+                  value={votingLengthText(
+                    props.wallet.rules.common.maxVotingTime
+                  )}
+                />
+                <Section
+                  icon={<CalendarIcon />}
+                  name="Voting Cool-Off Time"
+                  value={durationStr(
+                    props.wallet.rules.common.votingCoolOffSeconds
+                  )}
                 />
                 <Section
                   icon={<ClockIcon />}

hooks/useTreasuryInfo/getRulesFromAccount.ts

@@ -17,6 +17,7 @@ export function getRulesFromAccount(
     rules.common = {
       maxVotingTime: govConfig.maxVotingTime,
       minInstructionHoldupTime: govConfig.minInstructionHoldUpTime,
+      votingCoolOffSeconds: govConfig.votingCoolOffTime,
     }
   }
 

hub/.eslintrc.json

@@ -5,7 +5,10 @@
     "tsconfigRootDir": ".",
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint/eslint-plugin", "import"],
+  "plugins": [
+    "@typescript-eslint/eslint-plugin",
+    "import"
+  ],
   "extends": [
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended"
@@ -15,7 +18,10 @@
     "node": true,
     "jest": true
   },
-  "ignorePatterns": [".eslintrc.js", "migrations"],
+  "ignorePatterns": [
+    ".eslintrc.js",
+    "migrations"
+  ],
   "rules": {
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
@@ -27,7 +33,9 @@
       "error",
       {
         "newlines-between": "always-and-inside-groups",
-        "pathGroupsExcludedImportTypes": ["builtin"],
+        "pathGroupsExcludedImportTypes": [
+          "builtin"
+        ],
         "pathGroups": [
           {
             "pattern": "@hub/**/**",
@@ -52,6 +60,10 @@
           {
             "pattern": "@verify-wallet/**/**",
             "group": "parent"
+          },
+          {
+            "pattern": "@hooks/**/**",
+            "group": "parent"
           }
         ],
         "alphabetize": {

hub/App.tsx

@@ -1,6 +1,7 @@
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 import Script from 'next/script';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { GlobalHeader } from '@hub/components/GlobalHeader';
 import { MinimalHeader } from '@hub/components/GlobalHeader/MinimalHeader';
@@ -56,9 +57,31 @@ interface Props {
 }
 
 export function App(props: Props) {
+  const router = useRouter();
+  const isDarkMode = router.pathname.startsWith('/realm/[id]/governance');
+
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [isDarkMode]);
+
   return (
     <RootProvider>
       <Head>
+        {isDarkMode && (
+          <style
+            dangerouslySetInnerHTML={{
+              __html: `
+                html {
+                  background-color: #171717;
+                }
+              `,
+            }}
+          />
+        )}
         <link
           rel="apple-touch-icon"
           sizes="57x57"

hub/components/AuthorAvatar/index.tsx

@@ -57,6 +57,7 @@ export function AuthorAvatar(props: Props) {
           'rounded-full',
           'border',
           'border-neutral-400',
+          'dark:border-neutral-600',
           props.className,
         )}
         src={props.author.civicInfo.avatarUrl}
@@ -69,6 +70,7 @@ export function AuthorAvatar(props: Props) {
           'rounded-full',
           'border',
           'border-neutral-400',
+          'dark:border-neutral-600',
           props.className,
         )}
         src={props.author.twitterInfo.avatarUrl}

hub/components/DiscoverPage/NotableNFTs/index.tsx

@@ -1,5 +1,3 @@
-import { PublicKey } from '@solana/web3.js';
-
 import { Realm } from '../gql';
 import { SmallCard } from '@hub/components/DiscoverPage/SmallCard';
 import { NFT as NFTIcon } from '@hub/components/icons/NFT';

hub/components/DiscoverPage/Sidebar/Announcements/Post/index.tsx

@@ -1,4 +1,3 @@
-import { formatDistanceToNowStrict } from 'date-fns';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 

hub/components/EditDiscoverPage/index.tsx

@@ -31,6 +31,7 @@ function buildFormStateFromData(data: gql.DiscoverPage) {
 function removeExtraneousFields<T extends { __typename?: string }>(
   item: T,
 ): Omit<T, '__typename'> {
+  // eslint-disable-next-line
   const { __typename, ...rest } = item;
   return rest;
 }
@@ -106,8 +107,6 @@ export function EditDiscoverPage(props: Props) {
     }
   }, [result]);
 
-  console.log(result);
-
   return (
     <article className={props.className}>
       {pipe(
@@ -283,6 +282,7 @@ export function EditDiscoverPage(props: Props) {
                             (r) => r.publicKey,
                           ),
                           spotlight: (formState?.spotlight || []).map((s) => {
+                            // eslint-disable-next-line
                             const { realm, ...rest } = s;
                             return removeExtraneousFields({
                               ...rest,

hub/components/EditMetadata/EditForms/FAQ/index.tsx

@@ -25,6 +25,7 @@ function trimFAQ(
       return (!!item.answer && !isEmpty(item.answer)) || !!item.question;
     })
     .map((item) => {
+      // eslint-disable-next-line
       const { __typename, clippedAnswer, ...rest } = item;
       return rest;
     });

hub/components/EditMetadata/EditForms/Gallery/index.tsx

@@ -2,10 +2,6 @@ import ImageIcon from '@carbon/icons-react/lib/Image';
 import { produce } from 'immer';
 
 import { FieldDescription } from '../common/FieldDescription';
-import { FieldHeader } from '../common/FieldHeader';
-import { FieldIconPreview } from '../common/FieldIconPreview';
-import { SecondaryRed } from '@hub/components/controls/Button';
-import { Input } from '@hub/components/controls/Input';
 
 import { Item } from './Item';
 
@@ -28,6 +24,7 @@ function trimGallery(
       return !!g.url;
     })
     .map((g) => {
+      // eslint-disable-next-line
       const { __typename, ...rest } = g;
       return rest;
     });

hub/components/EditMetadata/EditForms/Overview/index.tsx

@@ -30,6 +30,7 @@ function trimAbout(
       return !isEmpty(a.content) || !!a.heading;
     })
     .map((a) => {
+      // eslint-disable-next-line
       const { __typename, ...rest } = a;
       return rest;
     });
@@ -52,6 +53,7 @@ function trimResources(
       return !!r.url || !!r.title;
     })
     .map((r) => {
+      // eslint-disable-next-line
       const { __typename, ...rest } = r;
       return {
         ...rest,

hub/components/EditMetadata/EditForms/Roadmap/index.tsx

@@ -74,6 +74,7 @@ function trimRoadmap(roadmap: {
         return !!item.date || !!item.resource || !!item.status || !!item.title;
       })
       .map((item) => {
+        // eslint-disable-next-line
         const { __typename, ...rest } = item;
         return rest;
       });

hub/components/EditMetadata/EditForms/Team/index.tsx

@@ -37,6 +37,7 @@ function trimTeam(
       );
     })
     .map((t) => {
+      // eslint-disable-next-line
       const { __typename, ...rest } = t;
       return rest;
     });

hub/components/EditMetadata/EditForms/index.tsx

@@ -35,6 +35,7 @@ function removeClippedAnswer<
   O extends { clippedAnswer?: any; [key: string]: any }
 >(item: O): Omit<O, 'clippedAnswer'> {
   if ('clippedAnswer' in item) {
+    // eslint-disable-next-line
     const { clippedAnswer, ...rest } = item;
     return rest;
   }
@@ -46,6 +47,7 @@ function removeTypename<O extends { __typename?: string; [key: string]: any }>(
   item: O,
 ): Omit<O, '__typename'> {
   if ('__typename' in item) {
+    // eslint-disable-next-line
     const { __typename, ...rest } = item;
     return rest;
   }
@@ -57,6 +59,7 @@ function removeTwitterFollowerCount<
   O extends { twitterFollowerCount?: any; [key: string]: any }
 >(item: O): Omit<O, 'twitterFollowerCount'> {
   if ('twitterFollowerCount' in item) {
+    // eslint-disable-next-line
     const { twitterFollowerCount, ...rest } = item;
     return rest;
   }