add paper wallet page on settings

Emurgo · Nov 5, 2024 · 56c1a3a · 56c1a3a
1 parent e781cc0
commit 56c1a3a
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 70 deletions.
diff --git a/packages/yoroi-extension/app/Routes.js b/packages/yoroi-extension/app/Routes.js
@@ -83,6 +83,8 @@ const SupportSettingsPagePromise = () => import('./containers/settings/categorie
 const SupportSettingsPage = React.lazy(SupportSettingsPagePromise);
 const AnalyticsSettingsPagePromise = () => import('./containers/settings/categories/AnalyticsSettingsPage');
 const AnalyticsSettingsPage = React.lazy(AnalyticsSettingsPagePromise);
+const PaperWalletSettingsPagePromise = () => import('./containers/settings/categories/PaperWalletSettingsPage');
+const PaperWalletSettingsPage = React.lazy(PaperWalletSettingsPagePromise);
 
 const NightlyPagePromise = () => import('./containers/profile/NightlyPage');
 const NightlyPage = React.lazy(NightlyPagePromise);
@@ -428,6 +430,11 @@ const SettingsSubpages = (stores, actions) => (
       path={ROUTES.SETTINGS.ANALYTICS}
       component={props => <AnalyticsSettingsPage {...props} stores={stores} actions={actions} />}
     />
+    <Route
+      exact
+      path={ROUTES.SETTINGS.PAPER_WALLET}
+      component={props => <PaperWalletSettingsPage {...props} stores={stores} actions={actions} />}
+    />
     <Redirect to={ROUTES.SETTINGS.GENERAL} />
   </Switch>
 );

diff --git a/packages/yoroi-extension/app/components/settings/categories/PaperWalletSettings.js b/packages/yoroi-extension/app/components/settings/categories/PaperWalletSettings.js
@@ -0,0 +1,31 @@
+// @flow
+import type { Node, ComponentType } from 'react';
+import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
+import { Component } from 'react';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Button } from '@mui/material';
+
+type Props = {|
+  onRedirect(): void,
+|};
+
+@observer
+class PaperWalletSettings extends Component<Props> {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
+    intl: intlShape.isRequired,
+  };
+
+  render(): Node {
+    const { onRedirect } = this.props;
+    return (
+      <div>
+        <Button variant="contained" onClick={onRedirect}>
+          Transfer from Paper Wallet
+        </Button>
+      </div>
+    );
+  }
+}
+
+export default PaperWalletSettings;
diff --git a/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js b/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js
@@ -33,6 +33,10 @@ export const settingsMenuMessages: Object = defineMessages({
     id: 'settings.menu.analytics.link.label',
     defaultMessage: '!!!Analytics',
   },
+  paperWallet: {
+    id: 'settings.menu.paperWallet.link.label',
+    defaultMessage: '!!!Paper Wallet',
+  },
 });
 
 type Props = {|
@@ -47,7 +51,7 @@ class SettingsMenu extends Component<Props & InjectedLayoutProps> {
 
   render(): Node {
     const { intl } = this.context;
-    const { onItemClick, isActiveItem, isRevampLayout } = this.props;
+    const { onItemClick, isActiveItem } = this.props;
     const isProduction = environmnent.isProduction();
     const settingOptions: Array<SubMenuOption> = [
       {
@@ -72,9 +76,7 @@ class SettingsMenu extends Component<Props & InjectedLayoutProps> {
         hidden: isProduction,
       },
       {
-        label: intl.formatMessage(
-          isRevampLayout ? globalMessages.termsOfService : globalMessages.termsOfUse
-        ),
+        label: intl.formatMessage(globalMessages.termsOfService),
         route: ROUTES.SETTINGS.TERMS_OF_USE,
         className: 'termsOfUse',
       },
@@ -92,18 +94,15 @@ class SettingsMenu extends Component<Props & InjectedLayoutProps> {
         label: intl.formatMessage(settingsMenuMessages.analytics),
         route: ROUTES.SETTINGS.ANALYTICS,
         className: 'analytics',
-        hidden: !isRevampLayout,
+      },
+      {
+        label: intl.formatMessage(settingsMenuMessages.paperWallet),
+        route: ROUTES.SETTINGS.PAPER_WALLET,
+        className: 'paperWallet',
       },
     ];
 
-    return (
-      <SubMenu
-        options={settingOptions}
-        onItemClick={onItemClick}
-        isActiveItem={isActiveItem}
-        locationId='settings'
-      />
-    );
+    return <SubMenu options={settingOptions} onItemClick={onItemClick} isActiveItem={isActiveItem} locationId="settings" />;
   }
 }
 

diff --git a/packages/yoroi-extension/app/components/transfer/cards/TransferCards.scss b/packages/yoroi-extension/app/components/transfer/cards/TransferCards.scss
@@ -22,7 +22,7 @@
 }
 
 .tooltipSize {
-  width: 500px;
+  max-width: 500px;
   overflow-wrap: break-word;
   white-space: normal;
 }

diff --git a/packages/yoroi-extension/app/containers/settings/categories/PaperWalletSettingsPage.js b/packages/yoroi-extension/app/containers/settings/categories/PaperWalletSettingsPage.js
@@ -0,0 +1,15 @@
+// @flow
+import type { Node } from 'react';
+import type { StoresAndActionsProps } from '../../../types/injectedProps.types';
+import { Component } from 'react';
+import { observer } from 'mobx-react';
+import { ROUTES } from '../../../routes-config';
+import PaperWalletSettings from '../../../components/settings/categories/PaperWalletSettings';
+
+@observer
+export default class PaperWalletSettingsPage extends Component<StoresAndActionsProps> {
+  render(): Node {
+    const { actions } = this.props;
+    return <PaperWalletSettings onRedirect={() => actions.router.redirect.trigger({ route: ROUTES.TRANSFER.ROOT })} />;
+  }
+}
diff --git a/packages/yoroi-extension/app/containers/transfer/Transfer.js b/packages/yoroi-extension/app/containers/transfer/Transfer.js
@@ -1,22 +1,17 @@
 // @flow
-import type { ComponentType, Node } from 'react';
+import type { Node } from 'react';
+import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
+import type { StoresAndActionsProps } from '../../types/injectedProps.types';
 import { Component, lazy, Suspense } from 'react';
 import { observer } from 'mobx-react';
-import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import { intlShape } from 'react-intl';
-import type { StoresAndActionsProps } from '../../types/injectedProps.types';
 import TopBarLayout from '../../components/layout/TopBarLayout';
 import BannerContainer from '../banners/BannerContainer';
 import SidebarContainer from '../SidebarContainer';
-import BackgroundColoredLayout from '../../components/layout/BackgroundColoredLayout';
 import NoWalletMessage from '../wallet/NoWalletMessage';
-import UnsupportedWallet from '../wallet/UnsupportedWallet';
 import NavBarTitle from '../../components/topbar/NavBarTitle';
-import NavBarContainer from '../NavBarContainer';
 import globalMessages from '../../i18n/global-messages';
-import HorizontalLine from '../../components/widgets/HorizontalLine';
-import type { LayoutComponentMap } from '../../styles/context/layout';
-import { withLayout } from '../../styles/context/layout';
+import NavBarContainerRevamp from '../NavBarContainerRevamp';
 
 export const WalletTransferPagePromise: void => Promise<any> = () => import('./WalletTransferPage');
 const WalletTransferPage = lazy(WalletTransferPagePromise);
@@ -26,11 +21,8 @@ type Props = {|
   +children?: Node,
 |};
 
-type InjectedLayoutProps = {| +renderLayoutComponent: LayoutComponentMap => Node |};
-type AllProps = {| ...Props, ...InjectedLayoutProps |};
-
 @observer
-class Transfer extends Component<AllProps> {
+class Transfer extends Component<Props> {
   static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
@@ -41,26 +33,17 @@ class Transfer extends Component<AllProps> {
 
   render(): Node {
     const { actions, stores } = this.props;
-    if (this.props.stores.profile.isRevampTheme) {
-      return null;
-    }
     const sidebarContainer = <SidebarContainer actions={actions} stores={stores} />;
     const navbar = (
-      <NavBarContainer
+      <NavBarContainerRevamp
         actions={actions}
         stores={stores}
-        title={
-          <NavBarTitle title={this.context.intl.formatMessage(globalMessages.sidebarTransfer)} />
-        }
+        title={<NavBarTitle title={this.context.intl.formatMessage(globalMessages.sidebarTransfer)} />}
       />
     );
+
     return (
-      <TopBarLayout
-        banner={<BannerContainer actions={actions} stores={stores} />}
-        navbar={navbar}
-        sidebar={sidebarContainer}
-        showInContainer
-      >
+      <TopBarLayout banner={<BannerContainer actions={actions} stores={stores} />} navbar={navbar} sidebar={sidebarContainer}>
         {this.getContent()}
       </TopBarLayout>
     );
@@ -72,24 +55,12 @@ class Transfer extends Component<AllProps> {
     if (wallet == null) {
       return <NoWalletMessage />;
     }
-    // temporary solution: will need to handle more cases later for different currencies
-    if (wallet.isCardanoHaskell) {
-      return <UnsupportedWallet />;
-    }
+
     return (
-      <>
-        <HorizontalLine />
-        <BackgroundColoredLayout>
-          <Suspense fallback={null}>
-            <WalletTransferPage
-              actions={actions}
-              stores={stores}
-              publicDeriver={wallet}
-            />
-          </Suspense>
-        </BackgroundColoredLayout>
-      </>
+      <Suspense fallback={null}>
+        <WalletTransferPage actions={actions} stores={stores} publicDeriver={wallet} />
+      </Suspense>
     );
   };
 }
-export default (withLayout(Transfer): ComponentType<Props>);
+export default Transfer;
diff --git a/packages/yoroi-extension/app/containers/transfer/WalletTransferPage.js b/packages/yoroi-extension/app/containers/transfer/WalletTransferPage.js
@@ -10,7 +10,7 @@ import type { StoresAndActionsProps } from '../../types/injectedProps.types';
 import TransferTypeSelect from '../../components/transfer/cards/TransferTypeSelect';
 import { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver';
 import YoroiTransferPage from './YoroiTransferPage';
-import { genLookupOrFail, getTokenName, } from '../../stores/stateless/tokenHelpers';
+import { genLookupOrFail, getTokenName } from '../../stores/stateless/tokenHelpers';
 import { truncateToken } from '../../utils/formatters';
 
 type Props = {|
@@ -20,7 +20,7 @@ type Props = {|
 
 @observer
 export default class WalletTransferPage extends Component<Props> {
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
@@ -31,21 +31,15 @@ export default class WalletTransferPage extends Component<Props> {
   // <TODO:PENDING_REMOVAL> paper
   startTransferYoroiPaperFunds: void => void = () => {
     this.props.actions.yoroiTransfer.startTransferFunds.trigger();
-  }
+  };
 
   render(): Node {
-    const { actions, stores } = this.props;
-    const defaultToken = this.props.publicDeriver.getParent().getDefaultToken();
-    const defaultTokenInfo = genLookupOrFail(this.props.stores.tokenInfoStore.tokenInfo)({
-      identifier: defaultToken.defaultIdentifier,
-      networkId: defaultToken.defaultNetworkId,
-    });
+    const { actions, stores, publicDeriver } = this.props;
+    const defaultTokenInfo = stores.tokenInfoStore.getDefaultTokenInfo(publicDeriver.networkId);
+
     return (
       <>
-        <TransferTypeSelect
-          onByron={this.startTransferYoroiPaperFunds}
-          ticker={truncateToken(getTokenName(defaultTokenInfo))}
-        />
+        <TransferTypeSelect onByron={this.startTransferYoroiPaperFunds} ticker={truncateToken(getTokenName(defaultTokenInfo))} />
         <YoroiTransferPage actions={actions} stores={stores} />
       </>
     );

diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json
@@ -295,6 +295,7 @@
   "settings.general.translation.contributors": "_",
   "settings.general.theme.light": "Light Theme",
   "settings.general.theme.dark": "Dark Theme",
+  "settings.menu.paperWallet.link.label": "Paper Wallet",
   "settings.menu.analytics.link.label": "Analytics",
   "settings.menu.assetDeposit.link.label": "Locked assets deposit",
   "settings.menu.blockchain.link.label": "Blockchain",

diff --git a/packages/yoroi-extension/app/routes-config.js b/packages/yoroi-extension/app/routes-config.js
@@ -42,6 +42,7 @@ export const ROUTES = {
     SUPPORT: '/settings/support',
     LEVEL_OF_COMPLEXITY: '/settings/level-of-complexity',
     ANALYTICS: '/settings/analytics',
+    PAPER_WALLET: '/settings/paper-wallet',
   },
   TRANSFER: {
     ROOT: '/transfer',