diff --git a/app/src/components/AddressList/AddressListItem.tsx b/app/src/components/AddressList/AddressListItem.tsx
index 5e1c777cd..5d01adfec 100644
--- a/app/src/components/AddressList/AddressListItem.tsx
+++ b/app/src/components/AddressList/AddressListItem.tsx
@@ -1,7 +1,7 @@
import { IonItem, IonText, IonIcon } from "@ionic/react";
-import { shield, pauseCircleSharp, flag } from "ionicons/icons";
+import { shield, pauseCircleSharp, flag, arrowUpSharp } from "ionicons/icons";
import { Bag, User } from "../../api/types";
-import TinyBagSvg from "./TinyBagSvg";
+import TinyBagSvg, { getBagType } from "./TinyBagSvg";
export interface AddressListItemProps {
user: User;
@@ -100,18 +100,28 @@ export default function AddressListItem({
)}, minmax(0, 1fr))`,
}}
>
- {bags.map((b) => (
-
-
-
+ {bags.map((b) => {
+ const bagType = getBagType(b);
+ return (
+
+
+
+ {bagType === "👻" ? (
+
+ ) : null}
+
-
- ))}
+ );
+ })}
diff --git a/app/src/components/AddressList/TinyBagSvg.tsx b/app/src/components/AddressList/TinyBagSvg.tsx
index 6a6c0f14b..653dbd3d1 100644
--- a/app/src/components/AddressList/TinyBagSvg.tsx
+++ b/app/src/components/AddressList/TinyBagSvg.tsx
@@ -1,12 +1,22 @@
import { Bag } from "../../api/types";
import BagSVG from "../Bags/Svg";
+type BagType = "" | "👻" | "🐰" | "👟" | "📖";
interface Props {
bag: Bag;
+ type: BagType;
}
-export default function TinyBagSvg({ bag }: Props) {
- if (bag.number.includes("👻")) {
+export function getBagType(bag: Bag): BagType {
+ if (bag.number.includes("👻")) return "👻";
+ if (bag.number.includes("🐰")) return "🐰";
+ if (bag.number.includes("👟")) return "👟";
+ if (bag.number.includes("📖")) return "📖";
+ return "";
+}
+
+export default function TinyBagSvg({ bag, type }: Props) {
+ if (type === "👻") {
return (