Refactor chooseWallet code

Colocate the wallet connector with its other info (name, etc)

src/components/lib/ConnectWalletDialog.js

@@ -71,13 +71,14 @@ const WALLETS = [
 	{
 		name: "Metamask",
 		icon: "/images/metamask-fox.svg",
-		showName: true
+		showName: true,
+		connector: injectedConnector
 	},
 	{
 		name: "Ledger",
-		icon: "/images/ledger.svg"
+		icon: "/images/ledger.svg",
+		connector: ledgerConnector
 	},
-	}
 ]
 
 export const ConnectWalletDialog = ({ shown, onConnected, onClose }) => {
@@ -90,16 +91,9 @@ export const ConnectWalletDialog = ({ shown, onConnected, onClose }) => {
 		error
 	}
 
-	async function chooseWallet(wallet) {
+	async function chooseWallet(wallet, connector) {
 		setChosenWallet(wallet)
 
-		let connector
-		if (wallet == 'Ledger') {
-			connector = ledgerConnector
-		} else if (wallet == 'Metamask') {
-			connector = injectedConnector
-		}
-
 		try {
 			await activate(connector, undefined, true)
 			onConnected()
@@ -118,8 +112,8 @@ export const ConnectWalletDialog = ({ shown, onConnected, onClose }) => {
 
 			<ul className='wallets'>
 				{
-					WALLETS.map(({ name, icon, showName }) => {
-						return <li className='wallet-option' onClick={() => chooseWallet(name)}>
+					WALLETS.map(({ name, icon, showName, connector }) => {
+						return <li className='wallet-option' onClick={() => chooseWallet(name, connector)}>
 							<img src={icon} />
 							{showName && name}
 						</li>