From 9e7b921ec2c8f3006eb67dcb408482669e9058bc Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Mon, 8 Jan 2024 18:54:04 +0100 Subject: [PATCH 1/4] Allow ParaTimes with OasisMonitor backend (we use grpc to fetch balance) --- src/app/pages/ParaTimesPage/useParaTimesNavigation.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/pages/ParaTimesPage/useParaTimesNavigation.ts b/src/app/pages/ParaTimesPage/useParaTimesNavigation.ts index 7559d06836..37680f438e 100644 --- a/src/app/pages/ParaTimesPage/useParaTimesNavigation.ts +++ b/src/app/pages/ParaTimesPage/useParaTimesNavigation.ts @@ -2,8 +2,6 @@ import { useCallback } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useTranslation } from 'react-i18next' import { paraTimesActions } from 'app/state/paratimes' -import { backend } from 'vendors/backend' -import { BackendAPIs } from 'config' import { WalletType } from 'app/state/wallet/types' import { selectType } from 'app/state/wallet/selectors' @@ -24,7 +22,7 @@ export const useParaTimesNavigation = (): ParaTimesNavigationHook => { const { t } = useTranslation() const dispatch = useDispatch() const walletType = useSelector(selectType) - const canAccessParaTimesRoute = backend() === BackendAPIs.OasisScan && walletType !== WalletType.UsbLedger + const canAccessParaTimesRoute = walletType !== WalletType.UsbLedger const getParaTimesRoutePath = (address: string) => `/account/${address}/paratimes` const navigateToDeposit = useCallback(() => dispatch(paraTimesActions.navigateToDeposit()), [dispatch]) const navigateToWithdraw = useCallback(() => dispatch(paraTimesActions.navigateToWithdraw()), [dispatch]) From f0ee437d036947d4be689677d200e99ebb7d91fa Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Tue, 9 Jan 2024 03:36:07 +0100 Subject: [PATCH 2/4] Rename ParaTimesPageInaccessibleForeign --- .../__tests__/__snapshots__/index.test.tsx.snap | 2 +- .../__tests__/index.test.tsx | 4 ++-- .../ParaTimesPageInaccessible/index.tsx | 4 ++-- .../pages/ParaTimesPage/__tests__/index.test.tsx | 2 +- src/app/pages/ParaTimesPage/index.tsx | 16 ++++++++++------ src/locales/en/translation.json | 4 +++- src/locales/sl/translation.json | 4 +++- src/locales/tr/translation.json | 4 +++- src/locales/zh_CN/translation.json | 4 +++- 9 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/__tests__/__snapshots__/index.test.tsx.snap index 4728f3cd45..3ce8ba413e 100644 --- a/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/__tests__/__snapshots__/index.test.tsx.snap @@ -106,7 +106,7 @@ exports[` should render component 1`] = ` class="c3" data-testid="paraTime-content-description" > - paraTimes.pageInaccessible + paraTimes.pageInaccessible.foreignAccount
', () => { it('should render component', () => { jest.mocked(useParaTimes).mockReturnValue({} as ParaTimesHook) - const { container } = render() + const { container } = render() expect(container).toMatchSnapshot() }) diff --git a/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/index.tsx b/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/index.tsx index 85de9607cb..53ad8daf40 100644 --- a/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/index.tsx +++ b/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/index.tsx @@ -2,13 +2,13 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { ParaTimeContent } from '../ParaTimeContent' -export const ParaTimesPageInaccessible = () => { +export const ParaTimesPageInaccessibleForeign = () => { const { t } = useTranslation() return ( ) } diff --git a/src/app/pages/ParaTimesPage/__tests__/index.test.tsx b/src/app/pages/ParaTimesPage/__tests__/index.test.tsx index 6833363d6f..30b53f974c 100644 --- a/src/app/pages/ParaTimesPage/__tests__/index.test.tsx +++ b/src/app/pages/ParaTimesPage/__tests__/index.test.tsx @@ -46,7 +46,7 @@ describe('', () => { render() - expect(screen.getByText('paraTimes.pageInaccessible')).toBeInTheDocument() + expect(screen.getByText('paraTimes.pageInaccessible.foreignAccount')).toBeInTheDocument() expect(screen.queryByText('paraTimes.transfers.deposit')).not.toBeInTheDocument() expect(screen.queryByText('paraTimes.transfers.withdraw')).not.toBeInTheDocument() }) diff --git a/src/app/pages/ParaTimesPage/index.tsx b/src/app/pages/ParaTimesPage/index.tsx index 5398b5f1d4..f819192082 100644 --- a/src/app/pages/ParaTimesPage/index.tsx +++ b/src/app/pages/ParaTimesPage/index.tsx @@ -7,7 +7,7 @@ import { selectParaTimes } from 'app/state/paratimes/selectors' import { selectIsAddressInWallet } from 'app/state/selectIsAddressInWallet' import { TransactionFormSteps } from 'app/state/paratimes/types' import { ExhaustedTypeError } from 'types/errors' -import { ParaTimesPageInaccessible } from './ParaTimesPageInaccessible' +import { ParaTimesPageInaccessibleForeign } from './ParaTimesPageInaccessible' import { ParaTimeTransferType } from './ParaTimeTransferType' import { ParaTimeSelection } from './ParaTimeSelection' import { TransactionRecipient } from './TransactionRecipient' @@ -55,13 +55,17 @@ export const ParaTimes = () => { clearTransactionForm() }, [clearTransactionForm, selectedNetwork]) + if (!isAddressInWallet) { + return ( + + + + ) + } + return ( - {isAddressInWallet ? ( - - ) : ( - - )} + ) } diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 8b0a3f6fbe..fe800a874b 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -341,7 +341,9 @@ "next": "Next", "notice": "* EVMc - compatible with Ethereum Virtual Machine" }, - "pageInaccessible": "Transfers are not available.", + "pageInaccessible": { + "foreignAccount": "Transfers are not available." + }, "recipient": { "depositDescription": "Please enter the recipient address on {{paraTime}} {{paratimeType}} and then click \"{{nextButtonLabel}}\"", "ethPrivateKeyPlaceholder": "Enter Ethereum-compatible private key", diff --git a/src/locales/sl/translation.json b/src/locales/sl/translation.json index 0b94d6c720..dde602cc09 100644 --- a/src/locales/sl/translation.json +++ b/src/locales/sl/translation.json @@ -271,7 +271,9 @@ "back": "Nazaj", "next": "Naprej" }, - "pageInaccessible": "Prenosi niso na voljo", + "pageInaccessible": { + "foreignAccount": "Prenosi niso na voljo" + }, "recipient": { "placeholder": "0x..." }, diff --git a/src/locales/tr/translation.json b/src/locales/tr/translation.json index 430ac6659a..b31ef9a924 100644 --- a/src/locales/tr/translation.json +++ b/src/locales/tr/translation.json @@ -333,7 +333,9 @@ "next": "İleri", "notice": "EVMC - Ethereum Sanal Makine ile uyumlu" }, - "pageInaccessible": "Transferler mevcut değil", + "pageInaccessible": { + "foreignAccount": "Transferler mevcut değil" + }, "recipient": { "depositDescription": "Lütfen alıcı adresini {{paraTime}} {{paratimeType}} alanına girin ve ardından {{nextButtonLabel}} seçeneğine tıklayın", "ethPrivateKeyPlaceholder": "Ethereum uyumlu özel anahtarınızı girin", diff --git a/src/locales/zh_CN/translation.json b/src/locales/zh_CN/translation.json index d82130185d..77d3e36166 100644 --- a/src/locales/zh_CN/translation.json +++ b/src/locales/zh_CN/translation.json @@ -341,7 +341,9 @@ "next": "前进", "notice": "* EVMc - 兼容以太坊虚拟机" }, - "pageInaccessible": "转账不可用", + "pageInaccessible": { + "foreignAccount": "转账不可用" + }, "recipient": { "depositDescription": "请在{{paraTime}} {{paratimeType}}上输入收款地址，然后点击“{{nextButtonLabel}}”", "ethPrivateKeyPlaceholder": "输入以太坊兼容的私钥", From 9464f287b59ca3f4a26ba1cd5d637433e306632e Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Tue, 9 Jan 2024 03:44:24 +0100 Subject: [PATCH 3/4] Show disabled ParaTimes page on Ledger accounts --- .../ParaTimesPageInaccessible/index.tsx | 10 ++++++++++ src/app/pages/ParaTimesPage/index.tsx | 17 ++++++++++++++++- src/locales/en/translation.json | 3 ++- src/locales/zh_CN/translation.json | 3 ++- 4 files changed, 30 insertions(+), 3 deletions(-) diff --git a/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/index.tsx b/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/index.tsx index 53ad8daf40..db0c94f54d 100644 --- a/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/index.tsx +++ b/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/index.tsx @@ -12,3 +12,13 @@ export const ParaTimesPageInaccessibleForeign = () => { /> ) } + +export const ParaTimesPageInaccessibleLedger = () => { + const { t } = useTranslation() + return ( + + ) +} diff --git a/src/app/pages/ParaTimesPage/index.tsx b/src/app/pages/ParaTimesPage/index.tsx index f819192082..2a19808edd 100644 --- a/src/app/pages/ParaTimesPage/index.tsx +++ b/src/app/pages/ParaTimesPage/index.tsx @@ -6,8 +6,13 @@ import { selectSelectedNetwork } from 'app/state/network/selectors' import { selectParaTimes } from 'app/state/paratimes/selectors' import { selectIsAddressInWallet } from 'app/state/selectIsAddressInWallet' import { TransactionFormSteps } from 'app/state/paratimes/types' +import { WalletType } from 'app/state/wallet/types' +import { selectType } from 'app/state/wallet/selectors' import { ExhaustedTypeError } from 'types/errors' -import { ParaTimesPageInaccessibleForeign } from './ParaTimesPageInaccessible' +import { + ParaTimesPageInaccessibleForeign, + ParaTimesPageInaccessibleLedger, +} from './ParaTimesPageInaccessible' import { ParaTimeTransferType } from './ParaTimeTransferType' import { ParaTimeSelection } from './ParaTimeSelection' import { TransactionRecipient } from './TransactionRecipient' @@ -43,7 +48,9 @@ export const ParaTimes = () => { const selectedNetwork = useSelector(selectSelectedNetwork) const { transactionFormStep } = useSelector(selectParaTimes) const isAddressInWallet = useSelector(selectIsAddressInWallet) + const walletType = useSelector(selectType) const { clearTransactionForm } = useParaTimes() + const isLedgerWallet = walletType === WalletType.UsbLedger || walletType === WalletType.BleLedger useEffect(() => { return () => { @@ -63,6 +70,14 @@ export const ParaTimes = () => { ) } + if (isLedgerWallet) { + return ( + + + + ) + } + return ( diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index fe800a874b..e9b0c8e83b 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -342,7 +342,8 @@ "notice": "* EVMc - compatible with Ethereum Virtual Machine" }, "pageInaccessible": { - "foreignAccount": "Transfers are not available." + "foreignAccount": "Transfers are not available.", + "ledgerAccount": "Ledger account is not supported." }, "recipient": { "depositDescription": "Please enter the recipient address on {{paraTime}} {{paratimeType}} and then click \"{{nextButtonLabel}}\"", diff --git a/src/locales/zh_CN/translation.json b/src/locales/zh_CN/translation.json index 77d3e36166..f252023cb2 100644 --- a/src/locales/zh_CN/translation.json +++ b/src/locales/zh_CN/translation.json @@ -342,7 +342,8 @@ "notice": "* EVMc - 兼容以太坊虚拟机" }, "pageInaccessible": { - "foreignAccount": "转账不可用" + "foreignAccount": "转账不可用", + "ledgerAccount": "暂不支持Ledger账户" }, "recipient": { "depositDescription": "请在{{paraTime}} {{paratimeType}}上输入收款地址，然后点击“{{nextButtonLabel}}”", From 7ec365a9559df1033fc02d242562d8844478a21f Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Mon, 8 Jan 2024 19:18:44 +0100 Subject: [PATCH 4/4] Show a link to disabled ParaTimes page on Ledger accounts --- .changelog/1824.feature.md | 1 + .../__tests__/index.test.tsx | 14 +- .../MobileFooterNavigation/index.tsx | 18 +- .../__snapshots__/index.test.tsx.snap | 651 ++++++++++++++++++ .../Sidebar/__tests__/index.test.tsx | 15 +- src/app/components/Sidebar/index.tsx | 5 +- .../ParaTimesPage/useParaTimesNavigation.ts | 8 +- 7 files changed, 667 insertions(+), 45 deletions(-) create mode 100644 .changelog/1824.feature.md diff --git a/.changelog/1824.feature.md b/.changelog/1824.feature.md new file mode 100644 index 0000000000..96d25a58ac --- /dev/null +++ b/.changelog/1824.feature.md @@ -0,0 +1 @@ +Show a link to disabled ParaTimes page on Ledger accounts diff --git a/src/app/components/MobileFooterNavigation/__tests__/index.test.tsx b/src/app/components/MobileFooterNavigation/__tests__/index.test.tsx index 5a92d3bdc2..8fcea0ad33 100644 --- a/src/app/components/MobileFooterNavigation/__tests__/index.test.tsx +++ b/src/app/components/MobileFooterNavigation/__tests__/index.test.tsx @@ -24,7 +24,6 @@ const renderComponent = (store: any, { walletHasAccounts, isMobile }: MobileFoot describe('', () => { let store: ReturnType const mockUseParaTimesNavigationResult = { - canAccessParaTimesRoute: false, getParaTimesRoutePath: (address: string) => address, paraTimesRouteLabel: 'MockParaTimesLabel', } as ParaTimesNavigationHook @@ -47,7 +46,7 @@ describe('', () => { renderComponent(store, { walletHasAccounts: true, isMobile: true }) expect(screen.getByTestId('mobile-footer-navigation')).toBeInTheDocument() - expect(screen.queryByText('MockParaTimesLabel')).not.toBeInTheDocument() + expect(screen.queryByText('MockParaTimesLabel')).toBeInTheDocument() }) it('should not render component for non mobile', () => { @@ -61,15 +60,4 @@ describe('', () => { expect(screen.queryByTestId('mobile-footer-navigation')).not.toBeInTheDocument() }) - - it('should render paraTime link', () => { - jest.mocked(useParaTimesNavigation).mockReturnValue({ - ...mockUseParaTimesNavigationResult, - canAccessParaTimesRoute: true, - }) - renderComponent(store, { walletHasAccounts: true, isMobile: true }) - - expect(screen.getByText('MockParaTimesLabel')).toBeInTheDocument() - expect(screen.getByLabelText('Inherit')).toBeInTheDocument() - }) }) diff --git a/src/app/components/MobileFooterNavigation/index.tsx b/src/app/components/MobileFooterNavigation/index.tsx index 3f85e3b4db..5e94e81f25 100644 --- a/src/app/components/MobileFooterNavigation/index.tsx +++ b/src/app/components/MobileFooterNavigation/index.tsx @@ -40,7 +40,7 @@ export interface MobileFooterNavigationProps { export const MobileFooterNavigation = ({ walletHasAccounts, isMobile }: MobileFooterNavigationProps) => { const { t } = useTranslation() const address = useSelector(selectAddress) - const { canAccessParaTimesRoute, getParaTimesRoutePath, paraTimesRouteLabel } = useParaTimesNavigation() + const { getParaTimesRoutePath, paraTimesRouteLabel } = useParaTimesNavigation() const getMenuItems = useMemo(() => { const menuItems = [ { @@ -53,15 +53,11 @@ export const MobileFooterNavigation = ({ walletHasAccounts, isMobile }: MobileFo Icon: LineChart, to: `/account/${address}/stake`, }, - ...(canAccessParaTimesRoute - ? [ - { - label: paraTimesRouteLabel, - Icon: Inherit, - to: getParaTimesRoutePath(address!), - }, - ] - : []), + { + label: paraTimesRouteLabel, + Icon: Inherit, + to: getParaTimesRoutePath(address!), + }, ...(IS_FIAT_ONRAMP_ENABLED ? [ { @@ -73,7 +69,7 @@ export const MobileFooterNavigation = ({ walletHasAccounts, isMobile }: MobileFo : []), ] return menuItems - }, [address, canAccessParaTimesRoute, getParaTimesRoutePath, paraTimesRouteLabel, t]) + }, [address, getParaTimesRoutePath, paraTimesRouteLabel, t]) if (!isMobile || !walletHasAccounts) { return null diff --git a/src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap index e2cf7d76f6..6f743c1845 100644 --- a/src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap @@ -447,6 +447,9 @@ exports[` should match snapshot 1`] = `
+
should match snapshot 1`] = `
`; + +exports[` with account opened should match snapshot 1`] = ` +.c11 { + display: inline-block; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: 24px; + height: 24px; + fill: #666666; + stroke: #666666; +} + +.c11 g { + fill: inherit; + stroke: inherit; +} + +.c11 *:not([stroke])[fill='none'] { + stroke-width: 0; +} + +.c11 *[stroke*='#'],.c11 *[STROKE*='#'] { + stroke: inherit; + fill: none; +} + +.c11 *[fill-rule], +.c11 *[FILL-RULE], +.c11 *[fill*='#'],.c11 *[FILL*='#'] { + fill: inherit; + stroke: none; +} + +.c4 { + -webkit-flex: 1 1; + -ms-flex: 1 1; + flex: 1 1; + overflow: hidden; + object-fit: contain; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + background: component-sidebar; + min-width: 0; + min-height: 0; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + min-height: 100%; + width: 220px; + padding-top: 24px; + padding-bottom: 24px; + padding-left: 0px; + padding-right: 0px; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + margin-bottom: 24px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-width: 0; + min-height: 0; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 24px; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-width: 0; + min-height: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-width: 0; + min-height: 0; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 48px; + width: 48px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + border-radius: 100%; + overflow: hidden; +} + +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + min-width: 0; + min-height: 0; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex: 1 1; + -ms-flex: 1 1; + flex: 1 1; +} + +.c9 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + min-width: 0; + min-height: 0; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding: 0px; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + background: background-oasis-blue; + min-width: 0; + min-height: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 24px; +} + +.c13 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + min-width: 0; + min-height: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 24px; +} + +.c14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + min-width: 0; + min-height: 0; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} + +.c5 { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + width: 12px; +} + +.c7 { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + height: 12px; +} + +.c12 { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + width: 24px; +} + +.c6 { + font-size: 18px; + line-height: 24px; +} + +.c15 { + display: inline-block; + box-sizing: border-box; + cursor: pointer; + font: inherit; + -webkit-text-decoration: none; + text-decoration: none; + margin: 0; + background: transparent; + overflow: visible; + text-transform: none; + color: inherit; + outline: none; + border: none; + padding: 0; + text-align: inherit; + width: 100%; +} + +.c15:focus { + outline: none; + box-shadow: 0 0 2px 2px #6FFFB0; +} + +.c15:focus > circle, +.c15:focus > ellipse, +.c15:focus > line, +.c15:focus > path, +.c15:focus > polygon, +.c15:focus > polyline, +.c15:focus > rect { + outline: none; + box-shadow: 0 0 2px 2px #6FFFB0; +} + +.c15:focus::-moz-focus-inner { + border: 0; +} + +.c15:focus:not(:focus-visible) { + outline: none; + box-shadow: none; +} + +.c15:focus:not(:focus-visible) > circle,.c15:focus:not(:focus-visible) > ellipse, +.c15:focus:not(:focus-visible) > line,.c15:focus:not(:focus-visible) > path, +.c15:focus:not(:focus-visible) > polygon,.c15:focus:not(:focus-visible) > polyline, +.c15:focus:not(:focus-visible) > rect { + outline: none; + box-shadow: none; +} + +.c15:focus:not(:focus-visible)::-moz-focus-inner { + border: 0; +} + +@media only screen and (max-width:768px) { + .c0 { + padding-top: 12px; + padding-bottom: 12px; + } +} + +@media only screen and (max-width:768px) { + .c0 { + padding-left: 0px; + } +} + +@media only screen and (max-width:768px) { + .c0 { + padding-right: 0px; + } +} + +@media only screen and (max-width:768px) { + .c1 { + margin-bottom: 12px; + } +} + +@media only screen and (max-width:768px) { + .c1 { + padding: 12px; + } +} + +@media only screen and (max-width:768px) { + .c9 { + padding: 0px; + } +} + +@media only screen and (max-width:768px) { + .c5 { + width: 6px; + } +} + +@media only screen and (max-width:768px) { + .c7 { + height: 6px; + } +} + +
+
+ +
+
+ +
+
+ + Oasis Wallet + +
+ +
+
+
+ +
+
+ +
+`; diff --git a/src/app/components/Sidebar/__tests__/index.test.tsx b/src/app/components/Sidebar/__tests__/index.test.tsx index a22c1d241e..40c6edc418 100644 --- a/src/app/components/Sidebar/__tests__/index.test.tsx +++ b/src/app/components/Sidebar/__tests__/index.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/react' +import { render } from '@testing-library/react' import { MemoryRouter } from 'react-router-dom' import * as React from 'react' import { Provider } from 'react-redux' @@ -25,7 +25,6 @@ const renderComponent = (store: any) => { describe('', () => { let store: ReturnType const mockUseParaTimesNavigationResult = { - canAccessParaTimesRoute: false, getParaTimesRoutePath: (address: string) => address, paraTimesRouteLabel: 'MockParaTimesLabel', } as ParaTimesNavigationHook @@ -40,12 +39,8 @@ describe('', () => { expect(component.container.firstChild).toMatchSnapshot() }) - it('should render paraTime link', () => { - jest.mocked(useParaTimesNavigation).mockReturnValue({ - ...mockUseParaTimesNavigationResult, - canAccessParaTimesRoute: true, - }) - renderComponent( + it('with account opened should match snapshot', () => { + const component = renderComponent( configureAppStore({ wallet: { selectedWallet: 'dummy', @@ -57,8 +52,6 @@ describe('', () => { }, }), ) - - expect(screen.getByText('MockParaTimesLabel')).toBeInTheDocument() - expect(screen.getByLabelText('Inherit')).toBeInTheDocument() + expect(component.container.firstChild).toMatchSnapshot() }) }) diff --git a/src/app/components/Sidebar/index.tsx b/src/app/components/Sidebar/index.tsx index a5b082c4ec..a702fce1c5 100644 --- a/src/app/components/Sidebar/index.tsx +++ b/src/app/components/Sidebar/index.tsx @@ -259,7 +259,7 @@ const SidebarFooter = (props: SidebarFooterProps) => { function SidebarMenuItems() { const address = useSelector(selectAddress) const { t } = useTranslation() - const { canAccessParaTimesRoute, getParaTimesRoutePath, paraTimesRouteLabel } = useParaTimesNavigation() + const { getParaTimesRoutePath, paraTimesRouteLabel } = useParaTimesNavigation() const menu = { home: } label={t('menu.home', 'Home')} route="/" data-testid="nav-home" />, wallet: ( @@ -304,8 +304,7 @@ function SidebarMenuItems() { {menu.home} {menu.wallet} {menu.stake} - {/* eslint-disable-next-line no-restricted-syntax -- menu.paraTimes is not a plain text node */} - {canAccessParaTimesRoute && menu.paraTimes} + {menu.paraTimes} {/* eslint-disable-next-line no-restricted-syntax -- menu.fiatOnramp is not a plain text node */} {IS_FIAT_ONRAMP_ENABLED && menu.fiatOnramp} diff --git a/src/app/pages/ParaTimesPage/useParaTimesNavigation.ts b/src/app/pages/ParaTimesPage/useParaTimesNavigation.ts index 37680f438e..aa62ae243b 100644 --- a/src/app/pages/ParaTimesPage/useParaTimesNavigation.ts +++ b/src/app/pages/ParaTimesPage/useParaTimesNavigation.ts @@ -1,12 +1,9 @@ import { useCallback } from 'react' -import { useDispatch, useSelector } from 'react-redux' +import { useDispatch } from 'react-redux' import { useTranslation } from 'react-i18next' import { paraTimesActions } from 'app/state/paratimes' -import { WalletType } from 'app/state/wallet/types' -import { selectType } from 'app/state/wallet/selectors' export type ParaTimesNavigationHook = { - canAccessParaTimesRoute: boolean getParaTimesRoutePath: (address: string) => string navigateToAmount: () => void navigateToDeposit: () => void @@ -21,8 +18,6 @@ export type ParaTimesNavigationHook = { export const useParaTimesNavigation = (): ParaTimesNavigationHook => { const { t } = useTranslation() const dispatch = useDispatch() - const walletType = useSelector(selectType) - const canAccessParaTimesRoute = walletType !== WalletType.UsbLedger const getParaTimesRoutePath = (address: string) => `/account/${address}/paratimes` const navigateToDeposit = useCallback(() => dispatch(paraTimesActions.navigateToDeposit()), [dispatch]) const navigateToWithdraw = useCallback(() => dispatch(paraTimesActions.navigateToWithdraw()), [dispatch]) @@ -37,7 +32,6 @@ export const useParaTimesNavigation = (): ParaTimesNavigationHook => { const paraTimesRouteLabel = t('menu.paraTimes', 'ParaTimes') return { - canAccessParaTimesRoute, getParaTimesRoutePath, navigateToAmount, navigateToConfirmation,