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,