Fix popup window regressions (#159)

src/components/NavigationFrame.js

@@ -244,6 +244,7 @@ function WalletSelector() {
     hardwareWalletAccount,
     setHardwareWalletAccount,
     setWalletSelector,
+    addAccount,
   } = useWalletSelector();
   const [anchorEl, setAnchorEl] = useState(null);
   const [addAccountOpen, setAddAccountOpen] = useState(false);
@@ -287,6 +288,7 @@ function WalletSelector() {
         open={addAccountOpen}
         onClose={() => setAddAccountOpen(false)}
         onAdd={({ name, importedAccount }) => {
+          addAccount({ name, importedAccount });
           setWalletSelector({
             walletIndex: importedAccount ? undefined : accounts.length,
             importedPubkey: importedAccount

src/pages/PopupPage.js

@@ -49,7 +49,6 @@ export default function PopupPage({ opener }) {
 
   const [connectedAccount, setConnectedAccount] = useState(null);
   const hasConnectedAccount = !!connectedAccount;
-
   const [requests, setRequests] = useState(getInitialRequests);
   const [autoApprove, setAutoApprove] = useState(false);
   const postMessage = useCallback(
@@ -66,6 +65,22 @@ export default function PopupPage({ opener }) {
     [opener, origin],
   );
 
+  // Hack to keep selectedWallet and wallet in sync. TODO: remove this block.
+  useEffect(() => {
+    if (!isExtension) {
+      if (!wallet) {
+        setWallet(selectedWallet);
+      } else if (!wallet.publicKey.equals(selectedWallet.publicKey)) {
+        setWallet(selectedWallet);
+      }
+    }
+  }, [
+    wallet,
+    wallet.publicKey,
+    selectedWallet,
+    selectedWallet.publicKey,
+  ]);
+
   // (Extension only) Fetch connected wallet for site from local storage.
   useEffect(() => {
     if (isExtension) {
@@ -254,9 +269,19 @@ export default function PopupPage({ opener }) {
   }
 
   async function sendAllSignatures(messages) {
-    const signatures = await Promise.all(
-      messages.map((m) => wallet.createSignature(m)),
-    );
+    console.log('wallet', wallet);
+    let signatures;
+    // Ledger must sign one by one.
+    if (wallet.type === 'ledger') {
+      signatures = [];
+      for (let k = 0; k < messages.length; k += 1) {
+        signatures.push(await wallet.createSignature(messages[k]));
+      }
+    } else {
+      signatures = await Promise.all(
+        messages.map((m) => wallet.createSignature(m)),
+      );
+    }
     postMessage({
       result: {
         signatures,
@@ -344,11 +369,11 @@ const useStyles = makeStyles((theme) => ({
 
 function ApproveConnectionForm({ origin, onApprove }) {
   const wallet = useWallet();
-  const { accounts } = useWalletSelector();
+  const { accounts, hardwareWalletAccount } = useWalletSelector();
   // TODO better way to do this
-  const account = accounts.find((account) =>
-    account.address.equals(wallet.publicKey),
-  );
+  const account = accounts
+    .concat([hardwareWalletAccount])
+    .find((account) => account && account.address.equals(wallet.publicKey));
   const classes = useStyles();
   const [autoApprove, setAutoApprove] = useState(false);
   let [dismissed, setDismissed] = useLocalStorageState(

src/utils/wallet.js

@@ -172,7 +172,7 @@ export function WalletProvider({ children }) {
     {},
   );
   // `walletSelector` identifies which wallet to use.
-  const [walletSelector, setWalletSelector] = useLocalStorageState(
+  let [walletSelector, setWalletSelector] = useLocalStorageState(
     'walletSelector',
     DEFAULT_WALLET_SELECTOR,
   );
@@ -181,6 +181,11 @@ export function WalletProvider({ children }) {
   // `walletCount` is the number of HD wallets.
   const [walletCount, setWalletCount] = useLocalStorageState('walletCount', 1);
 
+  if (walletSelector.ledger && !_hardwareWalletAccount) {
+    walletSelector = DEFAULT_WALLET_SELECTOR;
+    setWalletSelector(DEFAULT_WALLET_SELECTOR);
+  }
+
   useEffect(() => {
     (async () => {
       if (!seed) {
@@ -191,7 +196,7 @@ export function WalletProvider({ children }) {
         try {
           const onDisconnect = () => {
             setWalletSelector(DEFAULT_WALLET_SELECTOR);
-            setHardwareWalletAccount(undefined);
+            setHardwareWalletAccount(null);
           };
           const args = {
             onDisconnect,
@@ -208,7 +213,7 @@ export function WalletProvider({ children }) {
           }
           enqueueSnackbar(message, { variant: 'error' });
           setWalletSelector(DEFAULT_WALLET_SELECTOR);
-          setHardwareWalletAccount(undefined);
+          setHardwareWalletAccount(null);
           return;
         }
       }
@@ -246,7 +251,6 @@ export function WalletProvider({ children }) {
     enqueueSnackbar,
     derivationPath,
   ]);
-
   function addAccount({ name, importedAccount, ledger }) {
     if (importedAccount === undefined) {
       name && localStorage.setItem(`name${walletCount}`, name);

src/utils/walletProvider/ledger-core.js

@@ -125,7 +125,6 @@ export async function solana_ledger_sign_bytes(
 ) {
   var num_paths = Buffer.alloc(1);
   num_paths.writeUInt8(1);
-
   const payload = Buffer.concat([num_paths, derivation_path, msg_bytes]);
 
   return solana_send(transport, INS_SIGN_MESSAGE, P1_CONFIRM, payload);

src/utils/walletProvider/ledger.js

@@ -52,7 +52,7 @@ export class LedgerWalletProvider {
   createSignature = async (message) => {
     const sig_bytes = await solana_ledger_sign_bytes(
       this.transport,
-      this.solanaDerivationpath,
+      this.solanaDerivationPath,
       message,
     );
     return bs58.encode(sig_bytes);