fix: no title for unavailable nft (#5397)

src/nft/components/bag/BagContent.tsx

@@ -56,6 +56,10 @@ export const BagContent = () => {
       if (hasAssets) setBagStatus(BagStatus.CONFIRM_REVIEW)
       else setBagStatus(BagStatus.ADDING_TO_BAG)
     }
+
+    if (bagStatus === BagStatus.CONFIRM_REVIEW && !hasAssets) {
+      setBagStatus(BagStatus.ADDING_TO_BAG)
+    }
   }, [bagStatus, itemsInBag, priceChangedAssets, setBagStatus, fetchedPriceData])
 
   return (

src/nft/components/bag/BagRow.tsx

@@ -278,27 +278,30 @@ export const UnavailableAssetsHeaderRow = ({
 
   if (!assets || assets.length === 0) return null
 
+  const moreThanOneUnavailable = assets.length > 1
+  const isShowingAssets = isOpen || !moreThanOneUnavailable
+
   return (
     <Column className={styles.unavailableAssetsContainer}>
-      {assets.length === 1 && (
-        <BagRow asset={assets[0]} usdPrice={usdPrice} removeAsset={() => undefined} grayscale isMobile={isMobile} />
-      )}
-      {assets.length > 1 && (
       <Column>
         <Row
           justifyContent="space-between"
-            marginBottom={isOpen ? '12' : '0'}
-            cursor="pointer"
+          marginBottom={isShowingAssets ? '12' : '0'}
+          cursor={moreThanOneUnavailable ? 'pointer' : 'default'}
           onClick={() => {
+            if (moreThanOneUnavailable) {
               !didOpenUnavailableAssets && setDidOpenUnavailableAssets(true)
               toggleOpen()
+            }
           }}
         >
-            <Row gap="12" color="textPrimary" className={bodySmall}>
-              {!isOpen && <UnavailableAssetsPreview assets={assets.slice(0, 5)} />}
+          <Row gap="12" color="textSecondary" className={bodySmall}>
+            {!isShowingAssets && <UnavailableAssetsPreview assets={assets.slice(0, 5)} />}
             No longer available
           </Row>
+          {moreThanOneUnavailable && (
             <Row color="textSecondary">{isOpen ? <ChevronUpBagIcon /> : <ChevronDownBagIcon />}</Row>
+          )}
           {!didOpenUnavailableAssets && (
             <Row
               position="relative"
@@ -315,7 +318,7 @@ export const UnavailableAssetsHeaderRow = ({
           )}
         </Row>
         <Column gap="8" style={{ marginLeft: '-8px', marginRight: '-8px' }}>
-            {isOpen &&
+          {isShowingAssets &&
             assets.map((asset) => (
               <BagRow
                 key={asset.id}
@@ -328,7 +331,6 @@ export const UnavailableAssetsHeaderRow = ({
             ))}
         </Column>
       </Column>
-      )}
     </Column>
   )
 }

src/nft/components/bag/TimedLoader.tsx

@@ -15,7 +15,7 @@ const Circle = styled.circle`
   -webkit-animation: ${dash} linear;
   animation: ${dash} linear;
   animation-duration: 160s;
-  stroke: ${({ theme }) => theme.accentActive};
+  stroke: ${({ theme }) => theme.accentAction};
 `
 export const TimedLoader = () => {
   const stroke = 1.5