Add assets list empty states (#755)

Sources/Core/Resources/Generated/AssetResource.generated.swift

@@ -25,6 +25,9 @@ public enum AssetResource {
   public static let addAccount = ImageAsset(name: "addAccount")
   public static let addMessage = ImageAsset(name: "addMessage")
   public static let transfer = ImageAsset(name: "transfer")
+  public static let fungibleTokens = ImageAsset(name: "fungible-tokens")
+  public static let nonfungbileTokens = ImageAsset(name: "nonfungbile-tokens")
+  public static let poolUnits = ImageAsset(name: "pool-units")
   public static let informationChangeableByAnyone = ImageAsset(name: "information-changeable-by-anyone")
   public static let informationChangeable = ImageAsset(name: "information-changeable")
   public static let movementRestrictableInFutureByAnyone = ImageAsset(name: "movement-restrictable-in-future-by-anyone")
@@ -79,6 +82,7 @@ public enum AssetResource {
   public static let homeAggregatedValueHidden = ImageAsset(name: "home-aggregatedValue-hidden")
   public static let homeAggregatedValueShown = ImageAsset(name: "home-aggregatedValue-shown")
   public static let homeHeaderSettings = ImageAsset(name: "home-header-settings")
+  public static let iconMarketCap = ImageAsset(name: "Icon-Market-Cap")
   public static let placeholderSecurityStructure = ImageAsset(name: "PLACEHOLDER_SecurityStructure")
   public static let brokenImagePlaceholder = ImageAsset(name: "broken-image-placeholder")
   public static let nft = ImageAsset(name: "nft")

Sources/Core/Resources/Resources/Assets.xcassets/AssetsList/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Core/Resources/Resources/Assets.xcassets/AssetsList/fungible-tokens.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "Icon-Market-Cap.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Core/Resources/Resources/Assets.xcassets/AssetsList/nonfungbile-tokens.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ICON-NFTS.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Core/Resources/Resources/Assets.xcassets/AssetsList/pool-units.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "icon-Pool-Shares.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Core/Resources/Resources/Assets.xcassets/Icon-Market-Cap.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "Icon-Market-Cap.pdf",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Features/AssetsFeature/AssetsView+Reducer.swift

@@ -25,9 +25,9 @@ public struct AssetsView: Sendable, FeatureReducer {
 		public var activeAssetKind: AssetKind
 		public var assetKinds: NonEmpty<[AssetKind]>
 
-		public var fungibleTokenList: FungibleAssetList.State
-		public var nonFungibleTokenList: NonFungibleAssetList.State
-		public var poolUnitsList: PoolUnitsList.State
+		public var fungibleTokenList: FungibleAssetList.State?
+		public var nonFungibleTokenList: NonFungibleAssetList.State?
+		public var poolUnitsList: PoolUnitsList.State?
 
 		public let account: Profile.Network.Account
 		public var isLoadingResources: Bool = false
@@ -36,19 +36,19 @@ public struct AssetsView: Sendable, FeatureReducer {
 		public init(account: Profile.Network.Account, mode: Mode = .normal) {
 			self.init(
 				account: account,
-				fungibleTokenList: .init(),
-				nonFungibleTokenList: .init(rows: []),
-				poolUnitsList: .init(),
+				fungibleTokenList: nil,
+				nonFungibleTokenList: nil,
+				poolUnitsList: nil,
 				mode: mode
 			)
 		}
 
 		init(
 			account: Profile.Network.Account,
 			assetKinds: NonEmpty<[AssetKind]> = .init(rawValue: AssetKind.allCases)!,
-			fungibleTokenList: FungibleAssetList.State,
-			nonFungibleTokenList: NonFungibleAssetList.State,
-			poolUnitsList: PoolUnitsList.State,
+			fungibleTokenList: FungibleAssetList.State?,
+			nonFungibleTokenList: NonFungibleAssetList.State?,
+			poolUnitsList: PoolUnitsList.State?,
 			mode: Mode
 		) {
 			self.account = account
@@ -89,21 +89,22 @@ public struct AssetsView: Sendable, FeatureReducer {
 	public init() {}
 
 	public var body: some ReducerOf<Self> {
-		Scope(state: \.fungibleTokenList, action: /Action.child .. ChildAction.fungibleTokenList) {
-			FungibleAssetList()
-		}
-		Scope(state: \.nonFungibleTokenList, action: /Action.child .. ChildAction.nonFungibleTokenList) {
-			NonFungibleAssetList()
-		}
-		Scope(state: \.poolUnitsList, action: /Action.child .. ChildAction.poolUnitsList) {
-			PoolUnitsList()
-		}
 		Reduce(core)
+			.ifLet(\.fungibleTokenList, action: /Action.child .. ChildAction.fungibleTokenList) {
+				FungibleAssetList()
+			}
+			.ifLet(\.nonFungibleTokenList, action: /Action.child .. ChildAction.nonFungibleTokenList) {
+				NonFungibleAssetList()
+			}
+			.ifLet(\.poolUnitsList, action: /Action.child .. ChildAction.poolUnitsList) {
+				PoolUnitsList()
+			}
 	}
 
 	public func reduce(into state: inout State, viewAction: ViewAction) -> Effect<Action> {
 		switch viewAction {
 		case .task:
+			state.isLoadingResources = true
 			return .run { [address = state.account.address] send in
 				for try await portfolio in await accountPortfoliosClient.portfolioForAccount(address).debounce(for: .seconds(0.1)) {
 					guard !Task.isCancelled else { return }
@@ -128,6 +129,7 @@ public struct AssetsView: Sendable, FeatureReducer {
 		switch internalAction {
 		case let .updatePortfolio(portfolio):
 			state.updatePortfolio(to: portfolio)
+			state.isLoadingResources = false
 			return .none
 		}
 	}
@@ -156,8 +158,13 @@ extension AssetsView.State {
 			)
 		}
 
-		fungibleTokenList = .init(xrdToken: xrd, nonXrdTokens: .init(uniqueElements: nonXrd))
-		nonFungibleTokenList = .init(rows: .init(uniqueElements: nfts))
+		if xrd != nil || !nonXrd.isEmpty {
+			fungibleTokenList = .init(xrdToken: xrd, nonXrdTokens: .init(uniqueElements: nonXrd))
+		}
+
+		if !nfts.isEmpty {
+			nonFungibleTokenList = .init(rows: .init(uniqueElements: nfts))
+		}
 
 		let lsuResource: LSUResource.State? = {
 			guard !portfolio.poolUnitResources.radixNetworkStakes.isEmpty else {
@@ -179,19 +186,21 @@ extension AssetsView.State {
 			)
 		}()
 
-		poolUnitsList = .init(
-			lsuResource: lsuResource,
-			poolUnits: .init(
-				uncheckedUniqueElements: portfolio.poolUnitResources.poolUnits
-					.map {
-						PoolUnit.State(
-							poolUnit: $0,
-							isSelected: mode
-								.nonXrdRowSelected($0.poolUnitResource.resourceAddress)
-						)
-					}
+		if lsuResource != nil || !portfolio.poolUnitResources.poolUnits.isEmpty {
+			poolUnitsList = .init(
+				lsuResource: lsuResource,
+				poolUnits: .init(
+					uncheckedUniqueElements: portfolio.poolUnitResources.poolUnits
+						.map {
+							PoolUnit.State(
+								poolUnit: $0,
+								isSelected: mode
+									.nonXrdRowSelected($0.poolUnitResource.resourceAddress)
+							)
+						}
+				)
 			)
-		)
+		}
 	}
 }
 
@@ -200,41 +209,45 @@ extension AssetsView.State {
 	public var selectedAssets: Mode.SelectedAssets? {
 		guard case .selection = mode else { return nil }
 
-		let lsuTokens = poolUnitsList.lsuResource?.stakes
+		let selectedLsuTokens = poolUnitsList?.lsuResource?.stakes
 			.compactMap(SelectedResourceProvider.init)
 			.compactMap(\.selectedResource) ?? []
-		let poolUnitTokens = poolUnitsList.poolUnits
+		let selectedPoolUnitTokens = poolUnitsList?.poolUnits
 			.map(SelectedResourceProvider.init)
-			.compactMap(\.selectedResource)
-		let fungibleResources = AccountPortfolio.FungibleResources(
-			xrdResource: fungibleTokenList.xrdToken
-				.map(SelectedResourceProvider.init)
-				.flatMap(\.selectedResource),
-			nonXrdResources: fungibleTokenList.nonXrdTokens
-				.map(SelectedResourceProvider.init)
-				.compactMap(\.selectedResource)
-				+ lsuTokens
-				+ poolUnitTokens
-		)
+			.compactMap(\.selectedResource) ?? []
+
+		let selectedXRDResource = fungibleTokenList?.xrdToken
+			.map(SelectedResourceProvider.init)
+			.flatMap(\.selectedResource)
 
-		let stakeClaimNonFungibleResources = (poolUnitsList.lsuResource?.stakes)
+		let selectedNonXrdResources = fungibleTokenList?.nonXrdTokens
+			.map(SelectedResourceProvider.init)
+			.compactMap(\.selectedResource) ?? []
+
+		let selectedStakeClaimNonFungibleResources = (poolUnitsList?.lsuResource?.stakes)
 			.map { $0.compactMap(NonFungibleTokensPerResourceProvider.init) } ?? []
-		let nonFungibleResources = (
-			nonFungibleTokenList.rows.compactMap(NonFungibleTokensPerResourceProvider.init)
-				+ stakeClaimNonFungibleResources
+		let selectedNonFungibleResources = nonFungibleTokenList?.rows.compactMap(NonFungibleTokensPerResourceProvider.init) ?? []
+
+		let selectedFungibleResources = AccountPortfolio.FungibleResources(
+			xrdResource: selectedXRDResource,
+			nonXrdResources: selectedNonXrdResources + selectedLsuTokens + selectedPoolUnitTokens
+		)
+
+		let selectedNonFungibleTokensPerResource = (
+			selectedNonFungibleResources + selectedStakeClaimNonFungibleResources
 		).compactMap(\.nonFungibleTokensPerResource)
 
 		guard
-			fungibleResources.xrdResource != nil
-			|| !fungibleResources.nonXrdResources.isEmpty
-			|| !nonFungibleResources.isEmpty
+			selectedFungibleResources.xrdResource != nil
+			|| !selectedFungibleResources.nonXrdResources.isEmpty
+			|| !selectedNonFungibleTokensPerResource.isEmpty
 		else {
 			return nil
 		}
 
 		return .init(
-			fungibleResources: fungibleResources,
-			nonFungibleResources: IdentifiedArrayOf(uniqueElements: nonFungibleResources),
+			fungibleResources: selectedFungibleResources,
+			nonFungibleResources: IdentifiedArrayOf(uniqueElements: selectedNonFungibleTokensPerResource),
 			disabledNFTs: mode.selectedAssets?.disabledNFTs ?? []
 		)
 	}

Sources/Features/AssetsFeature/AssetsView+View.swift

@@ -21,30 +21,36 @@ extension AssetsView {
 						if viewStore.isLoadingResources {
 							ProgressView()
 								.padding(.small1)
-						}
-
-						switch viewStore.activeAssetKind {
-						case .fungible:
-							FungibleAssetList.View(
-								store: store.scope(
-									state: \.fungibleTokenList,
-									action: { .child(.fungibleTokenList($0)) }
+						} else {
+							switch viewStore.activeAssetKind {
+							case .fungible:
+								IfLetStore(
+									store.scope(
+										state: \.fungibleTokenList,
+										action: { .child(.fungibleTokenList($0)) }
+									),
+									then: { FungibleAssetList.View(store: $0) },
+									else: { EmptyAssetListView.fungibleResources }
 								)
-							)
-						case .nonFungible:
-							NonFungibleAssetList.View(
-								store: store.scope(
-									state: \.nonFungibleTokenList,
-									action: { .child(.nonFungibleTokenList($0)) }
+							case .nonFungible:
+								IfLetStore(
+									store.scope(
+										state: \.nonFungibleTokenList,
+										action: { .child(.nonFungibleTokenList($0)) }
+									),
+									then: { NonFungibleAssetList.View(store: $0) },
+									else: { EmptyAssetListView.nonFungibleResources }
 								)
-							)
-						case .poolUnits:
-							PoolUnitsList.View(
-								store: store.scope(
-									state: \.poolUnitsList,
-									action: { .child(.poolUnitsList($0)) }
+							case .poolUnits:
+								IfLetStore(
+									store.scope(
+										state: \.poolUnitsList,
+										action: { .child(.poolUnitsList($0)) }
+									),
+									then: { PoolUnitsList.View(store: $0) },
+									else: { EmptyAssetListView.poolUnits }
 								)
-							)
+							}
 						}
 					}
 					.padding(.bottom, .medium1)

Sources/Features/AssetsFeature/Components/HelperViews/EmptyAssetListView.swift

@@ -0,0 +1,35 @@
+import FeaturePrelude
+
+// MARK: - EmptyAssetListView
+struct EmptyAssetListView: View {
+	struct ViewState {
+		let imageAsset: ImageAsset
+		let description: String
+	}
+
+	let viewState: ViewState
+
+	var body: some View {
+		VStack(spacing: .medium1) {
+			Image(asset: viewState.imageAsset)
+			Text(viewState.description)
+				.foregroundColor(.app.gray1)
+				.textStyle(.sectionHeader)
+		}
+		.padding(.top, .medium1)
+	}
+}
+
+extension EmptyAssetListView {
+	static var fungibleResources: Self {
+		.init(viewState: .init(imageAsset: AssetResource.fungibleTokens, description: L10n.AssetDetails.TokenDetails.noTokens))
+	}
+
+	static var nonFungibleResources: Self {
+		.init(viewState: .init(imageAsset: AssetResource.nonfungbileTokens, description: L10n.AssetDetails.NFTDetails.noNfts))
+	}
+
+	static var poolUnits: Self {
+		.init(viewState: .init(imageAsset: AssetResource.poolUnits, description: L10n.AssetDetails.PoolUnitDetails.noPoolUnits))
+	}
+}