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
ref={ref}
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={disabled}

16
components/ConnectModal.tsx
View File

@ -19,8 +19,8 @@ type Props = {
const ConnectModal = ({ isOpen, onClose }: Props) => {
const [isLoading, setIsLoading] = useState(false)
const actions = useWalletStore((state) => state.actions)
const metamaskInstalled = useWalletStore((state) => state.metamaskInstalled)
const actions = useWalletStore((s) => s.actions)
const metamaskInstalled = useWalletStore((s) => s.metamaskInstalled)
const isKeplrInstalled = typeof window !== 'undefined' && window.keplr
const handleConnectSuccess = () => {
@ -108,13 +108,13 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
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.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
</Dialog.Title>
{isLoading ? (
<div role="status" className="text-center">
<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"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -131,10 +131,12 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
<span className="sr-only">Loading...</span>
</div>
) : (
<div className="flex flex-col gap-3 mt-2">
<div className="mt-2 flex flex-col gap-3">
<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}
// temporarily disable metamask connection as its not supported on osmosis
disabled
>
<Image src="/wallets/metamask.webp" height={30} width={30} alt="metamask" />
<div className="ml-4 text-left">
@ -156,7 +158,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
</div>
</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}
>
<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
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

14
components/CreditManager/FundAccount.tsx
View File

@ -16,7 +16,7 @@ const FundAccount = () => {
const [selectedToken, setSelectedToken] = useState('')
const [enabled, setEnabled] = useState(false)
const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
const { data: balancesData } = useAllBalances()
const { data: allowedCoinsData, isLoading: isLoadingAllowedCoins } = useAllowedCoins()
@ -57,7 +57,7 @@ const FundAccount = () => {
return (
<>
<CreditManagerContainer className="p-3 mb-2">
<CreditManagerContainer className="mb-2 p-3">
<p className="mb-6">
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
@ -68,7 +68,7 @@ const FundAccount = () => {
) : (
<>
<div className="mb-4">
<div className="flex justify-between mb-1">
<div className="mb-1 flex justify-between">
<div>Asset:</div>
<select
className="bg-transparent"
@ -89,7 +89,7 @@ const FundAccount = () => {
<div>Amount:</div>
<input
type="number"
className="bg-transparent border border-black/50 px-2"
className="border border-black/50 bg-transparent px-2"
value={amount}
onChange={(e) => handleValueChange(e.target.valueAsNumber)}
/>
@ -98,7 +98,7 @@ const FundAccount = () => {
<p>In wallet: {walletAmount.toLocaleString()}</p>
{/* SLIDER - initial implementation to test functionality */}
{/* 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
className="relative flex h-[20px] w-full cursor-pointer touch-none select-none items-center"
value={[percentageValue]}
@ -122,7 +122,7 @@ const FundAccount = () => {
</Slider.Thumb>
</Slider.Root>
<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)}
>
MAX
@ -131,7 +131,7 @@ const FundAccount = () => {
</>
)}
</CreditManagerContainer>
<CreditManagerContainer className="flex justify-between items-center mb-2">
<CreditManagerContainer className="mb-2 flex items-center justify-between">
<div>
<h3 className="font-bold">Lending Assets</h3>
<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 [isFund, setIsFund] = useState(false)
const address = useWalletStore((state) => state.address)
const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
const address = useWalletStore((s) => s.address)
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountBalances(
selectedAccount ?? ''
@ -32,17 +32,17 @@ const CreditManager = () => {
if (!address) {
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>
</div>
)
}
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">
{isFund ? (
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<h3 className="font-bold">Fund Account</h3>
<Button className="rounded-md" onClick={() => setIsFund(false)}>
Cancel
@ -50,10 +50,10 @@ const CreditManager = () => {
</div>
) : (
<div className="flex gap-3">
<Button className="rounded-md flex-1" onClick={() => setIsFund(true)}>
<Button className="flex-1 rounded-md" onClick={() => setIsFund(true)}>
Fund
</Button>
<Button className="rounded-md flex-1" onClick={() => alert('TODO')}>
<Button className="flex-1 rounded-md" onClick={() => alert('TODO')}>
Withdraw
</Button>
</div>
@ -64,7 +64,7 @@ const CreditManager = () => {
) : (
<>
<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 className="font-semibold">{formatCurrency(totalPosition)}</div>
</div>
@ -79,7 +79,7 @@ const CreditManager = () => {
<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">Value</div>
<div className="flex-1">Size</div>

24
components/Navigation.tsx
View File

@ -58,13 +58,13 @@ const Navigation = () => {
return (
<div>
{/* 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>
<a>
<img src="/logo.svg" alt="mars" />
</a>
</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) => (
<NavLink key={index} href={item.href}>
{item.label}
@ -74,13 +74,13 @@ const Navigation = () => {
<Wallet />
</div>
{/* 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">
<SearchInput />
{firstCreditAccounts.map((account) => (
<div
key={account}
className={`px-4 hover:text-white cursor-pointer ${
className={`cursor-pointer px-4 hover:text-white ${
selectedAccount === account ? 'text-white' : ''
}`}
onClick={() => setSelectedAccount(account)}
@ -91,13 +91,13 @@ const Navigation = () => {
{restCreditAccounts.length > 0 && (
<Popover className="relative">
<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
<ChevronDownIcon className="ml-1 h-4 w-4" />
</div>
</Popover.Button>
<Popover.Panel className="absolute z-10 pt-2 w-[200px]">
<div className="bg-white rounded-2xl p-4 text-gray-900">
<Popover.Panel className="absolute z-10 w-[200px] pt-2">
<div className="rounded-2xl bg-white p-4 text-gray-900">
{restCreditAccounts.map((account) => (
<div
key={account}
@ -115,14 +115,14 @@ const Navigation = () => {
)}
<Popover className="relative">
<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
<ChevronDownIcon className="ml-1 h-4 w-4" />
</div>
</Popover.Button>
<Popover.Panel className="absolute z-10 pt-2 w-[200px]">
<Popover.Panel className="absolute z-10 w-[200px] pt-2">
{({ close }) => (
<div className="bg-white rounded-2xl p-4 text-gray-900">
<div className="rounded-2xl bg-white p-4 text-gray-900">
<div
className="mb-2 cursor-pointer hover:text-orange-500"
onClick={() => {
@ -158,13 +158,13 @@ const Navigation = () => {
</Popover.Panel>
</Popover>
</div>
<div className="flex gap-4 items-center">
<div className="flex items-center gap-4">
<p>{formatCurrency(2500)}</p>
<div>Lvg</div>
<div>Risk</div>
<ProgressBar value={0.43} />
<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}
>
<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)}%`
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
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 }}
/>
<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 }}
/>
<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}
<ArrowRightIcon className="h-3 w-3" />
{percentageNewValue}

4
components/SearchInput.tsx
View File

@ -10,13 +10,13 @@ const SearchInput = () => (
strokeLinejoin="round"
strokeWidth="2"
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>
</svg>
</span>
<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"
/>
</div>

2
components/Spinner.tsx
View File

@ -3,7 +3,7 @@ import React from 'react'
const Spinner = () => {
return (
<svg
className="animate-spin h-8 w-8"
className="h-8 w-8 animate-spin"
xmlns="http://www.w3.org/2000/svg"
fill="none"
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'
const WalletPopover = ({ children }: { children: React.ReactNode }) => {
const address = useWalletStore((state) => state.address)
const actions = useWalletStore((state) => state.actions)
const address = useWalletStore((s) => s.address)
const actions = useWalletStore((s) => s.actions)
const { data } = useTokenBalance()
@ -22,14 +22,14 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
{children}
</Popover.Button>
<Popover.Panel className="absolute z-10 right-0 pt-2">
<div className="bg-white rounded-2xl p-6 text-gray-900">
<div className="flex justify-between items-center mb-4">
<Popover.Panel className="absolute right-0 z-10 pt-2">
<div className="rounded-2xl bg-white p-6 text-gray-900">
<div className="mb-4 flex items-center justify-between">
<div className="flex items-center">
<Image src={chain.stakeCurrency.coinImageUrl} alt="token" width={24} height={24} />
<p className="ml-2">
{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>
</div>
<Button
@ -41,7 +41,7 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
</div>
<p className="mb-6 text-sm">{address}</p>
<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={() => {
navigator.clipboard.writeText(address).then(() => {
toast.success('Address copied to your clipboard')
@ -53,7 +53,7 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5 mr-1"
className="mr-1 h-5 w-5"
>
<path
strokeLinecap="round"
@ -73,7 +73,7 @@ const Wallet = () => {
const [showConnectModal, setShowConnectModal] = useState(false)
const [hasHydrated, setHasHydrated] = useState<boolean>(false)
const address = useWalletStore((state) => state.address)
const address = useWalletStore((s) => s.address)
// avoid server-client hydration mismatch
useEffect(() => {

2
hooks/useAllBalances.tsx
View File

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

2
hooks/useAllowedCoins.tsx
View File

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

4
hooks/useCreateCreditAccount.tsx
View File

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

2
hooks/useCreditAccountPositions.tsx
View File

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

6
hooks/useCreditAccounts.tsx
View File

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

2
hooks/useDeleteCreditAccount.tsx
View File

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

2
hooks/useTokenBalance.tsx
View File

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

2
package.json
View File

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

2
pages/_app.tsx
View File

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

10
pages/borrow.tsx
View File

@ -5,7 +5,7 @@ import Container from 'components/Container'
const AssetRow = () => {
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">
<Image src="/tokens/osmo.svg" alt="token" width={24} height={24} />
<div className="pl-2">
@ -32,8 +32,8 @@ const Borrow = () => {
<div className="flex gap-4">
<Container className="flex-1">
<div className="mb-5">
<h3 className="font-medium uppercase text-center mb-1">Borrowed</h3>
<div className="flex bg-[#D8DAEA] text-[#585A74]/50 text-sm rounded-md p-2 mb-2">
<h3 className="mb-1 text-center font-medium uppercase">Borrowed</h3>
<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">Borrow Rate</div>
<div className="flex-1">Borrowed</div>
@ -48,8 +48,8 @@ const Borrow = () => {
</div>
</div>
<div>
<h3 className="font-medium uppercase text-center mb-1">Not Borrowed Yet</h3>
<div className="flex bg-[#D8DAEA] text-[#585A74]/50 text-sm rounded-md p-2 mb-2">
<h3 className="mb-1 text-center font-medium uppercase">Not Borrowed Yet</h3>
<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">Borrow Rate</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 [isLoading, setIsLoading] = useState(false)
const address = useWalletStore((state) => state.address)
const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
const address = useWalletStore((s) => s.address)
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
const queryClient = useQueryClient()
const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
@ -248,14 +248,14 @@ const Home: NextPage = () => {
}
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>
<h4 className="text-xl mb-5">Send Tokens</h4>
<div className="flex flex-wrap gap-2 mb-5">
<h4 className="mb-5 text-xl">Send Tokens</h4>
<div className="mb-5 flex flex-wrap gap-2">
<div>
<p>Address:</p>
<input
className="rounded-lg px-3 py-1 bg-black/40"
className="rounded-lg bg-black/40 px-3 py-1"
value={recipientAddress}
placeholder="address"
onChange={(e) => setRecipientAddress(e.target.value)}
@ -265,7 +265,7 @@ const Home: NextPage = () => {
<p>Amount:</p>
<input
type="number"
className="rounded-lg px-3 py-1 bg-black/40"
className="rounded-lg bg-black/40 px-3 py-1"
value={sendAmount}
placeholder="amount"
onChange={(e) => setSendAmount(e.target.value)}
@ -277,25 +277,25 @@ const Home: NextPage = () => {
</Button>
</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}>
Create
</Button>
</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}>
Fetch
</Button>
</Container>
<Container>
<h4 className="text-xl mb-5">Borrow OSMO</h4>
<h4 className="mb-5 text-xl">Borrow OSMO</h4>
<input
className="rounded-lg px-3 py-1 bg-black/40"
className="rounded-lg bg-black/40 px-3 py-1"
type="number"
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
</Button>
</Container>
@ -305,7 +305,7 @@ const Home: NextPage = () => {
<div className="mb-4">
<div className="flex items-end">
<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>
{allTokens.map((token) => (
<p key={token}>{token}</p>
@ -316,7 +316,7 @@ const Home: NextPage = () => {
<>
<div className="flex items-end">
<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>
{walletTokens.map((token) => (
<p key={token}>{token}</p>
@ -324,7 +324,7 @@ const Home: NextPage = () => {
</>
)}
</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 && (
<div>
<Spinner />

2
pages/trade.tsx
View File

@ -4,7 +4,7 @@ import Container from 'components/Container'
const Trade = () => {
return (
<div>
<div className="flex gap-4 mb-4">
<div className="mb-4 flex gap-4">
<Container className="flex-1">Graph/Tradingview Module</Container>
<div className="flex flex-col gap-4">
<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"
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:
version "2.0.1"
resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"