Names support for Create Collection > Royalty Payment Address

components/collections/creation/RoyaltyDetails.tsx

@@ -1,8 +1,10 @@
 import { Conditional } from 'components/Conditional'
 import { FormGroup } from 'components/FormGroup'
 import { useInputState } from 'components/forms/FormInput.hooks'
+import { useWallet } from 'contexts/wallet'
 import React, { useEffect, useState } from 'react'
 
+import { resolveAddress } from '../../../utils/resolveAddress'
 import { NumberInput, TextInput } from '../../forms/FormInput'
 
 interface RoyaltyDetailsProps {
@@ -18,6 +20,7 @@ export interface RoyaltyDetailsDataProps {
 type RoyaltyState = 'none' | 'new'
 
 export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
+  const wallet = useWallet()
   const [royaltyState, setRoyaltyState] = useState<RoyaltyState>('none')
 
   const royaltyPaymentAddressState = useInputState({
@@ -37,17 +40,23 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
   })
 
   useEffect(() => {
-    const data: RoyaltyDetailsDataProps = {
-      royaltyType: royaltyState,
-      paymentAddress: royaltyPaymentAddressState.value
+    void resolveAddress(
+      royaltyPaymentAddressState.value
         .toLowerCase()
         .replace(/,/g, '')
         .replace(/"/g, '')
         .replace(/'/g, '')
         .replace(/ /g, ''),
-      share: Number(royaltyShareState.value),
-    }
-    onChange(data)
+      wallet,
+    ).then((royaltyPaymentAddress) => {
+      royaltyPaymentAddressState.onChange(royaltyPaymentAddress)
+      const data: RoyaltyDetailsDataProps = {
+        royaltyType: royaltyState,
+        paymentAddress: royaltyPaymentAddressState.value,
+        share: Number(royaltyShareState.value),
+      }
+      onChange(data)
+    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [royaltyState, royaltyPaymentAddressState.value, royaltyShareState.value])
 

pages/collections/create.tsx

@@ -52,6 +52,7 @@ import type { MinterType } from '../../components/collections/actions/Combobox'
 import type { UploadMethod } from '../../components/collections/creation/UploadDetails'
 import { ConfirmationModal } from '../../components/ConfirmationModal'
 import { getAssetType } from '../../utils/getAssetType'
+import { isValidAddress } from '../../utils/isValidAddress'
 
 const CollectionCreationPage: NextPage = () => {
   const wallet = useWallet()
@@ -767,6 +768,12 @@ const CollectionCreationPage: NextPage = () => {
       if (royaltyDetails.share === 0) throw new Error('Royalty share percentage is required')
       if (royaltyDetails.share > 100 || royaltyDetails.share < 0) throw new Error('Invalid royalty share percentage')
       if (royaltyDetails.paymentAddress === '') throw new Error('Royalty payment address is required')
+      if (!isValidAddress(royaltyDetails.paymentAddress)) {
+        if (royaltyDetails.paymentAddress.trim().endsWith('.stars')) {
+          throw new Error('Royalty payment address could not be resolved')
+        }
+        throw new Error('Invalid royalty payment address')
+      }
     }
   }