Merge branch 'main' into release-0.20.0

.github/ISSUE_TEMPLATE/BUG.yml

@@ -52,6 +52,7 @@ body:
       description: What version of the extension are you running?
       options:
         - v0.20.0
+        - v0.19.3
         - v0.19.2
         - v0.19.1
         - v0.19.0

background/lib/poap_update.ts

@@ -3,7 +3,7 @@ import logger from "./logger"
 import { ETHEREUM } from "../constants"
 import { NFT, NFTCollection, NFTsWithPagesResponse } from "../nfts"
 
-export const POAP_CONTRACT = "poap_contract"
+export const POAP_CONTRACT = "0x22C1f6050E56d2876009903609a2cC3fEf83B415" // POAP contract address https://etherscan.io/address/0x22C1f6050E56d2876009903609a2cC3fEf83B415
 export const POAP_COLLECTION_ID = "POAP"
 
 type PoapNFTModel = {
@@ -39,6 +39,7 @@ function poapNFTModelToNFT(original: PoapNFTModel, owner: string): NFT {
       country,
       city,
       year,
+      supply,
     },
   } = original
   return {
@@ -58,6 +59,7 @@ function poapNFTModelToNFT(original: PoapNFTModel, owner: string): NFT {
     contract: POAP_CONTRACT, // contract address doesn't make sense for POAPs
     owner,
     network: ETHEREUM,
+    supply,
     isBadge: true,
   }
 }

background/nfts.ts

@@ -54,7 +54,8 @@ export type NFT = {
   contract: string
   owner: string
   network: EVMNetwork
-  isBadge: boolean
+  supply?: number // only for POAPs
+  isBadge: boolean // POAPs, Galxe NFTs and OATs
 }
 
 export type NFTCollection = {

background/redux-slices/accounts.ts

@@ -29,7 +29,7 @@ export const enum AccountType {
   Internal = "internal",
 }
 
-const availableDefaultNames = [
+export const DEFAULT_ACCOUNT_NAMES = [
   "Phoenix",
   "Matilda",
   "Sirius",
@@ -40,6 +40,8 @@ const availableDefaultNames = [
   "Foz",
 ]
 
+const availableDefaultNames = [...DEFAULT_ACCOUNT_NAMES]
+
 export type AccountData = {
   address: HexString
   network: Network

background/redux-slices/selectors/accountsSelectors.ts

@@ -1,7 +1,11 @@
 import { createSelector } from "@reduxjs/toolkit"
 import { selectHideDust } from "../ui"
 import { RootState } from ".."
-import { AccountType, CompleteAssetAmount } from "../accounts"
+import {
+  AccountType,
+  DEFAULT_ACCOUNT_NAMES,
+  CompleteAssetAmount,
+} from "../accounts"
 import { AssetsState, selectAssetPricePoint } from "../assets"
 import {
   enrichAssetAmountWithDecimalValues,
@@ -519,6 +523,17 @@ export const getAccountTotal = (
     accountAddressOnNetwork
   )
 
+export const getAccountNameOnChain = (
+  state: RootState,
+  accountAddressOnNetwork: AddressOnNetwork
+): string | undefined => {
+  const account = getAccountTotal(state, accountAddressOnNetwork)
+
+  return account?.name && !DEFAULT_ACCOUNT_NAMES.includes(account.name)
+    ? account.name
+    : undefined
+}
+
 export const selectCurrentAccountTotal = createSelector(
   selectCurrentNetworkAccountTotalsByCategory,
   selectCurrentAccount,

ui/components/NFTS_update/NFTPreview.tsx

@@ -1,13 +1,11 @@
 import { FeatureFlags, isEnabled } from "@tallyho/tally-background/features"
-import {
-  isProbablyEVMAddress,
-  truncateAddress,
-} from "@tallyho/tally-background/lib/utils"
 import { NFTWithCollection } from "@tallyho/tally-background/redux-slices/nfts_update"
+import { getAccountNameOnChain } from "@tallyho/tally-background/redux-slices/selectors"
 import React, { ReactElement, useMemo } from "react"
 import { useTranslation } from "react-i18next"
-import { useIntersectionObserver } from "../../hooks"
+import { useBackgroundSelector, useIntersectionObserver } from "../../hooks"
 import { trimWithEllipsis } from "../../utils/textUtils"
+import SharedAddress from "../Shared/SharedAddress"
 import SharedButton from "../Shared/SharedButton"
 import SharedNetworkIcon from "../Shared/SharedNetworkIcon"
 import ExploreMarketLink, { getRelevantMarketsList } from "./ExploreMarketLink"
@@ -38,6 +36,7 @@ export default function NFTPreview(props: NFTWithCollection): ReactElement {
     owner,
     description,
     attributes,
+    supply,
     isBadge,
   } = nft
   const { totalNftCount } = collection
@@ -46,6 +45,10 @@ export default function NFTPreview(props: NFTWithCollection): ReactElement {
     collection.floorPrice?.value !== undefined &&
     collection.floorPrice
 
+  const ownerName = useBackgroundSelector((state) =>
+    getAccountNameOnChain(state, { address: owner, network })
+  )
+
   // Chrome seems to have problems when elements with backdrop style are rendered initially
   // out of the viewport - browser is not rendering them at all. This is a workaround
   // to force them to rerender.
@@ -87,10 +90,10 @@ export default function NFTPreview(props: NFTWithCollection): ReactElement {
                 {t("preview.owner")}
               </span>
               <span className="preview_details_value">
-                {truncateAddress(owner)}
+                <SharedAddress address={owner} name={ownerName} elide />
               </span>
             </div>
-            <div className="preview_section_column align_right">
+            <div className="preview_section_column align_right no_shrink">
               <span className="preview_details_header">
                 {t("preview.floorPrice")}
               </span>
@@ -153,13 +156,15 @@ export default function NFTPreview(props: NFTWithCollection): ReactElement {
             <div className="preview_section_header">
               {t("preview.itemsCount")}
             </div>
-            <p>{totalNftCount ?? "-"}</p>
+            <p>{totalNftCount ?? supply ?? "-"}</p>
           </div>
           <div className="preview_section_column align_right">
             <div className="preview_section_header">{t("preview.creator")}</div>
-            <p>
-              {isProbablyEVMAddress(contract) ? truncateAddress(contract) : "-"}
-            </p>
+            {contract?.length ? (
+              <SharedAddress address={contract} elide />
+            ) : (
+              "-"
+            )}
           </div>
         </div>
 
@@ -261,6 +266,7 @@ export default function NFTPreview(props: NFTWithCollection): ReactElement {
         .preview_section_column {
           display: flex;
           flex-direction: column;
+          min-width: 0;
         }
         .preview_section_row {
           display: flex;
@@ -309,6 +315,9 @@ export default function NFTPreview(props: NFTWithCollection): ReactElement {
           gap: 16px;
           justify-content: flex-start;
         }
+        .no_shrink {
+          flex-shrink: 0;
+        }
       `}</style>
     </>
   )

ui/components/Shared/SharedAddress.tsx

@@ -74,6 +74,7 @@ export default function SharedAddress({
       <style jsx>{`
         button {
           transition: 300ms color;
+          max-width: 100%;
         }
         button :last-child {
           top: 3px;