Make it such that users can switch between Ledger accounts without first switching back to an injected provider

3 files changed, 12 insertions, 9 deletions

diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index e0f5a496f..71927ef3b 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -190,8 +190,10 @@ export class Blockchain {
         }
 
         // Cache injected provider so that we can switch the user back to it easily
-        this._cachedProvider = this._web3Wrapper.getProviderObj();
-        this._cachedProviderNetworkId = this.networkId;
+        if (_.isUndefined(this._cachedProvider)) {
+            this._cachedProvider = this._web3Wrapper.getProviderObj();
+            this._cachedProviderNetworkId = this.networkId;
+        }
 
         this._userAddress = '';
         this._dispatcher.updateUserAddress(''); // Clear old userAddress
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index a17a51622..66b04f198 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -265,7 +265,10 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
             return false;
         }
 
-        if (this.props.providerType !== ProviderType.Ledger) {
+        if (
+            this.props.providerType !== ProviderType.Ledger ||
+            (this.props.providerType === ProviderType.Ledger && this.props.networkId !== this.state.preferredNetworkId)
+        ) {
             await this.props.blockchain.updateProviderToLedgerAsync(this.state.preferredNetworkId);
         }
 
diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx
index 75261ab94..98678dee6 100644
--- a/packages/website/ts/components/top_bar/provider_picker.tsx
+++ b/packages/website/ts/components/top_bar/provider_picker.tsx
@@ -37,17 +37,15 @@ export class ProviderPicker extends React.Component<ProviderPickerProps, Provide
         // Show dropdown with two options
         return (
             <div style={{ width: 225, overflow: 'hidden' }}>
-                <RadioButtonGroup
-                    name="provider"
-                    defaultSelected={this.props.providerType}
-                    onChange={this._onProviderRadioChanged.bind(this)}
-                >
+                <RadioButtonGroup name="provider" defaultSelected={this.props.providerType}>
                     <RadioButton
+                        onClick={this._onProviderRadioChanged.bind(this, ProviderType.Injected)}
                         style={{ ...menuStyle, backgroundColor: !isLedgerSelected && colors.grey50 }}
                         value={ProviderType.Injected}
                         label={this._renderLabel(this.props.injectedProviderName, !isLedgerSelected)}
                     />
                     <RadioButton
+                        onClick={this._onProviderRadioChanged.bind(this, ProviderType.Ledger)}
                         style={{ ...menuStyle, backgroundColor: isLedgerSelected && colors.grey50 }}
                         value={ProviderType.Ledger}
                         label={this._renderLabel('Ledger Nano S', isLedgerSelected)}
@@ -80,7 +78,7 @@ export class ProviderPicker extends React.Component<ProviderPickerProps, Provide
             </div>
         );
     }
-    private _onProviderRadioChanged(e: any, value: string) {
+    private _onProviderRadioChanged(value: string) {
         if (value === ProviderType.Ledger) {
             this.props.onToggleLedgerDialog();
         } else {