Merge pull request #182 from liquality/dev

Fix order of claim wallet popups - Fixes both ledger claim bug

Author: monokh

src/actions/swap.js

@@ -104,7 +104,6 @@ async function setInitiationWalletPopups (confirm, dispatch, getState) {
     wallets
   } = getState().swap
   const popup = getActionPopups(SWAP_STAGES.INITIATE, assets.a.currency, wallets.a.type)
-  if (!popup) return
   const popupSteps = popup.steps
   const theSteps = confirm ? [popupSteps[1]] : popupSteps
   dispatch(walletActions.setPopupSteps(theSteps))
@@ -119,12 +118,10 @@ async function setClaimWalletPopups (sign, dispatch, getState) {
   const claimTransactionPopup = getActionPopups(SWAP_STAGES.CLAIM, assets.b.currency, wallets.b.type)
   const steps = []
 
-  if (sign && signTransactionPopup) {
+  if (sign) {
     steps.push(signTransactionPopup.steps[0])
   }
-  if (claimTransactionPopup) {
-    steps.push(claimTransactionPopup.steps[1])
-  }
+  steps.push(claimTransactionPopup.steps[1])
 
   dispatch(walletActions.setPopupSteps(steps))
 }
@@ -135,9 +132,7 @@ async function setRefundWalletSteps (dispatch, getState) {
     wallets
   } = getState().swap
   const refundTransactionPopups = getActionPopups(SWAP_STAGES.REFUND, assets.a.currency, wallets.a.type)
-  if (refundTransactionPopups) {
-    dispatch(walletActions.setPopupSteps([refundTransactionPopups.steps[1]]))
-  }
+  dispatch(walletActions.setPopupSteps([refundTransactionPopups.steps[1]]))
 }
 
 async function generateSecret (dispatch, getState) {
@@ -328,13 +323,13 @@ function redeemSwap () {
     const secretRequired = !isPartyB && !secretParams.secret
     if (secretRequired) {
       await ensureWallet('a', dispatch, getState)
-    }
-    await ensureWallet('b', dispatch, getState)
-    await setClaimWalletPopups(secretRequired, dispatch, getState)
-    if (secretRequired) {
+      await setClaimWalletPopups(secretRequired, dispatch, getState)
       await withWalletPopupStep(WALLET_ACTION_STEPS.SIGN, dispatch, getState, generateSecret)
     }
+    await setClaimWalletPopups(secretRequired, dispatch, getState)
     await withWalletPopupStep(WALLET_ACTION_STEPS.CONFIRM, dispatch, getState, async () => {
+      await ensureWallet('b', dispatch, getState)
+      await setClaimWalletPopups(secretRequired, dispatch, getState)
       await withLoadingMessage('b', dispatch, getState, unlockFunds)
     })
   }

src/actions/wallets.js

@@ -72,6 +72,7 @@ function disconnectWallet (party) {
   return async (dispatch, getState) => {
     const swap = getState().swap
     dispatch({ type: types.DISCONNECT_WALLET, party, preserveAddress: swap.isPartyB || swap.step !== steps.INITIATION })
+    dispatch(closePopup())
   }
 }
 

src/components/WalletActionPopup/WalletActionPopup.js

@@ -39,7 +39,7 @@ class WalletActionPopup extends Component {
               <div className='WalletActionPopup_instructions'>
                 <div className='WalletActionPopup_message'>
                   <p>{activeStep.description}</p>
-                  <img src={activeStep.image} alt={activeStep.description} />
+                  {activeStep.image && <img src={activeStep.image} alt={activeStep.description} />}
                 </div>
               </div>
             </div>

src/utils/walletActionPopups.js

@@ -26,7 +26,7 @@ const ethereumLedgerPopup = {
   ]
 }
 
-const ledgerERC20Popup = {
+const ERC20LedgerPopup = {
   steps: [
     { id: WALLET_ACTION_STEPS.SIGN, title: 'On your Ledger', type: 'Ethereum', label: 'Sign Message', description: 'View displayed hash, then sign', image: require('../icons/wallets/ledger/device.svg') },
     { id: WALLET_ACTION_STEPS.CONFIRM, title: 'On your Ledger', type: 'Ethereum', label: 'Confirm Transactions', description: 'Sign 2 transactions to confirm. Expect a lag in between them.', image: require('../icons/wallets/ledger/device.svg') }
@@ -47,6 +47,20 @@ const ERC20MetamaskPopup = {
   ]
 }
 
+const defaultPopup = {
+  steps: [
+    { id: WALLET_ACTION_STEPS.SIGN, title: 'On Your Wallet', label: 'Sign Message', description: 'View displayed hash, then sign' },
+    { id: WALLET_ACTION_STEPS.CONFIRM, title: 'On Your Wallet', label: 'Confirm Transaction', description: 'Confirm the transaction.' }
+  ]
+}
+
+const defaultERC20Popup = {
+  steps: [
+    { id: WALLET_ACTION_STEPS.SIGN, title: 'On Your Wallet', label: 'Sign Message', description: 'View displayed hash, then sign' },
+    { id: WALLET_ACTION_STEPS.CONFIRM, title: 'On Your Wallet', label: 'Confirm Transactions', description: 'Sign 2 transactions to confirm. After the first confirmation there is a lag before the MetaMask popup displays again.' }
+  ]
+}
+
 function toClaimPopup (popup) {
   return { steps: popup.steps.map(step => {
     return step.id === WALLET_ACTION_STEPS.CONFIRM ? {...step, description: 'Confirm to claim your assets.'} : step
@@ -63,11 +77,16 @@ const initiatePopups = {
   ledger: {
     btc: bitcoinLedgerPopup,
     eth: ethereumLedgerPopup,
-    erc20: ledgerERC20Popup
+    erc20: ERC20LedgerPopup
   },
   metamask: {
     eth: ethereumMetamaskPopup,
     erc20: ERC20MetamaskPopup
+  },
+  default: {
+    btc: defaultPopup,
+    eth: defaultPopup,
+    erc20: defaultERC20Popup
   }
 }
 
@@ -80,6 +99,11 @@ const claimPopups = {
   metamask: {
     eth: toClaimPopup(ethereumMetamaskPopup),
     erc20: toClaimPopup(ERC20MetamaskPopup)
+  },
+  default: {
+    btc: toClaimPopup(defaultPopup),
+    eth: toClaimPopup(defaultPopup),
+    erc20: toClaimPopup(defaultERC20Popup)
   }
 }
 
@@ -92,6 +116,11 @@ const refundPopups = {
   metamask: {
     eth: toRefundPopup(ethereumMetamaskPopup),
     erc20: toRefundPopup(ERC20MetamaskPopup)
+  },
+  default: {
+    btc: toRefundPopup(defaultPopup),
+    eth: toRefundPopup(defaultPopup),
+    erc20: toRefundPopup(defaultERC20Popup)
   }
 }
 
@@ -104,11 +133,14 @@ const popups = {
 // TODO: make more generic to cover all wallet types
 function getActionPopups (stage, asset, wallet) {
   const assetConfig = config.assets[asset]
-  if (wallet.includes('ledger')) {
-    return popups[stage].ledger[assetConfig.type || asset]
-  } else if (wallet.includes('metamask')) {
-    return popups[stage].metamask[assetConfig.type || asset]
+  if (wallet) {
+    if (wallet.includes('ledger')) {
+      return popups[stage].ledger[assetConfig.type || asset]
+    } else if (wallet.includes('metamask')) {
+      return popups[stage].metamask[assetConfig.type || asset]
+    }
   }
+  return popups[stage].default[assetConfig.type || asset]
 }
 
 export { getActionPopups, WALLET_ACTION_STEPS, SWAP_STAGES }