fixed theme, connect wallet from modal, get usdc balance, styling
This commit is contained in:
parent
3e03233fe0
commit
70c40f3fc4
|
@ -1,5 +1,4 @@
|
||||||
import BN from 'bn.js'
|
import BN from 'bn.js'
|
||||||
|
|
||||||
import useWalletStore from '../stores/useWalletStore'
|
import useWalletStore from '../stores/useWalletStore'
|
||||||
|
|
||||||
const Balances = () => {
|
const Balances = () => {
|
||||||
|
@ -13,7 +12,7 @@ const Balances = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
function calculateBalance(a) {
|
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
|
return mint ? fixedPointToNumber(a.account.amount, mint.decimals) : 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,6 +4,7 @@ interface ButtonProps {
|
||||||
onClick?: (x?) => void
|
onClick?: (x?) => void
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
className?: string
|
className?: string
|
||||||
|
secondary?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const Button: FunctionComponent<ButtonProps> = ({
|
const Button: FunctionComponent<ButtonProps> = ({
|
||||||
|
@ -11,15 +12,20 @@ const Button: FunctionComponent<ButtonProps> = ({
|
||||||
onClick,
|
onClick,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
className,
|
className,
|
||||||
|
secondary = false,
|
||||||
...props
|
...props
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
className={`${className} px-6 py-2 border border-th-fgd-4 bg-th-bkg-2 rounded-md text-th-fgd-1
|
className={`${className} ${
|
||||||
active:border-th-primary hover:bg-th-bkg-3 focus:outline-none disabled:bg-th-bkg-2
|
secondary || disabled
|
||||||
disabled:text-th-fgd-4 disabled:cursor-not-allowed`}
|
? '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}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -17,17 +17,17 @@ const ConnectWalletButton = () => {
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
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
|
<button
|
||||||
onClick={() => wallet.connect()}
|
onClick={() => wallet.connect()}
|
||||||
disabled={!wallet}
|
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" />
|
<WalletIcon className="w-5 h-5 mr-3 fill-current" />
|
||||||
<div>
|
<div>
|
||||||
<span className="whitespace-nowrap">Connect Wallet</span>
|
<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(
|
{WALLET_PROVIDERS.filter((p) => p.url === savedProviderUrl).map(
|
||||||
({ name }) => name
|
({ name }) => name
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,6 +1,10 @@
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
|
import { LinkIcon } from '@heroicons/react/solid'
|
||||||
import useWalletStore from '../stores/useWalletStore'
|
import useWalletStore from '../stores/useWalletStore'
|
||||||
|
import { getUsdcBalance } from '../utils'
|
||||||
import Input from './Input'
|
import Input from './Input'
|
||||||
|
import Slider from 'rc-slider'
|
||||||
|
import 'rc-slider/assets/index.css'
|
||||||
import Button from './Button'
|
import Button from './Button'
|
||||||
import Loading from './Loading'
|
import Loading from './Loading'
|
||||||
import WalletIcon from './WalletIcon'
|
import WalletIcon from './WalletIcon'
|
||||||
|
@ -8,9 +12,11 @@ import WalletIcon from './WalletIcon'
|
||||||
const ContributionModal = () => {
|
const ContributionModal = () => {
|
||||||
const connected = useWalletStore((s) => s.connected)
|
const connected = useWalletStore((s) => s.connected)
|
||||||
const wallet = useWalletStore((s) => s.current)
|
const wallet = useWalletStore((s) => s.current)
|
||||||
|
const usdcBalance = getUsdcBalance()
|
||||||
|
|
||||||
const [contributionAmount, setContributionAmount] = useState(null)
|
const [contributionAmount, setContributionAmount] = useState(null)
|
||||||
const [submitting, setSubmitting] = useState(false)
|
const [submitting, setSubmitting] = useState(false)
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
||||||
const handleConnectDisconnect = () => {
|
const handleConnectDisconnect = () => {
|
||||||
if (connected) {
|
if (connected) {
|
||||||
|
@ -24,6 +30,13 @@ const ContributionModal = () => {
|
||||||
setSubmitting(true)
|
setSubmitting(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setLoading(true)
|
||||||
|
if (usdcBalance) {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}, [usdcBalance])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const submitTimer = setTimeout(() => {
|
const submitTimer = setTimeout(() => {
|
||||||
setSubmitting(false)
|
setSubmitting(false)
|
||||||
|
@ -32,28 +45,115 @@ const ContributionModal = () => {
|
||||||
}, [submitting])
|
}, [submitting])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-th-bkg-3 rounded-lg p-4 w-2/4 max-w-md">
|
<div className="bg-bkg-2 border border-bkg-3 flex flex-col items-center rounded-lg shadow-lg p-7 w-96">
|
||||||
<h2>Plant your seed</h2>
|
<div className="pb-4 text-center">
|
||||||
<p>Something...</p>
|
<h2>Plant your seed</h2>
|
||||||
<Input
|
<p>This is the start of something big.</p>
|
||||||
disabled={!connected}
|
</div>
|
||||||
type="number"
|
<div
|
||||||
step={100}
|
className={`${
|
||||||
onChange={(e) => setContributionAmount(e.target.value)}
|
connected ? 'opacity-100' : 'opacity-30'
|
||||||
value={contributionAmount}
|
} pb-6 transiton-all duration-1000 w-full`}
|
||||||
className=""
|
>
|
||||||
/>
|
<div className="pb-20">
|
||||||
<Button onClick={() => handleSetContribution()} className="w-full">
|
<div className="flex justify-between pb-2">
|
||||||
<div className={`flex items-center justify-center text-lg`}>
|
<div className="flex items-center text-xs text-fgd-4">
|
||||||
{submitting && <Loading />}
|
<WalletIcon className="w-4 h-4 mr-1 text-secondary-1-dark fill-current" />
|
||||||
Set Contribution
|
{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>
|
</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 ? (
|
{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()}>
|
<Button
|
||||||
Connect Wallet
|
className="rounded-full"
|
||||||
|
onClick={() => handleConnectDisconnect()}
|
||||||
|
>
|
||||||
|
<div className="flex items-center text-sm">
|
||||||
|
<LinkIcon className="h-4 w-4 mr-1" />
|
||||||
|
Connect Wallet
|
||||||
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -23,7 +23,7 @@ const Input = ({
|
||||||
{prefix ? (
|
{prefix ? (
|
||||||
<div
|
<div
|
||||||
className="flex items-center justify-end p-2 border border-r-0
|
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}
|
{prefix}
|
||||||
</div>
|
</div>
|
||||||
|
@ -32,20 +32,16 @@ const Input = ({
|
||||||
type={type}
|
type={type}
|
||||||
value={value}
|
value={value}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
className={`${className} px-2 w-full bg-th-bkg-1 rounded h-10 text-th-fgd-1
|
className={`${className} font-display px-2 py-2 w-full bg-bkg-1 rounded text-fgd-1
|
||||||
border border-th-fgd-4 default-transition hover:border-th-primary
|
border border-fgd-4 default-transition hover:border-primary-dark
|
||||||
focus:border-th-primary focus:outline-none
|
focus:border-primary-light focus:outline-none
|
||||||
${
|
${disabled ? 'cursor-not-allowed hover:border-fgd-4' : ''}
|
||||||
disabled
|
|
||||||
? 'bg-th-bkg-3 cursor-not-allowed hover:border-th-fgd-4'
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
${prefix ? 'rounded-l-none' : ''}`}
|
${prefix ? 'rounded-l-none' : ''}`}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
{suffix ? (
|
{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}
|
{suffix}
|
||||||
</span>
|
</span>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
|
@ -28,7 +28,7 @@ const Modal = ({ isOpen, onClose, children, hideClose = false }) => {
|
||||||
|
|
||||||
{isOpen ? (
|
{isOpen ? (
|
||||||
<div
|
<div
|
||||||
className="inline-block bg-th-bkg-2
|
className="inline-block bg-bkg-2
|
||||||
rounded-lg text-left shadow-lg transform transition-all
|
rounded-lg text-left shadow-lg transform transition-all
|
||||||
sm:my-8 align-middle sm:max-w-md w-full"
|
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">
|
<div className="w-full flex justify-end p-2 pb-0">
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
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`} />
|
<XIcon className={`h-5 w-5`} />
|
||||||
</button>
|
</button>
|
||||||
|
@ -55,7 +55,7 @@ const Modal = ({ isOpen, onClose, children, hideClose = false }) => {
|
||||||
|
|
||||||
const Header = ({ children }) => {
|
const Header = ({ children }) => {
|
||||||
return (
|
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 (
|
return (
|
||||||
<div
|
<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={`p-4`}>
|
||||||
<div className={`flex items-center`}>
|
<div className={`flex items-center`}>
|
||||||
<div className={`flex-shrink-0`}>
|
<div className={`flex-shrink-0`}>
|
||||||
{type === 'success' ? (
|
{type === 'success' ? (
|
||||||
<CheckCircleIcon className={`text-th-green h-9 w-9 mr-1`} />
|
<CheckCircleIcon className={`text-green h-9 w-9 mr-1`} />
|
||||||
) : null}
|
) : null}
|
||||||
{type === 'info' && (
|
{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' && (
|
{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>
|
||||||
<div className={`ml-2 w-0 flex-1`}>
|
<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 ? (
|
{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}
|
) : null}
|
||||||
{txid ? (
|
{txid ? (
|
||||||
<a
|
<a
|
||||||
href={'https://explorer.solana.com/tx/' + txid}
|
href={'https://explorer.solana.com/tx/' + txid}
|
||||||
className="text-th-primary"
|
className="text-primary"
|
||||||
>
|
>
|
||||||
View transaction {txid.slice(0, 8)}...
|
View transaction {txid.slice(0, 8)}...
|
||||||
{txid.slice(txid.length - 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`}>
|
<div className={`ml-4 flex-shrink-0 self-start flex`}>
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowNotification(false)}
|
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>
|
<span className={`sr-only`}>Close</span>
|
||||||
<svg
|
<svg
|
||||||
|
|
|
@ -51,7 +51,7 @@ const TopBar = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className={`bg-th-bkg-2`}>
|
<nav className={`bg-bkg-1`}>
|
||||||
<div className={`px-4 sm:px-6 lg:px-8`}>
|
<div className={`px-4 sm:px-6 lg:px-8`}>
|
||||||
<div className={`flex justify-between h-16`}>
|
<div className={`flex justify-between h-16`}>
|
||||||
<div className={`flex`}>
|
<div className={`flex`}>
|
||||||
|
@ -66,11 +66,11 @@ const TopBar = () => {
|
||||||
<Menu>
|
<Menu>
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<div className="relative">
|
<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 flex-row items-center justify-between">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<WalletIcon className="w-5 h-5 mr-2 fill-current text-th-green" />
|
<WalletIcon className="w-5 h-5 mr-2 fill-current text-green" />
|
||||||
<Code className="p-1 text-th-fgd-3 font-light">
|
<Code className="p-1 text-fgd-3 font-light">
|
||||||
{isCopied
|
{isCopied
|
||||||
? 'Copied!'
|
? 'Copied!'
|
||||||
: wallet.publicKey.toString().substr(0, 5) +
|
: wallet.publicKey.toString().substr(0, 5) +
|
||||||
|
@ -85,11 +85,11 @@ const TopBar = () => {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Menu.Button>
|
</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 }) => (
|
{WALLET_OPTIONS.map(({ name, icon }) => (
|
||||||
<Menu.Item key={name}>
|
<Menu.Item key={name}>
|
||||||
<button
|
<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)}
|
onClick={() => handleWalletMenu(name)}
|
||||||
>
|
>
|
||||||
<div className="w-5 h-5 mr-2">{icon}</div>
|
<div className="w-5 h-5 mr-2">{icon}</div>
|
||||||
|
|
|
@ -27,10 +27,10 @@ export default function WalletSelect({ isPrimary = false }) {
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<>
|
<>
|
||||||
<Menu.Button
|
<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
|
isPrimary
|
||||||
? 'px-3 hover:bg-th-primary'
|
? 'px-3 hover:bg-primary'
|
||||||
: 'px-2 hover:bg-th-bkg-3 border-l border-th-fgd-4'
|
: 'px-2 hover:bg-bkg-3 border-l border-fgd-4'
|
||||||
} cursor-pointer`}
|
} cursor-pointer`}
|
||||||
>
|
>
|
||||||
{open ? (
|
{open ? (
|
||||||
|
@ -39,11 +39,11 @@ export default function WalletSelect({ isPrimary = false }) {
|
||||||
<ChevronDownIcon className="h-5 w-5" />
|
<ChevronDownIcon className="h-5 w-5" />
|
||||||
)}
|
)}
|
||||||
</Menu.Button>
|
</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 }) => (
|
{WALLET_PROVIDERS.map(({ name, url, icon }) => (
|
||||||
<Menu.Item key={name}>
|
<Menu.Item key={name}>
|
||||||
<button
|
<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)}
|
onClick={() => handleSelectProvider(url)}
|
||||||
>
|
>
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
|
@ -51,7 +51,7 @@ export default function WalletSelect({ isPrimary = false }) {
|
||||||
{name}
|
{name}
|
||||||
</div>
|
</div>
|
||||||
{savedProviderUrl === url ? (
|
{savedProviderUrl === url ? (
|
||||||
<CheckCircleIcon className="h-4 w-4 text-th-green" />
|
<CheckCircleIcon className="h-4 w-4 text-green" />
|
||||||
) : null}{' '}
|
) : null}{' '}
|
||||||
</button>
|
</button>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|
|
@ -31,6 +31,7 @@
|
||||||
"immer": "^9.0.1",
|
"immer": "^9.0.1",
|
||||||
"next": "latest",
|
"next": "latest",
|
||||||
"next-themes": "^0.0.14",
|
"next-themes": "^0.0.14",
|
||||||
|
"rc-slider": "^9.7.2",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
"zustand": "^3.4.1"
|
"zustand": "^3.4.1"
|
||||||
|
|
|
@ -18,7 +18,7 @@ function App({ Component, pageProps }) {
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||||
<link
|
<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"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
|
|
@ -1,17 +1,15 @@
|
||||||
import Notifications from '../components/Notification'
|
import Notifications from '../components/Notification'
|
||||||
import Balances from '../components/Balances'
|
|
||||||
import TopBar from '../components/TopBar'
|
import TopBar from '../components/TopBar'
|
||||||
import ContributionModal from '../components/ContributionModal'
|
import ContributionModal from '../components/ContributionModal'
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div className={`bg-bkg-1 text-fgd-1 transition-all`}>
|
||||||
className={`grid grid-cols-1 bg-th-bkg-1 text-th-fgd-1 transition-all`}
|
|
||||||
>
|
|
||||||
<TopBar />
|
<TopBar />
|
||||||
{/* <Balances />
|
<Notifications />
|
||||||
<Notifications /> */}
|
<div className="grid grid-cols-1 place-items-center">
|
||||||
<ContributionModal />
|
<ContributionModal />
|
||||||
|
</div>
|
||||||
</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 components;
|
||||||
@tailwind utilities;
|
@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 */
|
/* base */
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
@ -26,15 +9,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
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 {
|
h2 {
|
||||||
@apply text-xl mb-2 font-bold;
|
@apply text-xl mb-1 font-bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
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,
|
darkMode: false,
|
||||||
theme: {
|
theme: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
display: ['Lato, sans-serif'],
|
display: ['PT Mono, monospace'],
|
||||||
body: ['Lato, sans-serif'],
|
body: ['Lato, sans-serif'],
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
|
@ -16,30 +16,17 @@ module.exports = {
|
||||||
help: 'help',
|
help: 'help',
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
'mango-theme': {
|
primary: { light: '#F2C94C', dark: '#EEB91B' },
|
||||||
yellow: '#F2C94C',
|
'secondary-1': { light: '#AFD803', dark: '#6CBF00' },
|
||||||
red: { DEFAULT: '#E54033', dark: '#C7251A' },
|
'secondary-2': { light: '#E54033', dark: '#C7251A' },
|
||||||
green: { DEFAULT: '#AFD803', dark: '#91B503' },
|
'bkg-1': '#141125',
|
||||||
'bkg-1': '#141026',
|
'bkg-2': '#242132',
|
||||||
'bkg-2': '#1D1832',
|
'bkg-3': '#393549',
|
||||||
'bkg-3': '#322E47',
|
'bkg-4': '#4F4B63',
|
||||||
'fgd-1': '#F0EDFF',
|
'fgd-1': '#F0EDFF',
|
||||||
'fgd-2': '#FCFCFF',
|
'fgd-2': '#FCFCFF',
|
||||||
'fgd-3': '#B9B5CE',
|
'fgd-3': '#B9B5CE',
|
||||||
'fgd-4': '#706C81',
|
'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)',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -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