Merge pull request #217 from prince981620/usd-balance-showcase

FEAT(USD balance showcase) adds USD balance
code100x · Oct 10, 2024 · 6518364 · 6518364
2 parents 9592a1a + 2a2c683
commit 6518364
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 21 deletions.
diff --git a/.env.sample b/.env.sample
@@ -5,6 +5,7 @@ NEXTAUTH_URL = '' #Your frontend base URL
 DATABASE_URL = 'postgresql://postgres:password@localhost:5432/mydatabase'
 #DATABASE_URL = 'postgresql://postgres:password@postgres:5432/mydatabase'  #Use this for setting up docker
 NEXT_PUBLIC_SOLANA_RPC = '' #Your Custom Solana RPC URL
+NEXT_PUBLIC_COIN_GECKO_API = 'https://api.coingecko.com/api/v3/simple/price' #Your CoinGecko API URL
 
 #AES-256
 ENCRYPTION_KEY = ''

diff --git a/src/app/wallet/page.tsx b/src/app/wallet/page.tsx
@@ -33,7 +33,7 @@ const Wallet = async () => {
           <LeftSideBar />
         </div>
         <div>
-          <WalletDetail wallet={wallet} balance={balance} />
+          <WalletDetail wallet={wallet} usdbalance={Number(balance?.usdBalance)} solbalance={Number(balance?.solBalance)}/>
         </div>
         <div className=" hidden md:block">{/* <RightSideBar /> */}</div>
       </div>

diff --git a/src/components/WalletPage/WalletDetail.tsx b/src/components/WalletPage/WalletDetail.tsx
@@ -7,10 +7,11 @@ import SendToken from './Send/Send'
 
 export interface WalletDetailProps {
   wallet?: string
-  balance?: number
+  usdbalance?: number
+  solbalance?: number
 }
 
-const WalletDetail = ({ wallet, balance }: WalletDetailProps) => {
+const WalletDetail = ({ wallet, usdbalance , solbalance}: WalletDetailProps) => {
   const [currentAction, setCurrentAction] = useState<null | ActionType>(null);
 
   const handleActionClick = (action: ActionType) => {
@@ -26,24 +27,25 @@ const WalletDetail = ({ wallet, balance }: WalletDetailProps) => {
 
   return (
     <div className="rounded-[22px] flex flex-col items-center gap-3 sm:w-[450px] md:w-[600px] border-2 p-7 sm:p-10 shadow-md">
-    <div className="flex flex-col items-start gap-2 w-full">
-      <div className="text-gray-200">
-        <p className="text-gray-400 text-xs sm:text-sm font-semibold">
-          Total Balance
-        </p>
-      </div>
-      <div className="font-bold text-black opacity-80 text-xl sm:text-4xl mb-6">
-        {balance === null ? (
-          <div className=" bg-gray-200  rounded-lg animate-pulse w-[46px] h-[34px] mb-6">
-            {''}
-          </div>
-        ) : (
-          `$ ${balance}`
-        )}
+      <div className="flex flex-col items-start gap-2 w-full">
+        <div className="text-gray-200">
+          <p className="text-gray-400 text-xs sm:text-sm font-semibold">
+            Total Balance
+          </p>
+        </div>
+        <div className=" text-black opacity-80 text-xl  mb-6">
+          {(solbalance === null || isNaN(Number(usdbalance))) ? (
+            <div className=" bg-gray-200  rounded-lg animate-pulse w-[46px] h-[34px] mb-6">
+              {''}
+            </div>
+          ) : (
+              <div>
+                <div className='font-bold sm:text-4xl'>$ {usdbalance}</div>
+                <div className='sm:text-md text-gray-500'>{solbalance} SOL</div>
+              </div>
+          )}
+        </div>
       </div>
-    </div>
-
-
     {(currentAction !== 'send' && currentAction !== 'swap' ) &&
       <div>
         <div className="flex flex-col items-center w-full gap-5">

diff --git a/src/services/walletService.ts b/src/services/walletService.ts
@@ -7,6 +7,7 @@ import { pvtKeyEncryptionManager } from '@/actions/pvtKeyEncryptMgmt'
 import base58 from 'bs58'
 
 const customRpcUrl = process.env.NEXT_PUBLIC_SOLANA_RPC || ''
+const coinGeckoUrl = process.env.NEXT_PUBLIC_COIN_GECKO_API || ''
 
 export async function createWallet(user: User) {
   const existingWallet = await prisma.user.findUnique({
@@ -57,6 +58,26 @@ export async function signTransaction(
   return transaction
 }
 
+export async function convertSoltoUSD(sol: number) {
+  if (!coinGeckoUrl) {
+    console.error('RPC URL is not defined.')
+    return
+  }
+
+  try {
+    const res = await axios.get(coinGeckoUrl,{
+      params:{
+        'ids': 'solana',
+        'vs_currencies': 'usd'
+      }
+    })
+    const price = res?.data?.solana?.usd
+    return (sol*price).toFixed(2);
+  } catch (error) {
+    console.error('Failed to fetch price:', error)
+  }
+}
+
 export async function fetchUserBalance(publicKey?: string) {
   if (!customRpcUrl) {
     console.error('RPC URL is not defined.')
@@ -72,7 +93,8 @@ export async function fetchUserBalance(publicKey?: string) {
     })
     const balance = res?.data?.result?.value
     const solBalance = balance / LAMPORTS_PER_SOL
-    return solBalance
+    const usdBalance = await convertSoltoUSD(solBalance)
+    return {usdBalance,solBalance};
   } catch (error) {
     console.error('Failed to fetch balance:', error)
   }