feat(wallet connect): add feature flag

blockchain · Nov 28, 2021 · 0d4e758 · 0d4e758
1 parent fec859f
commit 0d4e758
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 45 deletions.
diff --git a/config/mocks/wallet-options-v4.json b/config/mocks/wallet-options-v4.json
@@ -25,6 +25,7 @@
         "pollForMagicLinkData": true,
         "recurringBuys": true,
         "signupCountry": true,
+        "walletConnect": true,
         "withdrawalLocksFundsOnHold": true,
         "useNewPaymentProviders": true
       }

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/goals/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/goals/sagas.ts
@@ -518,20 +518,25 @@ export default ({ api, coreSagas, networks }) => {
   const runWalletConnectGoal = function* (goal: GoalType) {
     try {
       const { data: uri, id } = goal
+      const walletConnectEnabled = (yield select(
+        selectors.core.walletOptions.getWalletConnectEnabled
+      )).getOrElse(false)
       yield put(actions.goals.deleteGoal(id))
-      yield put(
-        actions.goals.addInitialModal({
-          data: {
-            origin,
-            uri
-          },
-          key: 'walletConnect',
-          name: ModalName.WALLET_CONNECT_MODAL
-        })
-      )
+      if (walletConnectEnabled) {
+        yield put(
+          actions.goals.addInitialModal({
+            data: {
+              origin,
+              uri
+            },
+            key: 'walletConnect',
+            name: ModalName.WALLET_CONNECT_MODAL
+          })
+        )
+      }
     } catch (e) {
       const error = errorHandler(e)
-      yield put(actions.logs.låogErrorMessage('goals', 'runWalletConnectGoal', error))
+      yield put(actions.logs.logErrorMessage('goals', 'runWalletConnectGoal', error))
     }
   }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Settings/index.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Settings/index.tsx
@@ -2,19 +2,23 @@ import React from 'react'
 import { connect, ConnectedProps } from 'react-redux'
 import { bindActionCreators } from 'redux'
 
-import { actions } from 'data'
+import { actions, selectors } from 'data'
 
 import Settings from './template'
 
 const SettingsContainer = (props: Props) => <Settings {...props} />
 
+const mapStateToProps = (state) => ({
+  walletConnectEnabled: selectors.core.walletOptions.getWalletConnectEnabled(state).getOrElse(false)
+})
+
 const mapDispatchToProps = (dispatch) => ({
   modalActions: bindActionCreators(actions.modals, dispatch),
   sessionActions: bindActionCreators(actions.session, dispatch),
   settingsActions: bindActionCreators(actions.modules.settings, dispatch)
 })
 
-const connector = connect(undefined, mapDispatchToProps)
+const connector = connect(mapStateToProps, mapDispatchToProps)
 
 export type Props = ConnectedProps<typeof connector>
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Settings/template.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Settings/template.tsx
@@ -18,7 +18,12 @@ const DropdownSeparator = styled.div`
   background: ${(props) => props.theme.grey000};
 `
 
-const Settings = (props: Props) => {
+const Settings = ({
+  modalActions,
+  sessionActions,
+  settingsActions,
+  walletConnectEnabled
+}: Props) => {
   const ref = useRef(null)
   const [isMenuOpen, toggleIsMenuOpen] = useState(false)
   useOnClickOutside(ref, () => toggleIsMenuOpen(false))
@@ -36,7 +41,7 @@ const Settings = (props: Props) => {
             <DropdownMenuArrow />
             <LinkContainer
               onClick={() => {
-                props.settingsActions.generalSettingsInternalRedirect('General')
+                settingsActions.generalSettingsInternalRedirect('General')
               }}
               to='/settings/general'
               activeClassName='active'
@@ -50,11 +55,11 @@ const Settings = (props: Props) => {
             <DropdownMenuItem
               data-e2e='settings_profileLink'
               onClick={() => {
-                props.modalActions.showModal('TRADING_LIMITS_MODAL', {
+                modalActions.showModal('TRADING_LIMITS_MODAL', {
                   origin: 'TradingLimits'
                 })
 
-                props.settingsActions.generalSettingsInternalRedirect('TradingLimits')
+                settingsActions.generalSettingsInternalRedirect('TradingLimits')
               }}
             >
               <Destination>
@@ -66,7 +71,7 @@ const Settings = (props: Props) => {
             </DropdownMenuItem>
             <LinkContainer
               onClick={() => {
-                props.settingsActions.generalSettingsInternalRedirect('Preferences')
+                settingsActions.generalSettingsInternalRedirect('Preferences')
               }}
               to='/settings/preferences'
               activeClassName='active'
@@ -80,25 +85,27 @@ const Settings = (props: Props) => {
                 </Destination>
               </DropdownMenuItem>
             </LinkContainer>
+            {walletConnectEnabled && (
+              <LinkContainer
+                onClick={() => {
+                  settingsActions.generalSettingsInternalRedirect('walletConnect')
+                }}
+                to='/settings/walletConnect'
+                activeClassName='active'
+              >
+                <DropdownMenuItem data-e2e='settings_walletConnectLink'>
+                  <Destination>
+                    <FormattedMessage
+                      id='layouts.wallet.header.walletConnect'
+                      defaultMessage='Wallet Connect'
+                    />
+                  </Destination>
+                </DropdownMenuItem>
+              </LinkContainer>
+            )}
             <LinkContainer
               onClick={() => {
-                props.settingsActions.generalSettingsInternalRedirect('walletConnect')
-              }}
-              to='/settings/walletConnect'
-              activeClassName='active'
-            >
-              <DropdownMenuItem data-e2e='settings_walletConnectLink'>
-                <Destination>
-                  <FormattedMessage
-                    id='layouts.wallet.header.walletConnect'
-                    defaultMessage='Wallet Connect'
-                  />
-                </Destination>
-              </DropdownMenuItem>
-            </LinkContainer>
-            <LinkContainer
-              onClick={() => {
-                props.settingsActions.generalSettingsInternalRedirect('WalletAndAddresses')
+                settingsActions.generalSettingsInternalRedirect('WalletAndAddresses')
               }}
               to='/settings/addresses'
               activeClassName='active'
@@ -115,7 +122,7 @@ const Settings = (props: Props) => {
             <DropdownSeparator />
             <DropdownMenuItem
               onClick={() => {
-                props.sessionActions.logout()
+                sessionActions.logout()
               }}
               data-e2e='logoutLink'
             >

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx
@@ -63,7 +63,8 @@ const App = ({
   legacyWalletRecoveryEnabled,
   persistor,
   store,
-  userData
+  userData,
+  walletConnectEnabled
 }: Props) => {
   const Loading = isAuthenticated ? WalletLoading : PublicLoading
 
@@ -116,7 +117,9 @@ const App = ({
                     <WalletLayout path='/settings/addresses' component={Addresses} />
                     <WalletLayout path='/settings/general' component={General} />
                     <WalletLayout path='/settings/preferences' component={Preferences} />
-                    <WalletLayout path='/settings/walletConnect' component={WalletConnect} />
+                    {walletConnectEnabled && (
+                      <WalletLayout path='/settings/walletConnect' component={WalletConnect} />
+                    )}
                     <WalletLayout path='/prices' component={Prices} />
                     {values(
                       map((coinModel) => {
@@ -155,7 +158,10 @@ const mapStateToProps = (state) => ({
   legacyWalletRecoveryEnabled: selectors.core.walletOptions
     .getFeatureLegacyWalletRecovery(state)
     .getOrElse(false) as boolean,
-  userData: selectors.modules.profile.getUserData(state).getOrElse({} as UserDataType)
+  userData: selectors.modules.profile.getUserData(state).getOrElse({} as UserDataType),
+  walletConnectEnabled: selectors.core.walletOptions
+    .getWalletConnectEnabled(state)
+    .getOrElse(false) as boolean
 })
 
 const connector = connect(mapStateToProps)

diff --git a/packages/blockchain-wallet-v4-frontend/webpackBuilder.js b/packages/blockchain-wallet-v4-frontend/webpackBuilder.js
@@ -251,11 +251,6 @@ const buildDevServerConfig = (
           'connect-src',
           "'self'",
           'data:',
-          'ws://localhost:8080',
-          'wss://localhost:8080',
-          'https://api.opensea.io',
-          'wss://api.ledgerwallet.com',
-          'wss://*.walletconnect.org',
           envConfig.API_DOMAIN,
           envConfig.EVERYPAY_URL,
           envConfig.HORIZON_URL,
@@ -265,10 +260,15 @@ const buildDevServerConfig = (
           envConfig.VERIFF_URL,
           envConfig.WALLET_HELPER_DOMAIN,
           envConfig.WEB_SOCKET_URL,
+          'https://api.opensea.io',
           'https://friendbot.stellar.org',
           'https://bitpay.com',
           'https://static.zdassets.com',
-          'https://ekr.zdassets.com'
+          'https://ekr.zdassets.com',
+          'ws://localhost:8080',
+          'wss://localhost:8080',
+          'wss://api.ledgerwallet.com',
+          'wss://*.walletconnect.org'
         ].join(' '),
         "object-src 'none'",
         "media-src 'self' https://storage.googleapis.com/bc_public_assets/ data: mediastream: blob:",

diff --git a/packages/blockchain-wallet-v4/src/redux/walletOptions/selectors.ts b/packages/blockchain-wallet-v4/src/redux/walletOptions/selectors.ts
@@ -89,3 +89,7 @@ export const getAddStripePaymentProvider = (state: RootState) =>
 // use card from new payment providers (stripe and checkout)
 export const getUseNewPaymentProviders = (state: RootState) =>
   getWebOptions(state).map(path(['featureFlags', 'useNewPaymentProviders']))
+
+// show/hide wallet connect
+export const getWalletConnectEnabled = (state: RootState) =>
+  getWebOptions(state).map(path(['featureFlags', 'walletConnect']))