fixed theme, connect wallet from modal, get usdc balance, styling
This commit is contained in:
saml33
parent
3e03233fe0
commit
70c40f3fc4
|
|
@ -1,5 +1,4 @@
|
|||
import BN from 'bn.js'
|
||||
|
||||
import useWalletStore from '../stores/useWalletStore'
|
||||
|
||||
const Balances = () => {
|
||||
|
|
@ -13,7 +12,7 @@ const Balances = () => {
|
|||
}
|
||||
|
||||
function calculateBalance(a) {
|
||||
const mint = mints[a.account.mint.toBase58()]
|
||||
const mint = mints[a.account?.mint?.toBase58()]
|
||||
return mint ? fixedPointToNumber(a.account.amount, mint.decimals) : 0
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ interface ButtonProps {
|
|||
onClick?: (x?) => void
|
||||
disabled?: boolean
|
||||
className?: string
|
||||
secondary?: boolean
|
||||
}
|
||||
|
||||
const Button: FunctionComponent<ButtonProps> = ({
|
||||
|
|
@ -11,15 +12,20 @@ const Button: FunctionComponent<ButtonProps> = ({
|
|||
onClick,
|
||||
disabled = false,
|
||||
className,
|
||||
secondary = false,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={`${className} px-6 py-2 border border-th-fgd-4 bg-th-bkg-2 rounded-md text-th-fgd-1
|
||||
active:border-th-primary hover:bg-th-bkg-3 focus:outline-none disabled:bg-th-bkg-2
|
||||
disabled:text-th-fgd-4 disabled:cursor-not-allowed`}
|
||||
className={`${className} ${
|
||||
secondary || disabled
|
||||
? 'bg-bkg-4'
|
||||
: 'bg-gradient-to-br from-secondary-1-light via-secondary-1-dark to-secondary-2-light'
|
||||
} bg-bkg-4 border-none default-transition px-6 py-2 rounded-lg text-fgd-1
|
||||
active:border-primary hover:bg-bkg-3 focus:outline-none
|
||||
disabled:cursor-not-allowed`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -17,17 +17,17 @@ const ConnectWalletButton = () => {
|
|||
)
|
||||
|
||||
return (
|
||||
<div className="flex justify-between border border-th-primary rounded-md h-11 w-48">
|
||||
<div className="flex justify-between border border-primary rounded-md h-11 w-48">
|
||||
<button
|
||||
onClick={() => wallet.connect()}
|
||||
disabled={!wallet}
|
||||
className="text-th-primary hover:text-th-fgd-1 focus:outline-none disabled:text-th-fgd-4 disabled:cursor-wait"
|
||||
className="text-primary hover:text-fgd-1 focus:outline-none disabled:text-fgd-4 disabled:cursor-wait"
|
||||
>
|
||||
<div className="flex flex-row items-center px-2 justify-center h-full rounded-l default-transition hover:bg-th-primary hover:text-th-fgd-1">
|
||||
<div className="flex flex-row items-center px-2 justify-center h-full rounded-l default-transition hover:bg-primary hover:text-fgd-1">
|
||||
<WalletIcon className="w-5 h-5 mr-3 fill-current" />
|
||||
<div>
|
||||
<span className="whitespace-nowrap">Connect Wallet</span>
|
||||
<StyledWalletTypeLabel className="font-normal text-th-fgd-1 text-left leading-3">
|
||||
<StyledWalletTypeLabel className="font-normal text-fgd-1 text-left leading-3">
|
||||
{WALLET_PROVIDERS.filter((p) => p.url === savedProviderUrl).map(
|
||||
({ name }) => name
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { LinkIcon } from '@heroicons/react/solid'
|
||||
import useWalletStore from '../stores/useWalletStore'
|
||||
import { getUsdcBalance } from '../utils'
|
||||
import Input from './Input'
|
||||
import Slider from 'rc-slider'
|
||||
import 'rc-slider/assets/index.css'
|
||||
import Button from './Button'
|
||||
import Loading from './Loading'
|
||||
import WalletIcon from './WalletIcon'
|
||||
|
|
@ -8,9 +12,11 @@ import WalletIcon from './WalletIcon'
|
|||
const ContributionModal = () => {
|
||||
const connected = useWalletStore((s) => s.connected)
|
||||
const wallet = useWalletStore((s) => s.current)
|
||||
const usdcBalance = getUsdcBalance()
|
||||
|
||||
const [contributionAmount, setContributionAmount] = useState(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const handleConnectDisconnect = () => {
|
||||
if (connected) {
|
||||
|
|
@ -24,6 +30,13 @@ const ContributionModal = () => {
|
|||
setSubmitting(true)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
if (usdcBalance) {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [usdcBalance])
|
||||
|
||||
useEffect(() => {
|
||||
const submitTimer = setTimeout(() => {
|
||||
setSubmitting(false)
|
||||
|
|
@ -32,28 +45,115 @@ const ContributionModal = () => {
|
|||
}, [submitting])
|
||||
|
||||
return (
|
||||
<div className="bg-th-bkg-3 rounded-lg p-4 w-2/4 max-w-md">
|
||||
<h2>Plant your seed</h2>
|
||||
<p>Something...</p>
|
||||
<Input
|
||||
disabled={!connected}
|
||||
type="number"
|
||||
step={100}
|
||||
onChange={(e) => setContributionAmount(e.target.value)}
|
||||
value={contributionAmount}
|
||||
className=""
|
||||
/>
|
||||
<Button onClick={() => handleSetContribution()} className="w-full">
|
||||
<div className={`flex items-center justify-center text-lg`}>
|
||||
{submitting && <Loading />}
|
||||
Set Contribution
|
||||
<div className="bg-bkg-2 border border-bkg-3 flex flex-col items-center rounded-lg shadow-lg p-7 w-96">
|
||||
<div className="pb-4 text-center">
|
||||
<h2>Plant your seed</h2>
|
||||
<p>This is the start of something big.</p>
|
||||
</div>
|
||||
<div
|
||||
className={`${
|
||||
connected ? 'opacity-100' : 'opacity-30'
|
||||
} pb-6 transiton-all duration-1000 w-full`}
|
||||
>
|
||||
<div className="pb-20">
|
||||
<div className="flex justify-between pb-2">
|
||||
<div className="flex items-center text-xs text-fgd-4">
|
||||
<WalletIcon className="w-4 h-4 mr-1 text-secondary-1-dark fill-current" />
|
||||
{connected ? (
|
||||
loading ? (
|
||||
<div className="bg-bkg-4 rounded w-10 h-4 animate-pulse" />
|
||||
) : (
|
||||
<span className="font-display text-fgd-1 ml-1">
|
||||
{usdcBalance}
|
||||
</span>
|
||||
)
|
||||
) : (
|
||||
'----'
|
||||
)}
|
||||
<img
|
||||
alt=""
|
||||
width="16"
|
||||
height="16"
|
||||
src="/icons/usdc.svg"
|
||||
className={`ml-1`}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className="bg-bkg-4 font-normal rounded text-fgd-3 text-xs py-0.5 px-2"
|
||||
onClick={() => setContributionAmount(100)}
|
||||
secondary
|
||||
>
|
||||
Max
|
||||
</Button>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<Input
|
||||
disabled={!connected}
|
||||
type="text"
|
||||
onChange={(e) => setContributionAmount(e.target.value)}
|
||||
value={loading ? '' : usdcBalance * (contributionAmount / 100)}
|
||||
suffix="USDC"
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
min={0}
|
||||
value={contributionAmount}
|
||||
onChange={(v) => setContributionAmount(v)}
|
||||
step={usdcBalance / 100}
|
||||
marks={{
|
||||
0: 0,
|
||||
25: 25,
|
||||
50: 50,
|
||||
75: '75',
|
||||
100: '100',
|
||||
}}
|
||||
// railStyle={{
|
||||
// height: 2,
|
||||
// }}
|
||||
// handleStyle={{
|
||||
// height: 28,
|
||||
// width: 28,
|
||||
// marginLeft: -14,
|
||||
// marginTop: -14,
|
||||
// backgroundColor: 'red',
|
||||
// border: 0,
|
||||
// }}
|
||||
// trackStyle={{
|
||||
// background: 'none',
|
||||
// }}
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleSetContribution()}
|
||||
className="w-full py-2.5"
|
||||
disabled={!connected}
|
||||
>
|
||||
<div className={`flex items-center justify-center`}>
|
||||
{submitting && <Loading />}
|
||||
Set Contribution
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
{connected ? (
|
||||
<Button onClick={() => handleConnectDisconnect()}>Disconnect</Button>
|
||||
<Button
|
||||
className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
|
||||
onClick={() => handleConnectDisconnect()}
|
||||
secondary
|
||||
>
|
||||
<div className="flex items-center text-sm">
|
||||
<LinkIcon className="h-4 w-4 mr-1" />
|
||||
Disconnect
|
||||
</div>
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={() => handleConnectDisconnect()}>
|
||||
Connect Wallet
|
||||
<Button
|
||||
className="rounded-full"
|
||||
onClick={() => handleConnectDisconnect()}
|
||||
>
|
||||
<div className="flex items-center text-sm">
|
||||
<LinkIcon className="h-4 w-4 mr-1" />
|
||||
Connect Wallet
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const Input = ({
|
|||
{prefix ? (
|
||||
<div
|
||||
className="flex items-center justify-end p-2 border border-r-0
|
||||
border-th-fgd-4 bg-th-bkg-2 h-full text-xs rounded rounded-r-none w-14 text-right"
|
||||
border-fgd-4 bg-bkg-2 h-full text-xs rounded rounded-r-none w-14 text-right"
|
||||
>
|
||||
{prefix}
|
||||
</div>
|
||||
|
|
@ -32,20 +32,16 @@ const Input = ({
|
|||
type={type}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
className={`${className} px-2 w-full bg-th-bkg-1 rounded h-10 text-th-fgd-1
|
||||
border border-th-fgd-4 default-transition hover:border-th-primary
|
||||
focus:border-th-primary focus:outline-none
|
||||
${
|
||||
disabled
|
||||
? 'bg-th-bkg-3 cursor-not-allowed hover:border-th-fgd-4'
|
||||
: ''
|
||||
}
|
||||
className={`${className} font-display px-2 py-2 w-full bg-bkg-1 rounded text-fgd-1
|
||||
border border-fgd-4 default-transition hover:border-primary-dark
|
||||
focus:border-primary-light focus:outline-none
|
||||
${disabled ? 'cursor-not-allowed hover:border-fgd-4' : ''}
|
||||
${prefix ? 'rounded-l-none' : ''}`}
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
/>
|
||||
{suffix ? (
|
||||
<span className="absolute right-0 text-xs flex items-center pr-2 h-full bg-transparent text-th-fgd-4">
|
||||
<span className="absolute right-0 text-xs flex items-center pr-2 h-full bg-transparent text-fgd-4">
|
||||
{suffix}
|
||||
</span>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const Modal = ({ isOpen, onClose, children, hideClose = false }) => {
|
|||
|
||||
{isOpen ? (
|
||||
<div
|
||||
className="inline-block bg-th-bkg-2
|
||||
className="inline-block bg-bkg-2
|
||||
rounded-lg text-left shadow-lg transform transition-all
|
||||
sm:my-8 align-middle sm:max-w-md w-full"
|
||||
>
|
||||
|
|
@ -36,7 +36,7 @@ const Modal = ({ isOpen, onClose, children, hideClose = false }) => {
|
|||
<div className="w-full flex justify-end p-2 pb-0">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className={`text-th-fgd-1 hover:text-th-primary focus:outline-none`}
|
||||
className={`text-fgd-1 hover:text-primary focus:outline-none`}
|
||||
>
|
||||
<XIcon className={`h-5 w-5`} />
|
||||
</button>
|
||||
|
|
@ -55,7 +55,7 @@ const Modal = ({ isOpen, onClose, children, hideClose = false }) => {
|
|||
|
||||
const Header = ({ children }) => {
|
||||
return (
|
||||
<div className={`flex justify-center bg-th-bkg-2 p-2 pt-0`}>{children}</div>
|
||||
<div className={`flex justify-center bg-bkg-2 p-2 pt-0`}>{children}</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,30 +53,30 @@ const Notification = ({ type, message, description, txid }) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`max-w-sm w-full bg-th-bkg-3 shadow-lg rounded-md mt-2 pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden`}
|
||||
className={`max-w-sm w-full bg-bkg-3 shadow-lg rounded-md mt-2 pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden`}
|
||||
>
|
||||
<div className={`p-4`}>
|
||||
<div className={`flex items-center`}>
|
||||
<div className={`flex-shrink-0`}>
|
||||
{type === 'success' ? (
|
||||
<CheckCircleIcon className={`text-th-green h-9 w-9 mr-1`} />
|
||||
<CheckCircleIcon className={`text-green h-9 w-9 mr-1`} />
|
||||
) : null}
|
||||
{type === 'info' && (
|
||||
<XCircleIcon className={`text-th-primary h-9 w-9 mr-1`} />
|
||||
<XCircleIcon className={`text-primary h-9 w-9 mr-1`} />
|
||||
)}
|
||||
{type === 'error' && (
|
||||
<InformationCircleIcon className={`text-th-red h-9 w-9 mr-1`} />
|
||||
<InformationCircleIcon className={`text-red h-9 w-9 mr-1`} />
|
||||
)}
|
||||
</div>
|
||||
<div className={`ml-2 w-0 flex-1`}>
|
||||
<div className={`text-lg text-th-fgd-1`}>{message}</div>
|
||||
<div className={`text-lg text-fgd-1`}>{message}</div>
|
||||
{description ? (
|
||||
<p className={`mt-0.5 text-base text-th-fgd-2`}>{description}</p>
|
||||
<p className={`mt-0.5 text-base text-fgd-2`}>{description}</p>
|
||||
) : null}
|
||||
{txid ? (
|
||||
<a
|
||||
href={'https://explorer.solana.com/tx/' + txid}
|
||||
className="text-th-primary"
|
||||
className="text-primary"
|
||||
>
|
||||
View transaction {txid.slice(0, 8)}...
|
||||
{txid.slice(txid.length - 8)}
|
||||
|
|
@ -86,7 +86,7 @@ const Notification = ({ type, message, description, txid }) => {
|
|||
<div className={`ml-4 flex-shrink-0 self-start flex`}>
|
||||
<button
|
||||
onClick={() => setShowNotification(false)}
|
||||
className={`bg-th-bkg-3 rounded-md inline-flex text-fgd-3 hover:text-th-fgd-4 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-th-primary`}
|
||||
className={`bg-bkg-3 rounded-md inline-flex text-fgd-3 hover:text-fgd-4 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary`}
|
||||
>
|
||||
<span className={`sr-only`}>Close</span>
|
||||
<svg
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ const TopBar = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<nav className={`bg-th-bkg-2`}>
|
||||
<nav className={`bg-bkg-1`}>
|
||||
<div className={`px-4 sm:px-6 lg:px-8`}>
|
||||
<div className={`flex justify-between h-16`}>
|
||||
<div className={`flex`}>
|
||||
|
|
@ -66,11 +66,11 @@ const TopBar = () => {
|
|||
<Menu>
|
||||
{({ open }) => (
|
||||
<div className="relative">
|
||||
<Menu.Button className="w-48 h-11 pl-2 pr-2.5 border border-th-green hover:border-th-fgd-1 focus:outline-none rounded-md text-th-fgd-4 hover:text-th-fgd-1">
|
||||
<Menu.Button className="w-48 h-11 pl-2 pr-2.5 border border-green hover:border-fgd-1 focus:outline-none rounded-md text-fgd-4 hover:text-fgd-1">
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<WalletIcon className="w-5 h-5 mr-2 fill-current text-th-green" />
|
||||
<Code className="p-1 text-th-fgd-3 font-light">
|
||||
<WalletIcon className="w-5 h-5 mr-2 fill-current text-green" />
|
||||
<Code className="p-1 text-fgd-3 font-light">
|
||||
{isCopied
|
||||
? 'Copied!'
|
||||
: wallet.publicKey.toString().substr(0, 5) +
|
||||
|
|
@ -85,11 +85,11 @@ const TopBar = () => {
|
|||
)}
|
||||
</div>
|
||||
</Menu.Button>
|
||||
<Menu.Items className="z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-48">
|
||||
<Menu.Items className="z-20 p-1 absolute right-0 top-11 bg-bkg-1 divide-y divide-bkg-3 shadow-lg outline-none rounded-md w-48">
|
||||
{WALLET_OPTIONS.map(({ name, icon }) => (
|
||||
<Menu.Item key={name}>
|
||||
<button
|
||||
className="flex flex-row items-center w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer font-normal"
|
||||
className="flex flex-row items-center w-full p-2 hover:bg-bkg-2 hover:cursor-pointer font-normal"
|
||||
onClick={() => handleWalletMenu(name)}
|
||||
>
|
||||
<div className="w-5 h-5 mr-2">{icon}</div>
|
||||
|
|
|
|||
|
|
@ -27,10 +27,10 @@ export default function WalletSelect({ isPrimary = false }) {
|
|||
{({ open }) => (
|
||||
<>
|
||||
<Menu.Button
|
||||
className={`flex justify-center items-center h-full rounded-r rounded-l-none focus:outline-none text-th-primary hover:text-th-fgd-1 ${
|
||||
className={`flex justify-center items-center h-full rounded-r rounded-l-none focus:outline-none text-primary hover:text-fgd-1 ${
|
||||
isPrimary
|
||||
? 'px-3 hover:bg-th-primary'
|
||||
: 'px-2 hover:bg-th-bkg-3 border-l border-th-fgd-4'
|
||||
? 'px-3 hover:bg-primary'
|
||||
: 'px-2 hover:bg-bkg-3 border-l border-fgd-4'
|
||||
} cursor-pointer`}
|
||||
>
|
||||
{open ? (
|
||||
|
|
@ -39,11 +39,11 @@ export default function WalletSelect({ isPrimary = false }) {
|
|||
<ChevronDownIcon className="h-5 w-5" />
|
||||
)}
|
||||
</Menu.Button>
|
||||
<Menu.Items className="z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-48">
|
||||
<Menu.Items className="z-20 p-1 absolute right-0 top-11 bg-bkg-1 divide-y divide-bkg-3 shadow-lg outline-none rounded-md w-48">
|
||||
{WALLET_PROVIDERS.map(({ name, url, icon }) => (
|
||||
<Menu.Item key={name}>
|
||||
<button
|
||||
className="flex flex-row items-center justify-between w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer font-normal focus:outline-none"
|
||||
className="flex flex-row items-center justify-between w-full p-2 hover:bg-bkg-2 hover:cursor-pointer font-normal focus:outline-none"
|
||||
onClick={() => handleSelectProvider(url)}
|
||||
>
|
||||
<div className="flex">
|
||||
|
|
@ -51,7 +51,7 @@ export default function WalletSelect({ isPrimary = false }) {
|
|||
{name}
|
||||
</div>
|
||||
{savedProviderUrl === url ? (
|
||||
<CheckCircleIcon className="h-4 w-4 text-th-green" />
|
||||
<CheckCircleIcon className="h-4 w-4 text-green" />
|
||||
) : null}{' '}
|
||||
</button>
|
||||
</Menu.Item>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
"immer": "^9.0.1",
|
||||
"next": "latest",
|
||||
"next-themes": "^0.0.14",
|
||||
"rc-slider": "^9.7.2",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"zustand": "^3.4.1"
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ function App({ Component, pageProps }) {
|
|||
<title>{title}</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=PT+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
import Notifications from '../components/Notification'
|
||||
import Balances from '../components/Balances'
|
||||
import TopBar from '../components/TopBar'
|
||||
import ContributionModal from '../components/ContributionModal'
|
||||
|
||||
const Index = () => {
|
||||
return (
|
||||
<div
|
||||
className={`grid grid-cols-1 bg-th-bkg-1 text-th-fgd-1 transition-all`}
|
||||
>
|
||||
<div className={`bg-bkg-1 text-fgd-1 transition-all`}>
|
||||
<TopBar />
|
||||
{/* <Balances />
|
||||
<Notifications /> */}
|
||||
<ContributionModal />
|
||||
<Notifications />
|
||||
<div className="grid grid-cols-1 place-items-center">
|
||||
<ContributionModal />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#2775CA;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<circle class="st0" cx="12" cy="12" r="12"/>
|
||||
<path class="st1" d="M9.8,20.3c0,0.3-0.2,0.4-0.5,0.4C5.6,19.5,3,16.1,3,12.1c0-4,2.6-7.4,6.3-8.6c0.3-0.1,0.5,0.1,0.5,0.4v0.7
|
||||
c0,0.2-0.1,0.4-0.3,0.5c-2.9,1.1-4.9,3.8-4.9,7c0,3.2,2.1,6,4.9,7c0.2,0.1,0.3,0.3,0.3,0.5V20.3z"/>
|
||||
<path class="st1" d="M12.8,17.8c0,0.2-0.2,0.4-0.4,0.4h-0.8c-0.2,0-0.4-0.2-0.4-0.4v-1.2c-1.6-0.2-2.4-1.1-2.7-2.4
|
||||
c0-0.2,0.1-0.4,0.3-0.4h0.9c0.2,0,0.3,0.1,0.4,0.3c0.2,0.7,0.6,1.3,1.9,1.3c1,0,1.7-0.5,1.7-1.3c0-0.8-0.4-1.1-1.8-1.3
|
||||
c-2.1-0.3-3.1-0.9-3.1-2.6c0-1.3,1-2.3,2.4-2.5V6.5c0-0.2,0.2-0.4,0.4-0.4h0.8c0.2,0,0.4,0.2,0.4,0.4v1.2c1.2,0.2,2,0.9,2.2,2
|
||||
c0,0.2-0.1,0.4-0.3,0.4h-0.8c-0.2,0-0.3-0.1-0.4-0.3c-0.2-0.7-0.7-1-1.6-1c-1,0-1.5,0.5-1.5,1.2c0,0.7,0.3,1.1,1.8,1.3
|
||||
c2.1,0.3,3.1,0.9,3.1,2.6c0,1.3-1,2.4-2.5,2.7V17.8z"/>
|
||||
<path class="st1" d="M14.7,20.7c-0.3,0.1-0.5-0.1-0.5-0.4v-0.7c0-0.2,0.1-0.4,0.3-0.5c2.9-1.1,4.9-3.8,4.9-7c0-3.2-2.1-6-4.9-7
|
||||
c-0.2-0.1-0.3-0.3-0.3-0.5V3.9c0-0.3,0.2-0.4,0.5-0.4c3.6,1.2,6.3,4.6,6.3,8.6C21,16.1,18.4,19.5,14.7,20.7z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -2,23 +2,6 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* theme */
|
||||
|
||||
:root {
|
||||
--primary: theme('colors.mango-theme.yellow');
|
||||
--red: theme('colors.mango-theme.red.DEFAULT');
|
||||
--red-dark: theme('colors.mango-theme.red.dark');
|
||||
--green: theme('colors.mango-theme.green.DEFAULT');
|
||||
--green-dark: theme('colors.mango-theme.green.dark');
|
||||
--bkg-1: theme('colors.mango-theme["bkg-1"]');
|
||||
--bkg-2: theme('colors.mango-theme["bkg-2"]');
|
||||
--bkg-3: theme('colors.mango-theme["bkg-3"]');
|
||||
--fgd-1: theme('colors.mango-theme["fgd-1"]');
|
||||
--fgd-2: theme('colors.mango-theme["fgd-2"]');
|
||||
--fgd-3: theme('colors.mango-theme["fgd-3"]');
|
||||
--fgd-4: theme('colors.mango-theme["fgd-4"]');
|
||||
}
|
||||
|
||||
/* base */
|
||||
|
||||
* {
|
||||
|
|
@ -26,15 +9,21 @@
|
|||
}
|
||||
|
||||
body {
|
||||
@apply bg-th-bkg-1 text-th-fgd-1 text-base font-body tracking-wide;
|
||||
@apply bg-bkg-1 text-fgd-1 text-base font-body tracking-wide;
|
||||
}
|
||||
|
||||
/* type */
|
||||
|
||||
h2 {
|
||||
@apply text-xl mb-2 font-bold;
|
||||
@apply text-xl mb-1 font-bold;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-th-fgd-3;
|
||||
@apply text-fgd-4 text-sm;
|
||||
}
|
||||
|
||||
button {
|
||||
@apply font-bold;
|
||||
}
|
||||
|
||||
.default-transition {
|
||||
@apply transition-all duration-300;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ module.exports = {
|
|||
darkMode: false,
|
||||
theme: {
|
||||
fontFamily: {
|
||||
display: ['Lato, sans-serif'],
|
||||
display: ['PT Mono, monospace'],
|
||||
body: ['Lato, sans-serif'],
|
||||
},
|
||||
extend: {
|
||||
|
|
@ -16,30 +16,17 @@ module.exports = {
|
|||
help: 'help',
|
||||
},
|
||||
colors: {
|
||||
'mango-theme': {
|
||||
yellow: '#F2C94C',
|
||||
red: { DEFAULT: '#E54033', dark: '#C7251A' },
|
||||
green: { DEFAULT: '#AFD803', dark: '#91B503' },
|
||||
'bkg-1': '#141026',
|
||||
'bkg-2': '#1D1832',
|
||||
'bkg-3': '#322E47',
|
||||
'fgd-1': '#F0EDFF',
|
||||
'fgd-2': '#FCFCFF',
|
||||
'fgd-3': '#B9B5CE',
|
||||
'fgd-4': '#706C81',
|
||||
},
|
||||
'th-bkg-1': 'var(--bkg-1)',
|
||||
'th-bkg-2': 'var(--bkg-2)',
|
||||
'th-bkg-3': 'var(--bkg-3)',
|
||||
'th-fgd-1': 'var(--fgd-1)',
|
||||
'th-fgd-2': 'var(--fgd-2)',
|
||||
'th-fgd-3': 'var(--fgd-3)',
|
||||
'th-fgd-4': 'var(--fgd-4)',
|
||||
'th-primary': 'var(--primary)',
|
||||
'th-red': 'var(--red)',
|
||||
'th-red-dark': 'var(--red-dark)',
|
||||
'th-green': 'var(--green)',
|
||||
'th-green-dark': 'var(--green-dark)',
|
||||
primary: { light: '#F2C94C', dark: '#EEB91B' },
|
||||
'secondary-1': { light: '#AFD803', dark: '#6CBF00' },
|
||||
'secondary-2': { light: '#E54033', dark: '#C7251A' },
|
||||
'bkg-1': '#141125',
|
||||
'bkg-2': '#242132',
|
||||
'bkg-3': '#393549',
|
||||
'bkg-4': '#4F4B63',
|
||||
'fgd-1': '#F0EDFF',
|
||||
'fgd-2': '#FCFCFF',
|
||||
'fgd-3': '#B9B5CE',
|
||||
'fgd-4': '#706C81',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
import BN from 'bn.js'
|
||||
import useWalletStore from '../stores/useWalletStore'
|
||||
|
||||
function fixedPointToNumber(value: BN, decimals: number) {
|
||||
const divisor = new BN(10).pow(new BN(decimals))
|
||||
const quotient = value.div(divisor)
|
||||
const remainder = value.mod(divisor)
|
||||
return quotient.toNumber() + remainder.toNumber() / divisor.toNumber()
|
||||
}
|
||||
|
||||
export function getUsdcBalance() {
|
||||
const { tokenAccounts, mints } = useWalletStore((state) => state)
|
||||
|
||||
const calculateBalance = (a) => {
|
||||
const mint = mints[a.account?.mint?.toBase58()]
|
||||
return mint ? fixedPointToNumber(a.account.amount, mint.decimals) : 0
|
||||
}
|
||||
|
||||
const usdcAddress = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v'
|
||||
|
||||
const usdcAccount = tokenAccounts.filter(
|
||||
(a) => a.account.mint.toBase58() === usdcAddress
|
||||
)
|
||||
|
||||
const usdcBalance = usdcAccount.map((a) => calculateBalance(a))
|
||||
|
||||
return usdcBalance.length ? usdcBalance[0] : 0
|
||||
}
|
||||
Loading…
Reference in New Issue