Merge pull request #7 from paritytech/yuri/wallet-names

Better wallet names

Author: mutantcornholio

templates/react-papi-tailwind/src/components/AccountList.tsx

@@ -1,4 +1,5 @@
 import { useAccounts } from "@reactive-dot/react";
+import { getWalletMetadata } from "dot-connect";
 
 function AccountInfo({ address, name, wallet }: { address: string; name?: string, wallet: string }) {
   return <div className="container md grid grid-cols-2 border rounded p-2 my-2">
@@ -19,11 +20,16 @@ export function AccountList() {
     <div>
       <h3 className="text-left text-lg font-bold">Connected accounts:</h3>
       <ul>
-        {accounts.map((account, index) => (
-          <li key={index}>
-            <AccountInfo address={account.address} name={account.name} wallet={account.wallet.name} />
-          </li>
-        ))}
+        {accounts.map((account, index) => {
+          const walletMeta = getWalletMetadata(account.wallet);
+          const walletName = walletMeta?.name ?? account.wallet.name;
+
+          return (
+            <li key={index}>
+              <AccountInfo address={account.address} name={account.name} wallet={walletName} />
+            </li>
+          );
+        })}
       </ul>
     </div>
   );