Fix styles and other stuff

src/components/Main/HatsCounterButton.tsx

@@ -17,7 +17,7 @@ function SuspendedHatsCounter({ address, setModalOpen }: HatsCounterProps) {
   return (
     <Button
       onClick={() => setModalOpen(true)}
-      styles="rounded-full h-11"
+      styles="rounded-full h-11 !opacity-100"
       disabled={!hasData}
       bgHat
     >

src/components/Modals/AccountModal.tsx

@@ -6,7 +6,6 @@ import DotsLoader from 'components/icons/DotsLoader'
 import FaqIcon from 'components/icons/FaqIcon'
 import ModalProps from 'types/ModalProps'
 import ShareRefButton from 'components/ShareRefButton'
-import getAccountLink from 'helpers/getAccountLink'
 import useMorningStreak from 'helpers/hooks/useMorningStreak'
 import useReferrer from 'helpers/hooks/useReferrer'
 import vibrate from 'helpers/vibrate'
@@ -22,24 +21,21 @@ interface AccountModalProps extends AccountModalInner, ModalProps {}
 
 function StyledAddress({ address }: { address?: string | undefined }) {
   return (
-    <a
-      className="!text-primary font-bold text-lg truncate"
-      href={address ? getAccountLink(address) : ''}
-    >
-      {address}
-    </a>
+    <span className="!text-primary font-bold text-lg truncate">{address}</span>
   )
 }
 
 function YourReferrer({ address }: AddressProp) {
   const { data, status } = useReferrer(address)
 
-  if (status === 'pending') return <DotsLoader />
-
   return (
     <div className="flex flex-row gap-x-2 justify-between items-center">
       <span>Your referrer</span>
-      <StyledAddress address={data} />
+      {status === 'pending' || !data ? (
+        <DotsLoader />
+      ) : (
+        <StyledAddress address={data} />
+      )}
     </div>
   )
 }

src/components/Modals/BetModal.tsx

@@ -12,7 +12,7 @@ import useSocket from 'helpers/hooks/useSocket'
 
 interface BetModalProps extends ModalProps {
   address: EthAddress | string | undefined
-  userHats: number | undefined
+  userHats: number | undefined | null
   userDeposit: { amount: number; chance: string }
 }
 

src/components/Modals/ConvertModal.tsx

@@ -89,12 +89,12 @@ export default function ({ modalOpen, setModalOpen }: ModalProps) {
       const res = await convertTokensHats(amount, isWithdraw)
       if (typeof res !== 'number') return
 
-      await queryClient.invalidateQueries({ queryKey: ['hatsCounter'] })
       toast.success('Converted 🎉')
     } catch (e) {
       console.error(e)
       toast.error('Something went wrong when converting 🧟 Please try again 🥺')
     } finally {
+      await queryClient.invalidateQueries({ queryKey: ['hatsCounter'] })
       setLoading(false)
     }
   }, [

src/helpers/api/token.ts

@@ -30,7 +30,7 @@ export async function convertTokensHats(amount: number, withdraw: boolean) {
 }
 
 export async function getTokensForUser(address?: string) {
-  if (!address) return 0
+  if (!address) return null
 
   try {
     const { data } = await axios.get<number>(backendEndpoint, {
@@ -39,6 +39,6 @@ export async function getTokensForUser(address?: string) {
     return data
   } catch (e) {
     console.error(e)
-    return 0
+    return null
   }
 }

tailwind.config.js

@@ -22,15 +22,15 @@ module.exports = {
         script: ['"Nanum Pen Script"', 'cursive'],
       },
       colors: {
-        primary: 'var(--primary)',
+        primary: '#7f60f9',
         'primary-bright': '#B66DFF',
-        'primary-dark': 'var(--primary-dark)',
+        'primary-dark': '#5b38e7',
         'primary-bg': '#180431',
         hat: '#8B5CF6',
         'hat-alt': '#4B3294',
         'pale-purple': '#3E2865',
         neged: '#1E293B',
-        secondary: 'var(--secondary)',
+        secondary: '#f4b862',
         'roulette-box': '#211741',
       },
     },