add wallet sync export feature

static/app-strings.json

@@ -2316,5 +2316,13 @@
  "Installing, please wait...": "Installing, please wait...",
  "There was an error during installation. Please, try again.": "There was an error during installation. Please, try again.",
  "Odysee Connect --[Section in Help Page]--": "Odysee Connect",
+ "Export Wallet": "Export Wallet",
+ "Export encrypted sync data for import in another app.": "Export encrypted sync data for import in another app.",
+ "Export wallet sync data. Choose a secure password you will need for import.": "Export wallet sync data. Choose a secure password you will need for import.",
+ "Choose Password": "Choose Password",
+ "Sync data copied.": "Sync data copied.",
+ "Your Sync Data is prepared. You can now copy or save it.": "Your Sync Data is prepared. You can now copy or save it.",
+ "Export wallet": "Export wallet",
+ "Sync data saved.": "Sync data saved.",
  "--end--": "--end--"
 }

ui/component/settingSystem/index.js

@@ -6,6 +6,7 @@ import {
  doNotifyDecryptWallet,
  doNotifyEncryptWallet,
  doNotifyForgetPassword,
+ doOpenModal,
  doToggle3PAnalytics,
 } from 'redux/actions/app';
 import { doSetDaemonSetting, doClearDaemonSetting, doFindFFmpeg } from 'redux/actions/settings';
