Add new DAO wizards (solana-labs#718)

* Start using new fonts

* Adjust dark theme primary color, use heading font for buttons

* Use new logo for Navbar, make responsive for mobile

* Fix navbar to look good across view-ports

* Add Realms favicon and set page title to "Realms"

* Polish styling with Dan

* Lighten up h3,h4 and Tabs a tags

* Make MembersTab items look like AccountTab items

* Update colors and font weights

* Change font back to Inter

* Bring back bold to buttons (load normal and bold font weights)

* Use images for logo and logotype

* Update colors and font weights

* Create NewRealmWizard and pages in realms/new/*

* Update helpers and remove unncessary tailwind configurations

* Update header with new logo, add new background image, disable light mode

* Start building form nav buttons

* Add CSS for form nav buttons, slider, and form step indicator

* Fix InviteAddress "delete" button

* add createGovTokenRealm hook

* Add treasury by default, auto join NFT DAO

* Update the 'reals/new' page

* Set environment variable for enabling/disabling theme switcher

* Make sure DAO params use MAX_TOKENS_TO_DISABLE when formatting value

* Fix ConnectWalletButton devnet switch

* Force wallet to be connected when going through form flow

* Get community token mint info and show/hide authority transfer radio

* Allow users to specify a council token address

* Dry up the CommunityTokenDetailsForm

* Dry up YesVotePercentageForm

* Fix RealmWizard

* Remove unnecessary FAQ string

* Cleanup FormSummary

* Use InputRangeSlider component in AddNFTCollectionForm

* Dry up NFT data collection

* Make sure NFT collection preview wraps on tablet / mobile

* * Make modal for selecting nft collection from wallet
* Use latest version of headlessui Dialog for modals

* Simplify data for AddNFTCollectionForm

* Refactor how we prepare realms

* Clean up FormSummary

* Dry up prepareRealmCreation

* Use prepareRealmCreation in createNFTRealm

* Refactor multisig wallet creation to use prepareRealmCreation

* Stop using query params for tracking current step

* Rename gov-token to tokenized

* Guard rail minCommunityTokensToCreateProposal calculation

* Fix broken link

* Bring back extended typography

* Fix sizing on NFTCollectionModal

* Close button on NFTCollectionModal should not select collection

* change the Create New Realm page backround

* Add "clear" button to AddNFTCollectionForm

* Make sure AdvancedOptionsDropdown is just a button

* Polish up to new page.

* Hide DAO description; make Input backgrounds always visible

* Update form status bar in header
* start making text for Multisig wallet more consistent
* give steps more space between header and fields

* Clean up AddNFTCollectionForm

* Clean up InputRangeSlider

* Feed the linter

* Create new Radio Buttons

* Fix typo in Form Header

* update arrow icons

* Rework AdvancedOptionsDropdown

* Update ThresholdAdviceBox

* Hide Footer when in new realms wizard

* Modify the way the invite list looks and works (#3)

* Add margin to InviteMembersForm field

* Adjust FormFooter buttons:
  * have cta text
  * display loading state

* Update FormSummary

* Update font/font size of TokenInfoTable

* Make FormHeader content consistently capitalized

* RadioButton text should be left-aligned on mobile

* Feed linter

* Fix outline issue with NavButton and AdvancedOptionsDropdown
* make sure buttons ease between visual states

* Make FormSummary mobile friendly

* Remvoe localStorage caching and show "me" on InviteMembersForm (#4)

* Remove "loadingStart" and "loadingEnd" state from NewButton

* refactor RadioButton

* Add link to explain what a certified collection is

* Fix range slider transparent border to render on mobile

* Edit copy for "Multi-Signature Wallet"

* Use Grey token icon instead of gradient

* Move nav buttons to bottom

* Adjust navbar

* Address Emon issues pt. 1

* Change text in Form Summary and add commas to NFT

* Fix Form Summary pt 2

* Update FormSummary pt 4

* Show Transfer mint authority radio

* * Show tokenInfo table IFF token has a proper name
* Change "Transfer mint authority" description based on context
* make minimumNumberOfCommunityTokensToGovern required

* Fix issues with the invite members form (#5)

* Use "wallet" instead of "DAO" in multisig wizard

* RadioButton should have proper disabled styling

* Properly wire up formData

* Rename "Tokenized DAO" => "Community Token DAO"

* Hide council "approval threshold" from FormSummary

* Make sure new page uses borders and not outlines

* FormSummary will say "(To be generated)" when you do not have an existing token

* Do not pad-left AdvancedOptionsDropdown

* Fix navbar (poorly arranged merge conflicts)

* Use tailwind variables for new page

* Make Wizards light-mode friendly

* Make RadioButton light mode friendly

* Make AddNFTCollectionForm (page, not modal) and InviteMembersForm light mode friendly

* Make rest of wizard light mode friendly

* Adjust input for new background colors

* Use the proper collectionKey when adding an NFT from input

* Make collectionInput handle blur and errors

* Fix nav button position

* Fix issue where "transferCouncilMintAuthority" appeared early

* Make NFT pulral  when != 1

* Feed linter

* Bring back normal font thickness

* Add proper page titles

* Show "min tokens to govern" IFF token supply > 0

* Fix page titles

* Use the right class for Program ID on FormSummary

* Force user to add council when they do not have a community token

* Adjust copy and add punctuation back to page titles

* Update logic for forcing a council

* make sure pasting in collectionInput field leaves a value

* use existingCommunityMintPk to determine communityMintDecimals

* Update copy and hide "transferMintAuthority" cells from FormSummary when n/a

* Turn off autoComplete by default

* Add AdviceBox to AddCouncilForm

* Update disabled state of radio buttons

* Handle invite members corner case (#6)

* Adjust RadioButton disable state (again)

* Create a FieldMessage component for display error states not just for Input

* Create HOC for TokenInput which uses address input to:
 * determins whether mint authority can be transferred
 * get mint suppply, and suggest min tokens to manage DAO

* Have AddCouncilForm use the TokenInput component.
* Remove unnecessary TokenAddressInput

* Use collection count to make sure we don't force a council

* NFT DAO creators should auto-join the dao

* Allow user to proceed with NFT collection even when unverified.

* Remove image placeholder squares in NFTCollectionSelector

* Adjust SecondaryButton styling to have better contrast

Co-authored-by: Jonathan <jonathan3692bf@users.noreply.github.com>
Co-authored-by: Niranjan Ramadas <mail@niranjan.me>

actions/createMultisigRealm.ts

@@ -5,6 +5,7 @@ import {
   SetRealmAuthorityAction,
   VoteThresholdPercentage,
   VoteTipping,
+  withCreateNativeTreasury,
 } from '@solana/spl-governance'
 
 import { withCreateMintGovernance } from '@solana/spl-governance'
@@ -28,8 +29,9 @@ import {
 } from '@tools/sdk/units'
 import {
   getWalletPublicKey,
-  sendTransactions,
+  sendTransactionsV2,
   SequenceType,
+  transactionInstructionsToTypedInstructionsSets,
   WalletSigner,
 } from 'utils/sendTransactions'
 import { chunks } from '@utils/helpers'
@@ -209,6 +211,15 @@ export const createMultisigRealm = async (
     walletPk
   )
 
+  await withCreateNativeTreasury(
+    realmInstructions,
+    programId,
+    communityMintGovPk,
+    walletPk
+  )
+
+  console.log('CREATE NFT REALM governance config created', config)
+
   // Set the community governance as the realm authority
   withSetRealmAuthority(
     realmInstructions,
@@ -227,13 +238,26 @@ export const createMultisigRealm = async (
       []
     )
 
-    const tx = await sendTransactions(
+    const tx = await sendTransactionsV2({
       connection,
+      showUiComponent: true,
       wallet,
-      [mintsSetupInstructions, ...councilMembersChunks, realmInstructions],
-      [mintsSetupSigners, ...councilMembersSignersChunks, realmSigners],
-      SequenceType.Sequential
-    )
+      signersSet: [
+        mintsSetupSigners,
+        ...councilMembersSignersChunks,
+        realmSigners,
+      ],
+      TransactionInstructions: [
+        mintsSetupInstructions,
+        ...councilMembersChunks,
+        realmInstructions,
+      ].map((x) =>
+        transactionInstructionsToTypedInstructionsSets(
+          x,
+          SequenceType.Sequential
+        )
+      ),
+    })
 
     return {
       tx,

actions/createMultisigWallet.ts

@@ -0,0 +1,100 @@
+import { Connection, PublicKey } from '@solana/web3.js'
+
+import {
+  sendTransactionsV2,
+  SequenceType,
+  transactionInstructionsToTypedInstructionsSets,
+  WalletSigner,
+} from 'utils/sendTransactions'
+import { chunks } from '@utils/helpers'
+
+import { prepareRealmCreation } from '@tools/governance/prepareRealmCreation'
+
+/// Creates multisig realm with community mint with 0 supply
+/// and council mint used as multisig token
+interface MultisigWallet {
+  connection: Connection
+  wallet: WalletSigner
+  programIdAddress: string
+
+  realmName: string
+  councilYesVotePercentage: number
+  councilWalletPks: PublicKey[]
+}
+
+export default async function createMultisigWallet({
+  connection,
+  wallet,
+  programIdAddress,
+  realmName,
+
+  councilYesVotePercentage,
+  councilWalletPks,
+}: MultisigWallet) {
+  const {
+    communityMintPk,
+    councilMintPk,
+    realmPk,
+    realmInstructions,
+    realmSigners,
+    mintsSetupInstructions,
+    mintsSetupSigners,
+    councilMembersInstructions,
+  } = await prepareRealmCreation({
+    connection,
+    wallet,
+    programIdAddress,
+
+    realmName,
+    tokensToGovernThreshold: undefined,
+
+    existingCommunityMintPk: undefined,
+    communityMintSupplyFactor: undefined,
+    transferCommunityMintAuthority: true,
+    communityYesVotePercentage: councilYesVotePercentage,
+
+    createCouncil: true,
+    existingCouncilMintPk: undefined,
+    transferCouncilMintAuthority: true,
+    councilWalletPks,
+  })
+
+  try {
+    const councilMembersChunks = chunks(councilMembersInstructions, 10)
+    // only walletPk needs to sign the minting instructions and it's a signer by default and we don't have to include any more signers
+    const councilMembersSignersChunks = Array(councilMembersChunks.length).fill(
+      []
+    )
+    console.log('CREATE MULTISIG WALLET: sending transactions')
+    const tx = await sendTransactionsV2({
+      connection,
+      showUiComponent: true,
+      wallet,
+      signersSet: [
+        mintsSetupSigners,
+        ...councilMembersSignersChunks,
+        realmSigners,
+      ],
+      TransactionInstructions: [
+        mintsSetupInstructions,
+        ...councilMembersChunks,
+        realmInstructions,
+      ].map((x) =>
+        transactionInstructionsToTypedInstructionsSets(
+          x,
+          SequenceType.Sequential
+        )
+      ),
+    })
+
+    return {
+      tx,
+      realmPk,
+      communityMintPk,
+      councilMintPk,
+    }
+  } catch (ex) {
+    console.error(ex)
+    throw ex
+  }
+}