feat(multi-session): multi session wip

blockchain · Nov 18, 2021 · bcb9e73 · bcb9e73
1 parent 5fe5865
commit bcb9e73
Show file tree

Hide file tree

Showing 12 changed files with 163 additions and 104 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/walletConnect/sagaRegister.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/walletConnect/sagaRegister.ts
@@ -11,6 +11,7 @@ export default ({ coreSagas }) => {
     yield takeLatest(A.handleSessionDisconnect.type, walletConnectSagas.handleSessionDisconnect)
     yield takeLatest(A.handleSessionRequest.type, walletConnectSagas.handleSessionRequest)
     yield takeLatest(A.initWalletConnect.type, walletConnectSagas.initWalletConnect)
+    yield takeLatest(A.renewRpcConnection.type, walletConnectSagas.renewRpcConnection)
     yield takeLatest(A.respondToSessionRequest.type, walletConnectSagas.respondToSessionRequest)
     yield takeLatest(A.respondToTxSendRequest.type, walletConnectSagas.respondToTxSendRequest)
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/walletConnect/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/walletConnect/sagas.ts
@@ -3,10 +3,19 @@ import { eventChannel } from 'redux-saga'
 import { call, cancel, cancelled, fork, put, select, take } from 'redux-saga/effects'
 
 import { coreSelectors } from 'blockchain-wallet-v4/src'
+import { actions } from 'data'
 import { RequestMethodType, WalletConnectStep } from 'data/components/walletConnect/types'
+import { ModalName } from 'data/modals/types'
 
 import { actions as A } from './slice'
 
+const CLIENT_META_DATA = {
+  description: 'Blockchain.com Wallet',
+  icons: [''], // TODO
+  name: 'Blockchain.com Wallet',
+  url: 'https://login.blockchain.com'
+}
+
 export default ({ coreSagas }) => {
   let rpc
 
@@ -59,7 +68,7 @@ export default ({ coreSagas }) => {
       // subscribe to session requests
       rpc.on('session_request', (error, data) => {
         // eslint-disable-next-line no-console
-        console.log('RPC: session_request]:', data, error)
+        console.log('[RPC: session_request]:', data, error)
         emit(A.handleSessionRequest({ data, error }))
       })
 
@@ -73,7 +82,8 @@ export default ({ coreSagas }) => {
       // subscribe to disconnects
       rpc.on('disconnect', (error, data) => {
         // eslint-disable-next-line no-console
-        console.log('RPC: disconnect]:', data, error)
+        console.log('[RPC: disconnect]:', data, error)
+        // TODO: remove from localStorage
         emit(A.handleSessionDisconnect({ data, error }))
       })
 
@@ -86,26 +96,23 @@ export default ({ coreSagas }) => {
   const startRpcConnection = function* ({ uri }: { uri: string }) {
     let channel
 
+    // eslint-disable-next-line no-console
+    console.log('[RPC URI]: ', uri)
+
     try {
       // init rpc
       rpc = new WalletConnect({
-        clientMeta: {
-          description: 'Blockchain.com Wallet',
-          icons: [''], // TODO
-          name: 'Blockchain.com Wallet',
-          url: 'https://login.blockchain.com'
-        },
+        clientMeta: CLIENT_META_DATA,
         uri
       })
       // eslint-disable-next-line no-console
       console.log('[RPC Initialized]: ', rpc)
 
+      yield put(A.setUri(uri))
+
       // start listeners for rpc messages
       channel = yield call(createRpcListenerChannels)
 
-      // TODO:WC: Move this somewhere
-      localStorage.setItem('walletConnectUri', uri)
-
       while (true) {
         // message from rpc, forward action
         const action = yield take(channel)
@@ -122,6 +129,30 @@ export default ({ coreSagas }) => {
     }
   }
 
+  const renewRpcConnection = function* ({ payload }: ReturnType<typeof A.renewRpcConnection>) {
+    // eslint-disable-next-line no-console
+    console.log('[Renew RPC Payload]: ', payload)
+    if (rpc) {
+      // eslint-disable-next-line no-console
+      console.log('[Existing RPC found]: ', rpc)
+      yield put(A.setUri(payload.uri))
+      yield put(A.setSessionDetails(payload.sessionDetails))
+      yield put(A.setStep({ name: WalletConnectStep.SESSION_DASHBOARD }))
+      yield put(
+        actions.modals.showModal(ModalName.WALLET_CONNECT_MODAL, { origin: 'WalletConnect' })
+      )
+    } else {
+      // eslint-disable-next-line no-console
+      console.log('[No RPC found]: ', rpc)
+      yield put(A.setSessionDetails(payload.sessionDetails))
+      yield put(A.setStep({ name: WalletConnectStep.SESSION_DASHBOARD }))
+      yield put(
+        actions.modals.showModal(ModalName.WALLET_CONNECT_MODAL, { origin: 'WalletConnect' })
+      )
+      yield put(A.initWalletConnect(payload.uri))
+    }
+  }
+
   const initWalletConnect = function* ({ payload }: ReturnType<typeof A.initWalletConnect>) {
     const rpcTask = yield fork(startRpcConnection, { uri: payload })
 
@@ -139,11 +170,9 @@ export default ({ coreSagas }) => {
       console.log('[Response to Session Request]: ', payload)
 
       if (payload.action === 'APPROVE') {
-        // TODO:WC: move this to better place
-        localStorage.setItem('walletConnectSession', JSON.stringify(payload.sessionDetails))
-
         // store dapp details on state
         yield put(A.setSessionDetails(payload.sessionDetails))
+        yield put(A.setLocalStorage(null))
 
         const ethAccount = (yield select(coreSelectors.kvStore.eth.getContext)).getOrFail(
           'Failed to extract ETH account.'
@@ -199,6 +228,7 @@ export default ({ coreSagas }) => {
     handleSessionDisconnect,
     handleSessionRequest,
     initWalletConnect,
+    renewRpcConnection,
     respondToSessionRequest,
     respondToTxSendRequest
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/walletConnect/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/walletConnect/selectors.ts
@@ -2,3 +2,4 @@ import { RootState } from 'data/rootReducer'
 
 export const getSessionDetails = (state: RootState) => state.components.walletConnect.sessionDetails
 export const getStep = (state: RootState) => state.components.walletConnect.step
+export const getUri = (state: RootState) => state.components.walletConnect.uri
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/walletConnect/slice.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/walletConnect/slice.ts
@@ -7,7 +7,8 @@ import * as T from './types'
 
 const INITIAL_STATE: T.WalletConnectState = {
   sessionDetails: undefined,
-  step: Remote.NotAsked
+  step: Remote.NotAsked,
+  uri: ''
 }
 
 const walletConnectSlice = createSlice({
@@ -18,8 +19,37 @@ const walletConnectSlice = createSlice({
     handleSessionDisconnect: (state, action) => {},
     handleSessionRequest: (state, action) => {},
     initWalletConnect: (state, action: PayloadAction<string>) => {},
+    renewRpcConnection: (state, action: PayloadAction<any>) => {}, // TODO change any
     respondToSessionRequest: (state, action: PayloadAction<T.RespondToSessionRequestPayload>) => {},
     respondToTxSendRequest: (state, action: PayloadAction<T.RespondToTxSendRequestPayload>) => {},
+    setLocalStorage: (state, action) => {
+      if (state.sessionDetails && state.uri) {
+        // eslint-disable-next-line no-console
+        console.log('Setting local storage')
+        const walletConnect = localStorage.getItem('WalletConnect')
+
+        let walletConnectObj = []
+        if (walletConnect) {
+          const walletConnectObjRaw = JSON.parse(walletConnect)
+          walletConnectObj = walletConnectObjRaw.filter((session) => {
+            return (
+              JSON.stringify(session.sessionDetails.peerMeta) !==
+              JSON.stringify(state.sessionDetails?.peerMeta)
+            )
+          })
+        }
+        localStorage.setItem(
+          'WalletConnect',
+          JSON.stringify([
+            ...walletConnectObj,
+            {
+              sessionDetails: state.sessionDetails,
+              uri: state.uri
+            }
+          ])
+        )
+      }
+    },
     setSessionDetails: (state, action: PayloadAction<T.SessionDetailsType>) => {
       state.sessionDetails = action.payload
     },
@@ -29,6 +59,9 @@ const walletConnectSlice = createSlice({
         error: action.payload?.error,
         name: action.payload?.name
       })
+    },
+    setUri: (state, action: PayloadAction<string>) => {
+      state.uri = action.payload
     }
   }
 })

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/walletConnect/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/walletConnect/types.ts
@@ -62,6 +62,7 @@ export type SessionDetailsType = {
 export type RespondToSessionRequestPayload = {
   action: 'APPROVE' | 'REJECT'
   sessionDetails: SessionDetailsType
+  uri: string
 }
 
 export type RespondToTxSendRequestPayload = {
@@ -87,4 +88,5 @@ export type WalletConnectStepPayload = {
 export type WalletConnectState = {
   sessionDetails?: SessionDetailsType
   step: RemoteDataType<string, WalletConnectStepPayload>
+  uri: string
 }
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modals/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/modals/types.ts
@@ -142,6 +142,7 @@ export type ModalOriginType =
   | 'TransactionList'
   | 'Unknown'
   | 'WalletBalanceDropdown'
+  | 'WalletConnect'
   | 'WelcomeModal'
   | 'WithdrawModal'
   | 'CurrencyList'

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Eth/WalletConnect/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Eth/WalletConnect/index.tsx
@@ -27,7 +27,9 @@ class WalletConnectContainer extends PureComponent<Props, State> {
     /* eslint-disable */
     this.setState({ show: true })
     /* eslint-enable */
-    this.props.walletConnectActions.initWalletConnect(this.props.uri)
+    if (this.props.uri) {
+      this.props.walletConnectActions.initWalletConnect(this.props.uri)
+    }
   }
 
   handleClose = () => {

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/WalletConnect/Table/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/WalletConnect/Table/index.tsx
@@ -81,6 +81,11 @@ export const HeaderText = styled.div`
 `
 
 export const getTableColumns =
-  ({ modalActions }) =>
+  ({ modalActions, walletConnectActions }) =>
   () =>
-    [getNameColumn(), getLinkColumn(), getWalletColumn(), getManageColumn(modalActions)]
+    [
+      getNameColumn(),
+      getLinkColumn(),
+      getWalletColumn(),
+      getManageColumn(modalActions, walletConnectActions)
+    ]
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/WalletConnect/Table/link.column.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/WalletConnect/Table/link.column.tsx
@@ -5,7 +5,7 @@ import { CellHeaderText, CellText } from '.'
 
 export const getLinkColumn = () => ({
   Cell: ({ row: { original: values } }) => {
-    return <CellText>{values.link}</CellText>
+    return <CellText>{values.sessionDetails.peerMeta.url}</CellText>
   },
   Header: () => (
     <CellHeaderText>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/WalletConnect/Table/manage.column.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/WalletConnect/Table/manage.column.tsx
@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 
 import { Button, Text } from 'blockchain-info-components'
+import { WalletConnectStep } from 'data/components/walletConnect/types'
 import { ModalName } from 'data/modals/types'
 
 import { CellHeaderText } from '.'
@@ -14,62 +15,38 @@ const CellWrapper = styled.div`
   padding-right: 8px;
 `
 
-export const getManageColumn = (modalActions) => ({
+export const getManageColumn = (modalActions, walletConnectActions) => ({
   Cell: ({ row: { original: values } }) => (
     <CellWrapper>
-      {values.connected ? (
-        <>
-          <Button
-            data-e2e={`${values.name}LaunchBtn`}
-            height='32px'
-            nature='primary'
-            onClick={() => {
-              modalActions.showModal(ModalName.WALLET_CONNECT_MODAL, {
-                origin: 'WalletConnect',
-                uri: '' // TODO
-              })
-            }}
-            width='68px'
-          >
-            <Text size='14px' color='white' weight={600}>
-              <FormattedMessage id='buttons.launch' defaultMessage='Launch' />
-            </Text>
-          </Button>
-          <Button
-            data-e2e={`${values.name}DisconnectBtn`}
-            height='32px'
-            nature='warning'
-            onClick={() => {
-              modalActions.showModal(ModalName.WALLET_CONNECT_MODAL, {
-                origin: 'WalletConnect',
-                uri: '' // TODO
-              })
-            }}
-            width='68px'
-          >
-            <Text size='14px' color='white' weight={600}>
-              <FormattedMessage id='buttons.disconnect' defaultMessage='Disconnect' />
-            </Text>
-          </Button>
-        </>
-      ) : (
-        <Button
-          data-e2e={`${values.name}ConnectBtn`}
-          height='32px'
-          nature='empty-blue'
-          onClick={() => {
-            modalActions.showModal(ModalName.WALLET_CONNECT_MODAL, {
-              origin: 'WalletConnect',
-              uri: '' // TODO
-            })
-          }}
-          width='68px'
-        >
-          <Text size='14px' color='blue600' weight={600}>
-            <FormattedMessage id='buttons.connect' defaultMessage='Connect' />
-          </Text>
-        </Button>
-      )}
+      <Button
+        data-e2e={`${values.sessionDetails.peerMeta.name}LaunchBtn`}
+        height='32px'
+        nature='primary'
+        onClick={() => {
+          walletConnectActions.renewRpcConnection(values)
+        }}
+        width='68px'
+      >
+        <Text size='14px' color='white' weight={600}>
+          <FormattedMessage id='buttons.launch' defaultMessage='Launch' />
+        </Text>
+      </Button>
+      <Button
+        data-e2e={`${values.sessionDetails.peerMeta.name}DisconnectBtn`}
+        height='32px'
+        nature='warning'
+        onClick={() => {
+          modalActions.showModal(ModalName.WALLET_CONNECT_MODAL, {
+            origin: 'WalletConnect',
+            uri: '' // TODO
+          })
+        }}
+        width='68px'
+      >
+        <Text size='14px' color='white' weight={600}>
+          <FormattedMessage id='buttons.disconnect' defaultMessage='Disconnect' />
+        </Text>
+      </Button>
     </CellWrapper>
   ),
   Header: () => (

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/WalletConnect/Table/name.column.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/WalletConnect/Table/name.column.tsx
@@ -21,12 +21,20 @@ const Logo = styled.img`
   margin-right: 16px;
 `
 
+// values.sessionDetails.peerMeta.icons[0]
+// values.sessionDetails.peerMeta.name
+
 export const getNameColumn = () => ({
   Cell: ({ row: { original: values } }) => {
     return (
       <CellWrapper>
-        <Logo src={values.icon} alt={values.name} width='32' height='32' />
-        <CellText>{values.name}</CellText>
+        <Logo
+          src={`${values.sessionDetails.peerMeta.icons[0]}`}
+          alt={`${values.sessionDetails.peerMeta.name}`}
+          width='32'
+          height='32'
+        />
+        <CellText>{`${values.sessionDetails.peerMeta.name}`}</CellText>
       </CellWrapper>
     )
   },