fix: links to accounts

src/v2/components/Programs/Detail/Details/index.jsx

@@ -15,6 +15,7 @@ const ProgramDetails = ({programAccounts}: {programAccounts: Object}) => {
         </TableCell>
         <TableCell>
           <ValidatorName
+            to={`/accounts/${account.pubkey}`}
             pubkey={account.pubkey}
             name={account.pubkey}
             avatar=""

src/v2/components/Transactions/Detail/Program/index.jsx

@@ -16,10 +16,16 @@ type TProgram = {
 
 const Program = ({id, accounts}: TProgram) => {
   const classes = useStyles();
+
   const renderAccount = (account, i) => (
-    <div className={classes.account}>
+    <div className={classes.account} key={account}>
       <Label text={`Account ${i + 1}`} hint="" />
-      <ValidatorName pubkey={id} name={account} avatar="" />
+      <ValidatorName
+        to={`/accounts/${account}`}
+        pubkey={id}
+        name={account}
+        avatar=""
+      />
     </div>
   );
   return (

src/v2/components/Transactions/Detail/ProgramsTab.jsx

@@ -6,7 +6,13 @@ import Program from './Program';
 
 const ProgramsTab = ({transaction}: {transaction: Object}) => {
   const renderProgram = instruction => {
-    return <Program id={instruction.programId} accounts={instruction.keys} />;
+    return (
+      <Program
+        key={instruction.programId}
+        id={instruction.programId}
+        accounts={instruction.keys}
+      />
+    );
   };
   return <div>{map(renderProgram)(transaction.instructions)}</div>;
 };

src/v2/components/UI/ValidatorName/index.jsx

@@ -9,15 +9,17 @@ const ValidatorName = ({
   pubkey,
   name,
   avatar,
+  to,
 }: {
   pubkey: string,
   name: string,
   avatar: string,
+  to?: string,
 }) => {
   const classes = useStyles();
   return (
     <div>
-      <Link to={`/validators/${pubkey}`} className={classes.root}>
+      <Link to={to || `/validators/${pubkey}`} className={classes.root}>
         <Avatar pubkey={pubkey} avatarUrl={avatar} />
         <div>{name || pubkey}</div>
       </Link>