Merge pull request #273 from ArtemKolodko/fix_holders_count

Hotfix for erc1155 holders count

src/pages/AddressPage/AddressDetails.tsx

@@ -38,10 +38,11 @@ interface AddressDetailsProps {
   tokens: any[];
   balance?: string;
   delegations: StakingDelegation[]
+  holdersCount?: number
 }
 
 export function AddressDetailsDisplay(props: AddressDetailsProps) {
-  const { address, addressDescription, contracts, contractShardId, tokens, balance, delegations } = props;
+  const { address, addressDescription, contracts, contractShardId, tokens, balance, delegations, holdersCount } = props;
   const erc20Map = useERC20Pool();
   const erc721Map = useERC721Pool();
   const erc1155Map = useERC1155Pool();
@@ -78,6 +79,10 @@ export function AddressDetailsDisplay(props: AddressDetailsProps) {
     contractShardId
   };
 
+  if(holdersCount) {
+    data.holders = holdersCount
+  }
+
   if (!data) {
     return null;
   }

src/pages/AddressPage/index.tsx

@@ -53,6 +53,7 @@ export function AddressPage() {
     IUserERC721Assets[]
     >([]);
   const [activeIndex, setActiveIndex] = useState(activeTab);
+  const [holdersCount, setHoldersCount] = useState<number | undefined>()
   const erc20Map = useERC20Pool();
   const erc721Map = useERC721Pool();
   const erc1155Map = useERC1155Pool();
@@ -171,7 +172,25 @@ export function AddressPage() {
             item.type = type;
             return item;
           })
+
+          if(type === 'erc1155') {
+            items = items.filter((item) => item && item.ownerAddress && item.ownerAddress.startsWith('0x'))
+          }
+
           setInventory(items);
+
+          // TODO remove after fix on backend, workaround
+          if(type === "erc1155") {
+            const holdersMap = items
+              .reduce((acc, nextItem) => {
+              const { ownerAddress } = nextItem
+              if(ownerAddress && !acc[ownerAddress.toLowerCase()]) {
+                acc[ownerAddress.toLowerCase()] = true
+              }
+              return acc
+            }, {} as Record<string, boolean>)
+            setHoldersCount(Object.keys(holdersMap).length)
+          }
         } else {
           setInventory([]);
         }
@@ -289,6 +308,7 @@ export function AddressPage() {
           tokens={tokens}
           balance={balance}
           delegations={delegations}
+          holdersCount={holdersCount}
         />
       </BasePage>
       <BasePage margin={{ top: "15px" }}>
@@ -329,6 +349,7 @@ export function AddressPage() {
                 id={id}
                 type={type}
                 inventory={inventory}
+                holdersCount={holdersCount}
               />
             </Tab>
           ) : null}

src/pages/AddressPage/tabs/holders/HoldersTab.tsx

@@ -81,12 +81,14 @@ export function HoldersTab(props: {
   id: string;
   type: "erc20" | "erc721" | "erc1155";
   inventory?: IUserERC721Assets[];
+  holdersCount?: number
 }) {
   const erc20Map = useERC20Pool();
   const erc721Map = useERC721Pool();
   const erc1155Map = useERC1155Pool();
 
-  const holdersTotal =
+  let holdersTotal =
+    props.holdersCount ||
     erc20Map[props.id]?.holders ||
     erc721Map[props.id]?.holders ||
     erc1155Map[props.id]?.holders;