feat: add set primary sns domain function for treasury wallet (#138)

* feat: add set primary sns domain function for treasury wallet

* fix: yarn.lock

* fix: remove redundant code for fetching wallet favorite domain

* fix runtime error

---------

Co-authored-by: Utkarsh <83659045+0xShuk@users.noreply.github.com>

Author: bhagyamudgal

components/DomainCopyButton.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import cx from 'classnames'
+import type { PublicKey } from '@solana/web3.js'
+import { DocumentDuplicateIcon } from '@heroicons/react/outline'
+
+import Tooltip from '@components/Tooltip'
+import { notify } from '@utils/notifications'
+
+interface Props {
+  domainName: string
+  domainAddress: PublicKey
+  className?: string
+}
+
+export default function DomainCopyButton(props: Props) {
+  const base58 = props.domainAddress.toBase58()
+  const text = `${props.domainName}.sol`
+
+  return (
+    <div className={cx(props.className, 'flex space-x-2 text-white/50')}>
+      <a
+        className="cursor-pointer transition-colors hover:text-fgd-1 hover:underline"
+        href={`https://explorer.solana.com/address/${base58}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        {text}
+      </a>
+      <button
+        className="h-[1.25em] w-[1.25em] transition-colors hover:text-fgd-1"
+        onClick={async () => {
+          try {
+            await navigator?.clipboard?.writeText(text)
+          } catch {
+            notify({
+              type: 'error',
+              message: 'Could not copy domain to clipboard',
+            })
+          }
+        }}
+      >
+        <Tooltip content="Copy Domain">
+          <DocumentDuplicateIcon className="cursor-pointer h-[1.25em] w-[1.25em]" />
+        </Tooltip>
+      </button>
+    </div>
+  )
+}

components/treasuryV2/Details/DomainsDetails/Info/Domain.tsx

@@ -1,21 +1,25 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'next/link'
 import cx from 'classnames'
-
-import { ExternalLinkIcon, DotsVerticalIcon } from '@heroicons/react/outline'
+import {
+  ExternalLinkIcon,
+  DotsVerticalIcon,
+  StarIcon as StarIconOutline,
+} from '@heroicons/react/outline'
+import { StarIcon as StarIconSolid } from '@heroicons/react/solid'
 import { ArrowsHorizontal } from '@carbon/icons-react'
-
 import DropdownMenu from '@components/DropdownMenu/DropdownMenu'
 import Tooltip from '@components/Tooltip'
-
 import useRealm from '@hooks/useRealm'
 import useQueryContext from '@hooks/useQueryContext'
-
 import { Domain as DomainModel } from '@models/treasury/Domain'
 import useWalletOnePointOh from '@hooks/useWalletOnePointOh'
 import { useRealmQuery } from '@hooks/queries/realm'
 import { useRealmGovernancesQuery } from '@hooks/queries/governance'
 import { useLegacyVoterWeight } from '@hooks/queries/governancePower'
+import useCreateProposal from '@hooks/useCreateProposal'
+import { useRouter } from 'next/router'
+import SetPrimaryDomainModal from './SetPrimaryDomainModal'
 
 interface Props {
   domain: DomainModel
@@ -28,12 +32,16 @@ const Domain: React.FC<Props> = (props) => {
   const realm = useRealmQuery().data?.result
   const governanceItems = useRealmGovernancesQuery().data
   const { result: ownVoterWeight } = useLegacyVoterWeight()
+  const [setPrimaryDomainModalOpen, setSetPrimaryDomainModalOpen] =
+    useState(false)
 
+  const { handleCreateProposal } = useCreateProposal()
   const {
     symbol,
     toManyCommunityOutstandingProposalsForUser,
     toManyCouncilOutstandingProposalsForUse,
   } = useRealm()
+  const router = useRouter()
 
   const canCreateProposal =
     realm &&
@@ -57,11 +65,54 @@ const Domain: React.FC<Props> = (props) => {
     ? 'Too many council outstanding proposals. You need to finalize them before creating a new one.'
     : ''
 
+  const canSetPrimaryDomain = connected && canCreateProposal
+  const setPrimaryDomainTooltipContent = !canSetPrimaryDomain
+    ? tooltipContent
+    : props.domain?.isFavorite
+    ? 'Primary domain'
+    : 'Set as primary domain'
+
+  // only sns domains can be set as primary
+  const isSnsDomain = 'type' in props.domain && props.domain?.type === 'sns'
+
+  const governance = governanceItems?.[0]
+
   return (
     <div className="flex justify-between items-center px-2 py-6 border-b-[0.5px] border-white/50">
-      <span className="block text-base font-medium">
-        {`${props.domain.name}.sol`}
-      </span>
+      {governance && setPrimaryDomainModalOpen && (
+        <SetPrimaryDomainModal
+          isOpen={setPrimaryDomainModalOpen}
+          domain={props.domain}
+          closeModal={() => setSetPrimaryDomainModalOpen(false)}
+          governance={governance}
+        />
+      )}
+      <div className="flex items-center gap-2">
+        <span className="block text-base font-medium">
+          {`${props.domain.name}.sol`}
+        </span>
+        {isSnsDomain && (
+          <Tooltip content={setPrimaryDomainTooltipContent}>
+            <button
+              onClick={() => setSetPrimaryDomainModalOpen(true)}
+              disabled={props.domain?.isFavorite || !canSetPrimaryDomain}
+              className={cx(
+                'text-fgd-2 hover:text-primary-light mt-1.5',
+                (props.domain?.isFavorite || !canSetPrimaryDomain) &&
+                  'cursor-not-allowed',
+                !canSetPrimaryDomain && 'opacity-50',
+              )}
+            >
+              {props.domain?.isFavorite ? (
+                <StarIconSolid className="h-5 w-5 text-primary-light" />
+              ) : (
+                <StarIconOutline className="h-5 w-5" />
+              )}
+            </button>
+          </Tooltip>
+        )}
+      </div>
+
       <div className="flex gap-4 ">
         <Link
           href={`https://explorer.solana.com/address/${props.domain.address}`}

components/treasuryV2/Details/DomainsDetails/Info/SetPrimaryDomainModal.tsx

@@ -0,0 +1,120 @@
+import Modal from '@components/Modal'
+import { Governance, ProgramAccount } from '@solana/spl-governance'
+import useCreateProposal from '@hooks/useCreateProposal'
+import useQueryContext from '@hooks/useQueryContext'
+import { useRouter } from 'next/router'
+import useRealm from '@hooks/useRealm'
+import React, { useState } from 'react'
+import Button from '@components/Button'
+import { useVoteByCouncilToggle } from '@hooks/useVoteByCouncilToggle'
+import { InstructionDataWithHoldUpTime } from 'actions/createProposal'
+import type { UiInstruction } from '@utils/uiTypes/proposalCreationTypes'
+import { notify } from '@utils/notifications'
+import { setPrimaryDomain } from '@bonfida/spl-name-service'
+import { serializeInstructionToBase64 } from '@solana/spl-governance'
+import { PublicKey } from '@solana/web3.js'
+import { useConnection } from '@solana/wallet-adapter-react'
+import type { Domain } from '@models/treasury/Domain'
+import VoteBySwitch from 'pages/dao/[symbol]/proposal/components/VoteBySwitch'
+import { abbreviateAddress } from '@utils/formatting'
+
+const SetPrimaryDomainModal = ({
+  closeModal,
+  isOpen,
+  governance,
+  domain,
+}: {
+  closeModal: () => void
+  isOpen: boolean
+  governance: ProgramAccount<Governance>
+  domain: Domain
+}) => {
+  const router = useRouter()
+  const { symbol } = useRealm()
+  const { fmtUrlWithCluster } = useQueryContext()
+  const { handleCreateProposal } = useCreateProposal()
+  const [creatingProposal, setCreatingProposal] = useState(false)
+  const { voteByCouncil, shouldShowVoteByCouncilToggle, setVoteByCouncil } =
+    useVoteByCouncilToggle()
+  const { connection } = useConnection()
+
+  async function handleCreateSetPrimaryDomainProposal() {
+    setCreatingProposal(true)
+    try {
+      const setPrimaryDomainIx = await setPrimaryDomain(
+        connection,
+        new PublicKey(domain.address),
+        new PublicKey(domain.owner),
+      )
+
+      if (setPrimaryDomainIx) {
+        const instructionData = new InstructionDataWithHoldUpTime({
+          instruction: {
+            serializedInstruction:
+              serializeInstructionToBase64(setPrimaryDomainIx),
+            isValid: true,
+            governance,
+          },
+          governance,
+        })
+
+        const proposalAddress = await handleCreateProposal({
+          title: `Set ${
+            domain.name
+          }.sol as primary domain for ${abbreviateAddress(domain.owner)}`,
+          description: `This proposal will set ${
+            domain.name
+          }.sol as the primary domain for the
+          wallet ${abbreviateAddress(domain.owner)}.`,
+          voteByCouncil,
+          instructionsData: [instructionData],
+          governance,
+        })
+
+        const url = fmtUrlWithCluster(
+          `/dao/${symbol}/proposal/${proposalAddress}`,
+        )
+
+        router.push(url)
+      }
+    } catch (error) {
+      notify({ type: 'error', message: `${error}` })
+      console.error('Failed to create set primary domain proposal', error)
+    } finally {
+      setCreatingProposal(false)
+    }
+  }
+
+  return (
+    <Modal sizeClassName="sm:max-w-3xl" onClose={closeModal} isOpen={isOpen}>
+      <div className="w-full space-y-4">
+        <h3 className="flex flex-col mb-4">Set Primary Domain</h3>
+
+        <p>
+          This proposal will set {domain.name}.sol as the primary domain for the
+          wallet {abbreviateAddress(domain.owner)}.
+        </p>
+
+        {shouldShowVoteByCouncilToggle && (
+          <VoteBySwitch
+            checked={voteByCouncil}
+            onChange={() => {
+              setVoteByCouncil(!voteByCouncil)
+            }}
+          ></VoteBySwitch>
+        )}
+      </div>
+      <div className="flex justify-end pt-6 mt-6 space-x-4 border-t border-fgd-4">
+        <Button
+          isLoading={creatingProposal}
+          disabled={creatingProposal}
+          onClick={handleCreateSetPrimaryDomainProposal}
+        >
+          Add proposal
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default SetPrimaryDomainModal

components/treasuryV2/Details/WalletDetails/Header.tsx

@@ -21,6 +21,7 @@ import AddAssetModal from './AddAssetModal'
 import SelectedWalletIcon from '../../icons/SelectedWalletIcon'
 import { AssetAccount, AccountType } from '@utils/uiTypes/assets'
 import useLegacyConnectionContext from '@hooks/useLegacyConnectionContext'
+import DomainCopyButton from '@components/DomainCopyButton'
 
 enum ModalType {
   AddAsset,
@@ -69,6 +70,13 @@ export default function Header(props: Props) {
           </div>
         </div>
         <Address address={props.wallet.address} className="ml-14 text-xs" />
+        {props.wallet?.favoriteDomain && (
+          <DomainCopyButton
+            className="ml-14 text-xs"
+            domainName={props.wallet.favoriteDomain.name}
+            domainAddress={props.wallet.favoriteDomain.address}
+          />
+        )}
       </div>
       <div className="flex flex-col space-y-2">
         <SecondaryButton

components/treasuryV2/WalletList/WalletListItem/SummaryButton.tsx

@@ -110,7 +110,10 @@ export default function SummaryButton(props: Props) {
             />
           </div>
           <div className="font-bold text-left whitespace-nowrap text-ellipsis overflow-hidden">
-            {props.wallet.name || abbreviateAddress(props.wallet.address)}
+            {props.wallet.name ||
+              (props.wallet.favoriteDomain?.name
+                ? `${props.wallet.favoriteDomain?.name}.sol`
+                : abbreviateAddress(props.wallet.address))}
           </div>
         </div>
       </div>

hooks/useTreasuryInfo/assembleWallets.tsx

@@ -41,6 +41,7 @@ import {
   toUiDecimals,
 } from '@blockworks-foundation/mango-v4'
 import { BN } from '@coral-xyz/anchor'
+import { getFavoriteDomain } from '@bonfida/spl-name-service'
 
 function isNotNull<T>(x: T | null): x is T {
   return x !== null
@@ -145,6 +146,25 @@ export const assembleWallets = async (
     const governanceAddress = account.governance?.pubkey?.toBase58()
 
     if (!walletMap[walletAddress]) {
+      // Fetch favorite domain when creating a new wallet
+      let favoriteDomain: {
+        name: string
+        address: PublicKey
+      } | null = null
+
+      try {
+        const favoriteDomainResponse = await getFavoriteDomain(
+          connection.current,
+          new PublicKey(walletAddress),
+        )
+        favoriteDomain = {
+          name: favoriteDomainResponse?.reverse,
+          address: new PublicKey(favoriteDomainResponse?.domain),
+        }
+      } catch (error) {
+        console.error('Error fetching favorite domain', error)
+      }
+
       walletMap[walletAddress] = {
         governanceAddress,
         address: walletAddress,
@@ -153,6 +173,7 @@ export const assembleWallets = async (
         rules: {},
         stats: {},
         totalValue: new BigNumber(0),
+        favoriteDomain,
       }
 
       if (governanceAddress) {
@@ -245,11 +266,17 @@ export const assembleWallets = async (
       }
     }
 
+    // Add isFavorite property to each domain using the already fetched favoriteDomain to figure out if the domain is the favorite domain
+    const domainsWithFavorite = domainList.map((domain) => ({
+      ...domain,
+      isFavorite: domain.name === walletMap[walletAddress].favoriteDomain?.name,
+    }))
+
     walletMap[walletAddress].assets.unshift({
       type: AssetType.Domain,
       id: 'domain-list',
       count: new BigNumber(domainList.length),
-      list: domainList,
+      list: domainsWithFavorite,
     })
   }
 

models/treasury/Domain.ts

@@ -2,4 +2,5 @@ export interface Domain {
   owner: string
   name?: string
   address: string
+  isFavorite?: boolean
 }

models/treasury/Wallet.ts

@@ -6,6 +6,7 @@ import type {
 } from '@solana/spl-governance'
 
 import { Asset, Mango, Sol, Token } from './Asset'
+import type { PublicKey } from '@metaplex-foundation/js'
 
 interface CommonRules {
   maxVotingTime: number
@@ -37,6 +38,10 @@ export interface Wallet {
     votingProposalCount?: number
   }
   totalValue: BigNumber
+  favoriteDomain?: {
+    name: string
+    address: PublicKey
+  } | null
 }
 
 export interface AuxiliaryWallet {