@@ -25,6 +26,7 @@ const select = (state) => ({
 });
 
 const perform = (dispatch) => ({
+ openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
  setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
  clearDaemonSetting: (key) => dispatch(doClearDaemonSetting(key)),
  clearCache: () => dispatch(doClearCache()),

ui/component/settingSystem/view.jsx

@@ -18,6 +18,7 @@ import { getPasswordFromCookie } from 'util/saved-passwords';
 import * as DAEMON_SETTINGS from 'constants/daemon_settings';
 import SettingEnablePrereleases from 'component/settingEnablePrereleases';
 import SettingDisableAutoUpdates from 'component/settingDisableAutoUpdates';
+import * as MODALS from 'constants/modal_types';
 
 const IS_MAC = process.platform === 'darwin';
 
@@ -56,6 +57,7 @@ type Props = {
  updateWalletStatus: () => void,
  confirmForgetPassword: ({}) => void,
  toggle3PAnalytics: (boolean) => void,
+ openModal: (string, any) => void,
 };
 
 export default function SettingSystem(props: Props) {
@@ -75,6 +77,7 @@ export default function SettingSystem(props: Props) {
  updateWalletStatus,
  confirmForgetPassword,
  toggle3PAnalytics,
+ openModal,
  } = props;
 
  const [clearingCache, setClearingCache] = React.useState(false);
@@ -376,6 +379,20 @@ export default function SettingSystem(props: Props) {
  <SettingsRow title={__('Share url')} multirow>
  <SettingShareUrl />
  </SettingsRow>
+ <SettingsRow
+ title={__('Export Wallet')}
+ subtitle={__('Export encrypted sync data for import in another app.')}
+ >
+ <Button
+ button="primary"
+ className="expandable__button"
+ label={__('Export')}
+ aria-label={__('Export wallet')}
+ onClick={() => {
+ openModal(MODALS.WALLET_EXPORT, {});
+ }}
+ />
+ </SettingsRow>
  <SettingsRow
  title={__('Clear application cache')}
  subtitle={__('This might fix issues that you are having. Your wallet will not be affected.')}

ui/component/walletExport/index.js

@@ -0,0 +1,9 @@
+import WalletExport from './view';
+import { doToast } from 'redux/actions/notifications';
+import { connect } from 'react-redux';
+
+const perform = (dispatch) => ({
+ toast: (message, isError) => dispatch(doToast({ message, isError })),
+});
+
+export default connect(null, perform)(WalletExport);

ui/component/walletExport/view.jsx

@@ -0,0 +1,112 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import { Form, FormField } from 'component/common/form';
+import Card from 'component/common/card';
+import Lbry from 'lbry';
+import fs from 'fs';
+import { clipboard } from 'electron';
+import * as ICONS from 'constants/icons';
+import * as remote from '@electron/remote';
+
+type Props = {
+ onDone: () => void,
+ toast: (string, boolean) => void,
+};
+
+function WalletExport(props: Props) {
+ const { onDone, toast } = props;
+
+ const [password, setPassword] = React.useState();
+ const [data, setData] = React.useState();
+ const [fetching, setFetching] = React.useState();
+ const getData = async (password) => {
+ setFetching(true);
+ const data = await Lbry.sync_apply({ password });
+ setFetching(false);
+ setData(data);
+ };
+
+ const handleSaveFile = () => {
+ let defaultPath;
+ let isWin = process.platform === 'win32';
+
+ if (isWin === true) {
+ defaultPath = process.env.HOME || process.env.HOMEPATH || process.env.USERPROFILE;
+ }
+
+ remote.dialog
+ .showSaveDialog({
+ title: 'Select File Path',
+ defaultPath,
+ buttonLabel: 'Save',
+ filters: [
+ {
+ name: 'JSON Files',
+ extensions: ['json'],
+ },
+ ],
+ })
+ .then((file) => {
+ if (!file.canceled) {
+ fs.writeFile(file.filePath.toString(), JSON.stringify(data), function (err) {
+ if (err) throw err;
+ toast(__('Sync data saved.'), false);
+ onDone();
+ });
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ toast(__('Data could not be saved'), true);
+ });
+ };
+
+ return (
+ <Card
+ title={__('Export Wallet')}
+ subtitle={
+ data
+ ? __('Your Sync Data is prepared. You can now copy or save it.')
+ : __('Export wallet sync data. Choose a secure password you will need for import.')
+ }
+ actions={
+ <React.Fragment>
+ {!data && (
+ <Form onSubmit={() => alert()}>
+ <FormField
+ autoFocus
+ type="password"
+ name="password_set"
+ label={__('Choose Password')}
+ value={password}
+ onChange={(e) => setPassword(e.target.value)}
+ />
+ <div className="section__actions--between">
+ <Button button={'primary'} onClick={() => getData(password)} label={'Get Data'} disabled={fetching} />
+ </div>
+ </Form>
+ )}
+ {data && (
+ <div className="section__actions">
+ <div className="section__actions--between">
+ <Button button={'primary'} onClick={handleSaveFile} label={'Save Data'} icon={ICONS.DOWNLOAD} />
+ <Button
+ button={'secondary'}
+ onClick={() => {
+ clipboard.writeText(JSON.stringify(data));
+ toast(__('Sync data copied.'), false);
+ }}
+ label={'Copy Data'}
+ icon={ICONS.COPY}
+ />
+ </div>
+ </div>
+ )}
+ </React.Fragment>
+ }
+ />
+ );
+}
+
+export default WalletExport;

ui/constants/modal_types.js

@@ -46,3 +46,4 @@ export const COLLECTION_ADD = 'collection_add';
 export const COLLECTION_DELETE = 'collection_delete';
 export const CONFIRM_REMOVE_CARD = 'CONFIRM_REMOVE_CARD';
 export const CONFIRM_REMOVE_COMMENT = 'CONFIRM_REMOVE_COMMENT';
+export const WALLET_EXPORT = 'WALLET_EXPORT';

ui/modal/modalRouter/view.jsx

@@ -65,6 +65,7 @@ import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
 import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
 
 import ModalWalletUnlock from 'modal/modalWalletUnlock';
+import ModalWalletExport from 'modal/modalWalletExport';
 
 function getModal(id) {
  switch (id) {
@@ -149,6 +150,8 @@ function getModal(id) {
  return ModalRemoveCard;
  case MODALS.CONFIRM_REMOVE_COMMENT:
  return ModalRemoveComment;
+ case MODALS.WALLET_EXPORT:
+ return ModalWalletExport;
  default:
  return null;
  }

ui/modal/modalWalletExport/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+import ModalWalletExport from './view';
+
+const perform = (dispatch) => ({
+ closeModal: () => dispatch(doHideModal()),
+});
+
+export default connect(null, perform)(ModalWalletExport);

ui/modal/modalWalletExport/view.jsx

@@ -0,0 +1,18 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import WalletExport from 'component/walletExport';
+
+type Props = {
+ closeModal: () => void,
+};
+
+export default function ModalWalletExport(props: Props) {
+ const { closeModal } = props;
+
+ return (
+ <Modal isOpen contentLabel={'Export Wallet'} type="card" onAborted={closeModal}>
+ <WalletExport onDone={closeModal} />
+ </Modal>
+ );
+}