-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
react animations, handle gecko 429 error, UI cleanup
- Loading branch information
Showing
6 changed files
with
167 additions
and
118 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,38 @@ | ||
| import { useEffect, useState } from 'react' | ||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| export default function useCoingecko(currency: string) { | ||
| const [price, setPrice] = useState(0) | ||
| const [price, setPrice] = useState(0); | ||
|
|
||
| useEffect(() => { | ||
| fetch( | ||
| `https://api.coingecko.com/api/v3/simple/price?ids=kaspa&vs_currencies=${currency}`, | ||
| ).then(async (res) => { | ||
| const response = await res.json() | ||
| // Try to get the cached price from localStorage | ||
| const cachedPrice = localStorage.getItem(`price_${currency}`); | ||
| const cachedTimestamp = localStorage.getItem(`timestamp_${currency}`); | ||
| const currentTime = Date.now(); | ||
|
|
||
| setPrice(response.kaspa[currency.toLowerCase()]) | ||
| }) | ||
| }, [currency]) | ||
| if (cachedPrice && cachedTimestamp && currentTime - parseInt(cachedTimestamp) < 60000) { | ||
| // Use the cached price if it's still valid | ||
| setPrice(parseFloat(cachedPrice)); | ||
| } else { | ||
| // Fetch from the API if the cache is expired or not available | ||
| fetch(`https://api.coingecko.com/api/v3/simple/price?ids=kaspa&vs_currencies=${currency}`) | ||
| .then(async (res) => { | ||
| if (res.ok) { | ||
| const response = await res.json(); | ||
| const newPrice = response.kaspa[currency.toLowerCase()]; | ||
| setPrice(newPrice); | ||
|
|
||
| return price | ||
| // Cache the new price and timestamp | ||
| localStorage.setItem(`price_${currency}`, newPrice.toString()); | ||
| localStorage.setItem(`timestamp_${currency}`, currentTime.toString()); | ||
| } else if (res.status === 429) { | ||
| console.error('Rate limit exceeded. Please try again later.'); | ||
| } | ||
| }) | ||
| .catch((error) => { | ||
| console.error('Error fetching price:', error); | ||
| }); | ||
| } | ||
| }, [currency]); | ||
|
|
||
| return price; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,69 @@ | ||
| import { useEffect } from 'react'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import useKaspa from '@/hooks/useKaspa'; | ||
| import useSettings from '@/hooks/useSettings'; | ||
| import useCoingecko from '@/hooks/useCoingecko'; | ||
| import { Status } from '@/wallet/kaspa/wallet'; | ||
| import BottomNav from '@/components/BottomNav'; | ||
| import { useEffect } from 'react' | ||
| import { useNavigate } from 'react-router-dom' | ||
| import { motion } from 'framer-motion' | ||
| import useKaspa from '@/hooks/useKaspa' | ||
| import useSettings from '@/hooks/useSettings' | ||
| import useCoingecko from '@/hooks/useCoingecko' | ||
| import { Status } from '@/wallet/kaspa/wallet' | ||
| import BottomNav from '@/components/BottomNav' | ||
| import QRCode from 'react-qr-code' | ||
|
|
||
| export default function Wallet() { | ||
| const { kaspa, request } = useKaspa(); | ||
| const { settings } = useSettings(); | ||
| const price = useCoingecko(settings.currency); | ||
| const navigate = useNavigate(); | ||
| const { kaspa, request } = useKaspa() | ||
| const { settings } = useSettings() | ||
| const price = useCoingecko(settings.currency) | ||
| const navigate = useNavigate() | ||
| console.log('kaspa addresses in Wallet', kaspa.addresses) | ||
|
|
||
| useEffect(() => { | ||
| if (!kaspa.connected) { | ||
| request('node:connect', [settings.nodes[settings.selectedNode].address]); | ||
| request('node:connect', [settings.nodes[settings.selectedNode].address]) | ||
| } | ||
|
|
||
| if (kaspa.status !== Status.Unlocked) { | ||
| navigate('/'); | ||
| navigate('/') | ||
| } | ||
| }, [kaspa.status]); | ||
| }, [kaspa.status]) | ||
|
|
||
| return ( | ||
| <main className="p-6 pb-20"> | ||
| <div className="flex flex-col gap-1 mt-4"> | ||
| <> | ||
| <motion.main | ||
| className="pt-10 px-6" | ||
| initial={{ opacity: 0, scale: 0.95 }} | ||
| animate={{ opacity: 1, scale: 1 }} | ||
| exit={{ opacity: 0, scale: 0.95 }} | ||
| transition={{ duration: 0.15, ease: 'easeInOut' }} | ||
| > | ||
| <div className="flex flex-col items-center"> | ||
| <p className="text-4xl font-rubik text-primarytext"> | ||
| <p className="text-3xl font-rubik text-primarytext"> | ||
| {kaspa.balance.toFixed(4)} KAS | ||
| </p> | ||
| <p className="text-xl font-rubik text-mutedtext"> | ||
| {settings.currency} {(kaspa.balance * price).toFixed(2)} | ||
| <p className="text-xl font-rubik text-primarytext"> | ||
| {settings.currency === 'USD' | ||
| ? '$' | ||
| : settings.currency === 'EUR' | ||
| ? '€' | ||
| : settings.currency}{' '} | ||
| {(kaspa.balance * price).toFixed(2)} | ||
| </p> | ||
| </div> | ||
|
|
||
|
|
||
| <div className="flex flex-col items-center"> | ||
| <textarea | ||
| readOnly | ||
| value={kaspa.addresses[0][kaspa.addresses[0].length - 1]} | ||
| className="w-72 border-none resize-none text-mutedtext bg-transparent" | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col items-center"> | ||
| <textarea | ||
| readOnly | ||
| value={kaspa.addresses[0][kaspa.addresses[0].length - 1]} | ||
| className="w-72 border-none resize-none text-mutedtext bg-transparent" | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col items-center mt-4"> | ||
| <QRCode | ||
| style={{ height: 'auto', width: '35%' }} | ||
| value={kaspa.addresses[0][kaspa.addresses[0].length - 1]} | ||
| /> | ||
| <div className="flex flex-col items-center mt-4"> | ||
| <QRCode | ||
| style={{ height: 'auto', width: '35%' }} | ||
| value={kaspa.addresses[0][kaspa.addresses[0].length - 1]} | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| </div> | ||
| </motion.main> | ||
| <BottomNav /> | ||
| </main> | ||
| ); | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters