diff --git a/packages/yoroi-extension/app/UI/features/portfolio/common/components/HeaderPrice.tsx b/packages/yoroi-extension/app/UI/features/portfolio/common/components/HeaderPrice.tsx
index a2f08eaf1d..3f8759045b 100644
--- a/packages/yoroi-extension/app/UI/features/portfolio/common/components/HeaderPrice.tsx
+++ b/packages/yoroi-extension/app/UI/features/portfolio/common/components/HeaderPrice.tsx
@@ -1,10 +1,11 @@
 import { Skeleton, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import React from 'react';
 import { usePortfolio } from '../../module/PortfolioContextProvider';
 import { HiddenAmount } from './HiddenAmount';
 
-export const HeaderPrice = ({ isLoading = false }) => {
-  const { accountPair, isHiddenAmount } = usePortfolio();
+export const HeaderPrice = observer(({ isLoading = false, isHiddenAmount }) => {
+  const { accountPair } = usePortfolio();
 
   if (isLoading) {
     return <Skeleton width="129px" height="16px" />;
@@ -12,10 +13,8 @@ export const HeaderPrice = ({ isLoading = false }) => {
 
   return (
     <Typography color="ds.text_gray_low" mr="12px">
-      <HiddenAmount isHidden={isHiddenAmount}>
-        {accountPair?.to.value}
-      </HiddenAmount>
+      <HiddenAmount isHidden={isHiddenAmount}>{accountPair?.to.value}</HiddenAmount>
       <span>&nbsp;{accountPair?.to.name}</span>
     </Typography>
   );
-};
+});
diff --git a/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx b/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx
index bfb59e25d4..033cae7c3c 100644
--- a/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx
+++ b/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx
@@ -143,7 +143,11 @@ const PortfolioHeader = observer(
           </Stack>
 
           <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ marginTop: theme.spacing(1) }}>
-            {loading || isLoading ? <Skeleton width="64px" height="13px" /> : <HeaderPrice isLoading={tokenActivity === null} />}
+            {loading || isLoading ? (
+              <Skeleton width="64px" height="13px" />
+            ) : (
+              <HeaderPrice isLoading={tokenActivity === null} isHiddenAmount={stores.profile.shouldHideBalance} />
+            )}
             {isLoading || loading ? (
               <Skeletons theme={theme} />
             ) : (
diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/HeaderDetails/Header.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/HeaderDetails/Header.tsx
index c2f3ddcf75..8e6d04bbc5 100644
--- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/HeaderDetails/Header.tsx
+++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/HeaderDetails/Header.tsx
@@ -23,7 +23,7 @@ const HeaderSection = observer(
   ({ tokenInfo, stores }: Props): JSX.Element => {
     const theme: any = useTheme();
     const strings = useStrings();
-    const { unitOfAccount, accountPair, primaryTokenInfo, isHiddenAmount } = usePortfolio();
+    const { unitOfAccount, accountPair, primaryTokenInfo } = usePortfolio();
     const isPrimaryToken: boolean = tokenInfo.id === '-';
 
     // TODO refactor and remove this caluclation from here in the future - this should come from the main selected wallet context
@@ -79,7 +79,7 @@ const HeaderSection = observer(
         <Stack direction="column" spacing={theme.spacing(0.5)}>
           <Stack direction="row" spacing={theme.spacing(0.25)} alignItems="flex-start">
             <Typography variant="h2" fontWeight="500" color="ds.text_gray_medium">
-              <HiddenAmount isHidden={isHiddenAmount}>{tokenTotalAmount}</HiddenAmount>
+              <HiddenAmount isHidden={stores.profile.shouldHideBalance}>{tokenTotalAmount}</HiddenAmount>
             </Typography>
             <Typography
               variant="body2"
@@ -94,7 +94,7 @@ const HeaderSection = observer(
           </Stack>
 
           <Typography color="ds.gray_600">
-            <HiddenAmount isHidden={isHiddenAmount}>{isPrimaryToken ? ptValue : totaPriceCalc}</HiddenAmount>
+            <HiddenAmount isHidden={stores.profile.shouldHideBalance}>{isPrimaryToken ? ptValue : totaPriceCalc}</HiddenAmount>
             <span>&nbsp;{isPrimaryToken && unitOfAccount === primaryTokenInfo.name ? DEFAULT_FIAT_PAIR : unitOfAccount}</span>
           </Typography>
         </Stack>
diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/TokenDetails.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/TokenDetails.tsx
index ac46f4c714..dd125bc1da 100644
--- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/TokenDetails.tsx
+++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/TokenDetails.tsx
@@ -1,5 +1,6 @@
 import { Box, Divider, Stack } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
+import { observer } from 'mobx-react';
 import React from 'react';
 import { BackButton, Card } from '../../../../components';
 import NavigationButton from '../../common/components/NavigationButton';
@@ -23,38 +24,40 @@ interface Props {
   stores: any;
 }
 
-const TokenDetails = ({ tokenInfo, stores }: Props): JSX.Element => {
-  const theme: any = useTheme();
-  const navigateTo = useNavigateTo();
-  const strings = useStrings();
-  const isPrimaryToken: boolean = tokenInfo.id === '-';
-
-  return (
-    <Box sx={{ width: '100%' }}>
-      <Header>
-        <BackButton label={strings.backToPortfolio} onAction={() => navigateTo.portfolio()} />
-        <Stack direction="row" spacing={theme.spacing(2)}>
-          <NavigationButton variant="primary" onClick={() => navigateTo.swapPage(tokenInfo.info.id)} label={strings.swap} />
-          <NavigationButton variant="secondary" onClick={() => navigateTo.sendPage()} label={strings.send} />
-          <NavigationButton variant="secondary" onClick={() => navigateTo.receivePage()} label={strings.receive} />
+const TokenDetails = observer(
+  ({ tokenInfo, stores }: Props): JSX.Element => {
+    const theme: any = useTheme();
+    const navigateTo = useNavigateTo();
+    const strings = useStrings();
+    const isPrimaryToken: boolean = tokenInfo.id === '-';
+
+    return (
+      <Box sx={{ width: '100%' }}>
+        <Header>
+          <BackButton label={strings.backToPortfolio} onAction={() => navigateTo.portfolio()} />
+          <Stack direction="row" spacing={theme.spacing(2)}>
+            <NavigationButton variant="primary" onClick={() => navigateTo.swapPage(tokenInfo.info.id)} label={strings.swap} />
+            <NavigationButton variant="secondary" onClick={() => navigateTo.sendPage()} label={strings.send} />
+            <NavigationButton variant="secondary" onClick={() => navigateTo.receivePage()} label={strings.receive} />
+          </Stack>
+        </Header>
+
+        <Stack direction="column" spacing={theme.spacing(3)} sx={{ marginTop: theme.spacing(2) }}>
+          <TokenInfo direction={isPrimaryToken ? 'row' : 'column'} spacing={theme.spacing(3)}>
+            <Card>
+              <HeaderSection tokenInfo={tokenInfo} stores={stores} />
+              <Divider />
+              <TokenChartInterval tokenInfo={tokenInfo} />
+            </Card>
+
+            <OverviewPerformance tokenInfo={tokenInfo} />
+          </TokenInfo>
+
+          {/* <TransactionTable history={mockData.transactionHistory} tokenName={tokenInfo.name} /> */}
         </Stack>
-      </Header>
-
-      <Stack direction="column" spacing={theme.spacing(3)} sx={{ marginTop: theme.spacing(2) }}>
-        <TokenInfo direction={isPrimaryToken ? 'row' : 'column'} spacing={theme.spacing(3)}>
-          <Card>
-            <HeaderSection tokenInfo={tokenInfo} stores={stores} />
-            <Divider />
-            <TokenChartInterval tokenInfo={tokenInfo} />
-          </Card>
-
-          <OverviewPerformance tokenInfo={tokenInfo} />
-        </TokenInfo>
-
-        {/* <TransactionTable history={mockData.transactionHistory} tokenName={tokenInfo.name} /> */}
-      </Stack>
-    </Box>
-  );
-};
+      </Box>
+    );
+  }
+);
 
 export default TokenDetails;
diff --git a/packages/yoroi-extension/app/UI/utils/createCurrentWalletInfo.ts b/packages/yoroi-extension/app/UI/utils/createCurrentWalletInfo.ts
index 707415e9b8..5752b5e34c 100644
--- a/packages/yoroi-extension/app/UI/utils/createCurrentWalletInfo.ts
+++ b/packages/yoroi-extension/app/UI/utils/createCurrentWalletInfo.ts
@@ -6,25 +6,7 @@ import { genLookupOrFail, getTokenIdentifierIfExists, getTokenStrictName } from
 import { splitAmount, truncateToken } from '../../utils/formatters.js';
 import { cardanoAdaBase64Logo } from '../features/portfolio/common/helpers/constants';
 import { CurrentWalletType } from '../types/currrentWallet';
-
-// TODO To be added and constructed from wallet apo
-const primaryTokenFullInfo = {
-  application: 'coin',
-  decimals: 6,
-  description: 'Cardano',
-  fingerprint: '',
-  id: '.',
-  name: 'ADA',
-  nature: 'primary',
-  originalImage: '',
-  reference: '',
-  status: 'valid',
-  symbol: '₳',
-  tag: '',
-  ticker: 'ADA',
-  type: 'ft',
-  website: 'https://www.cardano.org/',
-};
+import { networkConfigs } from './network-config';
 
 export const mapStakingKeyStateToGovernanceAction = (state: any) => {
   if (!state.drepDelegation) return null;
@@ -183,6 +165,7 @@ export const createCurrrentWalletInfo = (stores: any): CurrentWalletType | undef
 
     const selectedExplorer = explorers.selectedExplorer.get(networkId);
     const explorerTransactionInfo = selectedExplorer.getOrDefault('token');
+    const primaryTokenInfo = networkConfigs[networkId].primaryTokenInfo;
 
     return {
       currentPool: walletCurrentPoolInfo,
@@ -197,7 +180,7 @@ export const createCurrrentWalletInfo = (stores: any): CurrentWalletType | undef
       backendService: BackendService,
       backendServiceZero: BackendServiceZero,
       isHardwareWallet: isHardware,
-      primaryTokenInfo: { ...primaryTokenFullInfo, quantity: shiftedAmount },
+      primaryTokenInfo: { ...primaryTokenInfo, quantity: shiftedAmount },
       stakingAddress: selectedWallet.stakingAddress,
       walletBalance: {
         ada: `${beforeDecimalRewards}${afterDecimalRewards}`,
diff --git a/packages/yoroi-extension/app/UI/utils/network-config.ts b/packages/yoroi-extension/app/UI/utils/network-config.ts
new file mode 100644
index 0000000000..6621d16d08
--- /dev/null
+++ b/packages/yoroi-extension/app/UI/utils/network-config.ts
@@ -0,0 +1,95 @@
+import { createPrimaryTokenInfo } from '@yoroi/portfolio';
+import { Chain, Network } from '@yoroi/types';
+import { freeze } from 'immer';
+
+export const primaryTokenInfoMainnet = createPrimaryTokenInfo({
+  decimals: 6,
+  name: 'ADA',
+  ticker: 'ADA',
+  symbol: '₳',
+  reference: '',
+  tag: '',
+  website: 'https://www.cardano.org/',
+  originalImage: '',
+  description: 'Cardano',
+});
+
+const primaryTokenInfoAnyTestnet = createPrimaryTokenInfo({
+  decimals: 6,
+  name: 'TADA',
+  ticker: 'TADA',
+  symbol: '₳',
+  reference: '',
+  tag: '',
+  website: 'https://www.cardano.org/',
+  originalImage: '',
+  description: 'Cardano',
+});
+
+export const shelleyEraConfig: Readonly<Network.EraConfig> = freeze(
+  {
+    name: 'shelley',
+    start: new Date('2020-07-29T21:44:51.000Z'),
+    end: undefined,
+    slotInSeconds: 1,
+    slotsPerEpoch: 432000,
+  },
+  true
+);
+
+export const byronEraConfig: Readonly<Network.EraConfig> = freeze(
+  {
+    name: 'byron',
+    start: new Date('2017-09-23T21:44:51.000Z'),
+    end: new Date('2020-07-29T21:44:51.000Z'),
+    slotInSeconds: 20,
+    slotsPerEpoch: 21600,
+  },
+  true
+);
+
+export const shelleyPreprodEraConfig: Readonly<Network.EraConfig> = freeze(
+  {
+    name: 'shelley',
+    start: new Date('2022-06-01T01:00:00.000Z'),
+    end: undefined,
+    slotInSeconds: 1,
+    slotsPerEpoch: 432000,
+  },
+  true
+);
+
+export const networkConfigs = {
+  0: {
+    network: Chain.Network.Mainnet,
+    primaryTokenInfo: primaryTokenInfoMainnet,
+    chainId: 1,
+    protocolMagic: 764_824_073,
+    eras: [byronEraConfig, shelleyEraConfig],
+    name: 'Mainnet',
+    isMainnet: true,
+
+    legacyApiBaseUrl: 'https://api.yoroiwallet.com/api',
+  },
+  250: {
+    network: Chain.Network.Preprod,
+    primaryTokenInfo: primaryTokenInfoAnyTestnet,
+    chainId: 0,
+    protocolMagic: 1,
+    eras: [shelleyPreprodEraConfig],
+    name: 'Preprod',
+    isMainnet: false,
+
+    legacyApiBaseUrl: 'https://preprod-backend.yoroiwallet.com/api',
+  },
+  350: {
+    network: Chain.Network.Preview,
+    primaryTokenInfo: primaryTokenInfoAnyTestnet,
+    chainId: 0,
+    protocolMagic: 2,
+    eras: [shelleyEraConfig],
+    name: 'Preview',
+    isMainnet: false,
+    legacyApiBaseUrl: 'https://preview-backend.emurgornd.com/api',
+  },
+};