Skip to content

Commit

Permalink
fix: clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@salimtb
salimtb committed Nov 6, 2024
1 parent cf0b96e commit da365d7
Show file tree
Hide file tree
Showing 9 changed files with 116 additions and 40 deletions.
13 changes: 12 additions & 1 deletion ui/components/app/assets/asset-list/asset-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import TokenList from '../token-list';
import { PRIMARY } from '../../../../helpers/constants/common';
import { useUserPreferencedCurrency } from '../../../../hooks/useUserPreferencedCurrency';
import {
getAllDetectedTokensForSelectedAddress,
getDetectedTokensInCurrentNetwork,
getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
getSelectedAccount,
Expand Down Expand Up @@ -103,9 +104,19 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
// for EVM assets
const shouldShowTokensLinks = showTokensLinks ?? isEvm;

const detectedTokensMultichain = useSelector(
getAllDetectedTokensForSelectedAddress,
);

const totalTokens = Object.values(detectedTokensMultichain).reduce(
// @ts-expect-error TS18046: 'tokenArray' is of type 'unknown'
(count, tokenArray) => count + tokenArray.length,
0,
) as number;

return (
<>
{detectedTokens.length > 0 &&
{totalTokens > 0 &&
!isTokenDetectionInactiveOnNonMainnetSupportedNetwork && (
<DetectedTokensBanner
className=""
Expand Down
11 changes: 7 additions & 4 deletions ui/components/app/detected-token/detected-token-details/detected-token-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,21 @@ import DetectedTokenAddress from '../detected-token-address/detected-token-addre
import DetectedTokenAggregators from '../detected-token-aggregators/detected-token-aggregators';
import { Display } from '../../../../helpers/constants/design-system';
import {
getCurrentNetwork,
getTestNetworkBackgroundColor,
getTokenList,
} from '../../../../selectors';
import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../shared/constants/network';

const DetectedTokenDetails = ({
token,
handleTokenSelection,
tokensListDetected,
chainId,
}) => {
const tokenList = useSelector(getTokenList);
const tokenData = tokenList[token.address?.toLowerCase()];
const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
const currentNetwork = useSelector(getCurrentNetwork);
// const currentNetwork = useSelector(getCurrentNetwork);

return (
<Box
Expand All @@ -39,8 +40,9 @@ const DetectedTokenDetails = ({
badge={
<AvatarNetwork
size={AvatarNetworkSize.Xs}
name={currentNetwork?.nickname || ''}
src={currentNetwork?.rpcPrefs?.imageUrl}
// name={currentNetwork?.nickname || ''}
// src={currentNetwork?.rpcPrefs?.imageUrl}
src={CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[chainId]}
backgroundColor={testNetworkBackgroundColor}
/>
}
Expand Down Expand Up @@ -84,6 +86,7 @@ DetectedTokenDetails.propTypes = {
}),
handleTokenSelection: PropTypes.func.isRequired,
tokensListDetected: PropTypes.object,
chainId: PropTypes.string,
};

export default DetectedTokenDetails;
28 changes: 19 additions & 9 deletions ...s/app/detected-token/detected-token-selection-popover/detected-token-selection-popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
MetaMetricsTokenEventSource,
} from '../../../../../shared/constants/metametrics';
import {
getAllDetectedTokensForSelectedAddress,
getCurrentChainId,
getDetectedTokensInCurrentNetwork,
} from '../../../../selectors';
Expand All @@ -26,13 +27,21 @@ const DetectedTokenSelectionPopover = ({
onIgnoreAll,
setShowDetectedTokens,
sortingBasedOnTokenSelection,
// chainId,
}) => {
const t = useI18nContext();
const trackEvent = useContext(MetaMetricsContext);

const chainId = useSelector(getCurrentChainId);

const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork);

const detectedTokensMultichain = useSelector(
getAllDetectedTokensForSelectedAddress,
);

const totalTokens = Object.values(detectedTokensMultichain).reduce(
(count, tokenArray) => count + tokenArray.length,
0,
);
const { selected: selectedTokens = [] } =
sortingBasedOnTokenSelection(tokensListDetected);

Expand All @@ -46,7 +55,7 @@ const DetectedTokenSelectionPopover = ({
category: MetaMetricsEventCategory.Wallet,
properties: {
source_connection_method: MetaMetricsTokenEventSource.Detected,
chain_id: chainId,
// chain_id: chainId,
tokens: eventTokensDetails,
},
});
Expand Down Expand Up @@ -76,23 +85,24 @@ const DetectedTokenSelectionPopover = ({
<Popover
className="detected-token-selection-popover"
title={
detectedTokens.length === 1
totalTokens === 1
? t('tokenFoundTitle')
: t('tokensFoundTitle', [detectedTokens.length])
: t('tokensFoundTitle', [totalTokens])
}
onClose={onClose}
footer={footer}
>
<Box margin={3}>
{detectedTokens.map((token, index) => {
return (
{Object.entries(detectedTokensMultichain).map(([chainId, tokens]) => {
return tokens.map((token, index) => (
<DetectedTokenDetails
key={index}
key={`${chainId}-${index}`}
token={token}
chainId={chainId}
handleTokenSelection={handleTokenSelection}
tokensListDetected={tokensListDetected}
/>
);
));
})}
</Box>
</Popover>
Expand Down
1 change: 1 addition & 0 deletions ui/components/app/detected-token/detected-token-values/detected-token-values.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const DetectedTokenValues = ({

const { tokensWithBalances } = useTokenTracker({ tokens: [token] });
const balanceString = tokensWithBalances[0]?.string;

const formattedFiatBalance = useTokenFiatAmount(
token.address,
balanceString,
Expand Down
82 changes: 64 additions & 18 deletions ui/components/app/detected-token/detected-token.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ import { chain } from 'lodash';

import {
addImportedTokens,
getNetworkConfigurationByNetworkClientId,
ignoreTokens,
setNewTokensImported,
} from '../../../store/actions';
import {
getAllDetectedTokensForSelectedAddress,
getCurrentChainId,
getDetectedTokensInCurrentNetwork,
getNetworkConfigurationsByChainId,
getSelectedNetworkClientId,
} from '../../../selectors';
import { MetaMetricsContext } from '../../../contexts/metametrics';
Expand Down Expand Up @@ -39,8 +41,8 @@ const sortingBasedOnTokenSelection = (tokensDetected) => {
// ditch the 'selected' property and get just the tokens'
.mapValues((group) =>
group.map(({ token }) => {
const { address, symbol, decimals, aggregators } = token;
return { address, symbol, decimals, aggregators };
const { address, symbol, decimals, aggregators, chainId } = token;
return { address, symbol, decimals, aggregators, chainId };
}),
)
// Exit the chain and get the underlying value, an object.
Expand All @@ -52,27 +54,40 @@ const DetectedToken = ({ setShowDetectedTokens }) => {
const dispatch = useDispatch();
const trackEvent = useContext(MetaMetricsContext);

const chainId = useSelector(getCurrentChainId);
const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork);
// const chainId = useSelector(getCurrentChainId);
// const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork);
const detectedTokensMultichain = useSelector(
getAllDetectedTokensForSelectedAddress,
);

console.log('detectedTokensMultichain ....', detectedTokensMultichain);
const networkClientId = useSelector(getSelectedNetworkClientId);
// const networkClientId = useSelector(getSelectedNetworkClientId);

const configuration = useSelector(getNetworkConfigurationsByChainId);

const [tokensListDetected, setTokensListDetected] = useState(() =>
detectedTokens.reduce((tokenObj, token) => {
tokenObj[token.address] = { token, selected: true };
return tokenObj;
}, {}),
Object.entries(detectedTokensMultichain).reduce(
(acc, [chainId, tokens]) => {
if (Array.isArray(tokens)) {
tokens.forEach((token) => {
acc[token.address] = {
token: { ...token, chainId },
selected: true,
};
});
}
return acc;
},
{},
),
);
const [showDetectedTokenIgnoredPopover, setShowDetectedTokenIgnoredPopover] =
useState(false);
const [partiallyIgnoreDetectedTokens, setPartiallyIgnoreDetectedTokens] =
useState(false);

const importSelectedTokens = async (selectedTokens) => {
// console.log('selectedTokens .....', JSON.stringify(selectedTokens));

selectedTokens.forEach((importedToken) => {
trackEvent({
event: MetaMetricsEventName.TokenAdded,
Expand All @@ -85,20 +100,48 @@ const DetectedToken = ({ setShowDetectedTokens }) => {
token_standard: TokenStandard.ERC20,
asset_type: AssetType.token,
token_added_type: 'detected',
chain_id: chainId,
chain_id: importedToken.chainId,
},
});
});
await dispatch(addImportedTokens(selectedTokens, networkClientId));
const tokenSymbols = selectedTokens.map(({ symbol }) => symbol);
dispatch(setNewTokensImported(tokenSymbols.join(', ')));

// under feature flag
const tokensByChainId = selectedTokens.reduce((acc, token) => {
const { chainId } = token;

if (!acc[chainId]) {
acc[chainId] = { tokens: [] };
}

acc[chainId].tokens.push(token);

return acc;
}, {});

const importPromises = Object.entries(tokensByChainId).map(
async ([chainId, { tokens }]) => {
const chainConfig = configuration[chainId];
const { defaultRpcEndpointIndex } = chainConfig;
const { networkClientId } =
chainConfig.rpcEndpoints[defaultRpcEndpointIndex];

await dispatch(addImportedTokens(tokens, networkClientId));
const tokenSymbols = tokens.map(({ symbol }) => symbol);
dispatch(setNewTokensImported(tokenSymbols.join(', ')));
},
);

await Promise.all(importPromises);
};

const handleClearTokensSelection = async () => {
const { selected: selectedTokens = [], deselected: deSelectedTokens = [] } =
sortingBasedOnTokenSelection(tokensListDetected);

if (deSelectedTokens.length < detectedTokens.length) {
const detectedTokensCount = Object.values(detectedTokensMultichain).flat()
.length;

if (deSelectedTokens.length < detectedTokensCount) {
await importSelectedTokens(selectedTokens);
}
const tokensDetailsList = deSelectedTokens.map(
Expand Down Expand Up @@ -141,7 +184,10 @@ const DetectedToken = ({ setShowDetectedTokens }) => {
const { selected: selectedTokens = [] } =
sortingBasedOnTokenSelection(tokensListDetected);

if (selectedTokens.length < detectedTokens.length) {
const detectedTokensCount = Object.values(detectedTokensMultichain).flat()
.length;

if (selectedTokens.length < detectedTokensCount) {
setShowDetectedTokenIgnoredPopover(true);
setPartiallyIgnoreDetectedTokens(true);
} else {
Expand Down Expand Up @@ -175,9 +221,9 @@ const DetectedToken = ({ setShowDetectedTokens }) => {
partiallyIgnoreDetectedTokens={partiallyIgnoreDetectedTokens}
/>
)}
{detectedTokens.length > 0 && (
{Object.values(detectedTokensMultichain).flat().length > 0 && (
<DetectedTokenSelectionPopover
detectedTokens={detectedTokens}
detectedTokens={detectedTokensMultichain}
tokensListDetected={tokensListDetected}
handleTokenSelection={handleTokenSelection}
onImport={onImport}
Expand Down
8 changes: 4 additions & 4 deletions ui/components/multichain/detected-token-banner/detected-token-banner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ export const DetectedTokensBanner = ({
getAllDetectedTokensForSelectedAddress,
);

const detectedTokensDetails = detectedTokens.map(
({ address, symbol }) => `${symbol} - ${address}`,
);
const detectedTokensDetails = Object.values(detectedTokensMultichain)
.flat()
.map(({ address, symbol }) => `${symbol} - ${address}`);

const chainId = useSelector(getCurrentChainId);

Expand Down Expand Up @@ -62,7 +62,7 @@ export const DetectedTokensBanner = ({
data-testid="detected-token-banner"
{...props}
>
{detectedTokens.length === 1
{totalTokens === 1
? t('numberOfNewTokensDetectedSingular')
: t('numberOfNewTokensDetectedPlural', [totalTokens])}
</BannerAlert>
Expand Down
2 changes: 0 additions & 2 deletions ui/hooks/useTokenDetectionPolling.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@ const useTokenDetectionPolling = () => {
// Selectors returning state updated by the polling
const detectedTokens = useSelector(getAllDetectedTokensForSelectedAddress);

console.log('detectedTokens *******', detectedTokens);

useMultiPolling({
startPolling: tokenDetectionStartPolling,
stopPollingByPollingToken: tokenDetectionStopPollingByPollingToken,
Expand Down
6 changes: 4 additions & 2 deletions ui/selectors/selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2270,7 +2270,6 @@ export function getDetectedTokensInCurrentNetwork(state) {
export function getAllDetectedTokensForSelectedAddress(state) {
const completedOnboarding = getCompletedOnboarding(state);

// handle onboarding where selected address is not set yet
if (!completedOnboarding) {
return {};
}
Expand All @@ -2282,7 +2281,10 @@ export function getAllDetectedTokensForSelectedAddress(state) {
).reduce((acc, [chainId, chainTokens]) => {
const tokensForAddress = chainTokens[selectedAddress];
if (tokensForAddress) {
acc[chainId] = tokensForAddress;
acc[chainId] = tokensForAddress.map((token) => ({
...token,
chainId,
}));
}
return acc;
}, {});
Expand Down
5 changes: 5 additions & 0 deletions ui/store/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1970,12 +1970,17 @@ export function addImportedTokens(
networkClientId?: NetworkClientId,
): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
return async (dispatch: MetaMaskReduxDispatch) => {
console.log('tokensToImport -----', tokensToImport);
console.log('networkClientId -----', networkClientId);

// debugger;
try {
await submitRequestToBackground('addImportedTokens', [
tokensToImport,
networkClientId,
]);
} catch (error) {
console.log('ERROR .....', error);
logErrorWithMessage(error);
} finally {
await forceUpdateMetamaskState(dispatch);
Expand Down

0 comments on commit da365d7

Please sign in to comment.