LaconicNetwork/mars-v2-frontend
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Tooling improvements and minor refactor (#19)

Browse Source 
* refactor: store selector callbacks less verbose

* chore: prettier tailwind plugin added and respective formatting

* disable metamask connection button
This commit is contained in:
Gustavo Mauricio 2022-09-30 13:50:16 +01:00 committed by GitHub
parent 5007acb515
commit f709c12da2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 100 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Button.tsx
View File

@ -12,7 +12,7 @@ const Button = React.forwardRef<any, Props>(
<button <button
ref={ref} ref={ref}
onClick={onClick} onClick={onClick}
className={`rounded-3xl bg-green-500 py-2 px-5 text-white text-sm font-semibold overflow-hidden text-ellipsis ${className} ${ className={`overflow-hidden text-ellipsis rounded-3xl bg-green-500 py-2 px-5 text-sm font-semibold text-white ${className} ${
disabled ? 'opacity-40' : '' disabled ? 'opacity-40' : ''
}`} }`}
disabled={disabled} disabled={disabled}

16
components/ConnectModal.tsx
View File

@ -19,8 +19,8 @@ type Props = {
const ConnectModal = ({ isOpen, onClose }: Props) => { const ConnectModal = ({ isOpen, onClose }: Props) => {
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const actions = useWalletStore((state) => state.actions) const actions = useWalletStore((s) => s.actions)
const metamaskInstalled = useWalletStore((state) => state.metamaskInstalled) const metamaskInstalled = useWalletStore((s) => s.metamaskInstalled)
const isKeplrInstalled = typeof window !== 'undefined' && window.keplr const isKeplrInstalled = typeof window !== 'undefined' && window.keplr
const handleConnectSuccess = () => { const handleConnectSuccess = () => {
@ -108,13 +108,13 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all"> <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900 mb-6"> <Dialog.Title as="h3" className="mb-6 text-lg font-medium leading-6 text-gray-900">
Connect your wallet Connect your wallet
</Dialog.Title> </Dialog.Title>
{isLoading ? ( {isLoading ? (
<div role="status" className="text-center"> <div role="status" className="text-center">
<svg <svg
className="inline w-10 h-10 text-gray-200 animate-spin fill-orange-500" className="inline h-10 w-10 animate-spin fill-orange-500 text-gray-200"
viewBox="0 0 100 101" viewBox="0 0 100 101"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -131,10 +131,12 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
<span className="sr-only">Loading...</span> <span className="sr-only">Loading...</span>
</div> </div>
) : ( ) : (
<div className="flex flex-col gap-3 mt-2"> <div className="mt-2 flex flex-col gap-3">
<button <button
className="flex items-center p-4 bg-black/90 rounded-xl hover:bg-black" className="flex items-center rounded-xl bg-black/90 p-4 hover:bg-black"
onClick={handleConnectMetamask} onClick={handleConnectMetamask}
// temporarily disable metamask connection as its not supported on osmosis
disabled
> >
<Image src="/wallets/metamask.webp" height={30} width={30} alt="metamask" /> <Image src="/wallets/metamask.webp" height={30} width={30} alt="metamask" />
<div className="ml-4 text-left"> <div className="ml-4 text-left">
@ -156,7 +158,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
</div> </div>
</button> </button>
<button <button
className="flex items-center p-4 bg-black/90 rounded-xl hover:bg-black" className="flex items-center rounded-xl bg-black/90 p-4 hover:bg-black"
onClick={handleConnectKeplr} onClick={handleConnectKeplr}
> >
<Image src="/wallets/keplr.png" height={30} width={30} alt="keplr" /> <Image src="/wallets/keplr.png" height={30} width={30} alt="keplr" />

2
components/CreditManager/CreditManagerContainer.tsx
View File

@ -8,7 +8,7 @@ export const CreditManagerContainer = ({
children: React.ReactNode children: React.ReactNode
className?: string className?: string
}) => { }) => {
return <div className={`p-2 bg-[#D8DAEA] rounded-lg text-[#585A74] ${className}`}>{children}</div> return <div className={`rounded-lg bg-[#D8DAEA] p-2 text-[#585A74] ${className}`}>{children}</div>
} }
export default CreditManagerContainer export default CreditManagerContainer

14
components/CreditManager/FundAccount.tsx
View File

@ -16,7 +16,7 @@ const FundAccount = () => {
const [selectedToken, setSelectedToken] = useState('') const [selectedToken, setSelectedToken] = useState('')
const [enabled, setEnabled] = useState(false) const [enabled, setEnabled] = useState(false)
const selectedAccount = useCreditManagerStore((state) => state.selectedAccount) const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
const { data: balancesData } = useAllBalances() const { data: balancesData } = useAllBalances()
const { data: allowedCoinsData, isLoading: isLoadingAllowedCoins } = useAllowedCoins() const { data: allowedCoinsData, isLoading: isLoadingAllowedCoins } = useAllowedCoins()
@ -57,7 +57,7 @@ const FundAccount = () => {
return ( return (
<> <>
<CreditManagerContainer className="p-3 mb-2"> <CreditManagerContainer className="mb-2 p-3">
<p className="mb-6"> <p className="mb-6">
Transfer assets from your injective wallet to your Mars credit account. If you don’t have Transfer assets from your injective wallet to your Mars credit account. If you don’t have
any assets in your injective wallet use the injective bridge to transfer funds to your any assets in your injective wallet use the injective bridge to transfer funds to your
@ -68,7 +68,7 @@ const FundAccount = () => {
) : ( ) : (
<> <>
<div className="mb-4"> <div className="mb-4">
<div className="flex justify-between mb-1"> <div className="mb-1 flex justify-between">
<div>Asset:</div> <div>Asset:</div>
<select <select
className="bg-transparent" className="bg-transparent"
@ -89,7 +89,7 @@ const FundAccount = () => {
<div>Amount:</div> <div>Amount:</div>
<input <input
type="number" type="number"
className="bg-transparent border border-black/50 px-2" className="border border-black/50 bg-transparent px-2"
value={amount} value={amount}
onChange={(e) => handleValueChange(e.target.valueAsNumber)} onChange={(e) => handleValueChange(e.target.valueAsNumber)}
/> />
@ -98,7 +98,7 @@ const FundAccount = () => {
<p>In wallet: {walletAmount.toLocaleString()}</p> <p>In wallet: {walletAmount.toLocaleString()}</p>
{/* SLIDER - initial implementation to test functionality */} {/* SLIDER - initial implementation to test functionality */}
{/* TODO: will need to be revamped later on */} {/* TODO: will need to be revamped later on */}
<div className="relative flex flex-1 mb-6 items-center"> <div className="relative mb-6 flex flex-1 items-center">
<Slider.Root <Slider.Root
className="relative flex h-[20px] w-full cursor-pointer touch-none select-none items-center" className="relative flex h-[20px] w-full cursor-pointer touch-none select-none items-center"
value={[percentageValue]} value={[percentageValue]}
@ -122,7 +122,7 @@ const FundAccount = () => {
</Slider.Thumb> </Slider.Thumb>
</Slider.Root> </Slider.Root>
<button <button
className="ml-4 py-1 px-2 text-sm bg-blue-600 text-white rounded-md" className="ml-4 rounded-md bg-blue-600 py-1 px-2 text-sm text-white"
onClick={() => setAmount(maxValue)} onClick={() => setAmount(maxValue)}
> >
MAX MAX
@ -131,7 +131,7 @@ const FundAccount = () => {
</> </>
)} )}
</CreditManagerContainer> </CreditManagerContainer>
<CreditManagerContainer className="flex justify-between items-center mb-2"> <CreditManagerContainer className="mb-2 flex items-center justify-between">
<div> <div>
<h3 className="font-bold">Lending Assets</h3> <h3 className="font-bold">Lending Assets</h3>
<div className="opacity-50">Lend assets from account to earn yield.</div> <div className="opacity-50">Lend assets from account to earn yield.</div>

18
components/CreditManager/index.tsx
View File

@ -13,8 +13,8 @@ import CreditManagerContainer from './CreditManagerContainer'
const CreditManager = () => { const CreditManager = () => {
const [isFund, setIsFund] = useState(false) const [isFund, setIsFund] = useState(false)
const address = useWalletStore((state) => state.address) const address = useWalletStore((s) => s.address)
const selectedAccount = useCreditManagerStore((state) => state.selectedAccount) const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountBalances( const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountBalances(
selectedAccount ?? '' selectedAccount ?? ''
@ -32,17 +32,17 @@ const CreditManager = () => {
if (!address) { if (!address) {
return ( return (
<div className="absolute inset-0 left-auto p-2 w-[400px] bg-background-2 border-l border-white/20"> <div className="absolute inset-0 left-auto w-[400px] border-l border-white/20 bg-background-2 p-2">
<CreditManagerContainer>You must have a connected wallet</CreditManagerContainer> <CreditManagerContainer>You must have a connected wallet</CreditManagerContainer>
</div> </div>
) )
} }
return ( return (
<div className="absolute inset-0 left-auto p-2 w-[400px] bg-background-2 border-l border-white/20"> <div className="absolute inset-0 left-auto w-[400px] border-l border-white/20 bg-background-2 p-2">
<CreditManagerContainer className="mb-2"> <CreditManagerContainer className="mb-2">
{isFund ? ( {isFund ? (
<div className="flex justify-between items-center"> <div className="flex items-center justify-between">
<h3 className="font-bold">Fund Account</h3> <h3 className="font-bold">Fund Account</h3>
<Button className="rounded-md" onClick={() => setIsFund(false)}> <Button className="rounded-md" onClick={() => setIsFund(false)}>
Cancel Cancel
@ -50,10 +50,10 @@ const CreditManager = () => {
</div> </div>
) : ( ) : (
<div className="flex gap-3"> <div className="flex gap-3">
<Button className="rounded-md flex-1" onClick={() => setIsFund(true)}> <Button className="flex-1 rounded-md" onClick={() => setIsFund(true)}>
Fund Fund
</Button> </Button>
<Button className="rounded-md flex-1" onClick={() => alert('TODO')}> <Button className="flex-1 rounded-md" onClick={() => alert('TODO')}>
Withdraw Withdraw
</Button> </Button>
</div> </div>
@ -64,7 +64,7 @@ const CreditManager = () => {
) : ( ) : (
<> <>
<CreditManagerContainer className="mb-2 text-sm"> <CreditManagerContainer className="mb-2 text-sm">
<div className="flex justify-between mb-1"> <div className="mb-1 flex justify-between">
<div>Total Position:</div> <div>Total Position:</div>
<div className="font-semibold">{formatCurrency(totalPosition)}</div> <div className="font-semibold">{formatCurrency(totalPosition)}</div>
</div> </div>
@ -79,7 +79,7 @@ const CreditManager = () => {
<div>Loading...</div> <div>Loading...</div>
) : ( ) : (
<> <>
<div className="flex font-semibold text-xs"> <div className="flex text-xs font-semibold">
<div className="flex-1">Asset</div> <div className="flex-1">Asset</div>
<div className="flex-1">Value</div> <div className="flex-1">Value</div>
<div className="flex-1">Size</div> <div className="flex-1">Size</div>

24
components/Navigation.tsx
View File

@ -58,13 +58,13 @@ const Navigation = () => {
return ( return (
<div> <div>
{/* Main navigation bar */} {/* Main navigation bar */}
<div className="flex justify-between items-center px-6 py-3 border-b border-white/20"> <div className="flex items-center justify-between border-b border-white/20 px-6 py-3">
<Link href="/" passHref> <Link href="/" passHref>
<a> <a>
<img src="/logo.svg" alt="mars" /> <img src="/logo.svg" alt="mars" />
</a> </a>
</Link> </Link>
<div className="flex px-12 gap-5 text-white/40"> <div className="flex gap-5 px-12 text-white/40">
{navItems.map((item, index) => ( {navItems.map((item, index) => (
<NavLink key={index} href={item.href}> <NavLink key={index} href={item.href}>
{item.label} {item.label}
@ -74,13 +74,13 @@ const Navigation = () => {
<Wallet /> <Wallet />
</div> </div>
{/* Sub navigation bar */} {/* Sub navigation bar */}
<div className="flex justify-between px-6 py-3 text-sm text-white/40 border-b border-white/20"> <div className="flex justify-between border-b border-white/20 px-6 py-3 text-sm text-white/40">
<div className="flex items-center"> <div className="flex items-center">
<SearchInput /> <SearchInput />
{firstCreditAccounts.map((account) => ( {firstCreditAccounts.map((account) => (
<div <div
key={account} key={account}
className={`px-4 hover:text-white cursor-pointer ${ className={`cursor-pointer px-4 hover:text-white ${
selectedAccount === account ? 'text-white' : '' selectedAccount === account ? 'text-white' : ''
}`} }`}
onClick={() => setSelectedAccount(account)} onClick={() => setSelectedAccount(account)}
@ -91,13 +91,13 @@ const Navigation = () => {
{restCreditAccounts.length > 0 && ( {restCreditAccounts.length > 0 && (
<Popover className="relative"> <Popover className="relative">
<Popover.Button> <Popover.Button>
<div className="px-3 flex items-center hover:text-white cursor-pointer"> <div className="flex cursor-pointer items-center px-3 hover:text-white">
More More
<ChevronDownIcon className="ml-1 h-4 w-4" /> <ChevronDownIcon className="ml-1 h-4 w-4" />
</div> </div>
</Popover.Button> </Popover.Button>
<Popover.Panel className="absolute z-10 pt-2 w-[200px]"> <Popover.Panel className="absolute z-10 w-[200px] pt-2">
<div className="bg-white rounded-2xl p-4 text-gray-900"> <div className="rounded-2xl bg-white p-4 text-gray-900">
{restCreditAccounts.map((account) => ( {restCreditAccounts.map((account) => (
<div <div
key={account} key={account}
@ -115,14 +115,14 @@ const Navigation = () => {
)} )}
<Popover className="relative"> <Popover className="relative">
<Popover.Button> <Popover.Button>
<div className="px-3 flex items-center hover:text-white cursor-pointer"> <div className="flex cursor-pointer items-center px-3 hover:text-white">
Manage Manage
<ChevronDownIcon className="ml-1 h-4 w-4" /> <ChevronDownIcon className="ml-1 h-4 w-4" />
</div> </div>
</Popover.Button> </Popover.Button>
<Popover.Panel className="absolute z-10 pt-2 w-[200px]"> <Popover.Panel className="absolute z-10 w-[200px] pt-2">
{({ close }) => ( {({ close }) => (
<div className="bg-white rounded-2xl p-4 text-gray-900"> <div className="rounded-2xl bg-white p-4 text-gray-900">
<div <div
className="mb-2 cursor-pointer hover:text-orange-500" className="mb-2 cursor-pointer hover:text-orange-500"
onClick={() => { onClick={() => {
@ -158,13 +158,13 @@ const Navigation = () => {
</Popover.Panel> </Popover.Panel>
</Popover> </Popover>
</div> </div>
<div className="flex gap-4 items-center"> <div className="flex items-center gap-4">
<p>{formatCurrency(2500)}</p> <p>{formatCurrency(2500)}</p>
<div>Lvg</div> <div>Lvg</div>
<div>Risk</div> <div>Risk</div>
<ProgressBar value={0.43} /> <ProgressBar value={0.43} />
<div <div
className="flex justify-center w-16 cursor-pointer hover:text-white" className="flex w-16 cursor-pointer justify-center hover:text-white"
onClick={toggleCreditManager} onClick={toggleCreditManager}
> >
<svg width="14" height="13" viewBox="0 0 14 13" fill="currentColor"> <svg width="14" height="13" viewBox="0 0 14 13" fill="currentColor">

8
components/ProgressBar.tsx
View File

@ -19,16 +19,16 @@ const ProgressBar = ({ value }: Props) => {
const percentageNewValue = `${(newValue * 100).toFixed(0)}%` const percentageNewValue = `${(newValue * 100).toFixed(0)}%`
return ( return (
<div className="relative w-[130px] h-4 bg-black rounded-full z-0"> <div className="relative z-0 h-4 w-[130px] rounded-full bg-black">
<div <div
className="absolute bg-green-500 h-4 rounded-full z-10" className="absolute z-10 h-4 rounded-full bg-green-500"
style={{ width: percentageValue }} style={{ width: percentageValue }}
/> />
<div <div
className="absolute bg-red-500 h-4 rounded-full transition-[width] duration-500" className="absolute h-4 rounded-full bg-red-500 transition-[width] duration-500"
style={{ width: percentageNewValue }} style={{ width: percentageNewValue }}
/> />
<div className="absolute w-full text-xs font-medium text-white flex justify-center items-center gap-x-2 z-20"> <div className="absolute z-20 flex w-full items-center justify-center gap-x-2 text-xs font-medium text-white">
{percentageValue} {percentageValue}
<ArrowRightIcon className="h-3 w-3" /> <ArrowRightIcon className="h-3 w-3" />
{percentageNewValue} {percentageNewValue}

4
components/SearchInput.tsx
View File

@ -10,13 +10,13 @@ const SearchInput = () => (
strokeLinejoin="round" strokeLinejoin="round"
strokeWidth="2" strokeWidth="2"
viewBox="0 0 24 24" viewBox="0 0 24 24"
className="w-6 h-6" className="h-6 w-6"
> >
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg> </svg>
</span> </span>
<input <input
className="py-2 text-sm text-white bg-black/70 rounded-md pl-10 focus:outline-none" className="rounded-md bg-black/70 py-2 pl-10 text-sm text-white focus:outline-none"
placeholder="Search" placeholder="Search"
/> />
</div> </div>

2
components/Spinner.tsx
View File

@ -3,7 +3,7 @@ import React from 'react'
const Spinner = () => { const Spinner = () => {
return ( return (
<svg <svg
className="animate-spin h-8 w-8" className="h-8 w-8 animate-spin"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"

18
components/Wallet.tsx
View File

@ -11,8 +11,8 @@ import { formatWalletAddress } from 'utils/formatters'
import { chain } from 'utils/chains' import { chain } from 'utils/chains'
const WalletPopover = ({ children }: { children: React.ReactNode }) => { const WalletPopover = ({ children }: { children: React.ReactNode }) => {
const address = useWalletStore((state) => state.address) const address = useWalletStore((s) => s.address)
const actions = useWalletStore((state) => state.actions) const actions = useWalletStore((s) => s.actions)
const { data } = useTokenBalance() const { data } = useTokenBalance()
@ -22,14 +22,14 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
{children} {children}
</Popover.Button> </Popover.Button>
<Popover.Panel className="absolute z-10 right-0 pt-2"> <Popover.Panel className="absolute right-0 z-10 pt-2">
<div className="bg-white rounded-2xl p-6 text-gray-900"> <div className="rounded-2xl bg-white p-6 text-gray-900">
<div className="flex justify-between items-center mb-4"> <div className="mb-4 flex items-center justify-between">
<div className="flex items-center"> <div className="flex items-center">
<Image src={chain.stakeCurrency.coinImageUrl} alt="token" width={24} height={24} /> <Image src={chain.stakeCurrency.coinImageUrl} alt="token" width={24} height={24} />
<p className="ml-2"> <p className="ml-2">
{chain.stakeCurrency.coinDenom}{' '} {chain.stakeCurrency.coinDenom}{' '}
<span className="text-lg font-semibold ml-1">{data?.toFixed(2)}</span> <span className="ml-1 text-lg font-semibold">{data?.toFixed(2)}</span>
</p> </p>
</div> </div>
<Button <Button
@ -41,7 +41,7 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
</div> </div>
<p className="mb-6 text-sm">{address}</p> <p className="mb-6 text-sm">{address}</p>
<button <button
className="flex items-center text-slate-500 hover:text-slate-700 text-sm" className="flex items-center text-sm text-slate-500 hover:text-slate-700"
onClick={() => { onClick={() => {
navigator.clipboard.writeText(address).then(() => { navigator.clipboard.writeText(address).then(() => {
toast.success('Address copied to your clipboard') toast.success('Address copied to your clipboard')
@ -53,7 +53,7 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
viewBox="0 0 24 24" viewBox="0 0 24 24"
strokeWidth={1.5} strokeWidth={1.5}
stroke="currentColor" stroke="currentColor"
className="w-5 h-5 mr-1" className="mr-1 h-5 w-5"
> >
<path <path
strokeLinecap="round" strokeLinecap="round"
@ -73,7 +73,7 @@ const Wallet = () => {
const [showConnectModal, setShowConnectModal] = useState(false) const [showConnectModal, setShowConnectModal] = useState(false)
const [hasHydrated, setHasHydrated] = useState<boolean>(false) const [hasHydrated, setHasHydrated] = useState<boolean>(false)
const address = useWalletStore((state) => state.address) const address = useWalletStore((s) => s.address)
// avoid server-client hydration mismatch // avoid server-client hydration mismatch
useEffect(() => { useEffect(() => {

2
hooks/useAllBalances.tsx
View File

@ -9,7 +9,7 @@ type Result = {
} }
const useAllBalances = () => { const useAllBalances = () => {
const address = useWalletStore((state) => state.address) const address = useWalletStore((s) => s.address)
const result = useQuery<Result>( const result = useQuery<Result>(
queryKeys.allBalances(address), queryKeys.allBalances(address),

2
hooks/useAllowedCoins.tsx
View File

@ -15,7 +15,7 @@ const queryMsg = {
const useAllowedCoins = () => { const useAllowedCoins = () => {
const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>() const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
const address = useWalletStore((state) => state.address) const address = useWalletStore((s) => s.address)
useEffect(() => { useEffect(() => {
;(async () => { ;(async () => {

4
hooks/useCreateCreditAccount.tsx
View File

@ -17,8 +17,8 @@ const executeMsg = {
const useCreateCreditAccount = () => { const useCreateCreditAccount = () => {
const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>() const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
const setSelectedAccount = useCreditManagerStore((state) => state.actions.setSelectedAccount) const setSelectedAccount = useCreditManagerStore((s) => s.actions.setSelectedAccount)
const address = useWalletStore((state) => state.address) const address = useWalletStore((s) => s.address)
const queryClient = useQueryClient() const queryClient = useQueryClient()

2
hooks/useCreditAccountPositions.tsx
View File

@ -41,7 +41,7 @@ interface Result {
const useCreditAccountPositions = (accountId: string) => { const useCreditAccountPositions = (accountId: string) => {
const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>() const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
const address = useWalletStore((state) => state.address) const address = useWalletStore((s) => s.address)
useEffect(() => { useEffect(() => {
;(async () => { ;(async () => {

6
hooks/useCreditAccounts.tsx
View File

@ -14,9 +14,9 @@ type Result = {
const useCreditAccounts = () => { const useCreditAccounts = () => {
const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>() const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
const address = useWalletStore((state) => state.address) const address = useWalletStore((s) => s.address)
const selectedAccount = useCreditManagerStore((state) => state.selectedAccount) const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
const creditManagerActions = useCreditManagerStore((state) => state.actions) const creditManagerActions = useCreditManagerStore((s) => s.actions)
const queryMsg = useMemo(() => { const queryMsg = useMemo(() => {
return { return {

2
hooks/useDeleteCreditAccount.tsx
View File

@ -11,7 +11,7 @@ import { queryKeys } from 'types/query-keys-factory'
const useCreateCreditAccount = (accountId: string) => { const useCreateCreditAccount = (accountId: string) => {
const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>() const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
const address = useWalletStore((state) => state.address) const address = useWalletStore((s) => s.address)
const queryClient = useQueryClient() const queryClient = useQueryClient()

2
hooks/useDepositCreditAccount.tsx
View File

@ -11,7 +11,7 @@ import { queryKeys } from 'types/query-keys-factory'
const useDepositCreditAccount = (accountId: string, denom: string, amount: number) => { const useDepositCreditAccount = (accountId: string, denom: string, amount: number) => {
const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>() const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
const address = useWalletStore((state) => state.address) const address = useWalletStore((s) => s.address)
const queryClient = useQueryClient() const queryClient = useQueryClient()

2
hooks/useTokenBalance.tsx
View File

@ -13,7 +13,7 @@ type Result = {
} }
const useTokenBalance = (denom?: string) => { const useTokenBalance = (denom?: string) => {
const address = useWalletStore((state) => state.address) const address = useWalletStore((s) => s.address)
const result = useQuery<Result>( const result = useQuery<Result>(
queryKeys.tokenBalance(address, denom || chain.stakeCurrency.coinMinimalDenom), queryKeys.tokenBalance(address, denom || chain.stakeCurrency.coinMinimalDenom),

2
package.json
View File

@ -36,6 +36,8 @@
"eslint": "8.23.0", "eslint": "8.23.0",
"eslint-config-next": "12.2.5", "eslint-config-next": "12.2.5",
"postcss": "^8.4.16", "postcss": "^8.4.16",
"prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13",
"tailwindcss": "^3.1.8", "tailwindcss": "^3.1.8",
"typescript": "4.8.2" "typescript": "4.8.2"
} }

2
pages/_app.tsx
View File

@ -19,7 +19,7 @@ async function isMetamaskInstalled(): Promise<boolean> {
const queryClient = new QueryClient() const queryClient = new QueryClient()
function MyApp({ Component, pageProps }: AppProps) { function MyApp({ Component, pageProps }: AppProps) {
const actions = useWalletStore((state) => state.actions) const actions = useWalletStore((s) => s.actions)
// init store // init store
useEffect(() => { useEffect(() => {

10
pages/borrow.tsx
View File

@ -5,7 +5,7 @@ import Container from 'components/Container'
const AssetRow = () => { const AssetRow = () => {
return ( return (
<div className="flex bg-[#D8DAEA] text-[#585A74] rounded-md p-2"> <div className="flex rounded-md bg-[#D8DAEA] p-2 text-[#585A74]">
<div className="flex flex-1"> <div className="flex flex-1">
<Image src="/tokens/osmo.svg" alt="token" width={24} height={24} /> <Image src="/tokens/osmo.svg" alt="token" width={24} height={24} />
<div className="pl-2"> <div className="pl-2">
@ -32,8 +32,8 @@ const Borrow = () => {
<div className="flex gap-4"> <div className="flex gap-4">
<Container className="flex-1"> <Container className="flex-1">
<div className="mb-5"> <div className="mb-5">
<h3 className="font-medium uppercase text-center mb-1">Borrowed</h3> <h3 className="mb-1 text-center font-medium uppercase">Borrowed</h3>
<div className="flex bg-[#D8DAEA] text-[#585A74]/50 text-sm rounded-md p-2 mb-2"> <div className="mb-2 flex rounded-md bg-[#D8DAEA] p-2 text-sm text-[#585A74]/50">
<div className="flex-1">Asset</div> <div className="flex-1">Asset</div>
<div className="flex-1">Borrow Rate</div> <div className="flex-1">Borrow Rate</div>
<div className="flex-1">Borrowed</div> <div className="flex-1">Borrowed</div>
@ -48,8 +48,8 @@ const Borrow = () => {
</div> </div>
</div> </div>
<div> <div>
<h3 className="font-medium uppercase text-center mb-1">Not Borrowed Yet</h3> <h3 className="mb-1 text-center font-medium uppercase">Not Borrowed Yet</h3>
<div className="flex bg-[#D8DAEA] text-[#585A74]/50 text-sm rounded-md p-2 mb-2"> <div className="mb-2 flex rounded-md bg-[#D8DAEA] p-2 text-sm text-[#585A74]/50">
<div className="flex-1">Asset</div> <div className="flex-1">Asset</div>
<div className="flex-1">Borrow Rate</div> <div className="flex-1">Borrow Rate</div>
<div className="flex-1">Borrowed</div> <div className="flex-1">Borrowed</div>

30
pages/index.tsx
View File

@ -31,8 +31,8 @@ const Home: NextPage = () => {
const [error, setError] = useState(null) const [error, setError] = useState(null)
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const address = useWalletStore((state) => state.address) const address = useWalletStore((s) => s.address)
const selectedAccount = useCreditManagerStore((state) => state.selectedAccount) const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
const queryClient = useQueryClient() const queryClient = useQueryClient()
const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>() const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
@ -248,14 +248,14 @@ const Home: NextPage = () => {
} }
return ( return (
<div className="flex flex-col gap-y-6 max-w-6xl mx-auto"> <div className="mx-auto flex max-w-6xl flex-col gap-y-6">
<Container> <Container>
<h4 className="text-xl mb-5">Send Tokens</h4> <h4 className="mb-5 text-xl">Send Tokens</h4>
<div className="flex flex-wrap gap-2 mb-5"> <div className="mb-5 flex flex-wrap gap-2">
<div> <div>
<p>Address:</p> <p>Address:</p>
<input <input
className="rounded-lg px-3 py-1 bg-black/40" className="rounded-lg bg-black/40 px-3 py-1"
value={recipientAddress} value={recipientAddress}
placeholder="address" placeholder="address"
onChange={(e) => setRecipientAddress(e.target.value)} onChange={(e) => setRecipientAddress(e.target.value)}
@ -265,7 +265,7 @@ const Home: NextPage = () => {
<p>Amount:</p> <p>Amount:</p>
<input <input
type="number" type="number"
className="rounded-lg px-3 py-1 bg-black/40" className="rounded-lg bg-black/40 px-3 py-1"
value={sendAmount} value={sendAmount}
placeholder="amount" placeholder="amount"
onChange={(e) => setSendAmount(e.target.value)} onChange={(e) => setSendAmount(e.target.value)}
@ -277,25 +277,25 @@ const Home: NextPage = () => {
</Button> </Button>
</Container> </Container>
<Container> <Container>
<h4 className="text-xl mb-5">Create Credit Account (Mint NFT)</h4> <h4 className="mb-5 text-xl">Create Credit Account (Mint NFT)</h4>
<Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleCreateCreditAccount}> <Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleCreateCreditAccount}>
Create Create
</Button> </Button>
</Container> </Container>
<Container> <Container>
<h4 className="text-xl mb-5">Get all Credit Accounts</h4> <h4 className="mb-5 text-xl">Get all Credit Accounts</h4>
<Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleGetCreditAccounts}> <Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleGetCreditAccounts}>
Fetch Fetch
</Button> </Button>
</Container> </Container>
<Container> <Container>
<h4 className="text-xl mb-5">Borrow OSMO</h4> <h4 className="mb-5 text-xl">Borrow OSMO</h4>
<input <input
className="rounded-lg px-3 py-1 bg-black/40" className="rounded-lg bg-black/40 px-3 py-1"
type="number" type="number"
onChange={(e) => setBorrowAmount(e.target.valueAsNumber)} onChange={(e) => setBorrowAmount(e.target.valueAsNumber)}
/> />
<Button className="bg-[#524bb1] hover:bg-[#6962cc] ml-4" onClick={handleBorrowClick}> <Button className="ml-4 bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleBorrowClick}>
Borrow Borrow
</Button> </Button>
</Container> </Container>
@ -305,7 +305,7 @@ const Home: NextPage = () => {
<div className="mb-4"> <div className="mb-4">
<div className="flex items-end"> <div className="flex items-end">
<h5 className="text-xl font-medium">All Tokens</h5> <h5 className="text-xl font-medium">All Tokens</h5>
<p className="text-sm ml-2">- {allTokens.length} total</p> <p className="ml-2 text-sm">- {allTokens.length} total</p>
</div> </div>
{allTokens.map((token) => ( {allTokens.map((token) => (
<p key={token}>{token}</p> <p key={token}>{token}</p>
@ -316,7 +316,7 @@ const Home: NextPage = () => {
<> <>
<div className="flex items-end"> <div className="flex items-end">
<h5 className="text-xl font-medium">Your Tokens</h5> <h5 className="text-xl font-medium">Your Tokens</h5>
<p className="text-sm ml-2">- {walletTokens.length} total</p> <p className="ml-2 text-sm">- {walletTokens.length} total</p>
</div> </div>
{walletTokens.map((token) => ( {walletTokens.map((token) => (
<p key={token}>{token}</p> <p key={token}>{token}</p>
@ -324,7 +324,7 @@ const Home: NextPage = () => {
</> </>
)} )}
</div> </div>
{error && <div className="bg-white p-4 text-red-500 mt-8">{error}</div>} {error && <div className="mt-8 bg-white p-4 text-red-500">{error}</div>}
{isLoading && ( {isLoading && (
<div> <div>
<Spinner /> <Spinner />

2
pages/trade.tsx
View File

@ -4,7 +4,7 @@ import Container from 'components/Container'
const Trade = () => { const Trade = () => {
return ( return (
<div> <div>
<div className="flex gap-4 mb-4"> <div className="mb-4 flex gap-4">
<Container className="flex-1">Graph/Tradingview Module</Container> <Container className="flex-1">Graph/Tradingview Module</Container>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<Container>Buy/Sell module</Container> <Container>Buy/Sell module</Container>

10
yarn.lock
View File

@ -4176,6 +4176,16 @@ prelude-ls@^1.2.1:
resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz" resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prettier-plugin-tailwindcss@^0.1.13:
version "0.1.13"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.13.tgz#ca1071361dc7e2ed5d95a2ee36825ce45f814942"
integrity sha512-/EKQURUrxLu66CMUg4+1LwGdxnz8of7IDvrSLqEtDqhLH61SAlNNUSr90UTvZaemujgl3OH/VHg+fyGltrNixw==
prettier@^2.7.1:
version "2.7.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
process-nextick-args@~2.0.0: process-nextick-args@~2.0.0:
version "2.0.1" version "2.0.1"
resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz" resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"