diff --git a/src/components/masa-interface/pages/create-soulname/create-soulname.tsx b/src/components/masa-interface/pages/create-soulname/create-soulname.tsx index d68f67f2..1c21358f 100644 --- a/src/components/masa-interface/pages/create-soulname/create-soulname.tsx +++ b/src/components/masa-interface/pages/create-soulname/create-soulname.tsx @@ -15,16 +15,27 @@ export const InterfaceCreateSoulname = (): JSX.Element => { } = useMasa(); const [soulname, setSoulname] = useState(''); + const [extension, setExtension] = useState(); const [loadingIsAvailable, setLoadingIsAvailable] = useState(false); const [isAvailable, setIsAvailable] = useState(true); const [registrationPeriod, setRegistrationPeriod] = useState(1); const [registrationPrice, setRegistrationPrice] = useState('0'); const [paymentMethod] = useState('eth'); const [isLoadingMint, setLoadingMint] = useState(false); + const [showError, setShowError] = useState(false); const debounceSearch = useDebounce(soulname, 1000); - const [showError, setShowError] = useState(false); + useEffect(() => { + const loadExtension = async () => { + setExtension( + await masa?.contracts.instances.SoulNameContract.extension() + ); + }; + + void loadExtension(); + }, [masa]); + useEffect(() => { const checkIsAvailable = async () => { if (masa && debounceSearch) { @@ -115,6 +126,7 @@ export const InterfaceCreateSoulname = (): JSX.Element => { ]); if (isLoading) return ; + if (isLoadingMint) return (
{

Minting your domain

{soulname} - .celo + {extension}

@@ -140,11 +152,11 @@ export const InterfaceCreateSoulname = (): JSX.Element => {

- Register .celo name + Register {extension} name

- Claim your .celo domain name, 5 character domains and above are{' '} - FREE you just pay gas + Claim your {extension} domain name, 5 character domains and + above are FREE you just pay gas

@@ -169,12 +181,12 @@ export const InterfaceCreateSoulname = (): JSX.Element => { {soulname ? ( <> {soulname} - .celo + {extension} ) : ( <> domain - .celo + {extension} )}

diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx index a4260f0a..619bc4a5 100644 --- a/stories/masa.stories.tsx +++ b/stories/masa.stories.tsx @@ -86,7 +86,7 @@ const Component = (): JSX.Element => { const Template: Story = (props: Args) => { return ( <> - +