UI upgrades

assets/styles/themes.css

@@ -5,7 +5,7 @@
   --color-bg-primary: #290b5a;
   --color-bg-secondary: #000000;
   --color-bg-tertiary: rgba(255, 255, 255, 0.05);
-  --color-bg-default: #141C24;
+  --color-bg-default: #141c24;
   --color-bg-darkened: #1a083a;
   --color-bg-inverse: #fff;
   --color-bg-overlay: rgba(0, 0, 0, 0.7);
@@ -40,8 +40,8 @@
   --color-text-match: #111;
   --color-text-black: #111;
   --color-text-highlight-1: #1ef7d6;
-  --color-text-highlight-2: #29F6A7;
-  --color-text-highlight-3: #55f1d7;
+  --color-text-highlight-2: #29f6a7;
+  --color-text-highlight-3: #29f6a7;
   --color-text-whitesmoke: rgba(245, 245, 245, 0.6);
   --color-text-red-1: #e61b1b;
   --color-text-green-1: #05e6c4;
@@ -59,12 +59,12 @@
   --color-border-primary: #3c1a79;
   --color-border-card: #341762;
   --color-border-secondary: #4c249f;
-  --color-border-default: #4c249f;
+  --color-border-default: #29f6a7;
   --color-border-inverse: #fff;
   --color-border-highlight-1: #35f0d0;
   --color-border-highlight-2: #35f0d0;
   --color-border-red-1: #e61b1b;
-  --color-border-green-1: #3ef3d4;
+  --color-border-green-1: #29f6a7;
   --color-border-green-2: #31b073;
   --color-border-transparent: rgba(0, 0, 0, 0);
 }

lib/components/PrizeCard.jsx

@@ -7,7 +7,6 @@ import { ButtonRelativeLink } from 'lib/components/ButtonRelativeLink'
 import { Card, CardTitle } from 'lib/components/Card'
 import { LoadingDots } from 'lib/components/LoadingDots'
 import { NewPrizeCountdown } from 'lib/components/NewPrizeCountdown'
-import { useCoingeckoTokenData } from 'lib/hooks/useCoingeckoTokenData'
 import { useAwardsList } from 'lib/hooks/useAwardsList'
 import { RelativeInternalLink } from 'lib/components/RelativeInternalLink'
 import { poolChainValuesAtom } from 'lib/hooks/usePoolChainValues'
@@ -67,7 +66,7 @@ export const PrizeCard = (props) => {
 const PrizeSection = (props) => {
   const { awards, loading } = useAwardsList()
 
-  const awardsWithBalances = useMemo(() => awards.filter((token) => !token.balance.isZero()), [
+  const awardsWithBalances = useMemo(() => awards.filter((token) => !token.balance?.isZero()), [
     awards
   ])
 
@@ -114,7 +113,7 @@ const Prizes = (props) => {
   }
 
   return (
-    <ul className='flex flex-col max-w-xs mx-auto' style={{ minWidth: '190px' }}>
+    <ul className='flex flex-col mx-auto' style={{ minWidth: '190px' }}>
       {awards.map((token, index) => {
         return <PrizeListItem small={awards.length > 6} key={index} token={token} index={index} />
       })}
@@ -124,14 +123,9 @@ const Prizes = (props) => {
 
 const SinglePrizeItem = (props) => {
   const { token } = props
-  const { data: tokenData } = useCoingeckoTokenData(token.address)
-  const imageUrl = tokenData?.image?.large
 
   return (
     <div className={'flex mx-auto my-2 sm:mt-0 sm:mb-2 leading-none'}>
-      {imageUrl && (
-        <img src={imageUrl} className='w-8 h-8 sm:w-16 sm:h-16 mr-4 my-auto rounded-full' />
-      )}
       <span className='font-bold text-6xl sm:text-9xl mr-4 my-auto text-flashy'>
         {token.formattedBalance}
       </span>
@@ -143,8 +137,29 @@ const SinglePrizeItem = (props) => {
 const PrizeListItem = (props) => {
   const { token, small } = props
   const index = props.index || 0
-  const { data: tokenData } = useCoingeckoTokenData(token.address)
-  const imageUrl = tokenData?.image?.small
+
+  if (token.symbol) {
+    return (
+      <li key={index + token.symbol} className='flex w-full justify-between mb-2'>
+        <span
+          className={classnames('font-bold text-flashy leading-none', {
+            'text-md sm:text-xl': small,
+            'text-xl sm:text-5xl': !small
+          })}
+        >
+          {token.formattedBalance}
+        </span>
+        <div
+          className={classnames('flex ml-4 mt-auto', {
+            'text-sm sm:text-lg': small,
+            'text-lg sm:text-3xl': !small
+          })}
+        >
+          <span className='leading-none mt-auto'>{token.symbol || token.name || ''}</span>
+        </div>
+      </li>
+    )
+  }
 
   return (
     <li key={index + token.symbol} className='flex w-full justify-between mb-2'>
@@ -154,16 +169,15 @@ const PrizeListItem = (props) => {
           'text-xl sm:text-5xl': !small
         })}
       >
-        {token.formattedBalance}
+        BOSON COMMITMENT TOKEN
       </span>
       <div
         className={classnames('flex ml-4 mt-auto', {
           'text-sm sm:text-lg': small,
           'text-lg sm:text-3xl': !small
         })}
       >
-        {imageUrl && <img className='my-auto mr-2 w-6 h-6 rounded-full' src={imageUrl} />}
-        <span className='leading-none mt-auto'>{token.symbol || token.name || ''}</span>
+        <span className='leading-none mt-auto'>BSV</span>
       </div>
     </li>
   )

lib/hooks/useAwardsList.js

@@ -2,23 +2,26 @@ import { useMemo } from 'react'
 import { useAtom } from 'jotai'
 
 import { erc20AwardsAtom } from 'lib/hooks/useExternalErc20Awards'
+import { erc721AwardsAtom } from 'lib/hooks/useExternalErc721Awards'
 import { poolChainValuesAtom } from 'lib/hooks/usePoolChainValues'
 import { calculateEstimatedPoolPrize } from 'lib/utils/calculateEstimatedPoolPrize'
 import { numberWithCommas } from 'lib/utils/numberWithCommas'
 
 /**
- * Returns a list of all erc20 awards INCLUDING the yield prize
+ * Returns a list of all erc20 awards INCLUDING the yield prize and erc721
+  awards
  */
 export const useAwardsList = () => {
   const [poolChainValues] = useAtom(poolChainValuesAtom)
   const [erc20Awards] = useAtom(erc20AwardsAtom)
+  const [erc721Awards] = useAtom(erc721AwardsAtom)
 
   const awards = useMemo(() => {
-    if (erc20Awards.loading) {
+    if (erc20Awards.loading || erc721Awards.loading) {
       return []
     }
 
-    let awards = [...erc20Awards.awards]
+    let awards = [...erc20Awards.awards, ...erc721Awards.awards]
 
     if (poolChainValues.sablierStream) {
       awards.unshift(_sablierStreamToken(poolChainValues.sablierStream))
@@ -27,9 +30,9 @@ export const useAwardsList = () => {
     awards.unshift(_depositToken(poolChainValues))
 
     return awards
-  }, [erc20Awards.loading, erc20Awards, poolChainValues])
+  }, [erc20Awards.loading, erc20Awards, erc721Awards, poolChainValues])
 
-  if (erc20Awards.loading) {
+  if (erc20Awards.loading || erc721Awards.loading) {
     return {
       loading: true,
       awards: []