Skip to content

Commit

Permalink
[Issue-3974] Update hook dependency
Browse files Browse the repository at this point in the history
  • Loading branch information
@S2kael
S2kael committed Jan 23, 2025
1 parent 660b59d commit 630b9fc
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 50 deletions.
106 changes: 58 additions & 48 deletions packages/extension-koni-ui/src/Popup/Home/Nfts/NftImport.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { AddressInput, ChainSelector, Layout, PageWrapper, TokenTypeSelector } f
import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
import { useChainChecker, useGetChainPrefixBySlug, useGetNftContractSupportedChains, useNotification, useTranslation } from '@subwallet/extension-koni-ui/hooks';
import { upsertCustomToken, validateCustomToken } from '@subwallet/extension-koni-ui/messaging';
import { FormCallbacks, FormFieldData, ThemeProps } from '@subwallet/extension-koni-ui/types';
import { FormCallbacks, FormFieldData, FormRule, ThemeProps } from '@subwallet/extension-koni-ui/types';
import { convertFieldToError, convertFieldToObject, reformatAddress, simpleCheckForm } from '@subwallet/extension-koni-ui/utils';
import { reformatContractAddress } from '@subwallet/extension-koni-ui/utils/account/reformatContractAddress';
import { Form, Icon, Input } from '@subwallet/react-ui';
Expand Down Expand Up @@ -94,6 +94,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
const empty = Object.entries(all).some(([key, value]) => key !== 'symbol' ? !value : false);

const { chain, contractAddress, type } = changes;
const { chain: selectedChain } = all;

if (chain) {
const nftTypes = getNftTypeSupported(chainInfoMap[chain]);
Expand Down Expand Up @@ -121,7 +122,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {

setNameDisabled(!all.chain || !all.type || allError.contractAddress.length > 0);
setIsDisabled(empty || error);
}, [chainInfoMap, form, selectedChain]);
}, [chainInfoMap, form]);

const onSubmit: FormCallbacks<NftImportFormType>['onFinish'] = useCallback((formValues: NftImportFormType) => {
const { chain, contractAddress, symbol, type } = formValues;
Expand Down Expand Up @@ -187,53 +188,62 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
});
}, [t]);

const contractAddressTransform = useCallback((contractAddress: string) => {
return reformatContractAddress(selectedChain, contractAddress);
}, [selectedChain]);

