diff --git a/packages/webapp/src/components/collection/deckPanel.tsx b/packages/webapp/src/components/collection/deckPanel.tsx
index a95fa324..f9faeac1 100644
--- a/packages/webapp/src/components/collection/deckPanel.tsx
+++ b/packages/webapp/src/components/collection/deckPanel.tsx
@@ -70,7 +70,7 @@ interface DeckConstructionPanelProps {
onClick={() => onCardSelect(card)}
>
- tc.id === card.id)?.image || '/card_art/1.jpg'} alt="Card art" width={40} height={40} className="object-cover rounded-full" />
+ tc.id === Number(card.id))?.image || '/card_art/1.jpg'} alt="Card art" width={40} height={40} className="object-cover rounded-full" />
{card.lore.name}
diff --git a/packages/webapp/src/pages/_app.tsx b/packages/webapp/src/pages/_app.tsx
index c06a4c95..746fc88e 100644
--- a/packages/webapp/src/pages/_app.tsx
+++ b/packages/webapp/src/pages/_app.tsx
@@ -28,7 +28,7 @@ import { Toaster } from "src/components/ui/sonner"
* Make pages in the app conform to this type.
* See [@link useIsHydrated] for more info on the meaning of the `isHydrated` prop.
*/
-export type FablePage = NextPage<{ decks: Deck[], isHydrated: boolean, setDecks: Dispatch> }>
+export type FablePage = NextPage<{ isHydrated: boolean }>
// =================================================================================================
diff --git a/packages/webapp/src/pages/collection.tsx b/packages/webapp/src/pages/collection.tsx
index 08e781cc..e9463bf7 100644
--- a/packages/webapp/src/pages/collection.tsx
+++ b/packages/webapp/src/pages/collection.tsx
@@ -29,14 +29,7 @@ const initialEffectMap = Object.assign({}, ...effects.map(name => ({[name]: fals
const types = ['Creature', 'Magic', 'Weapon']
const initialTypeMap = Object.assign({}, ...types.map(name => ({[name]: false})))
-interface CollectionSpecificProps {
- decks: Deck[]
- setDecks: (decks: Deck[]) => void
- isHydrated: boolean
-}
-type CollectionProps = FablePage & CollectionSpecificProps
-
-const Collection: React.FC = ({ decks, setDecks, isHydrated }) => {
+const Collection: FablePage = ({ isHydrated }) => {
const router = useRouter()
const { address } = useAccount()
@@ -50,6 +43,8 @@ const Collection: React.FC = ({ decks, setDecks, isHydrated })
// Deck Collection Display
const [ editingDeckIndex, setEditingDeckIndex ] = useState(null)
+ const [decks, setDecks] = useState([])
+
// Deck Construction Panel
const [ currentDeck, setCurrentDeck] = useState(null)
const [ selectedCards, setSelectedCards ] = useState([])
@@ -100,7 +95,7 @@ const Collection: React.FC = ({ decks, setDecks, isHydrated })
}
const handleSaveDeck = (updatedDeck: Deck) => {
- const updatedDecks = [...decks]
+ const updatedDecks = [...(decks || [])]
if (editingDeckIndex !== null) {
// Update existing deck
updatedDecks[editingDeckIndex] = updatedDeck