Skip to content

Commit 2e79284

Browse files
cermakjiricermakjiri
committed
WIP
1 parent 631733c commit 2e79284

File tree

36 files changed

+1245
-310
lines changed

36 files changed

+1245
-310
lines changed

‎packages/product-components/src/components/TopAssets/TopAssets.tsx‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import styled from 'styled-components';
22

3-
import { NetworkSymbol, NetworkSymbolExtended } from '@suite-common/wallet-config';
43
import { Text } from '@trezor/components';
54
import { borders, spacings, spacingsPx } from '@trezor/theme';
65

7-
import { LegacyNetworkSymbol, isNetworkSymbolWithIcon } from '../../constants/networks';
86
import { AssetLogo, AssetLogoProps } from '../AssetLogo/AssetLogo';
97
import { CoinLogo } from '../CoinLogo/CoinLogo';
108

@@ -17,7 +15,12 @@ const Container = styled.div<{ $itemsCount: number }>`
1715
width: 100%;
1816
`;
1917

20-
const Item = styled('div')<{ $isLast: boolean }>`
18+
const Item = styled('button')<{ $isLast: boolean }>`
19+
border: unset;
20+
background: unset;
21+
box-shadow: unset;
22+
cursor: pointer;
23+
2124
border-right: ${({ $isLast, theme }) => !$isLast && `1px solid ${theme.borderElevation1}`};
2225
width: 100%;
2326
display: flex;
@@ -29,45 +32,43 @@ const Item = styled('div')<{ $isLast: boolean }>`
2932
padding: ${spacings.xs * 1.25}px ${spacings.xs * 1.5}px ${spacings.xs * 0.75}px;
3033
`;
3134

32-
export type Asset =
33-
| {
34-
symbol: NetworkSymbolExtended;
35-
contractAddress: string;
36-
coingeckoId: string;
37-
}
38-
| {
39-
symbol: NetworkSymbol | LegacyNetworkSymbol;
40-
contractAddress: null;
41-
coingeckoId: null;
42-
};
35+
export type Asset = {
36+
id: string;
37+
symbol: string;
38+
contractAddress: string | null;
39+
coingeckoId: string;
40+
isNativeToken: boolean;
41+
};
42+
4343
export interface TopAssetsProps {
4444
assets: Asset[];
45-
logoSize: AssetLogoProps['size'];
45+
onAssetClick: (asset: Asset) => void;
46+
logoSize?: AssetLogoProps['size'];
47+
className?: string;
4648
}
4749