const contractAddressValidator = useCallback((rule: RuleObject, contractAddress: string): Promise<void> => {
return new Promise((resolve, reject) => {
if (!isAddress(contractAddress)) {
reject(t('Invalid contract address'));
} else {
const isValidEvmContract = [_AssetType.ERC721].includes(selectedNftType) && isEthereumAddress(contractAddress);
const isValidWasmContract = [_AssetType.PSP34].includes(selectedNftType) && isValidSubstrateAddress(contractAddress);
const reformattedAddress = reformatAddress(contractAddress, chainNetworkPrefix);

if (isValidEvmContract || isValidWasmContract) {
setLoading(true);
validateCustomToken({
contractAddress: reformattedAddress,
originChain: selectedChain,
type: selectedNftType
})
.then((validationResult) => {
setLoading(false);

if (validationResult.isExist) {
reject(t('Existed NFT'));
}

if (validationResult.contractError) {
reject(t('Invalid contract for the selected chain'));
}

if (!validationResult.isExist && !validationResult.contractError) {
form.setFieldValue('collectionName', validationResult.name);
form.setFieldValue('symbol', validationResult.symbol);
resolve();
const contractRules = useMemo((): FormRule[] => {
return [
({ getFieldValue }) => ({
transform: (contractAddress: string) => {
const selectedChain = getFieldValue('chain') as string;

return reformatContractAddress(selectedChain, contractAddress);
},
validator: (_, contractAddress: string): Promise<void> => {
return new Promise((resolve, reject) => {
if (!isAddress(contractAddress)) {
reject(t('Invalid contract address'));
} else {
const selectedChain = getFieldValue('chain') as string;
const selectedNftType = getFieldValue('type') as _AssetType;
const isValidEvmContract = [_AssetType.ERC721].includes(selectedNftType) && isEthereumAddress(contractAddress);
const isValidWasmContract = [_AssetType.PSP34].includes(selectedNftType) && isValidSubstrateAddress(contractAddress);
const reformattedAddress = reformatAddress(contractAddress, chainNetworkPrefix);

if (isValidEvmContract || isValidWasmContract) {
setLoading(true);
validateCustomToken({
contractAddress: reformattedAddress,
originChain: selectedChain,
type: selectedNftType
})
.then((validationResult) => {
setLoading(false);

if (validationResult.isExist) {
reject(t('Existed NFT'));
}

if (validationResult.contractError) {
reject(t('Invalid contract for the selected chain'));
}

if (!validationResult.isExist && !validationResult.contractError) {
form.setFieldValue('collectionName', validationResult.name);
form.setFieldValue('symbol', validationResult.symbol);
resolve();
}
})
.catch(() => {
setLoading(false);
reject(t('Invalid contract for the selected chain'));
});
} else {
reject(t('Invalid contract address'));
}
})
.catch(() => {
setLoading(false);
reject(t('Invalid contract for the selected chain'));
});
} else {
reject(t('Invalid contract address'));
}
});
}
}
});
}, [chainNetworkPrefix, form, selectedChain, selectedNftType, t]);
})
];
}, [chainNetworkPrefix, form, t]);

useEffect(() => {
selectedChain && checkChain(selectedChain);
Expand Down Expand Up @@ -300,7 +310,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {

<Form.Item
name='contractAddress'
rules={[{ transform: contractAddressTransform }, { validator: contractAddressValidator }]}
rules={contractRules}
statusHelpAsTooltip={true}
>
<AddressInput
Expand Down
8 changes: 6 additions & 2 deletions packages/extension-koni-ui/src/Popup/Settings/Tokens/FungibleTokenImport.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,14 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
return [
({ getFieldValue }) => ({
transform: (contractAddress: string) => {
const selectedChain = getFieldValue('chain') as string;

return reformatContractAddress(selectedChain, contractAddress);
},
validator: (_, contractAddress: string) => {
return new Promise<void>((resolve, reject) => {
const selectedTokenType = getFieldValue('type') as _AssetType;
const selectedChain = getFieldValue('chain') as string;

const isValidEvmContract = [_AssetType.ERC20].includes(selectedTokenType) && isEthereumAddress(contractAddress);
const isValidWasmContract = [_AssetType.PSP22].includes(selectedTokenType) && isValidSubstrateAddress(contractAddress);
Expand Down Expand Up @@ -160,7 +163,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
}
})
];
}, [chainNetworkPrefix, form, selectedChain, t]);
}, [chainNetworkPrefix, form, t]);

const assetIdRules = useMemo((): FormRule[] => {
return [
Expand Down Expand Up @@ -216,6 +219,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
const allError = convertFieldToError<TokenImportFormType>(allFields);

const { chain, contractAddress, type } = changes;
const { chain: selectedChain } = all;

const baseResetFields = ['tokenName', 'symbol', 'decimals', 'priceId'];

Expand Down Expand Up @@ -247,7 +251,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {

setFieldDisabled(!all.chain || !all.type || allError.contractAddress.length > 0 || allError.assetId.length > 0);
setIsDisabled(empty || error);
}, [chainInfoMap, form, selectedChain]);
}, [chainInfoMap, form]);

const onSubmitContractAddress: FormCallbacks<TokenImportFormType>['onFinish'] = useCallback((formValues: TokenImportFormType) => {
const { chain, contractAddress, decimals, priceId, symbol, tokenName, type } = formValues;
Expand Down

0 comments on commit 630b9fc

Please sign in to comment.