diff --git a/frontend/src/app/(routes)/multisig/components/DialogCreateMultisig.tsx b/frontend/src/app/(routes)/multisig/components/DialogCreateMultisig.tsx index 78f631d3a..412ad4d51 100644 --- a/frontend/src/app/(routes)/multisig/components/DialogCreateMultisig.tsx +++ b/frontend/src/app/(routes)/multisig/components/DialogCreateMultisig.tsx @@ -8,8 +8,6 @@ import Image from 'next/image'; import React, { ChangeEvent, useEffect, useState } from 'react'; import { setError } from '@/store/features/common/commonSlice'; import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks'; -import Axios from 'axios'; -import { cleanURL } from '@/utils/util'; import { generateMultisigAccount, isValidPubKey, @@ -44,27 +42,11 @@ import { fromBech32 } from '@cosmjs/encoding'; import { DialogCreateMultisigProps, PubKeyFields } from '@/types/multisig'; import MultisigMemberTextField from './MultisigMemberTextField'; import { MULTISIG_PUBKEY_OBJECT } from '@/utils/constants'; +import useGetPubkey from '@/custom-hooks/useGetPubkey'; const MAX_PUB_KEYS = 7; const MULTISIG_NAME_MAX_LENGTH = 100; -const getPubkey = async (address: string, baseURL: string) => { - try { - const { status, data } = await Axios.get( - `${cleanURL(baseURL)}/cosmos/auth/v1beta1/accounts/${address}` - ); - - if (status === 200) { - return data.account.pub_key.key || ''; - } else { - return ''; - } - } catch (error) { - console.log(error); - return ''; - } -}; - const DialogCreateMultisig: React.FC = (props) => { const { open, onClose, address, addressPrefix, chainID, pubKey, baseURLs } = props; @@ -78,6 +60,8 @@ const DialogCreateMultisig: React.FC = (props) => { const [multisigAddress, setMultisigAddress] = useState(''); const [addressValidationError, setAddressValidationError] = useState(''); + const { getPubkey, pubkeyLoading } = useGetPubkey(); + const createMultiAccRes = useAppSelector( (state: RootState) => state.multisig.createMultisigAccountRes ); @@ -85,13 +69,14 @@ const DialogCreateMultisig: React.FC = (props) => { (state: RootState) => state.multisig.multisigAccountData ); - const pubKeyObj = {...MULTISIG_PUBKEY_OBJECT}; + const pubKeyObj = { ...MULTISIG_PUBKEY_OBJECT }; useEffect(() => { setDefaultFormValues(); }, [pubKey]); const setDefaultFormValues = () => { + //By default current account is added setPubKeyFields([ { name: 'current', @@ -101,7 +86,7 @@ const DialogCreateMultisig: React.FC = (props) => { required: true, disabled: true, pubKey: pubKey, - address: '', + address: address, isPubKey: true, error: '', }, @@ -212,7 +197,7 @@ const DialogCreateMultisig: React.FC = (props) => { let isValid = true; const pubKeyValidationPromises = pubKeyFields.map(async (field, index) => { if (!field.isPubKey) { - const pubKey = await getPubkey(field.address, baseURLs?.[0]); + const pubKey = await getPubkey(field.address, baseURLs); if (pubKey.length) { return { index, pubKey, error: '' }; } else { @@ -301,7 +286,7 @@ const DialogCreateMultisig: React.FC = (props) => { if (createMultiAccRes?.status === 'idle') { const message = importMultisig ? 'Successfully Imported' - : ' Successfully Create'; + : ' Successfully Created'; resetCreateMultisig(); dispatch(setError({ type: 'success', message: message })); } else if (createMultiAccRes?.status === 'rejected') { @@ -524,17 +509,33 @@ const DialogCreateMultisig: React.FC = (props) => {
{formError}
- +
+ +
+ {pubkeyLoading ? ( +
+ Validating inputs + +
+ ) : createMultiAccRes?.status === 'pending' ? ( +
+ Creating multisig account + +
+ ) : null} +
+
{!importMultisig ? (
diff --git a/frontend/src/app/(routes)/multisig/components/MultisigMemberTextField.tsx b/frontend/src/app/(routes)/multisig/components/MultisigMemberTextField.tsx index 377e9c6c5..6b7cd141a 100644 --- a/frontend/src/app/(routes)/multisig/components/MultisigMemberTextField.tsx +++ b/frontend/src/app/(routes)/multisig/components/MultisigMemberTextField.tsx @@ -12,7 +12,13 @@ const MultisigMemberTextField: React.FC = (props) => { className="bg-[#FFFFFF0D] rounded-2xl" onChange={(e) => handleChangeValue(index, e)} name={field.isPubKey ? 'pubKey' : 'address'} - value={field.isPubKey ? field.pubKey : field.address} + value={ + index === 0 + ? field.address + : field.isPubKey + ? field.pubKey + : field.address + } required={field?.required} placeholder={field.isPubKey ? 'Public Key (Secp256k1)' : 'Address'} sx={createMultisigTextFieldStyles} diff --git a/frontend/src/custom-hooks/useGetPubkey.ts b/frontend/src/custom-hooks/useGetPubkey.ts new file mode 100644 index 000000000..90cd3d94a --- /dev/null +++ b/frontend/src/custom-hooks/useGetPubkey.ts @@ -0,0 +1,33 @@ +import { axiosGetRequestWrapper } from '@/utils/RequestWrapper'; +import { useState } from 'react'; + +const useGetPubkey = () => { + const [pubkeyLoading, setPubkeyLoading] = useState(false); + const getPubkey = async (address: string, baseURLs: string[]) => { + try { + setPubkeyLoading(true); + const { status, data } = await axiosGetRequestWrapper( + baseURLs, + `/cosmos/auth/v1beta1/accounts/${address}`, + 2 + ); + + if (status === 200) { + return data.account.pub_key.key || ''; + } else { + return ''; + } + } catch (error) { + console.log(error); + return ''; + } finally { + setPubkeyLoading(false); + } + }; + return { + pubkeyLoading, + getPubkey, + }; +}; + +export default useGetPubkey;