48-
export function TopAssets({ assets, logoSize = 40 }: TopAssetsProps) {
50+
export function TopAssets({ assets, logoSize = 40, onAssetClick, className }: TopAssetsProps) {
4951
return (
50-
<Container $itemsCount={assets.length}>
52+
<Container $itemsCount={assets.length} className={className}>
5153
{assets.map((asset, index) => {
5254
const displaySymbol = asset.symbol.toUpperCase();
5355

5456
return (
5557
<Item
56-
key={`${asset.coingeckoId}${asset.contractAddress}`}
58+
key={asset.id}
5759
$isLast={index === assets.length - 1}
60+
onClick={() => onAssetClick(asset)}
5861
>
59-
{isNetworkSymbolWithIcon(asset.symbol) &&
60-
!asset.contractAddress &&
61-
!asset.coingeckoId ? (
62+
{asset.isNativeToken ? (
6263
<CoinLogo
6364
size={logoSize}
65+
// @ts-expect-error
6466
symbol={asset.symbol}
6567
type="tokenWithNetwork"
6668
/>
6769
) : (
6870
<AssetLogo
6971
size={logoSize}
70-
// @ts-expect-error
7172
coingeckoId={asset.coingeckoId}
7273
symbol={asset.symbol}
7374
contractAddress={asset.contractAddress}

‎packages/product-components/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,4 @@ export { getModelFrontColor, getLargeModelImagePath } from './utils/getModelFron
3535
export { DataAnalytics } from './components/DataAnalytics';
3636
export { AssetLogo, type AssetLogoProps } from './components/AssetLogo/AssetLogo';
3737
export { isNetworkSymbolWithIcon } from './constants/networks';
38+
export * from './components/TopAssets/TopAssets';

‎packages/suite-web/src/support/webComponents.ts‎

Lines changed: 141 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -3,155 +3,155 @@ import { ComponentType, LazyExoticComponent, lazy } from 'react';
33
import { PageName } from '@suite-common/suite-types';
44

55
export const webComponents: Record<PageName, LazyExoticComponent<ComponentType>> = {
6-
'suite-index': lazy(() =>
7-
import(/* webpackChunkName: "dashboard" */ 'src/views/dashboard/index').then(
8-
({ Dashboard }) => ({ default: Dashboard }),
9-
),
10-
),
11-
'suite-connect-popup': lazy(() =>
12-
import(/* webpackChunkName: "connect-popup" */ 'src/views/connect-popup/index').then(
13-
({ ConnectPopup }) => ({ default: ConnectPopup }),
14-
),
15-
),
16-
'notifications-index': lazy(
17-
() => import(/* webpackChunkName: "notifications" */ 'src/views/suite/notifications'),
18-
),
6+
// 'suite-index': lazy(() =>
7+
// import(/* webpackChunkName: "dashboard" */ 'src/views/dashboard/index').then(
8+
// ({ Dashboard }) => ({ default: Dashboard }),
9+
// ),
10+
// ),
11+
// 'suite-connect-popup': lazy(() =>
12+
// import(/* webpackChunkName: "connect-popup" */ 'src/views/connect-popup/index').then(
13+
// ({ ConnectPopup }) => ({ default: ConnectPopup }),
14+
// ),
15+
// ),
16+
// 'notifications-index': lazy(
17+
// () => import(/* webpackChunkName: "notifications" */ 'src/views/suite/notifications'),
18+
// ),
1919

20-
// wallet
21-
'wallet-index': lazy(() =>
22-
import(/* webpackChunkName: "wallet" */ 'src/views/wallet/transactions/Transactions').then(
23-
({ Transactions }) => ({ default: Transactions }),
24-
),
25-
),
26-
'wallet-receive': lazy(() =>
27-
import(/* webpackChunkName: "wallet" */ 'src/views/wallet/receive/Receive').then(
28-
({ Receive }) => ({ default: Receive }),
29-
),
30-
),
31-
'wallet-details': lazy(
32-
() => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/details'),
33-
),
34-
'wallet-tokens': lazy(() => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/tokens')),
35-
'wallet-nfts': lazy(() => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/nfts')),
36-
'wallet-send': lazy(() => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/send')),
37-
'wallet-staking': lazy(() =>
38-
import(/* webpackChunkName: "wallet" */ 'src/views/wallet/staking/WalletStaking').then(
39-
({ WalletStaking }) => ({ default: WalletStaking }),
40-
),
41-
),
42-
'wallet-sign-verify': lazy(
43-
() => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/sign-verify'),
44-
),
45-
'wallet-anonymize': lazy(
46-
() => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/anonymize'),
47-
),
20+
// // wallet
21+
// 'wallet-index': lazy(() =>
22+
// import(/* webpackChunkName: "wallet" */ 'src/views/wallet/transactions/Transactions').then(
23+
// ({ Transactions }) => ({ default: Transactions }),
24+
// ),
25+
// ),
26+
// 'wallet-receive': lazy(() =>
27+
// import(/* webpackChunkName: "wallet" */ 'src/views/wallet/receive/Receive').then(
28+
// ({ Receive }) => ({ default: Receive }),
29+
// ),
30+
// ),
31+
// 'wallet-details': lazy(
32+
// () => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/details'),
33+
// ),
34+
// 'wallet-tokens': lazy(() => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/tokens')),
35+
// 'wallet-nfts': lazy(() => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/nfts')),
36+
// 'wallet-send': lazy(() => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/send')),
37+
// 'wallet-staking': lazy(() =>
38+
// import(/* webpackChunkName: "wallet" */ 'src/views/wallet/staking/WalletStaking').then(
39+
// ({ WalletStaking }) => ({ default: WalletStaking }),
40+
// ),
41+
// ),
42+
// 'wallet-sign-verify': lazy(
43+
// () => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/sign-verify'),
44+
// ),
45+
// 'wallet-anonymize': lazy(
46+
// () => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/anonymize'),
47+
// ),
4848

4949
// trading
50-
'wallet-trading-buy': lazy(() =>
51-
import(
52-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/buy/TradingBuyForm'
53-
).then(({ TradingBuyForm }) => ({ default: TradingBuyForm })),
54-
),
55-
'wallet-trading-buy-detail': lazy(() =>
56-
import(
57-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/buy/TradingBuyDetail'
58-
).then(({ TradingBuyDetail }) => ({ default: TradingBuyDetail })),
59-
),
60-
'wallet-trading-buy-offers': lazy(() =>
61-
import(
62-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/buy/TradingBuyOffers'
63-
).then(({ TradingBuyOffers }) => ({ default: TradingBuyOffers })),
64-
),
65-
'wallet-trading-buy-confirm': lazy(() =>
66-
import(
67-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/buy/TradingBuyConfirm'
68-
).then(({ TradingBuyConfirm }) => ({ default: TradingBuyConfirm })),
69-
),
70-
'wallet-trading-sell': lazy(() =>
71-
import(
72-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/sell/TradingSellForm'
73-
).then(({ TradingSellForm }) => ({ default: TradingSellForm })),
74-
),
75-
'wallet-trading-sell-detail': lazy(() =>
76-
import(
77-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/sell/TradingSellDetail'
78-
).then(({ TradingSellDetail }) => ({ default: TradingSellDetail })),
79-
),
80-
'wallet-trading-sell-offers': lazy(() =>
81-
import(
82-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/sell/TradingSellOffers'
83-
).then(({ TradingSellOffers }) => ({ default: TradingSellOffers })),
84-
),
85-
'wallet-trading-sell-confirm': lazy(() =>
86-
import(
87-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/sell/TradingSellConfirm'
88-
).then(({ TradingSellConfirm }) => ({ default: TradingSellConfirm })),
89-
),
50+
// 'wallet-trading-buy': lazy(() =>
51+
// import(
52+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/buy/TradingBuyForm'
53+
// ).then(({ TradingBuyForm }) => ({ default: TradingBuyForm })),
54+
// ),
55+
// 'wallet-trading-buy-detail': lazy(() =>
56+
// import(
57+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/buy/TradingBuyDetail'
58+
// ).then(({ TradingBuyDetail }) => ({ default: TradingBuyDetail })),
59+
// ),
60+
// 'wallet-trading-buy-offers': lazy(() =>
61+
// import(
62+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/buy/TradingBuyOffers'
63+
// ).then(({ TradingBuyOffers }) => ({ default: TradingBuyOffers })),
64+
// ),
65+
// 'wallet-trading-buy-confirm': lazy(() =>
66+
// import(
67+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/buy/TradingBuyConfirm'
68+
// ).then(({ TradingBuyConfirm }) => ({ default: TradingBuyConfirm })),
69+
// ),
70+
// 'wallet-trading-sell': lazy(() =>
71+
// import(
72+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/sell/TradingSellForm'
73+
// ).then(({ TradingSellForm }) => ({ default: TradingSellForm })),
74+
// ),
75+
// 'wallet-trading-sell-detail': lazy(() =>
76+
// import(
77+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/sell/TradingSellDetail'
78+
// ).then(({ TradingSellDetail }) => ({ default: TradingSellDetail })),
79+
// ),
80+
// 'wallet-trading-sell-offers': lazy(() =>
81+
// import(
82+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/sell/TradingSellOffers'
83+
// ).then(({ TradingSellOffers }) => ({ default: TradingSellOffers })),
84+
// ),
85+
// 'wallet-trading-sell-confirm': lazy(() =>
86+
// import(
87+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/sell/TradingSellConfirm'
88+
// ).then(({ TradingSellConfirm }) => ({ default: TradingSellConfirm })),
89+
// ),
9090
'wallet-trading-exchange': lazy(() =>
9191
import(
9292
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/exchange/TradingExchangeForm'
9393
).then(({ TradingExchangeForm }) => ({ default: TradingExchangeForm })),
9494
),
95-
'wallet-trading-exchange-detail': lazy(() =>
96-
import(
97-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/exchange/TradingExchangeDetail'
98-
).then(({ TradingExchangeDetail }) => ({ default: TradingExchangeDetail })),
99-
),
100-
'wallet-trading-exchange-offers': lazy(() =>
101-
import(
102-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/exchange/TradingExchangeOffers'
103-
).then(({ TradingExchangeOffers }) => ({ default: TradingExchangeOffers })),
104-
),
105-
'wallet-trading-exchange-confirm': lazy(() =>
106-
import(
107-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/exchange/TradingExchangeConfirm'
108-
).then(({ TradingExchangeConfirm }) => ({ default: TradingExchangeConfirm })),
109-
),
110-
'wallet-trading-dca': lazy(() =>
111-
import(
112-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/DCA/TradingDCALanding'
113-
).then(({ TradingDCALanding }) => ({ default: TradingDCALanding })),
114-
),
115-
'wallet-trading-redirect': lazy(() =>
116-
import(
117-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/redirect/TradingRedirect'
118-
).then(({ TradingRedirect }) => ({ default: TradingRedirect })),
119-
),
120-
'wallet-trading-transactions': lazy(() =>
121-
import(
122-
/* webpackChunkName: "trading" */ 'src/views/wallet/trading/transactions/TradingTransactions'
123-
).then(({ TradingTransactions }) => ({ default: TradingTransactions })),
124-
),
95+
// 'wallet-trading-exchange-detail': lazy(() =>
96+
// import(
97+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/exchange/TradingExchangeDetail'
98+
// ).then(({ TradingExchangeDetail }) => ({ default: TradingExchangeDetail })),
99+
// ),
100+
// 'wallet-trading-exchange-offers': lazy(() =>
101+
// import(
102+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/exchange/TradingExchangeOffers'
103+
// ).then(({ TradingExchangeOffers }) => ({ default: TradingExchangeOffers })),
104+
// ),
105+
// 'wallet-trading-exchange-confirm': lazy(() =>
106+
// import(
107+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/exchange/TradingExchangeConfirm'
108+
// ).then(({ TradingExchangeConfirm }) => ({ default: TradingExchangeConfirm })),
109+
// ),
110+
// 'wallet-trading-dca': lazy(() =>
111+
// import(
112+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/DCA/TradingDCALanding'
113+
// ).then(({ TradingDCALanding }) => ({ default: TradingDCALanding })),
114+
// ),
115+
// 'wallet-trading-redirect': lazy(() =>
116+
// import(
117+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/redirect/TradingRedirect'
118+
// ).then(({ TradingRedirect }) => ({ default: TradingRedirect })),
119+
// ),
120+
// 'wallet-trading-transactions': lazy(() =>
121+
// import(
122+
// /* webpackChunkName: "trading" */ 'src/views/wallet/trading/transactions/TradingTransactions'
123+
// ).then(({ TradingTransactions }) => ({ default: TradingTransactions })),
124+
// ),
125125

126-
// password-manager
127-
'password-manager-index': lazy(
128-
() => import(/* webpackChunkName: "password-manager" */ 'src/views/password-manager'),
129-
),
126+
// // password-manager
127+
// 'password-manager-index': lazy(
128+
// () => import(/* webpackChunkName: "password-manager" */ 'src/views/password-manager'),
129+
// ),
130130

131-
// settings
132-
'settings-index': lazy(() =>
133-
import(
134-
/* webpackChunkName: "settings" */ 'src/views/settings/SettingsGeneral/SettingsGeneral'
135-
).then(({ SettingsGeneral }) => ({ default: SettingsGeneral })),
136-
),
137-
'settings-coins': lazy(() =>
138-
import(
139-
/* webpackChunkName: "settings" */ 'src/views/settings/SettingsCoins/SettingsCoins'
140-
).then(({ SettingsCoins }) => ({ default: SettingsCoins })),
141-
),
142-
'settings-debug': lazy(() =>
143-
import(
144-
/* webpackChunkName: "settings" */ 'src/views/settings/SettingsDebug/SettingsDebug'
145-
).then(({ SettingsDebug }) => ({ default: SettingsDebug })),
146-
),
147-
'settings-device': lazy(() =>
148-
import(
149-
/* webpackChunkName: "settings" */ 'src/views/settings/SettingsDevice/SettingsDevice'
150-
).then(({ SettingsDevice }) => ({ default: SettingsDevice })),
151-
),
152-
'settings-connected-apps': lazy(() =>
153-
import(
154-
/* webpackChunkName: "settings" */ 'src/views/settings/SettingsConnectedApps/SettingsConnectedApps'
155-
).then(({ SettingsConnectedApps }) => ({ default: SettingsConnectedApps })),
156-
),
131+
// // settings
132+
// 'settings-index': lazy(() =>
133+
// import(
134+
// /* webpackChunkName: "settings" */ 'src/views/settings/SettingsGeneral/SettingsGeneral'
135+
// ).then(({ SettingsGeneral }) => ({ default: SettingsGeneral })),
136+
// ),
137+
// 'settings-coins': lazy(() =>
138+
// import(
139+
// /* webpackChunkName: "settings" */ 'src/views/settings/SettingsCoins/SettingsCoins'
140+
// ).then(({ SettingsCoins }) => ({ default: SettingsCoins })),
141+
// ),
142+
// 'settings-debug': lazy(() =>
143+
// import(
144+
// /* webpackChunkName: "settings" */ 'src/views/settings/SettingsDebug/SettingsDebug'
145+
// ).then(({ SettingsDebug }) => ({ default: SettingsDebug })),
146+
// ),
147+
// 'settings-device': lazy(() =>
148+
// import(
149+
// /* webpackChunkName: "settings" */ 'src/views/settings/SettingsDevice/SettingsDevice'
150+
// ).then(({ SettingsDevice }) => ({ default: SettingsDevice })),
151+
// ),
152+
// 'settings-connected-apps': lazy(() =>
153+
// import(
154+
// /* webpackChunkName: "settings" */ 'src/views/settings/SettingsConnectedApps/SettingsConnectedApps'
155+
// ).then(({ SettingsConnectedApps }) => ({ default: SettingsConnectedApps })),
156+
// ),
157157
};

0 commit comments

Comments
 (0)