Skip to content

Commit

Permalink
[Issue-64] Update Send Fund UX
Browse files Browse the repository at this point in the history
  • Loading branch information
@dungnguyen-art
dungnguyen-art committed May 29, 2024
1 parent c407759 commit 6119fda
Showing 1 changed file with 33 additions and 69 deletions.
102 changes: 33 additions & 69 deletions packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,21 @@ import { _getAssetDecimals, _getOriginChainOfAsset, _getTokenMinAmount, _isAsset
import { SWTransactionResponse } from '@subwallet/extension-base/services/transaction-service/types';
import { BitcoinFeeDetail, ResponseSubscribeTransfer, TransactionFee } from '@subwallet/extension-base/types';
import { BN_ZERO, detectTranslate } from '@subwallet/extension-base/utils';
import { AccountSelector, AddressInput, AlertBox, AlertModal, AmountInput, BitcoinFeeSelector, ChainSelector, HiddenInput, TokenItemType, TokenSelector } from '@subwallet/extension-koni-ui/components';
import { AccountSelector, AddressInput, AlertBox, AlertModal, AmountInput, BitcoinFeeSelector, HiddenInput, TokenItemType, TokenSelector } from '@subwallet/extension-koni-ui/components';
import { BITCOIN_CHAINS, SUPPORT_CHAINS } from '@subwallet/extension-koni-ui/constants';
import { useAlert, useFetchChainAssetInfo, useGetChainPrefixBySlug, useGetNativeTokenBasicInfo, useHandleSubmitTransaction, useInitValidateTransaction, useNotification, usePreCheckAction, useRestoreTransaction, useSelector, useSetCurrentPage, useTransactionContext, useWatchTransaction } from '@subwallet/extension-koni-ui/hooks';
import { cancelSubscription, makeCrossChainTransfer, makeTransfer, subscribeMaxTransfer } from '@subwallet/extension-koni-ui/messaging';
import { FreeBalance } from '@subwallet/extension-koni-ui/Popup/Transaction/parts';
import { RootState } from '@subwallet/extension-koni-ui/stores';
import { ChainItemType, FormCallbacks, Theme, ThemeProps, TransferParams } from '@subwallet/extension-koni-ui/types';
import { FormCallbacks, Theme, ThemeProps, TransferParams } from '@subwallet/extension-koni-ui/types';
import { findAccountByAddress, formatBalance, noop, reformatAddress } from '@subwallet/extension-koni-ui/utils';
import { getKeypairTypeByAddress } from '@subwallet/keyring';
import { KeypairType } from '@subwallet/keyring/types';
import { Button, Form, Icon, Number } from '@subwallet/react-ui';
import { Rule } from '@subwallet/react-ui/es/form';
import BigN from 'bignumber.js';
import CN from 'classnames';
import { PaperPlaneRight, PaperPlaneTilt } from 'phosphor-react';
import { PaperPlaneTilt } from 'phosphor-react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
Expand Down Expand Up @@ -52,10 +52,6 @@ function getTokenItems (
multiChainAssetMap: Record<string, _MultiChainAsset>,
tokenGroupSlug?: string // is ether a token slug or a multiChainAsset slug
): TokenItemType[] {
if (!address) {
return [];
}

const isSetTokenSlug = !!tokenGroupSlug && !!assetRegistry[tokenGroupSlug];
const isSetMultiChainAssetSlug = !!tokenGroupSlug && !!multiChainAssetMap[tokenGroupSlug];
const addressType = getKeypairTypeByAddress(address);
Expand Down Expand Up @@ -94,9 +90,9 @@ function getTokenItems (
return;
}

if (!checkValidBetweenAddressTypeAndChain(addressType, chainAsset.originChain)) {
return;
}
// if (!checkValidBetweenAddressTypeAndChain(addressType, chainAsset.originChain)) {
// return;
// }

if (isSetMultiChainAssetSlug) {
if (chainAsset.multiChainAsset === tokenGroupSlug) {
Expand Down Expand Up @@ -128,34 +124,6 @@ function getTokenItems (
});
}

function getTokenAvailableDestinations (tokenSlug: string, xcmRefMap: Record<string, _AssetRef>, chainInfoMap: Record<string, _ChainInfo>): ChainItemType[] {
if (!tokenSlug) {
return [];
}

const result: ChainItemType[] = [];
const originChain = chainInfoMap[_getOriginChainOfAsset(tokenSlug)];

// Firstly, push the originChain of token
result.push({
name: originChain.name,
slug: originChain.slug
});

Object.values(xcmRefMap).forEach((xcmRef) => {
if (xcmRef.srcAsset === tokenSlug) {
const destinationChain = chainInfoMap[xcmRef.destChain];

result.push({
name: destinationChain.name,
slug: destinationChain.slug
});
}
});

return result;
}

const hiddenFields: Array<keyof TransferParams> = ['chain', 'fromProxyId'];
const validateFields: Array<keyof TransferParams> = ['value', 'to'];
const alertModalId = 'confirmation-alert-modal';
Expand Down Expand Up @@ -187,7 +155,7 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
const { alertProps, closeAlert, openAlert } = useAlert(alertModalId);

const { chainInfoMap, chainStatusMap } = useSelector((root) => root.chainStore);
const { assetRegistry, multiChainAssetMap, xcmRefMap } = useSelector((root) => root.assetRegistry);
const { assetRegistry, multiChainAssetMap } = useSelector((root) => root.assetRegistry);
const { accounts } = useSelector((state: RootState) => state.accountState);

const destChainNetworkPrefix = useGetChainPrefixBySlug(destChainValue);
Expand All @@ -206,10 +174,6 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {

const chainStatus = useMemo(() => chainStatusMap[chainValue]?.connectionStatus, [chainValue, chainStatusMap]);

const destChainItems = useMemo<ChainItemType[]>(() => {
return getTokenAvailableDestinations(assetValue, xcmRefMap, chainInfoMap);
}, [chainInfoMap, assetValue, xcmRefMap]);

const currentChainAsset = useMemo(() => {
const _asset = isFirstRender ? defaultData.asset : assetValue;

Expand Down Expand Up @@ -504,8 +468,16 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
const addressBookFilter = useCallback((addressJson: AbstractAddressJson): boolean => {
const addressType = getKeypairTypeByAddress(addressJson.address);

if (chainValue === 'bitcoin') {
return 'bitcoin-84'.includes(addressType) && addressJson.address !== fromValue;
} else if (chainValue === 'bitcoinTestnet') {
return 'bittest-84'.includes(addressType) && addressJson.address !== fromValue;
} else if (chainValue === 'ethereum') {
return 'ethereum'.includes(addressType) && addressJson.address !== fromValue;
}

return ['ethereum', 'bitcoin-84', 'bittest-84'].includes(addressType);
}, []);
}, [chainValue, fromValue]);

// TODO: Need to review
// Auto fill logic
Expand Down Expand Up @@ -605,8 +577,16 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {

const accountType = account.type || getKeypairTypeByAddress(account.address);

if (chainValue === 'bitcoin') {
return 'bitcoin-84'.includes(accountType);
} else if (chainValue === 'bitcoinTestnet') {
return 'bittest-84'.includes(accountType);
} else if (chainValue === 'ethereum') {
return 'ethereum'.includes(accountType);
}

return ['ethereum', 'bitcoin-84', 'bittest-84'].includes(accountType);
}, [fromProxyId]);
}, [chainValue, fromProxyId]);

useEffect(() => {
const bnTransferAmount = new BigN(transferAmountValue || '0');
Expand Down Expand Up @@ -634,15 +614,6 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
onFinish={onSubmit}
onValuesChange={onValuesChange}
>
<Form.Item
name={'from'}
>
<AccountSelector
filter={accountsFilter}
label={t('Send from')}
/>
</Form.Item>

<div className={'form-row'}>
<Form.Item name={'asset'}>
<TokenSelector
Expand All @@ -653,22 +624,15 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
tooltip={t('Select token')}
/>
</Form.Item>

<Icon
className={'middle-item'}
phosphorIcon={PaperPlaneRight}
size={'md'}
/>

<Form.Item name={'destChain'}>
<ChainSelector
disabled={!destChainItems.length}
items={destChainItems}
title={t('Select destination chain')}
tooltip={t('Select destination chain')}
/>
</Form.Item>
</div>
<Form.Item
name={'from'}
>
<AccountSelector
filter={accountsFilter}
label={t('Send from')}
/>
</Form.Item>

<HiddenInput fields={hiddenFields} />

Expand Down

0 comments on commit 6119fda

Please sign in to comment.