Wallet sync

package.json

@@ -82,6 +82,7 @@
 		"@trodi/electron-splashscreen": "0.3.4",
 		"@walletconnect/client": "1.3.1",
 		"@walletconnect/utils": "1.3.1",
+		"@walletconnect/web3-provider": "^1.3.6",
 		"ajv": "6.10.0",
 		"async": "2.6.2",
 		"awilix": "4.2.1",

src/common/config.js

@@ -164,7 +164,8 @@ const common = {
 		hdWallet: true,
 		deepLinks: true,
 		moonpay: false,
-		moonpayWalletLogin: false
+		moonpayWalletLogin: false,
+		walletSync: false
 	}
 };
 
@@ -205,7 +206,8 @@ const dev = {
 		hdWallet: true,
 		deepLinks: true,
 		moonpay: true,
-		moonpayWalletLogin: true
+		moonpayWalletLogin: true,
+		walletSync: true
 	},
 	moonPayApiKey: 'pk_test_oMn5N1gYzf5eufwrs4AJUKhlZHBjVD',
 	moonPayApiEndpoint: 'https://api.moonpay.com/v3',

src/common/store/reducers.js

@@ -31,6 +31,7 @@ import walletConnect from '../wallet-connect';
 import { moonPayAuth, moonPayPayment } from '../moonpay';
 import hardwareWallet from '../hardware-wallet';
 import navigationFlow from '../navigation/flow';
+import walletSync from '../wallet-sync';
 
 export const createReducers = (scope = 'main') => {
 	let scopedReducers = {};
@@ -69,6 +70,7 @@ export const createReducers = (scope = 'main') => {
 		moonPayPayment,
 		hardwareWallet,
 		navigationFlow,
+		walletSync,
 		...scopedReducers
 	});
 

src/common/wallet-sync/index.js

@@ -0,0 +1,60 @@
+// import { Logger } from 'common/logger';
+import { createSelector } from 'reselect';
+import { createAliasedSlice } from '../utils/duck';
+import WalletConnectProvider from '@walletconnect/web3-provider';
+
+// const log = new Logger('WalletSync');
+
+const SLICE_NAME = 'walletSync';
+
+const initialState = {
+	serverUri: null
+};
+
+const selectSelf = state => state[SLICE_NAME];
+
+const selectServerUri = createSelector(
+	selectSelf,
+	state => state.serverUri
+);
+
+const selectors = {
+	selectServerUri
+};
+
+const initializeServer = ops => () => async (dispatch, getState) => {
+	const provider = new WalletConnectProvider({
+		// TODO: Need to create an ENV variable for it
+		infuraId: '42c72df6422e4bc4847f137125953bc2',
+		qrcode: false
+	});
+
+	ops.setServerUri(null);
+
+	provider.connector.on('display_uri', (_, payload) => {
+		const uri = payload.params[0];
+		// goToSelfkey(`wc?uri=${uri}`)
+		ops.setServerUri(uri);
+	});
+
+	await provider.enable();
+};
+
+const walletSync = createAliasedSlice({
+	name: SLICE_NAME,
+	initialState,
+	reducers: {
+		setServerUri(state, action) {
+			state.serverUri = action.payload;
+		}
+	},
+	aliasedOperations: {
+		initializeServer
+	}
+});
+
+const { reducer, operations } = walletSync;
+
+export { operations as walletSyncOperations, selectors as walletSyncSelectors };
+
+export default reducer;

src/renderer/app.jsx

@@ -35,6 +35,7 @@ import AutoUpdateProgress from './auto-update/auto-update-progress-contatiner';
 import ApproveSessionContainer from './wallet-connect/approve-session-container';
 import SignMessageContainer from './wallet-connect/sign-message-container';
 import TransactionContainer from './wallet-connect/transaction-container';
+import { SyncWallet } from './sync-wallet';
 
 const log = new Logger('AppComponent');
 
