Skip to content

Commit

Permalink
Merge branch 'main' into STAKE-806--fe-integrate-stake-and-vault-data
Browse files Browse the repository at this point in the history
  • Loading branch information
siibars committed Oct 21, 2024
2 parents e408753 + 3cabaab commit 577ae6b
Show file tree
Hide file tree
Showing 12 changed files with 812 additions and 204 deletions.
7 changes: 3 additions & 4 deletions app/components/UI/AssetOverview/TokenDetails/TokenDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
import i18n from '../../../../../locales/i18n';
import { useStyles } from '../../../../component-library/hooks';
import styleSheet from './TokenDetails.styles';
import { formatAddress, safeToChecksumAddress } from '../../../../util/address';
import { safeToChecksumAddress } from '../../../../util/address';
import { selectTokenList } from '../../../../selectors/tokenListController';
import { selectContractExchangeRates } from '../../../../selectors/tokenRatesController';
import {
Expand Down Expand Up @@ -72,13 +72,12 @@ const TokenDetails: React.FC<TokenDetailsProps> = ({ asset }) => {

const tokenDetails: TokenDetails = asset.isETH
? {
contractAddress: formatAddress(zeroAddress(), 'short'),
contractAddress: zeroAddress(),
tokenDecimal: 18,
tokenList: '',
}
: {
contractAddress:
formatAddress(tokenContractAddress as string, 'short') || null,
contractAddress: tokenContractAddress || null,
tokenDecimal: tokenMetadata?.decimals || null,
tokenList: tokenMetadata?.aggregators.join(', ') || null,
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import Icon, {
import ClipboardManager from '../../../../../core/ClipboardManager';
import { TokenDetails } from '../TokenDetails';
import TokenDetailsListItem from '../TokenDetailsListItem';
import { formatAddress } from '../../../../../util/address';

interface TokenDetailsListProps {
tokenDetails: TokenDetails;
Expand Down Expand Up @@ -62,7 +63,7 @@ const TokenDetailsList: React.FC<TokenDetailsListProps> = ({
onPress={copyAccountToClipboard}
>
<Text color={TextColor.Primary} variant={TextVariant.BodySM}>
{tokenDetails.contractAddress}
{formatAddress(tokenDetails.contractAddress, 'short')}
</Text>
<Icon
name={IconName.Copy}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import React from 'react';
import renderWithProvider, { DeepPartial } from '../../../../util/test/renderWithProvider';
import { AccountsList } from './AccountsList';
import { AvatarAccountType } from '../../../../component-library/components/Avatars/Avatar';
import { Account } from '../../../../components/hooks/useAccounts/useAccounts.types';
import { MOCK_ACCOUNTS_CONTROLLER_STATE } from '../../../../util/test/accountsControllerTestUtils';
import { Hex } from '@metamask/utils';
import { KeyringTypes } from '@metamask/keyring-controller';
import { toChecksumAddress } from 'ethereumjs-util';
import { RootState } from '../../../../reducers';
import { backgroundState } from '../../../../util/test/initial-root-state';

const MOCK_ACCOUNT_ADDRESSES = Object.values(
MOCK_ACCOUNTS_CONTROLLER_STATE.internalAccounts.accounts,
).map((account) => account.address);

const MOCK_ACCOUNT_1: Account = {
name: 'Account 1',
address: toChecksumAddress(MOCK_ACCOUNT_ADDRESSES[0]) as Hex,
type: KeyringTypes.hd,
yOffset: 0,
isSelected: false,
assets: {
fiatBalance: '\n0 ETH',
},
balanceError: undefined,
};
const MOCK_ACCOUNT_2: Account = {
name: 'Account 2',
address: toChecksumAddress(MOCK_ACCOUNT_ADDRESSES[1]) as Hex,
type: KeyringTypes.hd,
yOffset: 78,
isSelected: true,
assets: {
fiatBalance: '\n< 0.00001 ETH',
},
balanceError: undefined,
};

const MOCK_ACCOUNTS = [MOCK_ACCOUNT_1, MOCK_ACCOUNT_2];

const mockInitialState: DeepPartial<RootState> = {
engine: {
backgroundState: {
...backgroundState,
NotificationServicesController: {
metamaskNotificationsList: [],
},
},
},
};

describe('AccountsList', () => {
it('matches snapshot', () => {

const { toJSON } = renderWithProvider(
<AccountsList
accounts={MOCK_ACCOUNTS}
accountAvatarType={AvatarAccountType.JazzIcon}
accountSettingsData={{}}
updateAndfetchAccountSettings={jest.fn()}
isUpdatingMetamaskNotificationsAccount={[]}
/>,
{
state: mockInitialState,
},
);
expect(toJSON()).toMatchSnapshot();
});

it('triggers updateAndfetchAccountSettings on mount', () => {
const updateAndfetchAccountSettings = jest.fn();
renderWithProvider(
<AccountsList
accounts={MOCK_ACCOUNTS}
accountAvatarType={AvatarAccountType.JazzIcon}
accountSettingsData={{}}
updateAndfetchAccountSettings={updateAndfetchAccountSettings}
isUpdatingMetamaskNotificationsAccount={[]}
/>,
{
state: mockInitialState,
},
);

expect(updateAndfetchAccountSettings).toHaveBeenCalledTimes(1);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React, { useEffect } from 'react';
import { FlatList, View } from 'react-native';
import NotificationOptionToggle from './NotificationOptionToggle';
import { Account } from '../../../../components/hooks/useAccounts/useAccounts.types';
import { NotificationsToggleTypes } from './NotificationsSettings.constants';
import { NotificationsAccountsState } from '../../../../core/redux/slices/notifications';
import { AvatarAccountType } from '../../../../component-library/components/Avatars/Avatar';

export const AccountsList = ({
accounts,
accountAvatarType,
accountSettingsData,
updateAndfetchAccountSettings,
isUpdatingMetamaskNotificationsAccount,
}: {
accounts: Account[];
accountAvatarType: AvatarAccountType;
accountSettingsData: NotificationsAccountsState;
updateAndfetchAccountSettings: () => Promise<Record<string, boolean> | undefined>;
isUpdatingMetamaskNotificationsAccount: string[];
}) => {

useEffect(() => {
const fetchInitialData = async () => {
await updateAndfetchAccountSettings();
};
fetchInitialData();
}, [updateAndfetchAccountSettings]);

return (
<View>
<FlatList
data={accounts}
keyExtractor={(item) => `address-${item.address}`}
renderItem={({ item }) => (
<NotificationOptionToggle
type={NotificationsToggleTypes.ACCOUNT}
icon={accountAvatarType}
key={item.address}
title={item.name}
address={item.address}
disabledSwitch={isUpdatingMetamaskNotificationsAccount.length > 0}
isLoading={isUpdatingMetamaskNotificationsAccount.includes(
item.address.toLowerCase(),
)}
isEnabled={accountSettingsData?.[item.address.toLowerCase()]}
updateAndfetchAccountSettings={updateAndfetchAccountSettings}
/>
)}
/>
</View>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ interface NotificationOptionsToggleProps {
disabledSwitch?: boolean;
isLoading?: boolean;
isEnabled: boolean;
refetchAccountSettings: () => Promise<void>;
updateAndfetchAccountSettings: () => Promise<Record<string, boolean> | undefined>;
}

/**
Expand All @@ -50,7 +50,7 @@ const NotificationOptionToggle = ({
isEnabled,
disabledSwitch,
isLoading,
refetchAccountSettings,
updateAndfetchAccountSettings,
}: NotificationOptionsToggleProps) => {
const theme = useTheme();
const { colors } = theme;
Expand All @@ -59,7 +59,7 @@ const NotificationOptionToggle = ({

const { toggleAccount, loading: isUpdatingAccount } = useUpdateAccountSetting(
address,
refetchAccountSettings,
updateAndfetchAccountSettings,
);

const loading = isLoading || isUpdatingAccount;
Expand Down Expand Up @@ -104,7 +104,7 @@ const NotificationOptionToggle = ({
)}
</View>
<View style={styles.switchElement}>
{isLoading || loading ? (
{loading ? (
<ActivityIndicator />
) : (
<Switch
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,14 @@ const styleSheet = (params: { theme: Theme }) =>
},
button: {
alignSelf: 'stretch',
marginBottom: 16,
marginBottom: 48,
},

});

export const styles = StyleSheet.create({
headerLeft: {
marginHorizontal: 16,
},
});

Expand Down
Loading

0 comments on commit 577ae6b

Please sign in to comment.