add: avatarnamelist (#620)

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Add tombstoned status ([\#600](https://github.com/forbole/big-dipper-2.0-cosmos/issues/600))
 - Add manual versioning in ui ([\#605](https://github.com/forbole/big-dipper-2.0-cosmos/issues/605))
 - Optimized tx list for chains with heavy traffic ([\#602](https://github.com/forbole/big-dipper-2.0-cosmos/issues/602))
+- Add AvatarNameListMsg for handling msgs with multiple users ([\#619](https://github.com/forbole/big-dipper-2.0-cosmos/issues/619))
 
 # base-v1.8.4 - 2021-12-08
 ## Bug fixes

src/components/avatar_name_list_msg/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import useTranslation from 'next-translate/useTranslation';
+import { Name } from '@components';
+
+/**
+ * Used for msg when you have to list multiple users
+ * using AvatarNames
+ */
+const AvatarNameListMsg = (props: {
+  avatars: AvatarName[];
+}) => {
+  const { t } = useTranslation('transactions');
+  const { avatars } = props;
+  return (
+    <>
+      {avatars.map((x, i) => {
+        const signerMoniker = x ? x?.name : x?.address;
+        if (avatars.length === 1) {
+          return (
+            <Name
+              address={x?.address}
+              name={signerMoniker}
+            />
+          );
+        }
+
+        if (i === avatars.length - 2) {
+          return (
+            <>
+              <Name
+                address={x?.address}
+                name={signerMoniker}
+              />
+              {' '}
+              {t('and')}
+              {' '}
+            </>
+          );
+        }
+
+        return (
+          <>
+            <Name
+              address={x?.address}
+              name={signerMoniker}
+            />
+            {i !== avatars.length - 1 && (
+              <>
+                ,
+                {' '}
+              </>
+            )}
+          </>
+        );
+      })}
+    </>
+  );
+};
+
+export default AvatarNameListMsg;

src/components/index.ts

@@ -28,6 +28,7 @@ import TransactionsList from './transactions_list';
 import LoadAndExist from './load_and_exist';
 import DesmosProfile from './desmos_profile';
 import TransactionListDetails from './transactions_list_details';
+import AvatarNameListMsg from './avatar_name_list_msg';
 
 export {
   Layout,
@@ -60,4 +61,5 @@ export {
   LoadAndExist,
   DesmosProfile,
   TransactionListDetails,
+  AvatarNameListMsg,
 };