From e3965af3552d6a772d37d93357bee710dd7d0e5b Mon Sep 17 00:00:00 2001 From: ost-ptk Date: Tue, 10 Sep 2024 14:33:51 +0300 Subject: [PATCH 1/4] add csprName support, update the home page and header, remove unused code --- package-lock.json | 24 ++-- package.json | 2 +- src/apps/popup/index.tsx | 28 ++-- .../popup/pages/account-settings/content.tsx | 24 ++-- src/apps/popup/pages/all-accounts/content.tsx | 16 ++- .../contacts/components}/contacts-plate.tsx | 25 +++- .../{ => components}/empty-contacts.tsx | 0 src/apps/popup/pages/contacts/content.tsx | 17 ++- .../popup/pages/deploy-details/content.tsx | 1 + src/apps/popup/pages/home/index.tsx | 50 +------ src/apps/popup/pages/nft-details/content.tsx | 1 + ...nnected-dark-big.svg => connected-big.svg} | 2 +- src/assets/icons/connected-light-big.svg | 3 - src/assets/icons/connected-light.svg | 3 - .../{connected-dark.svg => connected.svg} | 2 +- src/background/index.ts | 76 +--------- src/background/redux/vault/selectors.ts | 3 + src/background/service-message.ts | 37 +---- src/background/wallet-repositories.ts | 5 +- src/hooks/use-fetch-account-info.ts | 48 ------- src/libs/layout/containers.ts | 5 +- .../header-background-container.tsx | 29 ++++ src/libs/layout/header/header-actions.tsx | 34 +++-- .../header/header-connection-status.tsx | 82 ++++++----- .../layout/header/header-network-switcher.tsx | 23 +-- .../account-activity-service/constants.ts | 7 - .../erc20-token-activity-service.ts | 70 --------- .../extended-deploys-service.ts | 37 +---- .../account-activity-service/index.ts | 1 - .../account-activity-service/types.ts | 71 --------- .../services/account-info/account-info.ts | 41 ------ src/libs/services/account-info/constants.ts | 7 - src/libs/services/account-info/index.ts | 5 +- src/libs/services/account-info/types.ts | 74 ---------- .../account-info/use-fetch-account-info.ts | 32 +++++ src/libs/services/account-info/utils.ts | 27 ---- ...fetch-deploys.tsx => use-fetch-deploys.ts} | 0 src/libs/types/account.ts | 4 + .../account-list/account-list-item.tsx | 19 ++- .../components/account-list/account-list.tsx | 16 ++- src/libs/ui/components/avatar/avatar.tsx | 136 +++++++++++++----- src/libs/ui/components/hash/hash.tsx | 32 ++++- src/libs/ui/components/index.ts | 1 - src/libs/ui/components/modal/modal.tsx | 50 +++---- .../no-activity-view/no-activity-view.tsx | 8 +- 45 files changed, 430 insertions(+), 748 deletions(-) rename src/{libs/ui/components/contacts-plate => apps/popup/pages/contacts/components}/contacts-plate.tsx (55%) rename src/apps/popup/pages/contacts/{ => components}/empty-contacts.tsx (100%) rename src/assets/icons/{connected-dark-big.svg => connected-big.svg} (64%) delete mode 100644 src/assets/icons/connected-light-big.svg delete mode 100644 src/assets/icons/connected-light.svg rename src/assets/icons/{connected-dark.svg => connected.svg} (56%) delete mode 100644 src/hooks/use-fetch-account-info.ts create mode 100644 src/libs/layout/header/components/header-background-container.tsx delete mode 100644 src/libs/services/account-activity-service/constants.ts delete mode 100644 src/libs/services/account-activity-service/erc20-token-activity-service.ts delete mode 100644 src/libs/services/account-info/account-info.ts delete mode 100644 src/libs/services/account-info/constants.ts delete mode 100644 src/libs/services/account-info/types.ts create mode 100644 src/libs/services/account-info/use-fetch-account-info.ts delete mode 100644 src/libs/services/account-info/utils.ts rename src/libs/services/deploys/{use-fetch-deploys.tsx => use-fetch-deploys.ts} (100%) diff --git a/package-lock.json b/package-lock.json index a063d4047..ddc204041 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "big.js": "^6.2.1", "casper-cep18-js-client": "1.0.2", "casper-js-sdk": "2.15.4", - "casper-wallet-core": "git+ssh://git@github.com:make-software/casper-wallet-core.git#v0.9.1", + "casper-wallet-core": "git+ssh://git@github.com:make-software/casper-wallet-core.git#v0.9.2", "date-fns": "^2.30.0", "i18next": "^23.11.0", "i18next-browser-languagedetector": "^7.2.1", @@ -9391,9 +9391,9 @@ } }, "node_modules/axios": { - "version": "1.7.4", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz", - "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==", + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", + "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.0", @@ -10599,9 +10599,9 @@ } }, "node_modules/casper-wallet-core": { - "name": "CasperWalletCommon", - "version": "0.1.0", - "resolved": "git+ssh://git@github.com/make-software/casper-wallet-core.git#1f3412b784ceea227cc2aa721ec0c835fdebb24a", + "name": "CasperWalletCore", + "version": "0.9.2", + "resolved": "git+ssh://git@github.com/make-software/casper-wallet-core.git#2273287e0e46a4fb8731f6a78df5ccfe9c6de20d", "dependencies": { "@make-software/ces-js-parser": "^1.3.3", "@react-native/typescript-config": "0.74.83", @@ -36848,9 +36848,9 @@ "dev": true }, "axios": { - "version": "1.7.4", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz", - "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==", + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", + "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", "requires": { "follow-redirects": "^1.15.6", "form-data": "^4.0.0", @@ -37770,8 +37770,8 @@ } }, "casper-wallet-core": { - "version": "git+ssh://git@github.com/make-software/casper-wallet-core.git#1f3412b784ceea227cc2aa721ec0c835fdebb24a", - "from": "casper-wallet-core@git+ssh://git@github.com:make-software/casper-wallet-core.git#v0.9.1", + "version": "git+ssh://git@github.com/make-software/casper-wallet-core.git#2273287e0e46a4fb8731f6a78df5ccfe9c6de20d", + "from": "casper-wallet-core@git+ssh://git@github.com:make-software/casper-wallet-core.git#v0.9.2", "requires": { "@make-software/ces-js-parser": "^1.3.3", "@react-native/typescript-config": "0.74.83", diff --git a/package.json b/package.json index 43e62035e..c270a4a41 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "big.js": "^6.2.1", "casper-cep18-js-client": "1.0.2", "casper-js-sdk": "2.15.4", - "casper-wallet-core": "git+ssh://git@github.com:make-software/casper-wallet-core.git#v0.9.1", + "casper-wallet-core": "git+ssh://git@github.com:make-software/casper-wallet-core.git#v0.9.2", "date-fns": "^2.30.0", "i18next": "^23.11.0", "i18next-browser-languagedetector": "^7.2.1", diff --git a/src/apps/popup/index.tsx b/src/apps/popup/index.tsx index 3ca701e98..2d0c31db7 100644 --- a/src/apps/popup/index.tsx +++ b/src/apps/popup/index.tsx @@ -24,23 +24,23 @@ import { GlobalStyle, darkTheme, lightTheme } from '@libs/ui'; import { AppRouter } from './app-router'; +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + staleTime: 3 * 60 * 1000, + refetchInterval: 3 * 60 * 1000, + gcTime: 3 * 60 * 1000, + retry: false + }, + mutations: { + retry: false + } + } +}); + const Tree = () => { const [state, setState] = useState(null); - const queryClient = new QueryClient({ - defaultOptions: { - queries: { - staleTime: 3 * 60 * 1000, - refetchInterval: 3 * 60 * 1000, - gcTime: 3 * 60 * 1000, - retry: false - }, - mutations: { - retry: false - } - } - }); - setCSPForSafari(); const isSystemDarkTheme = useSystemThemeDetector(); diff --git a/src/apps/popup/pages/account-settings/content.tsx b/src/apps/popup/pages/account-settings/content.tsx index 06faef44a..f27ea0f29 100644 --- a/src/apps/popup/pages/account-settings/content.tsx +++ b/src/apps/popup/pages/account-settings/content.tsx @@ -17,8 +17,6 @@ import { selectVaultLedgerAccountNames } from '@background/redux/vault/selectors'; -import { useFetchAccountInfo } from '@hooks/use-fetch-account-info'; - import { getAccountHashFromPublicKey } from '@libs/entities/Account'; import { ContentContainer, @@ -27,6 +25,7 @@ import { TileContainer, VerticalSpaceContainer } from '@libs/layout'; +import { useFetchAccountInfo } from '@libs/services/account-info'; import { Hash, HashVariant, @@ -49,7 +48,9 @@ export function AccountSettingsPageContent() { } const accountHash = getAccountHashFromPublicKey(account.publicKey); - const { accountInfoStandardName } = useFetchAccountInfo(account); + const accountInfo = useFetchAccountInfo([account.publicKey]); + + const csprName = accountInfo && accountInfo[accountHash]?.csprName; return ( <> @@ -57,11 +58,6 @@ export function AccountSettingsPageContent() { {account.name} - {accountInfoStandardName && ( - - {accountInfoStandardName} - - )} + {csprName ? ( + + + + CSPR.name + + + {csprName} + + + + ) : null} diff --git a/src/apps/popup/pages/all-accounts/content.tsx b/src/apps/popup/pages/all-accounts/content.tsx index 63bbefc16..d22115a4b 100644 --- a/src/apps/popup/pages/all-accounts/content.tsx +++ b/src/apps/popup/pages/all-accounts/content.tsx @@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'; import { selectConnectedAccountNamesWithActiveOrigin, + selectVaultAccountsPublicKeys, selectVaultActiveAccountName, selectVaultHiddenAccounts, selectVaultVisibleAccounts @@ -11,17 +12,21 @@ import { import { getAccountHashFromPublicKey } from '@libs/entities/Account'; import { ContentContainer, SpacingSize } from '@libs/layout'; -import { AccountListRows } from '@libs/types/account'; +import { useFetchAccountInfo } from '@libs/services/account-info'; +import { + AccountListRowWithAccountHash, + AccountListRows +} from '@libs/types/account'; import { List } from '@libs/ui/components'; import { AccountListItem } from '@libs/ui/components/account-list/account-list-item'; import { sortAccounts } from '@libs/ui/components/account-list/utils'; export const AllAccountsContent = () => { const [visibleAccountsWithId, setVisibleAccountsWithId] = useState< - AccountListRows[] + AccountListRowWithAccountHash[] >([]); const [hiddenAccountsWithId, setHiddeAccountsWithId] = useState< - AccountListRows[] + AccountListRowWithAccountHash[] >([]); const { t } = useTranslation(); @@ -31,6 +36,9 @@ export const AllAccountsContent = () => { const connectedAccountNames = useSelector(selectConnectedAccountNamesWithActiveOrigin) || []; const activeAccountName = useSelector(selectVaultActiveAccountName); + const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys); + + const accountInfo = useFetchAccountInfo(accountsPublicKeys); useEffect(() => { const visibleAccountListRows = sortAccounts( @@ -77,6 +85,7 @@ export const AllAccountsContent = () => { isActiveAccount={isActiveAccount} isConnected={isConnected} showHideAccountItem + accountInfo={accountInfo} /> ); }} @@ -97,6 +106,7 @@ export const AllAccountsContent = () => { isActiveAccount={false} isConnected={isConnected} showHideAccountItem + accountInfo={accountInfo} /> ); }} diff --git a/src/libs/ui/components/contacts-plate/contacts-plate.tsx b/src/apps/popup/pages/contacts/components/contacts-plate.tsx similarity index 55% rename from src/libs/ui/components/contacts-plate/contacts-plate.tsx rename to src/apps/popup/pages/contacts/components/contacts-plate.tsx index 6ecae6148..0d5dd6c11 100644 --- a/src/libs/ui/components/contacts-plate/contacts-plate.tsx +++ b/src/apps/popup/pages/contacts/components/contacts-plate.tsx @@ -1,9 +1,13 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import styled from 'styled-components'; import { RouterPath, useTypedNavigate } from '@popup/router'; +import { selectAllPublicKeys } from '@background/redux/contacts/selectors'; + import { AlignedFlexRow, FlexColumn, SpacingSize } from '@libs/layout'; +import { useFetchAccountInfo } from '@libs/services/account-info'; import { Avatar, Hash, HashVariant, Typography } from '@libs/ui/components'; const Container = styled(AlignedFlexRow)` @@ -15,11 +19,22 @@ const Container = styled(AlignedFlexRow)` interface ContactsPlateProps { publicKey: string; name: string; + accountHash: string; } -export const ContactsPlate = ({ publicKey, name }: ContactsPlateProps) => { +export const ContactsPlate = ({ + publicKey, + name, + accountHash +}: ContactsPlateProps) => { const navigate = useTypedNavigate(); + const contactPublicKeys = useSelector(selectAllPublicKeys); + const accountInfo = useFetchAccountInfo(contactPublicKeys); + + const csprName = accountInfo && accountInfo[accountHash]?.csprName; + const brandingLogo = accountInfo && accountInfo[accountHash]?.brandingLogo; + return ( { navigate(RouterPath.ContactDetails.replace(':contactName', name)); }} > - + {name} { @@ -25,7 +27,8 @@ export const ContactsBookPageContent = () => { const contactsWithId = contacts.map((contact, index) => ({ ...contact, - id: index + id: index, + accountHash: getAccountHashFromPublicKey(contact.publicKey) })); if (contactsWithId.length === 0) { @@ -50,8 +53,12 @@ export const ContactsBookPageContent = () => { )} ( - + renderRow={({ publicKey, name, accountHash }) => ( + )} marginLeftForItemSeparatorLine={54} /> diff --git a/src/apps/popup/pages/deploy-details/content.tsx b/src/apps/popup/pages/deploy-details/content.tsx index 95fc99f24..aa1676a70 100644 --- a/src/apps/popup/pages/deploy-details/content.tsx +++ b/src/apps/popup/pages/deploy-details/content.tsx @@ -77,6 +77,7 @@ export const DeployDetailsPageContent = ({ useEffect(() => { if (deploy?.deployHash && activeAccount?.publicKey) { + // TODO: rewrite this to hook and move to deploys service dispatchFetchExtendedDeploysInfo( deploy.deployHash, activeAccount?.publicKey diff --git a/src/apps/popup/pages/home/index.tsx b/src/apps/popup/pages/home/index.tsx index 6a9df44a9..86ebfff5b 100644 --- a/src/apps/popup/pages/home/index.tsx +++ b/src/apps/popup/pages/home/index.tsx @@ -9,27 +9,19 @@ import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router'; import { selectActiveNetworkSetting, - selectIsActiveAccountConnectedWithActiveOrigin, selectVaultActiveAccount } from '@background/redux/root-selector'; import { - AlignedFlexRow, CenteredFlexColumn, CenteredFlexRow, ContentContainer, - LeftAlignedFlexColumn, - SpaceBetweenFlexRow, SpacingSize, TileContainer, VerticalSpaceContainer } from '@libs/layout'; import { - AccountActionsMenuPopover, - Avatar, Button, - Hash, - HashVariant, SvgIcon, Tab, Tabs, @@ -43,14 +35,6 @@ import { MoreButtonsModal } from './components/more-buttons-modal'; import { NftList } from './components/nft-list'; import { TokensList } from './components/tokens-list'; -const DividerLine = styled.hr` - margin: 16px 0; - - border-width: 0; - height: 0.5px; - background-color: ${({ theme }) => theme.color.borderPrimary}; -`; - const ButtonsContainer = styled(CenteredFlexRow)` margin-top: 24px; `; @@ -61,6 +45,10 @@ const ButtonContainer = styled(CenteredFlexColumn)` padding: 0 16px; `; +const Container = styled(TileContainer)` + margin-top: 24px; +`; + export function HomePageContent() { const navigate = useTypedNavigate(); const { t } = useTranslation(); @@ -68,9 +56,6 @@ export function HomePageContent() { const state = location.state; - const isActiveAccountConnected = useSelector( - selectIsActiveAccountConnectedWithActiveOrigin - ); const network = useSelector(selectActiveNetworkSetting); const activeAccount = useSelector(selectVaultActiveAccount); @@ -86,30 +71,7 @@ export function HomePageContent() { {activeAccount && ( - - - - - - - {activeAccount.name} - - - - - - - + {network === NetworkSetting.Mainnet && ( @@ -144,7 +106,7 @@ export function HomePageContent() { - + )} diff --git a/src/apps/popup/pages/nft-details/content.tsx b/src/apps/popup/pages/nft-details/content.tsx index 77f6257ad..f24a017b4 100644 --- a/src/apps/popup/pages/nft-details/content.tsx +++ b/src/apps/popup/pages/nft-details/content.tsx @@ -147,6 +147,7 @@ export const NftDetailsContent = ({ const interval = setInterval(async () => { const { payload: extendedDeployInfo } = + // TODO: rewrite this to hook and move to deploys service await dispatchFetchExtendedDeploysInfo( deployHash, activeAccount?.publicKey! diff --git a/src/assets/icons/connected-dark-big.svg b/src/assets/icons/connected-big.svg similarity index 64% rename from src/assets/icons/connected-dark-big.svg rename to src/assets/icons/connected-big.svg index a5753f312..e40faa3f8 100644 --- a/src/assets/icons/connected-dark-big.svg +++ b/src/assets/icons/connected-big.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/icons/connected-light-big.svg b/src/assets/icons/connected-light-big.svg deleted file mode 100644 index 69dff75dc..000000000 --- a/src/assets/icons/connected-light-big.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/connected-light.svg b/src/assets/icons/connected-light.svg deleted file mode 100644 index 700f5c94e..000000000 --- a/src/assets/icons/connected-light.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/connected-dark.svg b/src/assets/icons/connected.svg similarity index 56% rename from src/assets/icons/connected-dark.svg rename to src/assets/icons/connected.svg index 01ac429fa..12a2f91fe 100644 --- a/src/assets/icons/connected-dark.svg +++ b/src/assets/icons/connected.svg @@ -1,3 +1,3 @@ - + diff --git a/src/background/index.ts b/src/background/index.ts index 1794a25d2..12a2254f6 100644 --- a/src/background/index.ts +++ b/src/background/index.ts @@ -113,12 +113,7 @@ import { SiteNotConnectedError, WalletLockedError } from '@content/sdk-errors'; import { sdkEvent } from '@content/sdk-event'; import { SdkMethod, isSDKMethod, sdkMethod } from '@content/sdk-method'; -import { - fetchAccountExtendedDeploys, - fetchExtendedDeploysInfo -} from '@libs/services/account-activity-service'; -import { fetchErc20TokenActivity } from '@libs/services/account-activity-service/erc20-token-activity-service'; -import { fetchAccountInfo } from '@libs/services/account-info'; +import { fetchExtendedDeploysInfo } from '@libs/services/account-activity-service'; import { fetchAccountBalance, fetchAccountBalances, @@ -702,27 +697,6 @@ runtime.onMessage.addListener( return; } - case getType(serviceMessage.fetchAccountInfoRequest): { - const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork( - store.getState() - ); - - try { - const { data: accountInfo } = await fetchAccountInfo({ - accountHash: action.payload.accountHash, - casperClarityApiUrl - }); - - return sendResponse( - serviceMessage.fetchAccountInfoResponse(accountInfo) - ); - } catch (error) { - console.error(error); - } - - return; - } - case getType(serviceMessage.fetchExtendedDeploysInfoRequest): { const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork( store.getState() @@ -781,54 +755,6 @@ runtime.onMessage.addListener( return; } - case getType(serviceMessage.fetchErc20TokenActivityRequest): { - const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork( - store.getState() - ); - - try { - const data = await fetchErc20TokenActivity({ - casperClarityApiUrl, - publicKey: action.payload.publicKey, - page: action.payload.page, - contractPackageHash: action.payload.contractPackageHash - }); - - return sendResponse( - serviceMessage.fetchErc20TokenActivityResponse(data) - ); - } catch (error) { - console.error(error); - } - - return; - } - - case getType(serviceMessage.fetchAccountExtendedDeploysRequest): { - const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork( - store.getState() - ); - - const network = selectActiveNetworkSetting(store.getState()); - - try { - const data = await fetchAccountExtendedDeploys({ - casperClarityApiUrl, - publicKey: action.payload.publicKey, - page: action.payload.page, - network: network.toLowerCase() as CasperNetwork - }); - - return sendResponse( - serviceMessage.fetchAccountExtendedDeploysResponse(data) - ); - } catch (error) { - console.error(error); - } - - return; - } - case getType(serviceMessage.fetchNftTokensRequest): { const { casperClarityApiUrl } = selectApiConfigBasedOnActiveNetwork( store.getState() diff --git a/src/background/redux/vault/selectors.ts b/src/background/redux/vault/selectors.ts index 1d1caea14..1fb369709 100644 --- a/src/background/redux/vault/selectors.ts +++ b/src/background/redux/vault/selectors.ts @@ -24,6 +24,9 @@ export const selectSecretPhrase = (state: RootState): null | SecretPhrase => export const selectVaultAccounts = (state: RootState): Account[] => state.vault.accounts; +export const selectVaultAccountsPublicKeys = (state: RootState): string[] => + state.vault.accounts.map(key => key.publicKey); + export const selectVaultAccountsWithBalances = createSelector( selectVaultAccounts, selectAccountBalances, diff --git a/src/background/service-message.ts b/src/background/service-message.ts index c07582218..e91c66159 100644 --- a/src/background/service-message.ts +++ b/src/background/service-message.ts @@ -1,11 +1,6 @@ -import { CloudPaginatedResponse, IDeploy } from 'casper-wallet-core'; +import { IDeploy } from 'casper-wallet-core'; import { ActionType, createAction } from 'typesafe-actions'; -import { - Erc20TokenActionResult, - TransferResult -} from '@libs/services/account-activity-service/types'; -import { AccountInfo } from '@libs/services/account-info/types'; import { AccountData, FetchBalanceResponse @@ -44,29 +39,6 @@ export const serviceMessage = { PaginatedResponse | ErrorResponse, Meta >(), - fetchAccountInfoRequest: createAction('FETCH_ACCOUNT_INFO')< - { accountHash: string }, - Meta - >(), - fetchAccountInfoResponse: createAction('FETCH_ACCOUNT_INFO_RESPONSE')< - AccountInfo, - Meta - >(), - fetchAccountActivityRequest: createAction('FETCH_ACCOUNT_ACTIVITY')< - { publicKey: string; page: number }, - Meta - >(), - fetchAccountActivityResponse: createAction('FETCH_ACCOUNT_ACTIVITY_RESPONSE')< - PaginatedResponse, - Meta - >(), - fetchErc20TokenActivityRequest: createAction('FETCH_ERC20_TOKEN_ACTIVITY')< - { publicKey: string; page: number; contractPackageHash: string }, - Meta - >(), - fetchErc20TokenActivityResponse: createAction( - 'FETCH_ERC20_TOKEN_ACTIVITY_RESPONSE' - ), Meta>(), fetchExtendedDeploysInfoRequest: createAction('FETCH_EXTENDED_DEPLOYS_INFO')< { deployHash: string; publicKey: string }, Meta @@ -82,13 +54,6 @@ export const serviceMessage = { ContractPackageWithBalance[], Meta >(), - fetchAccountExtendedDeploysRequest: createAction('FETCH_ACCOUNT_DEPLOYS')< - { publicKey: string; page: number }, - Meta - >(), - fetchAccountExtendedDeploysResponse: createAction( - 'FETCH_ACCOUNT_DEPLOYS_RESPONSE' - ) | ErrorResponse, Meta>(), fetchNftTokensRequest: createAction('FETCH_NFT_TOKENS')< { accountHash: string; page: number }, Meta diff --git a/src/background/wallet-repositories.ts b/src/background/wallet-repositories.ts index 8f5ad3557..ea4e8b05d 100644 --- a/src/background/wallet-repositories.ts +++ b/src/background/wallet-repositories.ts @@ -1,6 +1,5 @@ import { setupRepositories } from 'casper-wallet-core'; -// TODO only deploysRepository usage for HRD. Other stuff later -const { deploysRepository } = setupRepositories(); +const { deploysRepository, accountInfoRepository } = setupRepositories(); -export { deploysRepository }; +export { deploysRepository, accountInfoRepository }; diff --git a/src/hooks/use-fetch-account-info.ts b/src/hooks/use-fetch-account-info.ts deleted file mode 100644 index cabc1a038..000000000 --- a/src/hooks/use-fetch-account-info.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { useEffect, useState } from 'react'; -import { useSelector } from 'react-redux'; - -import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors'; - -import { getAccountHashFromPublicKey } from '@libs/entities/Account'; -import { - dispatchFetchAccountInfoRequest, - getAccountInfo, - getAccountInfoLogo -} from '@libs/services/account-info'; -import { Account } from '@libs/types/account'; - -export const useFetchAccountInfo = (account: Account | undefined) => { - const [accountInfoStandardName, setAccountInfoStandardName] = useState< - string | null - >(null); - const [accountLogo, setAccountLogo] = useState(null); - const { casperClarityApiUrl } = useSelector( - selectApiConfigBasedOnActiveNetwork - ); - - useEffect(() => { - dispatchFetchAccountInfoRequest( - getAccountHashFromPublicKey(account?.publicKey) - ) - .then(({ payload: accountInfo }) => { - const { accountName } = getAccountInfo(accountInfo); - const accountInfoLogo = getAccountInfoLogo(accountInfo); - - if (accountName) { - setAccountInfoStandardName(accountName); - } - - if (accountInfoLogo) { - setAccountLogo(accountInfoLogo); - } - }) - .catch(error => { - console.error('Account info request failed:', error); - }); - }, [account?.publicKey, casperClarityApiUrl]); - - return { - accountLogo, - accountInfoStandardName - }; -}; diff --git a/src/libs/layout/containers.ts b/src/libs/layout/containers.ts index aa0b0870d..de1c4b20c 100644 --- a/src/libs/layout/containers.ts +++ b/src/libs/layout/containers.ts @@ -163,7 +163,7 @@ export const HeaderContainer = styled(AlignedSpaceBetweenFlexRow)` getLinearGradientColor(theme.color.backgroundRed)}; height: 72px; - padding: 0 16px; + padding: 0 8px; `; export const PageContainer = styled(SpaceBetweenFlexColumn)` @@ -292,6 +292,9 @@ export const Overlay = styled.div` height: 100vh; width: 360px; + // this remove overlay from header + margin-top: 72px; + background: ${({ theme }) => hexToRGBA(theme.color.black, '0.32')}; `; diff --git a/src/libs/layout/header/components/header-background-container.tsx b/src/libs/layout/header/components/header-background-container.tsx new file mode 100644 index 000000000..1bd7be7f6 --- /dev/null +++ b/src/libs/layout/header/components/header-background-container.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import styled from 'styled-components'; + +import { useIsDarkMode } from '@hooks/use-is-dark-mode'; + +interface HeaderBackgroundContainerTypes { + children: React.ReactNode; + isOpen: boolean; +} + +const Container = styled.div<{ isOpen: boolean; isDarkMode: boolean }>` + padding: 8px; + border-radius: ${({ theme }) => theme.borderRadius.twelve}px; + background: ${({ isOpen, isDarkMode }) => + isOpen ? (isDarkMode ? '#930C16' : '#BA0F1C') : 'inherit'}; +`; + +export const HeaderBackgroundContainer = ({ + children, + isOpen +}: HeaderBackgroundContainerTypes) => { + const isDarkMode = useIsDarkMode(); + + return ( + + {children} + + ); +}; diff --git a/src/libs/layout/header/header-actions.tsx b/src/libs/layout/header/header-actions.tsx index 0e6216b7e..bdf3a55e4 100644 --- a/src/libs/layout/header/header-actions.tsx +++ b/src/libs/layout/header/header-actions.tsx @@ -4,12 +4,12 @@ import styled from 'styled-components'; import { useNavigationMenu, useTypedLocation } from '@popup/router'; import { HeaderNetworkSwitcher } from '@libs/layout'; +import { HeaderBackgroundContainer } from '@libs/layout/header/components/header-background-container'; import { SvgIcon } from '@libs/ui/components'; const Container = styled.div` display: flex; justify-content: space-between; - gap: 18px; `; interface MainMenuBarProps { @@ -28,20 +28,24 @@ export function HeaderActions({ {withNetworkSwitcher && } {withMenu && ( - + + + )} ); diff --git a/src/libs/layout/header/header-connection-status.tsx b/src/libs/layout/header/header-connection-status.tsx index 2feee98dc..d79f39f96 100644 --- a/src/libs/layout/header/header-connection-status.tsx +++ b/src/libs/layout/header/header-connection-status.tsx @@ -1,31 +1,24 @@ import React from 'react'; import { useSelector } from 'react-redux'; -import styled from 'styled-components'; import { selectVaultActiveAccount } from '@background/redux/vault/selectors'; -import { AlignedFlexRow, SpacingSize } from '@libs/layout'; +import { getAccountHashFromPublicKey } from '@libs/entities/Account'; +import { + AlignedFlexRow, + LeftAlignedFlexColumn, + SpacingSize +} from '@libs/layout'; +import { HeaderBackgroundContainer } from '@libs/layout/header/components/header-background-container'; +import { useFetchAccountInfo } from '@libs/services/account-info'; import { AccountList, Avatar, Hash, HashVariant, Modal, - SvgIcon + Typography } from '@libs/ui/components'; -import { hexToRGBA } from '@libs/ui/utils'; - -const ConnectionStatusContainer = styled(AlignedFlexRow)` - width: fit-content; - - background-color: ${({ theme }) => hexToRGBA(theme.color.black, '0.24')}; - padding: 6px 8px 6px 14px; - border-top-right-radius: ${({ theme }) => theme.borderRadius.hundred}px; - border-bottom-right-radius: ${({ theme }) => theme.borderRadius.hundred}px; - - position: relative; - left: -2px; -`; interface HeaderConnectionStatusProps { publicKey: string; @@ -38,6 +31,13 @@ export function HeaderConnectionStatus({ }: HeaderConnectionStatusProps) { const activeAccount = useSelector(selectVaultActiveAccount); + const accountInfo = useFetchAccountInfo([activeAccount?.publicKey!]); + + const accountHash = getAccountHashFromPublicKey(activeAccount?.publicKey); + + const csprName = accountInfo && accountInfo[accountHash]?.csprName; + const brandingLogo = accountInfo && accountInfo[accountHash]?.brandingLogo; + return ( )} children={({ isOpen }) => ( - <> - - + + + + + { + event.stopPropagation(); + }} + > + + {activeAccount?.name} + - - - + + )} /> ); diff --git a/src/libs/layout/header/header-network-switcher.tsx b/src/libs/layout/header/header-network-switcher.tsx index 5a654898f..5e8030bfd 100644 --- a/src/libs/layout/header/header-network-switcher.tsx +++ b/src/libs/layout/header/header-network-switcher.tsx @@ -9,14 +9,8 @@ import { selectActiveNetworkSetting } from '@background/redux/settings/selectors import { dispatchToMainStore } from '@background/redux/utils'; import { AlignedFlexRow, SpaceBetweenFlexRow, SpacingSize } from '@libs/layout'; +import { HeaderBackgroundContainer } from '@libs/layout/header/components/header-background-container'; import { Modal, SvgIcon, Typography } from '@libs/ui/components'; -import { hexToRGBA } from '@libs/ui/utils'; - -const NetworkSwitcherContainer = styled(AlignedFlexRow)` - background-color: ${({ theme }) => hexToRGBA(theme.color.black, '0.24')}; - padding: 6px 8px; - border-radius: ${({ theme }) => theme.borderRadius.hundred}px; -`; const ModalContentContainer = styled.div` padding: 8px; @@ -102,10 +96,10 @@ export const HeaderNetworkSwitcher = () => { )} children={({ isOpen }) => ( - + { : 'contentLightRed' } /> - - {activeNetwork} - - - + )} /> ); diff --git a/src/libs/services/account-activity-service/constants.ts b/src/libs/services/account-activity-service/constants.ts deleted file mode 100644 index 8a0eef350..000000000 --- a/src/libs/services/account-activity-service/constants.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const getErc20TokenActivityLink = ( - casperClarityApiUrl: string, - account_hash: string, - contract_package_hash: string, - page: number -) => - `${casperClarityApiUrl}/erc20-token-actions?contract_package_hash=${contract_package_hash}&account_hash=${account_hash}&page=${page}&limit=10&fields=contract_package,deploy&with_amounts_in_currency_id=1`; diff --git a/src/libs/services/account-activity-service/erc20-token-activity-service.ts b/src/libs/services/account-activity-service/erc20-token-activity-service.ts deleted file mode 100644 index e28cce132..000000000 --- a/src/libs/services/account-activity-service/erc20-token-activity-service.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { ERC20_TOKEN_ACTIVITY_REFRESH_RATE } from '@src/constants'; - -import { dispatchToMainStore } from '@background/redux/utils'; -import { serviceMessage } from '@background/service-message'; - -import { queryClient } from '@libs/services/query-client'; -import { PaginatedResponse, Payload } from '@libs/services/types'; -import { handleError, toJson } from '@libs/services/utils'; - -import { getErc20TokenActivityLink } from './constants'; -import { Erc20TokenActionResult } from './types'; - -export const erc20TokenActivityRequest = ( - casperClarityApiUrl: string, - publicKey: string, - contractPackageHash: string, - page: number -) => - fetch( - getErc20TokenActivityLink( - casperClarityApiUrl, - publicKey, - contractPackageHash, - page - ) - ) - .then(toJson) - .catch(handleError); - -export const fetchErc20TokenActivity = ({ - casperClarityApiUrl, - publicKey, - contractPackageHash, - page -}: { - casperClarityApiUrl: string; - publicKey: string; - contractPackageHash: string; - page: number; -}) => - queryClient.fetchQuery( - [ - 'erc20TokenActivityRequest', - casperClarityApiUrl, - publicKey, - contractPackageHash, - page - ], - () => - erc20TokenActivityRequest( - casperClarityApiUrl, - publicKey, - contractPackageHash, - page - ), - { staleTime: ERC20_TOKEN_ACTIVITY_REFRESH_RATE } - ); - -export const dispatchFetchErc20TokenActivity = ( - publicKey: string, - contractPackageHash: string, - page: number -): Promise>> => - dispatchToMainStore( - serviceMessage.fetchErc20TokenActivityRequest({ - publicKey, - contractPackageHash, - page - }) - ); diff --git a/src/libs/services/account-activity-service/extended-deploys-service.ts b/src/libs/services/account-activity-service/extended-deploys-service.ts index b4c18e6b1..b716c61fc 100644 --- a/src/libs/services/account-activity-service/extended-deploys-service.ts +++ b/src/libs/services/account-activity-service/extended-deploys-service.ts @@ -1,14 +1,12 @@ -import { CloudPaginatedResponse, IDeploy } from 'casper-wallet-core'; +import { IDeploy } from 'casper-wallet-core'; import { CasperNetwork } from 'casper-wallet-core/src/domain/common/common'; -import { ACCOUNT_DEPLOY_REFRESH_RATE } from '@src/constants'; - import { dispatchToMainStore } from '@background/redux/utils'; import { serviceMessage } from '@background/service-message'; import { deploysRepository } from '@background/wallet-repositories'; import { queryClient } from '@libs/services/query-client'; -import { ErrorResponse, Payload } from '@libs/services/types'; +import { Payload } from '@libs/services/types'; export const fetchExtendedDeploysInfo = ({ casperClarityApiUrl, @@ -38,34 +36,3 @@ export const dispatchFetchExtendedDeploysInfo = ( dispatchToMainStore( serviceMessage.fetchExtendedDeploysInfoRequest({ deployHash, publicKey }) ); - -// TODO just a quick example. Errors handling required -export const fetchAccountExtendedDeploys = ({ - casperClarityApiUrl, - publicKey, - page, - network -}: { - casperClarityApiUrl: string; - publicKey: string; - page: number; - network: CasperNetwork; -}): Promise> => - queryClient.fetchQuery( - ['getDeploys', casperClarityApiUrl, publicKey, page, network], - () => - deploysRepository.getDeploys({ - page, - activePublicKey: publicKey, - network - }), - { staleTime: ACCOUNT_DEPLOY_REFRESH_RATE } - ); - -export const dispatchFetchAccountExtendedDeploys = ( - publicKey: string, - page: number -): Promise | ErrorResponse>> => - dispatchToMainStore( - serviceMessage.fetchAccountExtendedDeploysRequest({ publicKey, page }) - ); diff --git a/src/libs/services/account-activity-service/index.ts b/src/libs/services/account-activity-service/index.ts index 5d11231ed..88f00e789 100644 --- a/src/libs/services/account-activity-service/index.ts +++ b/src/libs/services/account-activity-service/index.ts @@ -1,3 +1,2 @@ -export * from './constants'; export * from './types'; export * from './extended-deploys-service'; diff --git a/src/libs/services/account-activity-service/types.ts b/src/libs/services/account-activity-service/types.ts index 42d8d9d85..4f4b02833 100644 --- a/src/libs/services/account-activity-service/types.ts +++ b/src/libs/services/account-activity-service/types.ts @@ -1,21 +1,3 @@ -export interface TransferResult { - amount: string; - blockHash: string; - deployHash: string; - fromAccount: string; - fromAccountPublicKey: string; - toAccount: string | null; - toAccountPublicKey: string; - transferId: string; - timestamp: string; - targetPurse: string; - rate?: number; -} - -export interface TransferResultWithId extends TransferResult { - id: string; -} - export type ExtendedDeployContractPackageMetadata = { symbol: string; decimals: number; @@ -44,56 +26,3 @@ export type ExtendedDeployContractPackageResult = { metadata?: ExtendedDeployContractPackageMetadata; icon_url?: string; }; - -export interface Erc20TokenActionResult { - deploy_hash: string; - contract_package_hash: string; - from_type: string | null; - from_hash: string | null; - from_public_key?: string | null; - to_type: string | null; - to_hash: string | null; - to_public_key?: string; - erc20_action_type_id: number; - amount: string; - timestamp: string; - deploy?: Deploy; - contract_package?: ContractPackage; -} - -export interface Deploy { - deploy_hash: string; - block_hash: string; - caller_public_key: string; - execution_type_id: number; - contract_hash: string; - contract_package_hash: string; - cost: string; - payment_amount: string; - error_message: string | null; - timestamp: string; - status: string; - args: any; - amount?: string; - currency_cost: number; - rate: number; - current_currency_cost: number; -} - -export interface ContractPackage { - contract_package_hash: string; - owner_public_key: string; - contract_type_id: number; - contract_name: string | null; - contract_description: string | null; - icon_url: string | null; - metadata: Metadata; - timestamp: string; -} - -export interface Metadata { - symbol: string; - decimals: number; - balances_uref: string; - total_supply_uref: string; -} diff --git a/src/libs/services/account-info/account-info.ts b/src/libs/services/account-info/account-info.ts deleted file mode 100644 index 625d6ae97..000000000 --- a/src/libs/services/account-info/account-info.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { FETCH_QUERY_OPTIONS } from '@src/constants'; - -import { dispatchToMainStore } from '@background/redux/utils'; -import { serviceMessage } from '@background/service-message'; - -import { AccountInfo, getAccountInfoUrl } from '@libs/services/account-info'; -import { queryClient } from '@libs/services/query-client'; -import { DataResponse, Payload } from '@libs/services/types'; -import { handleError, toJson } from '@libs/services/utils'; - -const accountInfoRequest = ( - accountHash: string, - casperClarityApiUrl: string, - signal?: AbortSignal -): Promise> => - fetch(getAccountInfoUrl({ accountHash, casperClarityApiUrl }), { - signal - }) - .then(toJson) - .catch(handleError); - -export const fetchAccountInfo = ({ - accountHash, - casperClarityApiUrl -}: { - accountHash: string; - casperClarityApiUrl: string; -}) => - queryClient.fetchQuery( - ['accountInfoRequest', accountHash, casperClarityApiUrl], - ({ signal }) => - accountInfoRequest(accountHash, casperClarityApiUrl, signal), - { - staleTime: FETCH_QUERY_OPTIONS.apiCacheTime - } - ); - -export const dispatchFetchAccountInfoRequest = ( - accountHash: string -): Promise> => - dispatchToMainStore(serviceMessage.fetchAccountInfoRequest({ accountHash })); diff --git a/src/libs/services/account-info/constants.ts b/src/libs/services/account-info/constants.ts deleted file mode 100644 index 27618173d..000000000 --- a/src/libs/services/account-info/constants.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const getAccountInfoUrl = ({ - accountHash, - casperClarityApiUrl -}: { - accountHash: string; - casperClarityApiUrl: string; -}): string => `${casperClarityApiUrl}/accounts-info/${accountHash}`; diff --git a/src/libs/services/account-info/index.ts b/src/libs/services/account-info/index.ts index bce6a0f08..158dcd9e7 100644 --- a/src/libs/services/account-info/index.ts +++ b/src/libs/services/account-info/index.ts @@ -1,4 +1 @@ -export * from './account-info'; -export * from './types'; -export * from './constants'; -export * from './utils'; +export * from './use-fetch-account-info'; diff --git a/src/libs/services/account-info/types.ts b/src/libs/services/account-info/types.ts deleted file mode 100644 index 057a2c8d8..000000000 --- a/src/libs/services/account-info/types.ts +++ /dev/null @@ -1,74 +0,0 @@ -export interface AccountInfo { - account_hash: string; - url: string; - is_active: boolean; - deploy_hash: string; - verified_account_hashes: string[]; - info?: { - owner?: AccountInfoOwner; - nodes?: Array; - }; -} - -export interface AccountInfoOwner { - name?: string; - description?: string; - type?: Array; - email?: string; - identity?: { - ownership_disclosure_url?: string; - casper_association_kyc_url?: string; - casper_association_kyc_onchain?: string; - }; - resources?: { - code_of_conduct_url?: string; - terms_of_service_url?: string; - privacy_policy_url?: string; - other?: Array<{ - name?: string; - url?: string; - }>; - }; - affiliated_accounts?: Array; - website?: string; - branding?: { - logo?: { - svg?: string; - png_256?: string; - png_1024?: string; - }; - }; - location?: { - name?: string; - country?: string; - latitude?: number; - longitude?: number; - }; - social?: { - github?: string; - medium?: string; - reddit?: string; - wechat?: string; - keybase?: string; - twitter?: string; - youtube?: string; - facebook?: string; - telegram?: string; - }; -} - -export interface AccountInfoNode { - public_key?: string; - description?: string; - functionality?: string[]; - location?: { - name?: string; - country?: string; - latitude?: number; - longitude?: number; - }; -} - -export interface AccountInfoAffiliatedAccount { - public_key?: string; -} diff --git a/src/libs/services/account-info/use-fetch-account-info.ts b/src/libs/services/account-info/use-fetch-account-info.ts new file mode 100644 index 000000000..e80b2f6e1 --- /dev/null +++ b/src/libs/services/account-info/use-fetch-account-info.ts @@ -0,0 +1,32 @@ +import { useQuery } from '@tanstack/react-query'; +import { CasperNetwork } from 'casper-wallet-core/src/domain/common/common'; +import { useMemo } from 'react'; +import { useSelector } from 'react-redux'; + +import { selectActiveNetworkSetting } from '@background/redux/settings/selectors'; +import { accountInfoRepository } from '@background/wallet-repositories'; + +import { getAccountHashFromPublicKey } from '@libs/entities/Account'; + +export const useFetchAccountInfo = (accountPublicKeys: string[]) => { + const network = useSelector(selectActiveNetworkSetting); + + const accountHashes = useMemo( + () => accountPublicKeys.map(key => getAccountHashFromPublicKey(key)), + [accountPublicKeys] + ); + + const accountHashesString = accountHashes.toString(); + + const { data: accountInfo } = useQuery({ + queryKey: ['ACCOUNT_INFO', accountHashesString], + queryFn: async () => { + return await accountInfoRepository.getAccountsInfo({ + accountHashes, + network: network.toLowerCase() as CasperNetwork + }); + } + }); + + return accountInfo; +}; diff --git a/src/libs/services/account-info/utils.ts b/src/libs/services/account-info/utils.ts deleted file mode 100644 index 6c4012975..000000000 --- a/src/libs/services/account-info/utils.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { AccountInfo } from '@libs/services/account-info'; - -export const getAccountInfo = (accountInfo?: AccountInfo) => { - return { - logo: accountInfo?.info?.owner?.branding?.logo, - accountName: accountInfo?.info?.owner?.name, - accountHash: accountInfo?.account_hash - }; -}; - -export const getAccountInfoLogo = ( - accountInfo: AccountInfo | null | undefined -): string | null => { - if (!accountInfo) return null; - - const { logo } = getAccountInfo(accountInfo); - - if (logo?.svg) { - return logo?.svg; - } - - if (logo?.png_256) { - return logo?.png_256; - } - - return null; -}; diff --git a/src/libs/services/deploys/use-fetch-deploys.tsx b/src/libs/services/deploys/use-fetch-deploys.ts similarity index 100% rename from src/libs/services/deploys/use-fetch-deploys.tsx rename to src/libs/services/deploys/use-fetch-deploys.ts diff --git a/src/libs/types/account.ts b/src/libs/types/account.ts index 93cc29517..f5f6a57d0 100644 --- a/src/libs/types/account.ts +++ b/src/libs/types/account.ts @@ -23,3 +23,7 @@ export interface AccountWithBalance extends Account { export interface AccountListRows extends AccountWithBalance { id: string; } + +export type AccountListRowWithAccountHash = T & { + accountHash: string; +}; diff --git a/src/libs/ui/components/account-list/account-list-item.tsx b/src/libs/ui/components/account-list/account-list-item.tsx index b08bab155..f5951cbaf 100644 --- a/src/libs/ui/components/account-list/account-list-item.tsx +++ b/src/libs/ui/components/account-list/account-list-item.tsx @@ -1,3 +1,4 @@ +import { IAccountInfo } from 'casper-wallet-core/src/domain/accountInfo'; import React from 'react'; import styled from 'styled-components'; @@ -6,7 +7,11 @@ import { FlexColumn, SpacingSize } from '@libs/layout'; -import { AccountListRows, HardwareWalletType } from '@libs/types/account'; +import { + AccountListRowWithAccountHash, + AccountListRows, + HardwareWalletType +} from '@libs/types/account'; import { AccountActionsMenuPopover, Avatar, @@ -41,7 +46,7 @@ const AccountName = styled(Typography)` `; interface AccountListItemProps { - account: AccountListRows; + account: AccountListRowWithAccountHash; onClick?: ( event: React.MouseEvent, accountName: string @@ -50,6 +55,7 @@ interface AccountListItemProps { isActiveAccount: boolean; showHideAccountItem?: boolean; closeModal?: (e: React.MouseEvent) => void; + accountInfo: Record | undefined; } export const AccountListItem = ({ @@ -58,7 +64,8 @@ export const AccountListItem = ({ isActiveAccount, isConnected, showHideAccountItem, - closeModal + closeModal, + accountInfo }: AccountListItemProps) => { const accountBalance = account.balance?.liquidMotes != null @@ -67,6 +74,10 @@ export const AccountListItem = ({ }) : '-'; + const csprName = accountInfo && accountInfo[account.accountHash]?.csprName; + const brandingLogo = + accountInfo && accountInfo[account.accountHash]?.brandingLogo; + return ( @@ -77,6 +88,7 @@ export const AccountListItem = ({ isConnected={isConnected} displayContext="accountList" isActiveAccount={isActiveAccount} + brandingLogo={brandingLogo} /> { const { pathname } = useTypedLocation(); - const [accountListRows, setAccountListRows] = useState([]); + const [accountListRows, setAccountListRows] = useState< + AccountListRowWithAccountHash[] + >([]); const { changeActiveAccountWithEvent: changeActiveAccount } = useAccountManager(); const { t } = useTranslation(); @@ -44,9 +51,11 @@ export const AccountList = ({ closeModal }: AccountListProps) => { const visibleAccounts = useSelector(selectVaultVisibleAccounts); const activeAccountName = useSelector(selectVaultActiveAccountName); - const connectedAccountNames = useSelector(selectConnectedAccountNamesWithActiveOrigin) || []; + const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys); + + const accountInfo = useFetchAccountInfo(accountsPublicKeys); useEffect(() => { const accountListRows = sortAccounts( @@ -83,6 +92,7 @@ export const AccountList = ({ closeModal }: AccountListProps) => { changeActiveAccount(account.name); closeModal(event); }} + accountInfo={accountInfo} /> ); }} diff --git a/src/libs/ui/components/avatar/avatar.tsx b/src/libs/ui/components/avatar/avatar.tsx index 6f2045038..25da2f14b 100644 --- a/src/libs/ui/components/avatar/avatar.tsx +++ b/src/libs/ui/components/avatar/avatar.tsx @@ -37,6 +37,7 @@ const ConnectIcon = styled(SvgIcon)<{ displayContext?: 'header' | 'accountList'; isDarkMode: boolean; color: string; + isAccountSwitcherOpen?: boolean; }>` position: absolute; bottom: ${({ displayContext }) => @@ -52,11 +53,15 @@ const ConnectIcon = styled(SvgIcon)<{ ? '-2px' : '-5px'}; svg > circle { - stroke: ${({ isDarkMode, displayContext, theme }) => + stroke: ${({ isDarkMode, displayContext, theme, isAccountSwitcherOpen }) => displayContext === 'header' - ? isDarkMode - ? '#A30D18' - : '#CF111F' + ? isAccountSwitcherOpen + ? isDarkMode + ? '#930C16' + : '#BA0F1C' + : isDarkMode + ? '#A30D18' + : '#CF111F' : theme.color.backgroundPrimary}; } `; @@ -70,8 +75,65 @@ interface AvatarTypes { displayContext?: 'header' | 'accountList'; isActiveAccount?: boolean; borderRadius?: number; + brandingLogo?: Maybe | undefined; + isAccountSwitcherOpen?: boolean; } +interface ConnectionStatusBadgeTypes { + children: React.ReactNode; + connectIcon: string; + isConnected: boolean; + displayContext?: 'header' | 'accountList'; + isDarkMode: boolean; + isAccountSwitcherOpen?: boolean; +} + +interface LogoTypes { + size: number; + brandingLogo: string; + publicKey: Maybe; +} + +const LogoImg = styled.img<{ size: number }>` + width: ${({ size }) => size}px; + height: ${({ size }) => size}px; +`; + +const ConnectionStatusBadge = ({ + children, + connectIcon, + displayContext, + isConnected, + isDarkMode, + isAccountSwitcherOpen +}: ConnectionStatusBadgeTypes) => { + return ( + + {children} + + + ); +}; + +const Logo = ({ size, brandingLogo, publicKey }: LogoTypes) => + brandingLogo.endsWith('.svg') ? ( + + ) : ( + + ); + export const Avatar = ({ publicKey, size, @@ -80,45 +142,49 @@ export const Avatar = ({ isConnected, displayContext, isActiveAccount, - borderRadius + borderRadius, + brandingLogo, + isAccountSwitcherOpen }: AvatarTypes) => { const theme = useTheme(); const isDarkMode = useIsDarkMode(); - const connectIcon = isDarkMode - ? displayContext === 'header' - ? 'assets/icons/connected-dark.svg' - : 'assets/icons/connected-dark-big.svg' - : displayContext === 'header' - ? 'assets/icons/connected-light.svg' - : 'assets/icons/connected-light-big.svg'; + const connectIcon = + displayContext === 'header' + ? 'assets/icons/connected-big.svg' + : 'assets/icons/connected.svg'; if (withConnectedStatus && isConnected !== undefined) { return ( - - - - + + {brandingLogo ? ( + + ) : ( + + )} + + ); + } + + if (brandingLogo) { + return ( + ); } diff --git a/src/libs/ui/components/hash/hash.tsx b/src/libs/ui/components/hash/hash.tsx index 7dd9979b2..cbc12ae92 100644 --- a/src/libs/ui/components/hash/hash.tsx +++ b/src/libs/ui/components/hash/hash.tsx @@ -44,10 +44,13 @@ interface HashProps { placement?: Placement; withoutTooltip?: boolean; withCopyIcon?: boolean; + csprName?: Maybe; + withOpacity?: boolean; } export function Hash({ value, + csprName, variant, withCopyOnSelfClick = true, truncated, @@ -57,7 +60,8 @@ export function Hash({ placement, withoutTooltip = false, isLedger, - withCopyIcon + withCopyIcon, + withOpacity }: HashProps) { const { t } = useTranslation(); const isDarkMode = useIsDarkMode(); @@ -71,13 +75,16 @@ export function Hash({ placement={placement} > - {truncated - ? truncateKey(value || '', { size: truncatedSize }) - : value} + {csprName + ? csprName + : truncated + ? truncateKey(value || '', { size: truncatedSize }) + : value} {isImported && ( @@ -97,7 +104,14 @@ export function Hash({ size={20} /> )} - {withCopyIcon && } + {withCopyIcon && ( + + )} ), [ @@ -107,6 +121,7 @@ export function Hash({ placement, variant, color, + csprName, truncatedSize, isImported, isLedger, @@ -125,7 +140,10 @@ export function Hash({ Copied! ) : ( - + {HashComponent} )} diff --git a/src/libs/ui/components/index.ts b/src/libs/ui/components/index.ts index a18bb9e1f..3f4081251 100644 --- a/src/libs/ui/components/index.ts +++ b/src/libs/ui/components/index.ts @@ -46,7 +46,6 @@ export * from './toggle/toggle'; export * from './skeleton/skeleton'; export * from './validator-plate/validator-plate'; export * from './error/error'; -export * from './contacts-plate/contacts-plate'; export * from './theme-switcher/theme-switcher'; export * from './identicon/identicon'; export * from './spinner/spinner'; diff --git a/src/libs/ui/components/modal/modal.tsx b/src/libs/ui/components/modal/modal.tsx index eb536cb92..2a6cb0671 100644 --- a/src/libs/ui/components/modal/modal.tsx +++ b/src/libs/ui/components/modal/modal.tsx @@ -32,38 +32,40 @@ const slideOutToBottom = keyframes` const ModalContainer = styled.div<{ placement: 'top' | 'bottom' | 'fullBottom'; -}>(({ theme, placement }) => ({ - position: 'absolute', +}>(({ theme, placement }) => { + return { + position: 'absolute', - margin: '0 16px', + margin: '0 16px', - maxWidth: '328px', + maxWidth: '328px', - ...(placement === 'fullBottom' && { - bottom: 0, + ...(placement === 'fullBottom' && { + bottom: 0, - margin: 0, - maxWidth: '360px' - }), + margin: 0, + maxWidth: '360px' + }), - ...(placement === 'top' && { - top: '88px' - }), + ...(placement === 'top' && { + top: '16px' + }), - ...(placement === 'bottom' && { - bottom: '16px' - }), + ...(placement === 'bottom' && { + bottom: '88px' + }), - left: 0, - right: 0, + left: 0, + right: 0, - backgroundColor: theme.color.backgroundPrimary, - boxShadow: theme.shadow.contextMenu, - borderRadius: - placement === 'fullBottom' - ? `${theme.borderRadius.sixteen}px` - : `${theme.borderRadius.twelve}px` -})); + backgroundColor: theme.color.backgroundPrimary, + boxShadow: theme.shadow.contextMenu, + borderRadius: + placement === 'fullBottom' + ? `${theme.borderRadius.sixteen}px` + : `${theme.borderRadius.twelve}px` + }; +}); const ModalEnterFromBottom = styled(ModalContainer)` animation: ${slideInFromBottom} 0.5s linear forwards; diff --git a/src/libs/ui/components/no-activity-view/no-activity-view.tsx b/src/libs/ui/components/no-activity-view/no-activity-view.tsx index e597d208a..dfc8d9def 100644 --- a/src/libs/ui/components/no-activity-view/no-activity-view.tsx +++ b/src/libs/ui/components/no-activity-view/no-activity-view.tsx @@ -8,10 +8,6 @@ import { SpacingSize, VerticalSpaceContainer } from '@libs/layout'; -import { - Erc20TokenActionResult, - TransferResultWithId -} from '@libs/services/account-activity-service'; import { Tile, Typography } from '@libs/ui/components'; const Container = styled(CenteredFlexRow)` @@ -22,9 +18,7 @@ export const NoActivityView = ({ activityList, top }: { - activityList: - | (TransferResultWithId | Erc20TokenActionResult | IDeploy)[] - | null; + activityList: IDeploy[] | null; top?: SpacingSize; loading?: boolean; }) => { From 4cb919a3fc207668a21f42f36e5c7fcddfb15753 Mon Sep 17 00:00:00 2001 From: ost-ptk Date: Wed, 11 Sep 2024 15:05:40 +0300 Subject: [PATCH 2/4] added cspr name support to deploys list --- .../action-rows/associated-action-rows.tsx | 2 + .../action-rows/auction-action-rows.tsx | 3 + .../action-rows/cep18-action-rows.tsx | 13 +++- .../action-rows/cspr-market-action-rows.tsx | 2 + .../native-transfer-action-rows.tsx | 63 ++++++++++++------- .../action-rows/nft-actions-rows.tsx | 17 ++++- .../components/deploy-details-action.tsx | 15 +---- .../components/deploy-details-result.tsx | 2 +- .../result-rows/associated-result-rows.tsx | 29 ++++++--- .../result-rows/cep18-result-rows.tsx | 12 ++++ .../native-transfer-result-rows.tsx | 4 ++ .../result-rows/nft-result-rows.tsx | 23 ++++++- src/libs/layout/containers.ts | 2 +- .../account-info-row/account-info-row.tsx | 5 +- .../components/auction-deploy-rows.tsx | 12 +++- .../components/cep18-deploy-rows.tsx | 10 +++ .../deploy-plate/components/common.tsx | 12 ++++ .../components/cspr-market-deploy-rows.tsx | 12 ++-- .../native-transfer-deploy-rows.tsx | 10 +++ .../components/nft-deploy-rows.tsx | 36 +++++++---- 20 files changed, 213 insertions(+), 71 deletions(-) diff --git a/src/apps/popup/pages/deploy-details/components/action-rows/associated-action-rows.tsx b/src/apps/popup/pages/deploy-details/components/action-rows/associated-action-rows.tsx index 0048c47ca..9922cdf55 100644 --- a/src/apps/popup/pages/deploy-details/components/action-rows/associated-action-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/action-rows/associated-action-rows.tsx @@ -45,6 +45,8 @@ export const AssociatedActionRows = ({ iconSize={20} accountName={callerAccountInfo?.name} isAction + csprName={callerAccountInfo?.csprName} + imgLogo={callerAccountInfo?.brandingLogo} /> diff --git a/src/apps/popup/pages/deploy-details/components/action-rows/auction-action-rows.tsx b/src/apps/popup/pages/deploy-details/components/action-rows/auction-action-rows.tsx index e12acc2c8..3a8fc5f26 100644 --- a/src/apps/popup/pages/deploy-details/components/action-rows/auction-action-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/action-rows/auction-action-rows.tsx @@ -76,6 +76,7 @@ const DelegationAuctionAction = ({ imgLogo={toValidatorAccountInfo?.brandingLogo} isAction iconSize={20} + csprName={toValidatorAccountInfo?.csprName} /> )} {(isUndelegate || isRedelegate) && ( @@ -87,6 +88,7 @@ const DelegationAuctionAction = ({ imgLogo={fromValidatorAccountInfo?.brandingLogo} isAction iconSize={20} + csprName={fromValidatorAccountInfo?.csprName} /> )} diff --git a/src/apps/popup/pages/deploy-details/components/action-rows/cep18-action-rows.tsx b/src/apps/popup/pages/deploy-details/components/action-rows/cep18-action-rows.tsx index 8ef1b6f1e..fba28b82d 100644 --- a/src/apps/popup/pages/deploy-details/components/action-rows/cep18-action-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/action-rows/cep18-action-rows.tsx @@ -24,6 +24,7 @@ export const Cep18ActionRows = ({ deploy }: Cep18ActionRowsProps) => { contractPackageHash, contractName, formattedDecimalAmount, + recipientAccountInfo, symbol, iconUrl } = deploy; @@ -50,6 +51,8 @@ export const Cep18ActionRows = ({ deploy }: Cep18ActionRowsProps) => { label="to" isAction iconSize={20} + csprName={recipientAccountInfo?.csprName} + imgLogo={recipientAccountInfo?.brandingLogo} /> ); @@ -70,7 +73,13 @@ export const Cep18ActionRows = ({ deploy }: Cep18ActionRowsProps) => { defaultSvg={DeployIcon.Cep18Default} additionalInfo="token(s)" /> - + ); } @@ -91,6 +100,8 @@ export const Cep18ActionRows = ({ deploy }: Cep18ActionRowsProps) => { label="owned by" isAction iconSize={20} + csprName={recipientAccountInfo?.csprName} + imgLogo={recipientAccountInfo?.brandingLogo} /> ); diff --git a/src/apps/popup/pages/deploy-details/components/action-rows/cspr-market-action-rows.tsx b/src/apps/popup/pages/deploy-details/components/action-rows/cspr-market-action-rows.tsx index ff771796b..13dfe9d60 100644 --- a/src/apps/popup/pages/deploy-details/components/action-rows/cspr-market-action-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/action-rows/cspr-market-action-rows.tsx @@ -79,6 +79,8 @@ export const CsprMarketActionRows = ({ deploy }: CsprMarketActionRowsProps) => { label="from" isAction iconSize={20} + csprName={offererAccountInfo?.csprName} + imgLogo={offererAccountInfo?.brandingLogo} /> ( - - - -); + deploy +}: NativeTransferActionRowsProps) => { + const { + formattedDecimalAmount, + fiatAmount, + isReceive, + callerPublicKey, + recipientKey, + callerAccountInfo, + recipientAccountInfo + } = deploy; + + return ( + + + + ); +}; diff --git a/src/apps/popup/pages/deploy-details/components/action-rows/nft-actions-rows.tsx b/src/apps/popup/pages/deploy-details/components/action-rows/nft-actions-rows.tsx index 385b9959f..878bcb047 100644 --- a/src/apps/popup/pages/deploy-details/components/action-rows/nft-actions-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/action-rows/nft-actions-rows.tsx @@ -56,6 +56,8 @@ export const NftActionsRows = ({ deploy }: NftActionsRowsProps) => { label="owned by" isAction iconSize={20} + csprName={recipientAccountInfo?.csprName} + imgLogo={recipientAccountInfo?.brandingLogo} /> ); @@ -78,6 +80,8 @@ export const NftActionsRows = ({ deploy }: NftActionsRowsProps) => { label="to" isAction iconSize={20} + csprName={recipientAccountInfo?.csprName} + imgLogo={recipientAccountInfo?.brandingLogo} /> ); @@ -100,6 +104,8 @@ export const NftActionsRows = ({ deploy }: NftActionsRowsProps) => { label="from" isAction iconSize={20} + csprName={callerAccountInfo?.csprName} + imgLogo={callerAccountInfo?.brandingLogo} /> { label="to" isAction iconSize={20} + csprName={recipientAccountInfo?.csprName} + imgLogo={recipientAccountInfo?.brandingLogo} /> ); @@ -140,7 +148,14 @@ export const NftActionsRows = ({ deploy }: NftActionsRowsProps) => { isApprove collectionHash={contractHash} /> - + ); } diff --git a/src/apps/popup/pages/deploy-details/components/deploy-details-action.tsx b/src/apps/popup/pages/deploy-details/components/deploy-details-action.tsx index 37c59748d..20e9ad2d5 100644 --- a/src/apps/popup/pages/deploy-details/components/deploy-details-action.tsx +++ b/src/apps/popup/pages/deploy-details/components/deploy-details-action.tsx @@ -70,20 +70,7 @@ export const DeployDetailsAction = ({ deploy }: ActionProps) => { if (isNativeCsprDeploy(deploy)) { return ( - + ); } diff --git a/src/apps/popup/pages/deploy-details/components/deploy-details-result.tsx b/src/apps/popup/pages/deploy-details/components/deploy-details-result.tsx index d9ab10f80..f99bb3c99 100644 --- a/src/apps/popup/pages/deploy-details/components/deploy-details-result.tsx +++ b/src/apps/popup/pages/deploy-details/components/deploy-details-result.tsx @@ -77,7 +77,7 @@ export const DeployDetailsResult = ({ deploy }: DeployDetailsResultProps) => { if (isAssociatedKeysDeploy(deploy)) { return ( - + ); } diff --git a/src/apps/popup/pages/deploy-details/components/result-rows/associated-result-rows.tsx b/src/apps/popup/pages/deploy-details/components/result-rows/associated-result-rows.tsx index ca5a4e303..371f7b543 100644 --- a/src/apps/popup/pages/deploy-details/components/result-rows/associated-result-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/result-rows/associated-result-rows.tsx @@ -1,3 +1,4 @@ +import { IAssociatedKeysDeploy } from 'casper-wallet-core/src/domain/deploys/entities'; import React from 'react'; import { SimpleContainer } from '@popup/pages/deploy-details/components/common'; @@ -6,15 +7,23 @@ import { AlignedFlexRow, SpacingSize } from '@libs/layout'; import { AccountInfoRow } from '@libs/ui/components/account-info-row/account-info-row'; interface AssociatedResultRowsProps { - publicKey: string; + deploy: IAssociatedKeysDeploy; } -export const AssociatedResultRows = ({ - publicKey -}: AssociatedResultRowsProps) => ( - - - - - -); +export const AssociatedResultRows = ({ deploy }: AssociatedResultRowsProps) => { + const { callerPublicKey, callerAccountInfo } = deploy; + return ( + + + + + + ); +}; diff --git a/src/apps/popup/pages/deploy-details/components/result-rows/cep18-result-rows.tsx b/src/apps/popup/pages/deploy-details/components/result-rows/cep18-result-rows.tsx index cfce293c6..09c3bc014 100644 --- a/src/apps/popup/pages/deploy-details/components/result-rows/cep18-result-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/result-rows/cep18-result-rows.tsx @@ -27,6 +27,8 @@ export const Cep18ResultRows = ({ const { entryPoint, formattedDecimalAmount, + recipientAccountInfo, + callerAccountInfo, symbol, recipientKey, callerPublicKey, @@ -60,6 +62,8 @@ export const Cep18ResultRows = ({ label="to" isAction iconSize={20} + csprName={recipientAccountInfo?.csprName} + imgLogo={recipientAccountInfo?.brandingLogo} /> ); @@ -81,6 +85,8 @@ export const Cep18ResultRows = ({ label="owned by" isAction iconSize={20} + csprName={recipientAccountInfo?.csprName} + imgLogo={recipientAccountInfo?.brandingLogo} /> ); @@ -102,6 +108,8 @@ export const Cep18ResultRows = ({ label="to" isAction iconSize={20} + csprName={recipientAccountInfo?.csprName} + imgLogo={recipientAccountInfo?.brandingLogo} /> ); @@ -123,12 +131,16 @@ export const Cep18ResultRows = ({ label="from" isAction iconSize={20} + csprName={callerAccountInfo?.csprName} + imgLogo={callerAccountInfo?.brandingLogo} /> ); diff --git a/src/apps/popup/pages/deploy-details/components/result-rows/native-transfer-result-rows.tsx b/src/apps/popup/pages/deploy-details/components/result-rows/native-transfer-result-rows.tsx index 321808a6c..e392dae58 100644 --- a/src/apps/popup/pages/deploy-details/components/result-rows/native-transfer-result-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/result-rows/native-transfer-result-rows.tsx @@ -34,6 +34,8 @@ export const NativeTransferResultRows = ({ label={'from'} isAction iconSize={20} + csprName={callerAccountInfo?.csprName} + imgLogo={callerAccountInfo?.brandingLogo} /> ); diff --git a/src/apps/popup/pages/deploy-details/components/result-rows/nft-result-rows.tsx b/src/apps/popup/pages/deploy-details/components/result-rows/nft-result-rows.tsx index b92b9e9e0..799cbd691 100644 --- a/src/apps/popup/pages/deploy-details/components/result-rows/nft-result-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/result-rows/nft-result-rows.tsx @@ -63,6 +63,13 @@ export const NftResultRows = ({ label="owned by" isAction iconSize={20} + csprName={ + recipientAccountInfo?.csprName || callerAccountInfo?.csprName + } + imgLogo={ + recipientAccountInfo?.brandingLogo || + callerAccountInfo?.brandingLogo + } /> ); @@ -85,6 +92,8 @@ export const NftResultRows = ({ label="to" isAction iconSize={20} + csprName={recipientAccountInfo?.csprName} + imgLogo={recipientAccountInfo?.brandingLogo} /> ); @@ -107,6 +116,8 @@ export const NftResultRows = ({ label="from" isAction iconSize={20} + csprName={callerAccountInfo?.csprName} + imgLogo={callerAccountInfo?.brandingLogo} /> ); @@ -136,6 +149,7 @@ export const NftResultRows = ({ } if (isApprove) { + console.log(1); return ( - + ); } diff --git a/src/libs/layout/containers.ts b/src/libs/layout/containers.ts index de1c4b20c..bb91080e9 100644 --- a/src/libs/layout/containers.ts +++ b/src/libs/layout/containers.ts @@ -102,7 +102,7 @@ export const FlexRow = styled.div` display: flex; gap: ${({ gap }) => getGapSize(gap)}; flex-wrap: ${({ wrap }) => wrap}; - flex-grow: ${({ flexGrow }) => flexGrow || 'inherit'}; + flex-grow: ${({ flexGrow }) => flexGrow ?? 'inherit'}; `; export const AlignedFlexRow = styled(FlexRow)` diff --git a/src/libs/ui/components/account-info-row/account-info-row.tsx b/src/libs/ui/components/account-info-row/account-info-row.tsx index 2931037c6..b9fcd429b 100644 --- a/src/libs/ui/components/account-info-row/account-info-row.tsx +++ b/src/libs/ui/components/account-info-row/account-info-row.tsx @@ -26,6 +26,7 @@ interface AccountInfoRowProps { children?: React.ReactNode; iconSize?: number; isAction?: boolean; + csprName: Maybe | undefined; } const AccountInfoContainer = styled(AlignedFlexRow)` @@ -45,7 +46,8 @@ export const AccountInfoRow = ({ imgLogo, children, iconSize = 16, - isAction = false + isAction = false, + csprName }: AccountInfoRowProps) => { const [linkUrl, setLinkUrl] = useState(''); @@ -151,6 +153,7 @@ export const AccountInfoRow = ({ ; label: string; withHash?: boolean; imgLogo?: Maybe; accountName?: string; + csprName: Maybe | undefined; }) => { const { t } = useTranslation(); @@ -43,6 +45,7 @@ const ValidatorAccountInfo = ({ accountName={accountName} imgLogo={imgLogo} label={label} + csprName={csprName} /> ); } @@ -113,6 +116,11 @@ const DelegationAuctionAction = ({ ? toValidatorAccountInfo?.name : fromValidatorAccountInfo?.name } + csprName={ + isDelegate + ? toValidatorAccountInfo?.csprName + : fromValidatorAccountInfo?.csprName + } /> )} {isRedelegate && ( @@ -122,12 +130,14 @@ const DelegationAuctionAction = ({ publicKey={fromValidator} imgLogo={fromValidatorAccountInfo?.brandingLogo} accountName={fromValidatorAccountInfo?.name} + csprName={fromValidatorAccountInfo?.csprName} /> )} diff --git a/src/libs/ui/components/deploy-plate/components/cep18-deploy-rows.tsx b/src/libs/ui/components/deploy-plate/components/cep18-deploy-rows.tsx index 63f715cf4..2ad021334 100644 --- a/src/libs/ui/components/deploy-plate/components/cep18-deploy-rows.tsx +++ b/src/libs/ui/components/deploy-plate/components/cep18-deploy-rows.tsx @@ -46,6 +46,16 @@ export const Cep18DeployRows = ({ deploy }: Erc20DeployRowsProps) => { ? deploy.callerAccountInfo?.name : deploy.recipientAccountInfo?.name } + imgLogo={ + deploy.isReceive + ? deploy.callerAccountInfo?.brandingLogo + : deploy.recipientAccountInfo?.brandingLogo + } + csprName={ + deploy.isReceive + ? deploy.callerAccountInfo?.csprName + : deploy.recipientAccountInfo?.csprName + } > {deploy.contractName} diff --git a/src/libs/ui/components/deploy-plate/components/common.tsx b/src/libs/ui/components/deploy-plate/components/common.tsx index fbcc37991..98a51d196 100644 --- a/src/libs/ui/components/deploy-plate/components/common.tsx +++ b/src/libs/ui/components/deploy-plate/components/common.tsx @@ -1,3 +1,4 @@ +import { Maybe } from 'casper-wallet-core/src/typings/common'; import React from 'react'; import { Trans, useTranslation } from 'react-i18next'; @@ -24,3 +25,14 @@ export const ContractRow = ({ ); }; + +export const NftAmount = ({ + amountOfNFTs +}: { + amountOfNFTs: Maybe; +}) => ( + + {amountOfNFTs} + NFT(s) + +); diff --git a/src/libs/ui/components/deploy-plate/components/cspr-market-deploy-rows.tsx b/src/libs/ui/components/deploy-plate/components/cspr-market-deploy-rows.tsx index 86b24cf84..fc977bb65 100644 --- a/src/libs/ui/components/deploy-plate/components/cspr-market-deploy-rows.tsx +++ b/src/libs/ui/components/deploy-plate/components/cspr-market-deploy-rows.tsx @@ -5,9 +5,10 @@ import { CsprMarketDeployEntryPoint, DeployIcon } from '@src/constants'; import { getEntryPointName } from '@popup/pages/deploy-details/utils'; -import { AlignedFlexRow, SpacingSize } from '@libs/layout'; -import { Typography } from '@libs/ui/components'; -import { ContractRow } from '@libs/ui/components/deploy-plate/components/common'; +import { + ContractRow, + NftAmount +} from '@libs/ui/components/deploy-plate/components/common'; import { DefaultDeployRows } from '@libs/ui/components/deploy-plate/components/default-deploy-rows'; import { DeployContainer } from '@libs/ui/components/deploy-plate/components/deploy-container'; @@ -40,10 +41,7 @@ export const CSPRMarketDeployRows = ({ deploy }: CSPRMarketDeployRowsProps) => { errorMessage: deploy.errorMessage }} > - - {deploy.amountOfNFTs} - NFT(s) - + ); diff --git a/src/libs/ui/components/deploy-plate/components/nft-deploy-rows.tsx b/src/libs/ui/components/deploy-plate/components/nft-deploy-rows.tsx index 7025f7cb3..a6614367b 100644 --- a/src/libs/ui/components/deploy-plate/components/nft-deploy-rows.tsx +++ b/src/libs/ui/components/deploy-plate/components/nft-deploy-rows.tsx @@ -1,28 +1,21 @@ import { INftDeploy } from 'casper-wallet-core/src/domain/deploys/entities'; -import { Maybe } from 'casper-wallet-core/src/typings/common'; import React from 'react'; import { DeployIcon, NftDeployEntryPoint } from '@src/constants'; import { getEntryPointName } from '@popup/pages/deploy-details/utils'; -import { AlignedFlexRow, SpacingSize } from '@libs/layout'; -import { Typography } from '@libs/ui/components'; import { AccountInfoRow } from '@libs/ui/components/account-info-row/account-info-row'; -import { ContractRow } from '@libs/ui/components/deploy-plate/components/common'; +import { + ContractRow, + NftAmount +} from '@libs/ui/components/deploy-plate/components/common'; import { DeployContainer } from '@libs/ui/components/deploy-plate/components/deploy-container'; interface NftDeployRowsProps { deploy: INftDeploy; } -const NftAmount = ({ amountOfNFTs }: { amountOfNFTs: Maybe }) => ( - - {amountOfNFTs} - NFT(s) - -); - export const NftDeployRows = ({ deploy }: NftDeployRowsProps) => { const { entryPoint } = deploy; const isBurn = entryPoint === NftDeployEntryPoint.burn; @@ -60,7 +53,16 @@ export const NftDeployRows = ({ deploy }: NftDeployRowsProps) => { ? deploy.callerAccountInfo?.name : deploy.recipientAccountInfo?.name } - imgLogo={deploy.iconUrl} + imgLogo={ + deploy.isReceive + ? deploy.callerAccountInfo?.brandingLogo + : deploy.recipientAccountInfo?.brandingLogo + } + csprName={ + deploy.isReceive + ? deploy.callerAccountInfo?.csprName + : deploy.recipientAccountInfo?.csprName + } > @@ -77,6 +79,16 @@ export const NftDeployRows = ({ deploy }: NftDeployRowsProps) => { ? deploy.callerAccountInfo?.name : deploy.recipientAccountInfo?.name } + imgLogo={ + deploy.isReceive + ? deploy.callerAccountInfo?.brandingLogo + : deploy.recipientAccountInfo?.brandingLogo + } + csprName={ + deploy.isReceive + ? deploy.callerAccountInfo?.csprName + : deploy.recipientAccountInfo?.csprName + } > From ed7cc8992dc9d376b808dcdf011df51c97cfe404 Mon Sep 17 00:00:00 2001 From: ost-ptk Date: Wed, 11 Sep 2024 16:03:36 +0300 Subject: [PATCH 3/4] fix e2e tests --- .../connect-account/connect-account.spec.ts | 8 +++-- e2e-tests/popup/contacts/contacts.spec.ts | 31 ++++++++++++++----- .../disconnect-account.spec.ts | 12 +++++-- .../rename-account/rename-account.spec.ts | 3 +- .../header/header-connection-status.tsx | 2 +- src/libs/ui/components/avatar/avatar.tsx | 11 +++++-- 6 files changed, 50 insertions(+), 17 deletions(-) diff --git a/e2e-tests/popup/connect-account/connect-account.spec.ts b/e2e-tests/popup/connect-account/connect-account.spec.ts index 78002b482..bfe8ebaf4 100644 --- a/e2e-tests/popup/connect-account/connect-account.spec.ts +++ b/e2e-tests/popup/connect-account/connect-account.spec.ts @@ -56,7 +56,9 @@ popup.describe('Popup UI: connect account', () => { page.getByRole('button', { name: 'Disconnect' }) ).toBeVisible(); await popupExpect( - page.getByText(ACCOUNT_NAMES.defaultFirstAccountName) + page + .getByText(ACCOUNT_NAMES.defaultFirstAccountName, { exact: true }) + .nth(1) ).toBeVisible(); } ); @@ -98,7 +100,9 @@ popup.describe('Popup UI: connect account', () => { page.getByRole('button', { name: 'Disconnect' }) ).toBeVisible(); await popupExpect( - page.getByText(ACCOUNT_NAMES.defaultFirstAccountName) + page + .getByText(ACCOUNT_NAMES.defaultFirstAccountName, { exact: true }) + .nth(1) ).toBeVisible(); await popupExpect( page.getByText(ACCOUNT_NAMES.defaultSecondAccountName) diff --git a/e2e-tests/popup/contacts/contacts.spec.ts b/e2e-tests/popup/contacts/contacts.spec.ts index 461e3efc6..ac1f48fa4 100644 --- a/e2e-tests/popup/contacts/contacts.spec.ts +++ b/e2e-tests/popup/contacts/contacts.spec.ts @@ -68,7 +68,9 @@ popup.describe('Popup UI: contacts', () => { ).toBeVisible(); await popupExpect( - popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName) + popupPage + .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true }) + .nth(1) ).toBeVisible(); await popupExpect( @@ -135,7 +137,10 @@ popup.describe('Popup UI: contacts', () => { await unlockVault(); await addContact(); - await popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName).click(); + await popupPage + .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true }) + .nth(1) + .click(); await popupExpect( popupPage.getByRole('heading', { @@ -144,7 +149,9 @@ popup.describe('Popup UI: contacts', () => { ).toBeVisible(); await popupExpect( - popupPage.getByText(DEFAULT_FIRST_ACCOUNT.publicKey) + popupPage + .getByText(DEFAULT_FIRST_ACCOUNT.publicKey, { exact: true }) + .nth(1) ).toBeVisible(); } ); @@ -155,7 +162,10 @@ popup.describe('Popup UI: contacts', () => { await unlockVault(); await addContact(); - await popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName).click(); + await popupPage + .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true }) + .nth(1) + .click(); await popupPage.getByTestId('edit-contact-button').click(); @@ -190,7 +200,9 @@ popup.describe('Popup UI: contacts', () => { await popupPage.getByRole('button', { name: 'Save' }).click(); await popupExpect( - popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName) + popupPage + .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true }) + .nth(1) ).not.toBeVisible(); await popupPage.getByText(DEFAULT_SECOND_ACCOUNT.accountName).click(); @@ -213,7 +225,10 @@ popup.describe('Popup UI: contacts', () => { await unlockVault(); await addContact(); - await popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName).click(); + await popupPage + .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true }) + .nth(1) + .click(); await popupPage.getByTestId('delete-contact-button').click(); @@ -233,7 +248,9 @@ popup.describe('Popup UI: contacts', () => { await popupPage.getByRole('button', { name: 'Delete' }).click(); await popupExpect( - popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName) + popupPage + .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true }) + .nth(1) ).not.toBeVisible(); } ); diff --git a/e2e-tests/popup/disconnect-account/disconnect-account.spec.ts b/e2e-tests/popup/disconnect-account/disconnect-account.spec.ts index b862603fc..f0e9e3418 100644 --- a/e2e-tests/popup/disconnect-account/disconnect-account.spec.ts +++ b/e2e-tests/popup/disconnect-account/disconnect-account.spec.ts @@ -28,7 +28,9 @@ popup.describe('Popup UI: disconnect account', () => { await popupPage.getByText('Connected sites').click(); await popupExpect( - popupPage.getByText(ACCOUNT_NAMES.defaultFirstAccountName) + popupPage + .getByText(ACCOUNT_NAMES.defaultFirstAccountName, { exact: true }) + .nth(1) ).toBeVisible(); await popupExpect( popupPage.getByText(ACCOUNT_NAMES.defaultSecondAccountName) @@ -40,7 +42,9 @@ popup.describe('Popup UI: disconnect account', () => { await disconnectIcons[0].click(); await popupExpect( - popupPage.getByText(ACCOUNT_NAMES.defaultFirstAccountName) + popupPage + .getByText(ACCOUNT_NAMES.defaultFirstAccountName, { exact: true }) + .nth(1) ).not.toBeVisible(); await popupExpect( popupPage.getByText(ACCOUNT_NAMES.defaultSecondAccountName) @@ -55,7 +59,9 @@ popup.describe('Popup UI: disconnect account', () => { await popupPage.getByText('Connected sites').click(); await popupExpect( - popupPage.getByText(ACCOUNT_NAMES.defaultFirstAccountName) + popupPage + .getByText(ACCOUNT_NAMES.defaultFirstAccountName, { exact: true }) + .nth(1) ).toBeVisible(); await popupExpect( popupPage.getByText(ACCOUNT_NAMES.defaultSecondAccountName) diff --git a/e2e-tests/popup/rename-account/rename-account.spec.ts b/e2e-tests/popup/rename-account/rename-account.spec.ts index a295c9b91..857f12004 100644 --- a/e2e-tests/popup/rename-account/rename-account.spec.ts +++ b/e2e-tests/popup/rename-account/rename-account.spec.ts @@ -7,7 +7,8 @@ popup.describe('Popup UI: rename account', () => { async ({ popupPage, unlockVault }) => { await unlockVault(); - await popupPage.getByTestId('popover-children-container').click(); + await popupPage.getByTestId('connection-status-modal').click(); + await popupPage.getByTestId('popover-children-container').nth(0).click(); await popupPage.getByText('Rename').click(); diff --git a/src/libs/layout/header/header-connection-status.tsx b/src/libs/layout/header/header-connection-status.tsx index d79f39f96..989894a20 100644 --- a/src/libs/layout/header/header-connection-status.tsx +++ b/src/libs/layout/header/header-connection-status.tsx @@ -41,7 +41,6 @@ export function HeaderConnectionStatus({ return ( ( )} @@ -56,6 +55,7 @@ export function HeaderConnectionStatus({ displayContext="header" brandingLogo={brandingLogo} isAccountSwitcherOpen={isOpen} + dataTestId="connection-status-modal" /> | undefined; isAccountSwitcherOpen?: boolean; + dataTestId?: string; } interface ConnectionStatusBadgeTypes { @@ -86,6 +87,7 @@ interface ConnectionStatusBadgeTypes { displayContext?: 'header' | 'accountList'; isDarkMode: boolean; isAccountSwitcherOpen?: boolean; + dataTestId?: string; } interface LogoTypes { @@ -105,10 +107,11 @@ const ConnectionStatusBadge = ({ displayContext, isConnected, isDarkMode, - isAccountSwitcherOpen + isAccountSwitcherOpen, + dataTestId }: ConnectionStatusBadgeTypes) => { return ( - + {children} { const theme = useTheme(); @@ -163,6 +167,7 @@ export const Avatar = ({ connectIcon={connectIcon} isDarkMode={isDarkMode} isAccountSwitcherOpen={isAccountSwitcherOpen} + dataTestId={dataTestId} > {brandingLogo ? ( From 0c7ae35a493264409fe55a5602f84dd05e1c6c7e Mon Sep 17 00:00:00 2001 From: ost-ptk Date: Wed, 11 Sep 2024 16:10:42 +0300 Subject: [PATCH 4/4] fix onboarding e2e tests --- e2e-tests/constants.ts | 2 +- .../recover-secret-phrase-flow.spec.ts | 24 ++++++++++++++----- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/e2e-tests/constants.ts b/e2e-tests/constants.ts index 05b7d7c91..51248a82c 100644 --- a/e2e-tests/constants.ts +++ b/e2e-tests/constants.ts @@ -78,7 +78,7 @@ export const RECOVER_FIRST_ACCOUNT_FROM_TWELVE_WORDS = { }; export const RECOVER_SECOND_ACCOUNT_FROM_TWELVE_WORDS = { - accountName: 'Account 1', + accountName: 'Account 2', publicKey: '02022cafccfb61ffc4e4221e4d2c38eec6035d579d04c1396b1c2027dc0729c53589', truncatedPublicKey: '02022...53589' diff --git a/e2e-tests/onboarding-flow/recover-secret-phrase-flow.spec.ts b/e2e-tests/onboarding-flow/recover-secret-phrase-flow.spec.ts index 45d22d064..73d7f8d49 100644 --- a/e2e-tests/onboarding-flow/recover-secret-phrase-flow.spec.ts +++ b/e2e-tests/onboarding-flow/recover-secret-phrase-flow.spec.ts @@ -50,7 +50,9 @@ onboarding.describe('Onboarding UI: recover secret phrase flow', () => { await page.getByText('All accounts').click(); await onboardingExpect( - page.getByText(DEFAULT_FIRST_ACCOUNT.accountName) + page + .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true }) + .nth(1) ).toBeVisible(); await onboardingExpect( page.getByText(DEFAULT_FIRST_ACCOUNT.truncatedPublicKey).nth(0) @@ -100,10 +102,12 @@ onboarding.describe('Onboarding UI: recover secret phrase flow', () => { await page.getByText('All accounts').click(); await onboardingExpect( - page.getByText(DEFAULT_FIRST_ACCOUNT.accountName) + page + .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true }) + .nth(1) ).toBeVisible(); await onboardingExpect( - page.getByText(DEFAULT_FIRST_ACCOUNT.truncatedPublicKey).nth(0) + page.getByText(DEFAULT_FIRST_ACCOUNT.truncatedPublicKey).nth(1) ).toBeVisible(); await onboardingExpect( page.getByText(DEFAULT_SECOND_ACCOUNT.accountName) @@ -158,7 +162,11 @@ onboarding.describe('Onboarding UI: recover secret phrase flow', () => { await page.getByText('All accounts').click(); await onboardingExpect( - page.getByText(RECOVER_FIRST_ACCOUNT_FROM_TWELVE_WORDS.accountName) + page + .getByText(RECOVER_FIRST_ACCOUNT_FROM_TWELVE_WORDS.accountName, { + exact: true + }) + .nth(1) ).toBeVisible(); await onboardingExpect( page @@ -213,12 +221,16 @@ onboarding.describe('Onboarding UI: recover secret phrase flow', () => { await page.getByText('All accounts').click(); await onboardingExpect( - page.getByText(RECOVER_FIRST_ACCOUNT_FROM_TWELVE_WORDS.accountName) + page + .getByText(RECOVER_FIRST_ACCOUNT_FROM_TWELVE_WORDS.accountName, { + exact: true + }) + .nth(1) ).toBeVisible(); await onboardingExpect( page .getByText(RECOVER_FIRST_ACCOUNT_FROM_TWELVE_WORDS.truncatedPublicKey) - .nth(0) + .nth(1) ).toBeVisible(); await onboardingExpect( page.getByText(RECOVER_SECOND_ACCOUNT_FROM_TWELVE_WORDS.accountName)