@@ -68,6 +69,7 @@ class AppContainerComponent extends PureComponent {
 				<Switch>
 					<Route exact path="/" component={Loading} />
 					<Route exact path="/home" component={Home} />
+					<Route exact path="/sync-wallet" component={SyncWallet} />
 					<Route path="/no-connection" component={NoConnection} />
 					<Route path="/createWallet" component={CreateWallet} />
 					<Route path="/saveWallet" component={SaveWallet} />

src/renderer/wallet-sync/wallet-sync.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import { Grid } from '@material-ui/core';
+import Toolbar from './wallet/main/toolbar-container';
+import QRCode from 'qrcode.react';
+import { walletSyncOperations, walletSyncSelectors } from 'common/wallet-sync';
+
+// import WalletConnectProvider from "@walletconnect/web3-provider";
+
+// export async function createWalletConnectWeb3() {
+//   const provider = new WalletConnectProvider({
+//     // TODO: Need to create an ENV variable for it
+//     infuraId: "42c72df6422e4bc4847f137125953bc2",
+//   });
+
+//   // provider.disconnect();
+
+//   // It will launch the wallet connect QR Code modal
+//   await provider.enable();
+
+//   const web3 = new Web3(provider);
+//   web3.eth.defaultAccount = provider.accounts[0];
+
+//   window.send = (e, t) => {
+//     return provider.send(e, t);
+//   };
+
+//   // loadWalletConnectEvents(provider);
+
+//   return web3;
+// }
+// import WalletConnectProvider from '@walletconnect/web3-provider';
+
+const useStyles = makeStyles(theme => ({
+	headerSection: {
+		marginLeft: 0,
+		marginRi: 0,
+		width: '100%'
+	},
+	bodySection: {
+		maxWidth: '1074px',
+		width: '100%'
+	},
+	'@media screen and (min-width: 1230px)': {
+		bodySection: {
+			maxWidth: '1140px'
+		}
+	},
+	page: {}
+}));
+
+const contentWrapperStyle = {
+	marginBottom: '60px',
+	marginRight: '-55px',
+	marginTop: '128px'
+};
+
+// function createWCProvider() {
+// 	const provider = new WalletConnectProvider({
+// 		// TODO: Need to create an ENV variable for it
+// 		infuraId: '42c72df6422e4bc4847f137125953bc2'
+// 	});
+
+// 	// provider.disconnect();
+
+// 	// It will launch the wallet connect QR Code modal
+// 	return provider.enable();
+// }
+
+export function WalletSync() {
+	const classes = useStyles();
+	const dispatch = useDispatch();
+	const serverUri = useSelector(walletSyncSelectors.selectServerUri);
+
+	useEffect(() => {
+		dispatch(walletSyncOperations.initializeServer());
+	});
+
+	return (
+		<Grid
+			container
+			direction="column"
+			justify="space-between"
+			alignItems="center"
+			className={classes.page}
+		>
+			<Grid item className={classes.headerSection}>
+				<Toolbar />
+			</Grid>
+			<Grid item xs={12} className={classes.bodySection} style={contentWrapperStyle}>
+				{serverUri ? (
+					<>
+						<QRCode value={'stuff'} />
+						<div>{serverUri}</div>
+					</>
+				) : (
+					'Loading...'
+				)}
+			</Grid>
+		</Grid>
+	);
+}

src/renderer/wallet/main/sidebar.jsx

@@ -25,13 +25,14 @@ import {
 	PowerIcon,
 	// KeyTooltip,
 	// TooltipArrow,
-	// MenuAffiliateIcon,
+	MenuAffiliateIcon,
 	MenuStakingIcon,
 	MenuExportIcon,
 	// InfoTooltip,
 	primary
 } from 'selfkey-ui';
 // import { KeyboardArrowDown } from '@material-ui/icons';
+import { featureIsEnabled } from 'common/feature-flags';
 
 const styles = theme => ({
 	list: {
@@ -197,6 +198,9 @@ const addressBook = React.forwardRef((props, ref) => (
 	<Link to="/main/addressBook" {...props} ref={ref} />
 ));
 const switchAccount = React.forwardRef((props, ref) => <Link to="/home" {...props} ref={ref} />);
+const syncWallet = React.forwardRef((props, ref) => (
+	<Link to="/sync-wallet" {...props} ref={ref} />
+));
 const exportAccount = React.forwardRef((props, ref) => (
 	<Link to="/main/export-wallet/warning" {...props} ref={ref} />
 ));
@@ -402,6 +406,21 @@ class Sidebar extends PureComponent {
 						</Select>
 					</Grid> */}
 					<List className={classes.paddingLeft}>
+						{featureIsEnabled('walletSync') && (
+							<ListItem
+								className={classes.listItem}
+								component={syncWallet}
+								key="switchAccount"
+								title="Sync Wallet"
+							>
+								<ListItemIcon className={classes.listItemIcon}>
+									<MenuAffiliateIcon />
+								</ListItemIcon>
+								<Typography variant="body2" color="secondary">
+									Sync Wallet
+								</Typography>
+							</ListItem>
+						)}
 						<ListItem
 							className={classes.listItem}
 							onClick={e => {