Merge branch 'main' into feat-header-update

app/component-library/components-temp/Accounts/AccountBase/AccountBase.styles.ts

@@ -29,7 +29,6 @@ const styleSheet = StyleSheet.create({
  justifyContent: 'flex-start',
  },
  accountNameLabelText: {
- marginLeft: 4,
  paddingHorizontal: 8,
  borderWidth: 1,
  borderRadius: 8,

app/component-library/components-temp/Accounts/AccountBase/AccountBase.tsx

@@ -49,15 +49,17 @@ const AccountBase = ({
 
  <View style={styles.accountNameLabel}>
  <Text variant={TextVariant.BodyMDBold}>{accountName}</Text>
- {accountTypeLabel && (
+ </View>
+ {accountTypeLabel && (
+ <View style={styles.accountNameLabel}>
  <Text
- variant={TextVariant.BodySM}
+ variant={TextVariant.BodyMDBold}
  style={styles.accountNameLabelText}
  >
  {strings(accountTypeLabel)}
  </Text>
- )}
  </View>
+ )}
  </View>
  </View>
  <View>

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoExpanded/AccountNetworkInfoExpanded.tsx

@@ -9,6 +9,7 @@ import useAccountInfo from '../../../../hooks/useAccountInfo';
 import useApprovalRequest from '../../../../hooks/useApprovalRequest';
 import InfoSection from '../../../UI/InfoRow/InfoSection';
 import InfoRow from '../../../UI/InfoRow';
+import Address from '../../../UI/InfoRow/InfoValue/Address';
 import InfoURL from '../../../UI/InfoRow/InfoValue/InfoURL';
 
 // todo: use value component for address, network, currency value
@@ -23,7 +24,9 @@ const AccountNetworkInfoExpanded = () => {
  return (
  <View>
  <InfoSection>
- <InfoRow label={strings('confirm.account')}>{accountAddress}</InfoRow>
+ <InfoRow label={strings('confirm.account')}>
+ <Address address={accountAddress}></Address>
+ </InfoRow>
  <InfoRow label={strings('confirm.balance')}>{accountBalance}</InfoRow>
  </InfoSection>
  <InfoSection>

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoExpanded/__snapshots__/AccountNetworkInfoExpanded.test.tsx.snap

@@ -49,19 +49,52 @@ exports[`AccountNetworkInfoExpanded should match snapshot for personal sign 1`]
  Account
  </Text>
  </View>
- <Text
+ <View
  style={
  {
- "color": "#141618",
- "fontFamily": "EuclidCircularB-Regular",
- "fontSize": 14,
- "fontWeight": "400",
- "marginTop": 8,
+ "alignItems": "center",
+ "alignSelf": "center",
+ "backgroundColor": "#f2f4f6",
+ "borderRadius": 99,
+ "flexDirection": "row",
+ "gap": 5,
+ "paddingLeft": 8,
+ "paddingRight": 8,
+ "paddingVertical": 4,
  }
  }
  >
- 0x935E73EDb9fF52E23BaC7F7e043A1ecD06d05477
- </Text>
+ <SvgMock
+ color="#141618"
+ height={20}
+ name="Question"
+ style={
+ {
+ "height": 20,
+ "width": 20,
+ }
+ }
+ width={20}
+ />
+ <Text
+ accessibilityRole="text"
+ ellipsizeMode="middle"
+ numberOfLines={1}
+ style={
+ {
+ "color": "#141618",
+ "flexShrink": 1,
+ "fontFamily": "EuclidCircularB-Regular",
+ "fontSize": 14,
+ "fontWeight": "400",
+ "letterSpacing": 0,
+ "lineHeight": 22,
+ }
+ }
+ >
+ 0x935E7...05477
+ </Text>
+ </View>
  </View>
  <View
  style={

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Address/Address.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import renderWithProvider from '../../../../../../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../../../../../../util/test/initial-root-state';
+import {
+ MOCK_ACCOUNTS_CONTROLLER_STATE,
+ MOCK_ADDRESS_1,
+} from '../../../../../../../../util/test/accountsControllerTestUtils';
+
+import Address from './Address';
+
+const mockInitialState = {
+ engine: {
+ backgroundState: {
+ ...backgroundState,
+ AccountsController: {
+ ...MOCK_ACCOUNTS_CONTROLLER_STATE,
+ },
+ },
+ },
+};
+
+describe('InfoAddress', () => {
+ it('should match snapshot', async () => {
+ const container = renderWithProvider(<Address address={MOCK_ADDRESS_1} />, {
+ state: mockInitialState,
+ });
+ expect(container).toMatchSnapshot();
+ });
+});

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Address/Address.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import Name from '../../../../../../../UI/Name';
+import { NameType } from '../../../../../../../UI/Name/Name.types';
+
+interface AddressProps {
+ address: string;
+}
+
+const Address = ({ address }: AddressProps) => (
+ <Name type={NameType.EthereumAddress} value={address} />
+);
+
+export default Address;

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Address/__snapshots__/Address.test.tsx.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoAddress should match snapshot 1`] = `
+<View
+ style={
+ {
+ "alignItems": "center",
+ "alignSelf": "center",
+ "backgroundColor": "#f2f4f6",
+ "borderRadius": 99,
+ "flexDirection": "row",
+ "gap": 5,
+ "paddingLeft": 8,
+ "paddingRight": 8,
+ "paddingVertical": 4,
+ }
+ }
+>
+ <SvgMock
+ color="#141618"
+ height={20}
+ name="Question"
+ style={
+ {
+ "height": 20,
+ "width": 20,
+ }
+ }
+ width={20}
+ />
+ <Text
+ accessibilityRole="text"
+ ellipsizeMode="middle"
+ numberOfLines={1}
+ style={
+ {
+ "color": "#141618",
+ "flexShrink": 1,
+ "fontFamily": "EuclidCircularB-Regular",
+ "fontSize": 14,
+ "fontWeight": "400",
+ "letterSpacing": 0,
+ "lineHeight": 22,
+ }
+ }
+ >
+ 0xC4955...4D272
+ </Text>
+</View>
+`;

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/Address/index.ts

@@ -0,0 +1 @@
+export { default } from './Address';

app/components/Views/confirmations/components/UI/InfoRow/InfoValue/InfoURL/InfoURL.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 
-import InfoURL from './index';
+import InfoURL from './InfoURL';
 
 describe('InfoURL', () => {
  it('should display url as expected', async () => {

app/selectors/nftController.ts

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import { NftControllerState } from '@metamask/assets-controllers';
+import { Nft, NftControllerState } from '@metamask/assets-controllers';
 import { RootState } from '../reducers';
 
 const selectNftControllerState = (state: RootState) =>
@@ -15,3 +15,14 @@ export const selectAllNfts = createSelector(
  selectNftControllerState,
  (nftControllerState: NftControllerState) => nftControllerState.allNfts,
 );
+
+export const selectAllNftsFlat = createSelector(
+ selectAllNfts,
+ (nftsByChainByAccount) => {
+ const nftsByChainArray = Object.values(nftsByChainByAccount);
+ return nftsByChainArray.reduce((acc, nftsByChain) => {
+ const nftsArrays = Object.values(nftsByChain);
+ return acc.concat(...nftsArrays);
+ }, [] as Nft[]);
+ },
+);

app/selectors/tokensController.ts

@@ -37,3 +37,24 @@ export const selectDetectedTokens = createSelector(
  (tokensControllerState: TokensControllerState) =>
  tokensControllerState?.detectedTokens,
 );
+
+const selectAllTokens = createSelector(
+ selectTokensControllerState,
+ (tokensControllerState: TokensControllerState) =>
+ tokensControllerState?.allTokens,
+);
+
+export const selectAllTokensFlat = createSelector(
+ selectAllTokens,
+ (tokensByAccountByChain) => {
+ if (Object.values(tokensByAccountByChain).length === 0) {
+ return [];
+ }
+ const tokensByAccountArray = Object.values(tokensByAccountByChain);
+
+ return tokensByAccountArray.reduce((acc, tokensByAccount) => {
+ const tokensArray = Object.values(tokensByAccount);
+ return acc.concat(...tokensArray);
+ }, [] as Token[]);
+ },
+);

app/store/index.ts

@@ -16,6 +16,7 @@ import thunk from 'redux-thunk';
 
 import persistConfig from './persistConfig';
 import { AppStateEventProcessor } from '../core/AppStateEventListener';
+import { getTraceTags } from '../util/sentry/tags';
 
 // TODO: Improve type safety by using real Action types instead of `any`
 // TODO: Replace "any" with type
@@ -119,6 +120,7 @@ const createStoreAndPersistor = async (appStartTime: number) => {
  {
  name: TraceName.EngineInitialization,
  op: TraceOperation.EngineInitialization,
+ tags: getTraceTags(store.getState?.()),
  },
  () => {
  EngineService.initalizeEngine(store);