add balance to header

aura-nw · May 9, 2024 · 2f3f420 · 2f3f420
1 parent cb29cdf
commit 2f3f420
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 6 deletions.
diff --git a/components/header/index.tsx b/components/header/index.tsx
@@ -11,15 +11,16 @@ import { useRouter } from 'next/navigation'
 import { useChain } from '@cosmos-kit/react'
 import getConfig from 'next/config'
 import FilledButton from '../button/filled'
-import { shorten } from '@/utils'
+import { formatNumber, shorten } from '@/utils'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import { Snippet } from '@nextui-org/react'
+import useSWR from 'swr'
 export function Header() {
   const [open, setOpen] = useState(false)
-  const { disconnect, account } = useContext(Context)
+  const [showBalance, setShowBalance] = useState(false)
+  const { disconnect, account, balance } = useContext(Context)
   const config = getConfig()
   const { disconnect: disconnectWallet, address } = useChain(config.COSMOSKIT_CHAINKEY)
-  const router = useRouter()
   const ref = useRef(null)
   useClickOutside(ref, () => setOpen(false))
   return (
@@ -55,6 +56,52 @@ export function Header() {
                     {address}
                   </Snippet>
                 </div>
+                <div className='font-semibold'>Balance</div>
+                <div className='flex justify-between items-center'>
+                  <div>{showBalance ? `${formatNumber(balance)} AURA` : '*******'}</div>
+                  <div
+                    className='w-8 grid place-items-center cursor-pointer'
+                    onClick={() => setShowBalance(!showBalance)}>
+                    {showBalance ? (
+                      <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'>
+                        <path
+                          d='M0.666504 8.00008C0.666504 8.00008 3.33317 2.66675 7.99984 2.66675C12.6665 2.66675 15.3332 8.00008 15.3332 8.00008C15.3332 8.00008 12.6665 13.3334 7.99984 13.3334C3.33317 13.3334 0.666504 8.00008 0.666504 8.00008Z'
+                          stroke='#fff'
+                          strokeLinecap='round'
+                          strokeLinejoin='round'
+                        />
+                        <path
+                          d='M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z'
+                          stroke='#fff'
+                          strokeLinecap='round'
+                          strokeLinejoin='round'
+                        />
+                      </svg>
+                    ) : (
+                      <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'>
+                        <g clip-path='url(#clip0_2816_798)'>
+                          <path
+                            d='M11.96 11.96C10.8204 12.8286 9.4327 13.3099 7.99996 13.3333C3.33329 13.3333 0.666626 7.99998 0.666626 7.99998C1.49589 6.45457 2.64605 5.10438 4.03996 4.03998M6.59996 2.82664C7.05885 2.71923 7.52867 2.66554 7.99996 2.66664C12.6666 2.66664 15.3333 7.99998 15.3333 7.99998C14.9286 8.75705 14.446 9.4698 13.8933 10.1266M9.41329 9.41331C9.23019 9.60981 9.00939 9.76741 8.76406 9.87673C8.51873 9.98604 8.25389 10.0448 7.98535 10.0496C7.71681 10.0543 7.45007 10.0049 7.20103 9.9043C6.952 9.80371 6.72577 9.654 6.53586 9.46408C6.34594 9.27416 6.19622 9.04794 6.09563 8.7989C5.99504 8.54987 5.94564 8.28312 5.95038 8.01458C5.95512 7.74604 6.0139 7.48121 6.12321 7.23587C6.23252 6.99054 6.39013 6.76974 6.58663 6.58664'
+                            stroke='white'
+                            strokeLinecap='round'
+                            strokeLinejoin='round'
+                          />
+                          <path
+                            d='M0.666626 0.666626L15.3333 15.3333'
+                            stroke='white'
+                            strokeLinecap='round'
+                            strokeLinejoin='round'
+                          />
+                        </g>
+                        <defs>
+                          <clipPath id='clip0_2816_798'>
+                            <rect width='16' height='16' fill='white' />
+                          </clipPath>
+                        </defs>
+                      </svg>
+                    )}
+                  </div>
+                </div>
               </div>
             )}
             <FilledButton

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --port 3001",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

diff --git a/provider/index.tsx b/provider/index.tsx
@@ -4,7 +4,7 @@ import ConnectWalletModal from '@/components/modal/connectWalletModal'
 import { useClient } from '@/hooks'
 import { Account } from '@/model/account'
 import { Token } from '@/model/token'
-import { GET_ASSETS, GET_USER_DATA, applyCode } from '@/services'
+import { GET_ASSETS, GET_BALANCE, GET_USER_DATA, applyCode } from '@/services'
 import { wallets as c98Mobile } from '@/services/c98MobileWallet'
 import { getGasPriceByChain } from '@/utils'
 import { getItem, removeItem, setItem } from '@/utils/localStorage'
@@ -22,6 +22,7 @@ import { ChainProvider } from '@cosmos-kit/react'
 import { GoogleTagManager } from '@next/third-parties/google'
 import { NextUIProvider } from '@nextui-org/react'
 import axios from 'axios'
+import BigNumber from 'bignumber.js'
 import { chains, assets as networkAssets } from 'chain-registry'
 import { createClient } from 'graphql-ws'
 import getConfig, { setConfig } from 'next/config'
@@ -33,6 +34,7 @@ import { Bounce, ToastContainer } from 'react-toastify'
 
 export const Context = createContext<{
   account: Account | undefined
+  balance: number
   assets: Token[]
   fetchAssets: () => void
   setAccount: (account: Account) => void
@@ -43,6 +45,7 @@ export const Context = createContext<{
   lastAssetsUpdate?: number
 }>({
   account: undefined,
+  balance: 0,
   assets: [],
   fetchAssets: () => {},
   horoscopeClient: undefined,
@@ -127,6 +130,7 @@ const signerOptions = {
 }
 function ContextProvider({ children }: { children: ReactNode }) {
   const [account, setAccount] = useState<Account>()
+  const [balance, setBalance] = useState<number>(0)
   const [client, setClient] = useState<ApolloClient<NormalizedCacheObject>>()
   const [horoscopeClient, setHoroscopeClient] = useState<ApolloClient<NormalizedCacheObject>>()
   const [assets, setAssets] = useState<Token[]>([])
@@ -255,6 +259,20 @@ function ContextProvider({ children }: { children: ReactNode }) {
         owner: account?.wallet_address,
       },
     })
+    const addressBalance = await horoscopeClient?.query({
+      query: GET_BALANCE(chainKey),
+      variables: {
+        address: account?.wallet_address,
+        denom: chainKey == 'euphoria' ? 'ueaura' : 'uaura',
+      },
+    })
+    if (addressBalance?.data?.euphoria?.account_balance?.[0]?.amount) {
+      setBalance(
+        +BigNumber(addressBalance?.data?.euphoria?.account_balance?.[0]?.amount)
+          .div(BigNumber(10 ** 6))
+          .toFixed()
+      )
+    }
     if (v1DragonGems?.data?.[chainKey]?.cw721_token?.length) {
       let v1List = v1DragonGems?.data?.[chainKey]?.cw721_token
         .filter((token: Token) =>
@@ -419,6 +437,7 @@ function ContextProvider({ children }: { children: ReactNode }) {
           assets,
           fetchAssets,
           lastAssetsUpdate,
+          balance,
         }}>
         <NextUIProvider>
           <ApolloProvider client={client}>{children}</ApolloProvider>

diff --git a/services/index.ts b/services/index.ts
@@ -101,7 +101,7 @@ export const GET_JACKPOT = gql`
 export const GET_USER_JACKPOT = gql`
   query GET_USER_JACKPOT($user_id: Int, $jackpot_id: Int) {
     jackpot_users(
-      where: { user_id: { _eq: $user_id }, jackpot_id: { _eq: $jackpot_id }, tx_status: {_eq: "success"} }
+      where: { user_id: { _eq: $user_id }, jackpot_id: { _eq: $jackpot_id }, tx_status: { _eq: "success" } }
       order_by: { created_at: desc }
     ) {
       jackpot_id
@@ -151,6 +151,18 @@ export const GET_ASSETS = (chainKey: string) => gql`
     }
   }
 `
+export const GET_BALANCE = (chainKey: string) => gql`
+query getBalance($address: String!, $denom: String) {
+  ${chainKey} {
+    account_balance(
+      where: {account: {address: {_eq: $address}}, denom: {_eq: $denom}}
+    ) {
+      amount
+      denom
+    }
+  }
+}
+`
 export const GET_USER_REF_HISTORY = (id: string) => gql`
   query GET_USER_REF_HISTORY {
     task_referrals(where: { referrer_id: { _eq: ${id} } }) {