feat: collections page

[saihaj]

• Collections page UI
  • Beasts Card
  • Beasts List
  • Items Card
  • Items List
  • Pack Card
  • Pack List
  • Color change background (MyCollection.tsx) depending on type of the beast. & default #272727 for items and packs
  • Update packs and items thumbnails and showcase (packs thumbnails order: starter, metallic silver, cursed black, shiny gold. Item thumbnails order: sushi, empty potion bottle, poop)
  • thumbnail selected should change (EDIT: the thumbnail selected should change for only the one beast that has been clicked. Right now it changes for multiple beast that has the same dexNumber)
  • thumbnail box shadow should be different based on Beast type: Electric: #B3A068 Water: #7388AB Grass: #92AC86 Fire: #BB7A7A Normal: #AA8597 (EDIT: the element type tag on show case has been changed correctly but the thumbnails at the right for each beast is still to be different based on beast type)
  • (ItemThumbnail.tsx) thumbnail box shadow is different based on Item: Sushi: #FFBAB3, Empty Potion Bottle: #396042, Poop: #604E39
  • (ItemThumbnail.tsx) thumbnail background is different based on Item: Sushi: #E4A9A2, Empty Potion Bottle: #7CB189, Poop: #B19A7E
  • (PackThumbnail.tsx) thumbnail box shadow is different based on Pack type: starter: #C2C2C2, metallic silver: #5C6988, cursed black: #D26BBF, shiny gold: #F1F171
  • (PackThumbnail.tsx) thumbnail background is different based on Pack type: starter: #737374, metallic silver: #889AAF, cursed black: #9E5FDE, shiny gold: #FFDA66
  • Thumbnail images for Beasts, Pack, Items (Can be found in public/thumbnails)
  • TODO at collectionstorage color change when no beasts in collection
  • CollectionStorage: Should have scroll so people can scroll up and down in case they have many packs or beasts
• Setup graphql client to connect with backend
• Open pack animations
• Open pack mutation
• Authenticate users with backend
• Basic Skills - Spaces missing
• fetch fungible token and pack descriptions to ShowcaseItem.tsx and ShowcasePack.tsx
  Sushi Desc: Sushi is every Beast's favorite food.
  Empty Potion Bottle Desc: This is an empty potion bottle. I wonder what it could be used for...
  Poop: This is poop. It's environmental-friendly due to proof of stake.
• Each pack contain following number of items: 1x empty potion bottle, 7x sushi, 3x poop
• Sorting of Beast thumbnails in CollectionStorage: Beast by dexNumber and then by skin (starter > metallic silver > cursed black > gold) sort beast thumbnails #12
• Sorting of Items thumbnails in CollectionStorage: Sushi > Empty Potion Bottle > Poop sort items thumbnails #13
• Sorting of Pack thumbnails in CollectionStorage: Starter Pack > Cursed Black Pack > Shiny Gold Pack sort pack thumbnails #14

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/basicbeasts/basic-beasts-frontend/FsDr643wgBzMU3JWjxs7A8DPfFtV
✅ Preview: https://basic-beasts-frontend-git-api-beasts-basicbeasts.vercel.app