Merge branch 'main' into cant-remove-assets

tahowallet · Dec 20, 2023 · c2b8e89 · c2b8e89
2 parents db60330 + 1e89e02
commit c2b8e89
Show file tree

Hide file tree

Showing 60 changed files with 322 additions and 267 deletions.
diff --git a/background/constants/networks.ts b/background/constants/networks.ts
@@ -186,7 +186,7 @@ export const CHAIN_ID_TO_0X_API_BASE: {
   [POLYGON.chainID]: "polygon.api.0x.org",
   [OPTIMISM.chainID]: "optimism.api.0x.org",
   [GOERLI.chainID]: "goerli.api.0x.org",
-  // TODO: Add Swap API for Sepolia once 0x supports it.
+  [SEPOLIA.chainID]: "sepolia.api.0x.org",
   [ARBITRUM_ONE.chainID]: "arbitrum.api.0x.org",
   [AVALANCHE.chainID]: "avalanche.api.0x.org",
   [BINANCE_SMART_CHAIN.chainID]: "bsc.api.0x.org",

diff --git a/background/main.ts b/background/main.ts
@@ -1059,11 +1059,15 @@ export default class Main extends BaseService<never> {
         this.store.dispatch(updateAccountName({ ...addressOnNetwork, name }))
       },
     )
+
     this.nameService.emitter.on(
       "resolvedAvatar",
       async ({ from: { addressOnNetwork }, resolved: { avatar } }) => {
         this.store.dispatch(
-          updateENSAvatar({ ...addressOnNetwork, avatar: avatar.toString() }),
+          updateENSAvatar({
+            ...addressOnNetwork,
+            avatar: avatar.toString(),
+          }),
         )
       },
     )

diff --git a/background/redux-slices/accounts.ts b/background/redux-slices/accounts.ts
@@ -387,7 +387,9 @@ const accountSlice = createSlice({
       immerState,
       {
         payload: { address, network, avatar },
-      }: { payload: AddressOnNetwork & { avatar: URI } },
+      }: {
+        payload: AddressOnNetwork & { avatar: URI }
+      },
     ) => {
       const normalizedAddress = normalizeEVMAddress(address)
 

diff --git a/background/redux-slices/selectors/accountsSelectors.ts b/background/redux-slices/selectors/accountsSelectors.ts
@@ -458,6 +458,8 @@ function getNetworkAccountTotalsByCategory(
         }
       }
 
+      const { name, avatarURL } = accountData.ens
+
       return {
         address,
         network,
@@ -466,8 +468,8 @@ function getNetworkAccountTotalsByCategory(
         signerId,
         path,
         accountSigner,
-        name: accountData.ens.name ?? accountData.defaultName,
-        avatarURL: accountData.ens.avatarURL ?? accountData.defaultAvatar,
+        name: name ?? accountData.defaultName,
+        avatarURL: avatarURL ?? accountData.defaultAvatar,
         localizedTotalMainCurrencyAmount: formatCurrencyAmount(
           mainCurrencySymbol,
           getTotalBalance(accountData.balances, prices, mainCurrencySymbol),

diff --git a/ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx b/ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx
@@ -195,7 +195,7 @@ function WalletTypeHeader({
             toggler={(toggle) => (
               <SharedIcon
                 color="var(--green-40)"
-                customStyles="cursor: pointer;"
+                style={{ cursor: "pointer" }}
                 width={24}
                 onClick={() => toggle()}
                 icon="settings.svg"

diff --git a/ui/components/DAppConnection/DAppConnectionInfoBar.tsx b/ui/components/DAppConnection/DAppConnectionInfoBar.tsx
@@ -41,11 +41,7 @@ function DefaultConnectionPopover({ close }: PopoverProps): ReactElement {
           onClick={animateThenClose}
           color="var(--green-20)"
           hoverColor="var(--white)"
-          customStyles={`
-            position: absolute;
-            top: 16px;
-            right: 16px;
-          `}
+          style={{ position: "absolute", top: 16, right: 16 }}
         />
 
         <h3>{t("title")}</h3>

diff --git a/ui/components/NFTs/NFTCollection.tsx b/ui/components/NFTs/NFTCollection.tsx
@@ -133,7 +133,7 @@ export default function NFTCollection(props: {
             isLoaded={!isLoading && !!nfts.length}
             width={168}
             height={168}
-            customStyles="margin: 8px 0 34px;"
+            style={{ margin: "8px 0 34px" }}
           >
             {nfts.length === 1 ? (
               <NFTItem
@@ -164,7 +164,7 @@ export default function NFTCollection(props: {
                   isLoaded={!isUpdating}
                   width={168}
                   height={168}
-                  customStyles="margin: 8px 0;"
+                  style={{ margin: "8px 0" }}
                 />
                 <div ref={loadMoreRef} className="nft_load_more" />
               </>

diff --git a/ui/components/NFTs/NFTHover.tsx b/ui/components/NFTs/NFTHover.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { ReactElement } from "react"
+import React, { CSSProperties, ReactElement } from "react"
 import { useTranslation } from "react-i18next"
 import { I18nKey } from "../../_locales/i18n"
 import SharedIcon from "../Shared/SharedIcon"
@@ -12,7 +12,7 @@ const icons: Record<
     background: string
     backgroundHover?: string
     size: number
-    style: string
+    style?: CSSProperties
   }
 > = {
   close: {
@@ -21,21 +21,19 @@ const icons: Record<
     background: "var(--green-40)",
     backgroundHover: "var(--green-20)",
     size: 12,
-    style: "",
   },
   expand: {
     icon: "chevron",
     label: "nfts.collectionHover.expand",
     background: "var(--success)",
     size: 12,
-    style: "margin-bottom: 3px;",
+    style: { marginBottom: 3 },
   },
   view: {
     icon: "eye",
     label: "nfts.collectionHover.view",
     background: "var(--trophy-gold)",
     size: 22,
-    style: "",
   },
 }
 
@@ -72,7 +70,7 @@ export default function NFTsHover(props: {
           icon={`${icon}@2x.png`}
           width={size}
           color="var(--hunter-green)"
-          customStyles={style}
+          style={style}
         />
       </div>
       <style jsx>{`

diff --git a/ui/components/NFTs/NFTImage.tsx b/ui/components/NFTs/NFTImage.tsx
@@ -1,9 +1,21 @@
 import classNames from "classnames"
-import React, { ReactElement, useEffect, useState } from "react"
+import React, { CSSProperties, ReactElement, useEffect, useState } from "react"
 import noop from "../../utils/noop"
 
 export const noPreviewLink = "./images/no_preview.svg"
 
+type NFTIMageProps = {
+  width: number
+  height?: number
+  alt: string
+  src?: string
+  highResolutionSrc?: string
+  fit?: string
+  isBadge?: boolean
+  isZoomed?: boolean
+  style?: CSSProperties
+}
+
 export default function NFTImage({
   width,
   height,
@@ -13,18 +25,8 @@ export default function NFTImage({
   fit = "cover",
   isBadge = false,
   isZoomed = false,
-  customStyles = "",
-}: {
-  width: number
-  height?: number
-  alt: string
-  src?: string
-  highResolutionSrc?: string
-  fit?: string
-  isBadge?: boolean
-  isZoomed?: boolean
-  customStyles?: string
-}): ReactElement {
+  style,
+}: NFTIMageProps): ReactElement {
   const [isLoading, setIsLoading] = useState(true)
   const [imageUrl, setImageUrl] = useState(src || noPreviewLink)
 
@@ -50,6 +52,7 @@ export default function NFTImage({
         className={classNames("nft_image_wrapper", {
           badge: isBadge,
         })}
+        style={style}
       >
         <div className="nft_image_background" />
         <img
@@ -116,7 +119,6 @@ export default function NFTImage({
         .nft_image_wrapper {
           border-radius: 8px;
           overflow: hidden;
-          ${customStyles}
         }
         .nft_image_wrapper.badge {
           overflow: hidden;

diff --git a/ui/components/NFTs/NFTListPortfolio.tsx b/ui/components/NFTs/NFTListPortfolio.tsx
@@ -54,7 +54,7 @@ export default function NFTListPortfolio(props: {
             <SharedBanner
               id="nfts_networks_banner"
               canBeClosed
-              customStyles="margin: 15px 0 30px;"
+              style={{ margin: "15px 0 30px" }}
               hasShadow
             >
               <div className="simple_text">{t("networksBanner")}</div>

diff --git a/ui/components/NFTs/NFTPreview.tsx b/ui/components/NFTs/NFTPreview.tsx
@@ -101,7 +101,7 @@ export default function NFTPreview(props: NFTWithCollection): ReactElement {
             width={384}
             height={isBadge ? 384 : undefined}
             isBadge={isBadge}
-            customStyles="border-radius: 0 0 8px 8px;"
+            style={{ borderRadius: "0 0 8px 8px" }}
           />
           <div className="preview_network">
             <SharedNetworkIcon

diff --git a/ui/components/NFTs/NFTsExploreBanner.tsx b/ui/components/NFTs/NFTsExploreBanner.tsx
@@ -17,7 +17,7 @@ export default function NFTsExploreBanner(props: {
   const items = type === "badge" ? HARDCODED_BADGES : HARDCODED_MARKETS
 
   return (
-    <SharedBanner customStyles="margin-top: 10px;">
+    <SharedBanner style={{ marginTop: 10 }}>
       <header>{t(`emptyBannerTitle.${type}`)}</header>
       <nav>
         {items.map(

diff --git a/ui/components/Onboarding/OnboardingOpenClaimFlowBanner.tsx b/ui/components/Onboarding/OnboardingOpenClaimFlowBanner.tsx
@@ -80,10 +80,7 @@ function EligibleCTAContent({
           hoverColor="#fff"
           ariaLabel="Close banner"
           onClick={handleCloseBanner}
-          customStyles={`
-            align-self: flex-start;
-            margin: 10px 12px;
-          `}
+          style={{ alignSelf: "flex-start", margin: "10px 12px" }}
         />
       ) : (
         <Link
@@ -184,11 +181,7 @@ function IneligibleCTAContent({
           color="var(--green-40)"
           onClick={handleCloseBanner}
           ariaLabel="Close menu"
-          customStyles={`
-            margin-top: 8px;
-            margin-right: 8px;
-            flex-shrink: 0;
-          `}
+          style={{ marginInline: 8, flexShrink: 0 }}
         />
       </div>
       <div className="banner_bottom">
@@ -274,7 +267,7 @@ export default function OnboardingOpenClaimFlowBanner(): ReactElement | null {
         height={90}
         width={352}
         borderRadius={16}
-        customStyles="margin: 0 0 20px; flex: 1 0 auto;"
+        style={{ margin: "0 0 20px", flex: "1 0 auto" }}
       />
     )
 

diff --git a/ui/components/Overview/AccountList.tsx b/ui/components/Overview/AccountList.tsx
@@ -74,11 +74,11 @@ export default function AccountList({
                   e.stopPropagation()
                   toggle()
                 }}
-                customStyles={`
-                margin-left: 5px;
-                transform: rotate(${isOpen ? "180" : "0"}deg);
-                transition: transform 100ms;
-              `}
+                style={{
+                  marginLeft: 5,
+                  transform: `rotate(${isOpen ? "180" : "0"}deg)`,
+                  transition: "transform 100ms",
+                }}
               />
             </button>
           )}

diff --git a/ui/components/Send/NFTCollectionAccordion.tsx b/ui/components/Send/NFTCollectionAccordion.tsx
@@ -57,7 +57,7 @@ export default function NFTCollectionAccordion({
               width="32"
               height="32"
               src={collection.thumbnailURL}
-              customStyles="border-radius: 4px;"
+              style={{ borderRadius: 4 }}
             />
             <span className="ellipsis">{collection.name}</span>
           </div>
@@ -108,7 +108,7 @@ export default function NFTCollectionAccordion({
 
             window.open(url, "_blank")?.focus()
           }}
-          customStyles="margin: 12px 0 auto;"
+          style={{ margin: "12px 0 auto" }}
         />
       )}
       <style jsx>

diff --git a/ui/components/Send/NFTCollectionListItem.tsx b/ui/components/Send/NFTCollectionListItem.tsx
@@ -22,11 +22,11 @@ export default function NFTCollectionListItem({
         fallback={noPreviewImg}
         loading="lazy"
         alt={name}
-        customStyles={`
-          border-radius: 4px;
-          object-position: center;
-          object-fit: cover;
-        `}
+        style={{
+          borderRadius: 4,
+          objectPosition: "center",
+          objectFit: "cover",
+        }}
       />
       <button type="button" className="label" onClick={onClick}>
         <p className="ellipsis">{name}</p>

diff --git a/ui/components/Shared/PriceDetails.tsx b/ui/components/Shared/PriceDetails.tsx
@@ -49,7 +49,7 @@ export default function PriceDetails(props: PriceDetailsProps): ReactElement {
                 width={16}
                 icon="icons/m/info.svg"
                 color="var(--attention)"
-                customStyles="flex-shrink: 0;"
+                style={{ flexShrink: 0 }}
               />
             </div>
           )}
@@ -81,7 +81,7 @@ export default function PriceDetails(props: PriceDetailsProps): ReactElement {
                     width={16}
                     icon="icons/m/info.svg"
                     color={`var(--${getPriceImpactColor(priceImpact)})`}
-                    customStyles="margin-left: -5px;"
+                    style={{ marginLeft: -5 }}
                   />
                 )}
               >

diff --git a/ui/components/Shared/SharedAccordion.tsx b/ui/components/Shared/SharedAccordion.tsx
@@ -72,11 +72,11 @@ export default function SharedAccordion({
             e.stopPropagation()
             toggle()
           }}
-          customStyles={`
-            margin: 2px 0 2px 8px;
-            transform: rotate(${isOpen ? "180" : "0"}deg);
-            transition: transform 100ms;
-          `}
+          style={{
+            margin: "2px 0 2px 8px",
+            transform: `rotate(${isOpen ? "180" : "0"}deg)`,
+            transition: "transform 100ms",
+          }}
         />
       </div>
       <div