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

Linter and prettier adjustments (#50)

Browse Source 
* tidy: added eslintrc and prettierrc rules

* tidy: formated the files via ‚yarn format‘

* import sort improvements

* format script regex fix

* replace eslint import severity to warning

* remove staged file

Co-authored-by: Gustavo Mauricio <gustavo.mauricio58@gmail.com>
This commit is contained in:
Linkie Link 2022-11-09 10:04:06 +01:00 committed by GitHub
parent 8bde02c2e9
commit 27cdd1c954
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
74 changed files with 839 additions and 787 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.eslintrc.json
View File

@ -1,3 +1,19 @@
{ {
"extends": "next/core-web-vitals" "extends": "next/core-web-vitals",
"rules": {
"sort-imports": [
"warn",
{
"ignoreCase": true,
"ignoreDeclarationSort": true
}
],
"import/order": [
"warn",
{
"newlines-between": "always",
"groups": ["external", "builtin", "internal", "sibling", "parent", "index"]
}
]
}
} }

8
.github/dependabot.yml vendored
View File

@ -5,8 +5,8 @@
version: 2 version: 2
updates: updates:
- package-ecosystem: "npm" # See documentation for possible values - package-ecosystem: 'npm' # See documentation for possible values
directory: "/" # Location of package manifests directory: '/' # Location of package manifests
schedule: schedule:
interval: "weekly" interval: 'weekly'
target-branch: "develop" target-branch: 'develop'

4
.prettierrc
View File

@ -1,5 +1,7 @@
{ {
"singleQuote": true, "singleQuote": true,
"jsxSingleQuote": true,
"semi": false, "semi": false,
"printWidth": 100 "printWidth": 100,
"trailingComma": "all"
} }

30
components/Borrow/AssetRow.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid' import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid'
import Image from 'next/image' import Image from 'next/image'
import React, { useState } from 'react'
import Button from 'components/Button' import Button from 'components/Button'
import { formatCurrency } from 'utils/formatters' import { formatCurrency } from 'utils/formatters'
@ -27,39 +27,39 @@ const AssetRow = ({ data, onBorrowClick, onRepayClick }: AssetRowProps) => {
return ( return (
<div <div
className="cursor-pointer rounded-md px-4 py-2 hover:bg-black/30" className='cursor-pointer rounded-md px-4 py-2 hover:bg-black/30'
onClick={() => setIsExpanded((current) => !current)} onClick={() => setIsExpanded((current) => !current)}
> >
<div className="flex"> <div className='flex'>
<div className="flex flex-1 items-center"> <div className='flex flex-1 items-center'>
<Image src={data.icon} alt="token" width={32} height={32} /> <Image src={data.icon} alt='token' width={32} height={32} />
<div className="pl-2"> <div className='pl-2'>
<div>{data.symbol}</div> <div>{data.symbol}</div>
<div className="text-xs">{data.chain}</div> <div className='text-xs'>{data.chain}</div>
</div> </div>
</div> </div>
<div className="flex flex-1 items-center text-xs"> <div className='flex flex-1 items-center text-xs'>
{data.borrowRate ? `${(data.borrowRate * 100).toFixed(2)}%` : '-'} {data.borrowRate ? `${(data.borrowRate * 100).toFixed(2)}%` : '-'}
</div> </div>
<div className="flex flex-1 items-center text-xs"> <div className='flex flex-1 items-center text-xs'>
{data.borrowed ? ( {data.borrowed ? (
<div> <div>
<div className="font-bold">{data.borrowed.amount}</div> <div className='font-bold'>{data.borrowed.amount}</div>
<div>{formatCurrency(data.borrowed.value)}</div> <div>{formatCurrency(data.borrowed.value)}</div>
</div> </div>
) : ( ) : (
'-' '-'
)} )}
</div> </div>
<div className="flex flex-1 items-center text-xs">{data.marketLiquidity}</div> <div className='flex flex-1 items-center text-xs'>{data.marketLiquidity}</div>
<div className="flex w-[50px] items-center justify-end"> <div className='flex w-[50px] items-center justify-end'>
{isExpanded ? <ChevronUpIcon className="w-5" /> : <ChevronDownIcon className="w-5" />} {isExpanded ? <ChevronUpIcon className='w-5' /> : <ChevronDownIcon className='w-5' />}
</div> </div>
</div> </div>
{isExpanded && ( {isExpanded && (
<div className="flex items-center justify-between"> <div className='flex items-center justify-between'>
<div>Additional Stuff Placeholder</div> <div>Additional Stuff Placeholder</div>
<div className="flex gap-2"> <div className='flex gap-2'>
<Button <Button
onClick={(e: React.MouseEvent<HTMLButtonElement>) => { onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation() e.stopPropagation()

35
components/Borrow/BorrowTable.tsx
View File

@ -1,5 +1,4 @@
import React from 'react' import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid'
import Image from 'next/image'
import { import {
ColumnDef, ColumnDef,
flexRender, flexRender,
@ -8,9 +7,11 @@ import {
SortingState, SortingState,
useReactTable, useReactTable,
} from '@tanstack/react-table' } from '@tanstack/react-table'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid' import Image from 'next/image'
import React from 'react'
import { formatCurrency } from 'utils/formatters' import { formatCurrency } from 'utils/formatters'
import AssetRow from './AssetRow' import AssetRow from './AssetRow'
interface Market { interface Market {
@ -77,11 +78,11 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
header: 'Asset', header: 'Asset',
id: 'symbol', id: 'symbol',
accessorFn: (row) => ( accessorFn: (row) => (
<div className="flex flex-1 items-center"> <div className='flex flex-1 items-center'>
<Image src={row.icon} alt="token" width={32} height={32} /> <Image src={row.icon} alt='token' width={32} height={32} />
<div className="pl-2"> <div className='pl-2'>
<div>{row.symbol}</div> <div>{row.symbol}</div>
<div className="text-xs">{row.chain}</div> <div className='text-xs'>{row.chain}</div>
</div> </div>
</div> </div>
), ),
@ -91,7 +92,7 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
accessorKey: 'borrowRate', accessorKey: 'borrowRate',
header: 'Borrow Rate', header: 'Borrow Rate',
accessorFn: (row) => ( accessorFn: (row) => (
<div className="flex flex-1 items-center text-xs"> <div className='flex flex-1 items-center text-xs'>
{row.borrowRate ? `${(row.borrowRate * 100).toFixed(2)}%` : '-'} {row.borrowRate ? `${(row.borrowRate * 100).toFixed(2)}%` : '-'}
</div> </div>
), ),
@ -101,10 +102,10 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
accessorKey: 'age', accessorKey: 'age',
header: 'Borrowed', header: 'Borrowed',
accessorFn: (row) => ( accessorFn: (row) => (
<div className="flex flex-1 items-center text-xs"> <div className='flex flex-1 items-center text-xs'>
{row.borrowed ? ( {row.borrowed ? (
<div> <div>
<div className="font-bold">{row.borrowed.amount}</div> <div className='font-bold'>{row.borrowed.amount}</div>
<div>{formatCurrency(row.borrowed.value)}</div> <div>{formatCurrency(row.borrowed.value)}</div>
</div> </div>
) : ( ) : (
@ -124,17 +125,17 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
header: 'Manage', header: 'Manage',
width: 150, width: 150,
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex items-center justify-end"> <div className='flex items-center justify-end'>
{row.getIsExpanded() ? ( {row.getIsExpanded() ? (
<ChevronUpIcon className="w-5" /> <ChevronUpIcon className='w-5' />
) : ( ) : (
<ChevronDownIcon className="w-5" /> <ChevronDownIcon className='w-5' />
)} )}
</div> </div>
), ),
}, },
], ],
[] [],
) )
const table = useReactTable({ const table = useReactTable({
@ -150,9 +151,9 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
}) })
return ( return (
<div className="w-full table-fixed border-spacing-10 text-sm"> <div className='w-full table-fixed border-spacing-10 text-sm'>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<div key={headerGroup.id} className="mb-2 flex rounded-md px-4 py-2 text-xs"> <div key={headerGroup.id} className='mb-2 flex rounded-md px-4 py-2 text-xs'>
{headerGroup.headers.map((header) => { {headerGroup.headers.map((header) => {
return ( return (
<div key={header.id} className={`${header.index === 4 ? 'w-[50px]' : 'flex-1'}`}> <div key={header.id} className={`${header.index === 4 ? 'w-[50px]' : 'flex-1'}`}>
@ -175,7 +176,7 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
})} })}
</div> </div>
))} ))}
<div className="flex flex-col gap-2"> <div className='flex flex-col gap-2'>
{table.getRowModel().rows.length === 0 ? ( {table.getRowModel().rows.length === 0 ? (
<div>No Data</div> <div>No Data</div>
) : ( ) : (

103
components/BorrowModal.tsx
View File

@ -1,22 +1,23 @@
import React, { useMemo, useState } from 'react' import { Dialog, Switch, Transition } from '@headlessui/react'
import Image from 'next/image'
import { Transition, Dialog, Switch } from '@headlessui/react'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import { toast } from 'react-toastify' import Image from 'next/image'
import React, { useMemo, useState } from 'react'
import { NumericFormat } from 'react-number-format' import { NumericFormat } from 'react-number-format'
import { toast } from 'react-toastify'
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
import ContainerSecondary from './ContainerSecondary'
import Button from './Button'
import Spinner from './Spinner'
import useAllBalances from 'hooks/useAllBalances'
import Slider from 'components/Slider' import Slider from 'components/Slider'
import useBorrowFunds from 'hooks/mutations/useBorrowFunds' import useBorrowFunds from 'hooks/mutations/useBorrowFunds'
import useTokenPrices from 'hooks/useTokenPrices' import useAllBalances from 'hooks/useAllBalances'
import useMarkets from 'hooks/useMarkets'
import useCalculateMaxBorrowAmount from 'hooks/useCalculateMaxBorrowAmount' import useCalculateMaxBorrowAmount from 'hooks/useCalculateMaxBorrowAmount'
import Tooltip from './Tooltip' import useMarkets from 'hooks/useMarkets'
import useTokenPrices from 'hooks/useTokenPrices'
import { formatCurrency } from 'utils/formatters' import { formatCurrency } from 'utils/formatters'
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
import Button from './Button'
import ContainerSecondary from './ContainerSecondary'
import Spinner from './Spinner'
import Tooltip from './Tooltip'
type Props = { type Props = {
show: boolean show: boolean
@ -41,7 +42,7 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
onClose() onClose()
toast.success(`${amount} ${tokenSymbol} successfully Borrowed`) toast.success(`${amount} ${tokenSymbol} successfully Borrowed`)
}, },
} },
) )
const { data: tokenPrices } = useTokenPrices() const { data: tokenPrices } = useTokenPrices()
@ -95,72 +96,72 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
return ( return (
<Transition appear show={show} as={React.Fragment}> <Transition appear show={show} as={React.Fragment}>
<Dialog as="div" className="relative z-10" onClose={onClose}> <Dialog as='div' className='relative z-10' onClose={onClose}>
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0" enterFrom='opacity-0'
enterTo="opacity-100" enterTo='opacity-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100" leaveFrom='opacity-100'
leaveTo="opacity-0" leaveTo='opacity-0'
> >
<div className="fixed inset-0 bg-black bg-opacity-80" /> <div className='fixed inset-0 bg-black bg-opacity-80' />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 overflow-y-auto"> <div className='fixed inset-0 overflow-y-auto'>
<div className="flex min-h-full items-center justify-center p-4"> <div className='flex min-h-full items-center justify-center p-4'>
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0 scale-95" enterFrom='opacity-0 scale-95'
enterTo="opacity-100 scale-100" enterTo='opacity-100 scale-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100 scale-100" leaveFrom='opacity-100 scale-100'
leaveTo="opacity-0 scale-95" leaveTo='opacity-0 scale-95'
> >
<Dialog.Panel className="flex min-h-[520px] w-full max-w-3xl transform overflow-hidden rounded-2xl bg-[#585A74] align-middle shadow-xl transition-all"> <Dialog.Panel className='flex min-h-[520px] w-full max-w-3xl transform overflow-hidden rounded-2xl bg-[#585A74] align-middle shadow-xl transition-all'>
{isLoading && ( {isLoading && (
<div className="absolute inset-0 z-40 grid place-items-center bg-black/50"> <div className='absolute inset-0 z-40 grid place-items-center bg-black/50'>
<Spinner /> <Spinner />
</div> </div>
)} )}
<div className="flex flex-1 flex-col items-start justify-between bg-[#4A4C60] p-6"> <div className='flex flex-1 flex-col items-start justify-between bg-[#4A4C60] p-6'>
<div> <div>
<p className="text-bold mb-3 text-xs uppercase text-white/50">About</p> <p className='text-bold mb-3 text-xs uppercase text-white/50'>About</p>
<h4 className="mb-4 text-xl leading-8"> <h4 className='mb-4 text-xl leading-8'>
Bringing the next generation of video creation to the Metaverse. Bringing the next generation of video creation to the Metaverse.
<br /> <br />
Powered by deep-learning. Powered by deep-learning.
</h4> </h4>
</div> </div>
<Image src="/logo.svg" alt="mars" width={150} height={50} /> <Image src='/logo.svg' alt='mars' width={150} height={50} />
</div> </div>
<div className="flex flex-1 flex-col p-4"> <div className='flex flex-1 flex-col p-4'>
<Dialog.Title as="h3" className="mb-4 text-center font-medium"> <Dialog.Title as='h3' className='mb-4 text-center font-medium'>
Borrow {tokenSymbol} Borrow {tokenSymbol}
</Dialog.Title> </Dialog.Title>
<div className="mb-4 flex flex-col gap-2 text-sm"> <div className='mb-4 flex flex-col gap-2 text-sm'>
<ContainerSecondary> <ContainerSecondary>
<p className="mb-1"> <p className='mb-1'>
In wallet: {walletAmount.toLocaleString()} {tokenSymbol} In wallet: {walletAmount.toLocaleString()} {tokenSymbol}
</p> </p>
<p className="mb-5">Borrow Rate: {(borrowRate * 100).toFixed(2)}%</p> <p className='mb-5'>Borrow Rate: {(borrowRate * 100).toFixed(2)}%</p>
<div className="mb-7"> <div className='mb-7'>
<p className="mb-2 font-semibold uppercase tracking-widest">Amount</p> <p className='mb-2 font-semibold uppercase tracking-widest'>Amount</p>
<NumericFormat <NumericFormat
className="mb-2 h-[32px] w-full rounded-lg border border-black/50 bg-transparent px-2" className='mb-2 h-[32px] w-full rounded-lg border border-black/50 bg-transparent px-2'
value={amount} value={amount}
placeholder="0" placeholder='0'
allowNegative={false} allowNegative={false}
onValueChange={(v) => handleValueChange(v.floatValue || 0)} onValueChange={(v) => handleValueChange(v.floatValue || 0)}
suffix={` ${tokenSymbol}`} suffix={` ${tokenSymbol}`}
decimalScale={getTokenDecimals(tokenDenom)} decimalScale={getTokenDecimals(tokenDenom)}
/> />
<div className="flex justify-between text-xs tracking-widest"> <div className='flex justify-between text-xs tracking-widest'>
<div> <div>
1 {tokenSymbol} = {formatCurrency(tokenPrice)} 1 {tokenSymbol} = {formatCurrency(tokenPrice)}
</div> </div>
@ -168,20 +169,20 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
</div> </div>
</div> </div>
<Slider <Slider
className="mb-6" className='mb-6'
value={percentageValue} value={percentageValue}
onChange={handleSliderValueChange} onChange={handleSliderValueChange}
onMaxClick={() => setAmount(maxValue)} onMaxClick={() => setAmount(maxValue)}
/> />
</ContainerSecondary> </ContainerSecondary>
<ContainerSecondary className="flex items-center justify-between"> <ContainerSecondary className='flex items-center justify-between'>
<div className="flex"> <div className='flex'>
Borrow to Credit Account{' '} Borrow to Credit Account{' '}
<Tooltip <Tooltip
className="ml-2" className='ml-2'
content={ content={
<> <>
<p className="mb-2"> <p className='mb-2'>
OFF = Borrow directly into your wallet by using your account Assets OFF = Borrow directly into your wallet by using your account Assets
as collateral. The borrowed asset will become a liability in your as collateral. The borrowed asset will become a liability in your
account. account.
@ -211,7 +212,7 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
</ContainerSecondary> </ContainerSecondary>
</div> </div>
<Button <Button
className="mt-auto w-full rounded-3xl" className='mt-auto w-full rounded-3xl'
onClick={handleSubmit} onClick={handleSubmit}
disabled={amount === 0 || !amount} disabled={amount === 0 || !amount}
> >

2
components/Button.tsx
View File

@ -19,7 +19,7 @@ const Button = React.forwardRef<any, Props>(
> >
{children} {children}
</button> </button>
) ),
) )
Button.displayName = 'Button' Button.displayName = 'Button'

96
components/ConnectModal.tsx
View File

@ -1,15 +1,15 @@
import React, { Fragment, useState } from 'react'
import Image from 'next/image'
import { Dialog, Transition } from '@headlessui/react'
import { toast } from 'react-toastify'
import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate' import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
import { Coin } from '@cosmjs/stargate' import { Coin } from '@cosmjs/stargate'
import { Dialog, Transition } from '@headlessui/react'
import Image from 'next/image'
import React, { Fragment, useState } from 'react'
import { toast } from 'react-toastify'
import { getInjectiveAddress } from 'utils/address'
import { getExperimentalChainConfigBasedOnChainId } from 'utils/experimental-chains'
import { ChainId, Wallet } from 'types'
import useWalletStore from 'stores/useWalletStore' import useWalletStore from 'stores/useWalletStore'
import { ChainId, Wallet } from 'types'
import { getInjectiveAddress } from 'utils/address'
import { chain } from 'utils/chains' import { chain } from 'utils/chains'
import { getExperimentalChainConfigBasedOnChainId } from 'utils/experimental-chains'
type Props = { type Props = {
isOpen: boolean isOpen: boolean
@ -83,68 +83,68 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
return ( return (
<Transition appear show={isOpen} as={Fragment}> <Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={onClose}> <Dialog as='div' className='relative z-10' onClose={onClose}>
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0" enterFrom='opacity-0'
enterTo="opacity-100" enterTo='opacity-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100" leaveFrom='opacity-100'
leaveTo="opacity-0" leaveTo='opacity-0'
> >
<div className="fixed inset-0 bg-black bg-opacity-40" /> <div className='fixed inset-0 bg-black bg-opacity-40' />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 overflow-y-auto"> <div className='fixed inset-0 overflow-y-auto'>
<div className="flex min-h-full items-center justify-center p-4 text-center"> <div className='flex min-h-full items-center justify-center p-4 text-center'>
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0 scale-95" enterFrom='opacity-0 scale-95'
enterTo="opacity-100 scale-100" enterTo='opacity-100 scale-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100 scale-100" leaveFrom='opacity-100 scale-100'
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="mb-6 text-lg font-medium leading-6 text-gray-900"> <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 h-10 w-10 animate-spin fill-orange-500 text-gray-200" 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'
> >
<path <path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" d='M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z'
fill="currentColor" fill='currentColor'
/> />
<path <path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" d='M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z'
fill="currentFill" fill='currentFill'
/> />
</svg> </svg>
<span className="sr-only">Loading...</span> <span className='sr-only'>Loading...</span>
</div> </div>
) : ( ) : (
<div className="mt-2 flex flex-col gap-3"> <div className='mt-2 flex flex-col gap-3'>
<button <button
className="flex items-center rounded-xl bg-black/90 p-4 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 // temporarily disable metamask connection as its not supported on osmosis
disabled 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'>
<div className="flex items-end"> <div className='flex items-end'>
<p>Metamask</p> <p>Metamask</p>
{!metamaskInstalled && ( {!metamaskInstalled && (
<a <a
className="ml-3 text-sm text-blue-600" className='ml-3 text-sm text-blue-600'
onClick={(e) => { onClick={(e) => {
window.open('https://metamask.io/', '_blank') window.open('https://metamask.io/', '_blank')
e.stopPropagation() e.stopPropagation()
@ -154,20 +154,20 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
</a> </a>
)} )}
</div> </div>
<p className="text-sm text-gray-400">Connect using Metamask</p> <p className='text-sm text-gray-400'>Connect using Metamask</p>
</div> </div>
</button> </button>
<button <button
className="flex items-center rounded-xl bg-black/90 p-4 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' />
<div className="ml-4 text-left"> <div className='ml-4 text-left'>
<div className="flex items-end"> <div className='flex items-end'>
<p>Keplr</p> <p>Keplr</p>
{!isKeplrInstalled && ( {!isKeplrInstalled && (
<a <a
className="ml-3 text-sm text-blue-600" className='ml-3 text-sm text-blue-600'
onClick={(e) => { onClick={(e) => {
window.open('https://www.keplr.app/', '_blank') window.open('https://www.keplr.app/', '_blank')
e.stopPropagation() e.stopPropagation()
@ -177,7 +177,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
</a> </a>
)} )}
</div> </div>
<p className="text-sm text-gray-400">Connect using Keplr</p> <p className='text-sm text-gray-400'>Connect using Keplr</p>
</div> </div>
</button> </button>
</div> </div>

1
components/Container/index.tsx
View File

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import styles from './Container.module.css' import styles from './Container.module.css'
type Props = { type Props = {

75
components/CreditManager/index.tsx
View File

@ -1,18 +1,19 @@
import React, { useRef, useState } from 'react'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import React, { useRef, useState } from 'react'
import Button from '../Button' import ContainerSecondary from 'components/ContainerSecondary'
import { formatCurrency } from 'utils/formatters' import FundAccountModal from 'components/FundAccountModal'
import WithdrawModal from 'components/WithdrawModal'
import useAccountStats from 'hooks/useAccountStats'
import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
import useMarkets from 'hooks/useMarkets'
import useTokenPrices from 'hooks/useTokenPrices'
import useCreditManagerStore from 'stores/useCreditManagerStore' import useCreditManagerStore from 'stores/useCreditManagerStore'
import useWalletStore from 'stores/useWalletStore' import useWalletStore from 'stores/useWalletStore'
import useCreditAccountPositions from 'hooks/useCreditAccountPositions' import { formatCurrency } from 'utils/formatters'
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens' import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
import useTokenPrices from 'hooks/useTokenPrices'
import useAccountStats from 'hooks/useAccountStats' import Button from '../Button'
import useMarkets from 'hooks/useMarkets'
import ContainerSecondary from 'components/ContainerSecondary'
import WithdrawModal from 'components/WithdrawModal'
import FundAccountModal from 'components/FundAccountModal'
const CreditManager = () => { const CreditManager = () => {
const [showFundWalletModal, setShowFundWalletModal] = useState(false) const [showFundWalletModal, setShowFundWalletModal] = useState(false)
@ -25,7 +26,7 @@ const CreditManager = () => {
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount) const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountPositions( const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountPositions(
selectedAccount ?? '' selectedAccount ?? '',
) )
const { data: tokenPrices } = useTokenPrices() const { data: tokenPrices } = useTokenPrices()
@ -45,17 +46,17 @@ const CreditManager = () => {
if (!address) { if (!address) {
return ( return (
<div className="absolute inset-0 left-auto w-[400px] border-l border-white/20 bg-background-2 p-2"> <div className='absolute inset-0 left-auto w-[400px] border-l border-white/20 bg-background-2 p-2'>
<ContainerSecondary>You must have a connected wallet</ContainerSecondary> <ContainerSecondary>You must have a connected wallet</ContainerSecondary>
</div> </div>
) )
} }
return ( return (
<div className="absolute inset-0 left-auto w-[400px] border-l border-white/20 bg-background-2 p-2"> <div className='absolute inset-0 left-auto w-[400px] border-l border-white/20 bg-background-2 p-2'>
<ContainerSecondary className="mb-2 flex gap-3"> <ContainerSecondary className='mb-2 flex gap-3'>
<Button <Button
className="flex-1 rounded-md" className='flex-1 rounded-md'
onClick={() => { onClick={() => {
setShowFundWalletModal(true) setShowFundWalletModal(true)
modalId.current += 1 modalId.current += 1
@ -64,7 +65,7 @@ const CreditManager = () => {
Fund Fund
</Button> </Button>
<Button <Button
className="flex-1 rounded-md" className='flex-1 rounded-md'
onClick={() => { onClick={() => {
setShowWithdrawModal(true) setShowWithdrawModal(true)
modalId.current += 1 modalId.current += 1
@ -74,35 +75,35 @@ const CreditManager = () => {
Withdraw Withdraw
</Button> </Button>
</ContainerSecondary> </ContainerSecondary>
<ContainerSecondary className="mb-2 text-sm"> <ContainerSecondary className='mb-2 text-sm'>
<div className="mb-1 flex justify-between"> <div className='mb-1 flex justify-between'>
<div>Total Position:</div> <div>Total Position:</div>
<div className="font-semibold">{formatCurrency(accountStats?.totalPosition ?? 0)}</div> <div className='font-semibold'>{formatCurrency(accountStats?.totalPosition ?? 0)}</div>
</div> </div>
<div className="flex justify-between"> <div className='flex justify-between'>
<div>Total Liabilities:</div> <div>Total Liabilities:</div>
<div className="font-semibold">{formatCurrency(accountStats?.totalDebt ?? 0)}</div> <div className='font-semibold'>{formatCurrency(accountStats?.totalDebt ?? 0)}</div>
</div> </div>
</ContainerSecondary> </ContainerSecondary>
<ContainerSecondary> <ContainerSecondary>
<h4 className="font-bold">Balances</h4> <h4 className='font-bold'>Balances</h4>
{isLoadingPositions ? ( {isLoadingPositions ? (
<div>Loading...</div> <div>Loading...</div>
) : ( ) : (
<> <>
<div className="flex text-xs font-semibold"> <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>
<div className="flex-1">APY</div> <div className='flex-1'>APY</div>
</div> </div>
{positionsData?.coins.map((coin) => ( {positionsData?.coins.map((coin) => (
<div key={coin.denom} className="flex text-xs text-black/40"> <div key={coin.denom} className='flex text-xs text-black/40'>
<div className="flex-1">{getTokenSymbol(coin.denom)}</div> <div className='flex-1'>{getTokenSymbol(coin.denom)}</div>
<div className="flex-1"> <div className='flex-1'>
{formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))} {formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))}
</div> </div>
<div className="flex-1"> <div className='flex-1'>
{BigNumber(coin.amount) {BigNumber(coin.amount)
.div(10 ** getTokenDecimals(coin.denom)) .div(10 ** getTokenDecimals(coin.denom))
.toNumber() .toNumber()
@ -110,16 +111,16 @@ const CreditManager = () => {
maximumFractionDigits: getTokenDecimals(coin.denom), maximumFractionDigits: getTokenDecimals(coin.denom),
})} })}
</div> </div>
<div className="flex-1">-</div> <div className='flex-1'>-</div>
</div> </div>
))} ))}
{positionsData?.debts.map((coin) => ( {positionsData?.debts.map((coin) => (
<div key={coin.denom} className="flex text-xs text-red-500"> <div key={coin.denom} className='flex text-xs text-red-500'>
<div className="flex-1 text-black/40">{getTokenSymbol(coin.denom)}</div> <div className='flex-1 text-black/40'>{getTokenSymbol(coin.denom)}</div>
<div className="flex-1"> <div className='flex-1'>
-{formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))} -{formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))}
</div> </div>
<div className="flex-1"> <div className='flex-1'>
- -
{BigNumber(coin.amount) {BigNumber(coin.amount)
.div(10 ** getTokenDecimals(coin.denom)) .div(10 ** getTokenDecimals(coin.denom))
@ -128,7 +129,7 @@ const CreditManager = () => {
maximumFractionDigits: 6, maximumFractionDigits: 6,
})} })}
</div> </div>
<div className="flex-1"> <div className='flex-1'>
-{(Number(marketsData?.[coin.denom].borrow_rate) * 100).toFixed(1)}% -{(Number(marketsData?.[coin.denom].borrow_rate) * 100).toFixed(1)}%
</div> </div>
</div> </div>

105
components/FundAccountModal.tsx
View File

@ -1,19 +1,20 @@
import React, { useEffect, useMemo, useState } from 'react' import { Dialog, Switch, Transition } from '@headlessui/react'
import Image from 'next/image'
import { Transition, Dialog, Switch } from '@headlessui/react'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import Image from 'next/image'
import React, { useEffect, useMemo, useState } from 'react'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import useLocalStorageState from 'use-local-storage-state' import useLocalStorageState from 'use-local-storage-state'
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens' import Slider from 'components/Slider'
import ContainerSecondary from './ContainerSecondary' import useDepositCreditAccount from 'hooks/mutations/useDepositCreditAccount'
import useCreditManagerStore from 'stores/useCreditManagerStore'
import Button from './Button'
import Spinner from './Spinner'
import useAllBalances from 'hooks/useAllBalances' import useAllBalances from 'hooks/useAllBalances'
import useAllowedCoins from 'hooks/useAllowedCoins' import useAllowedCoins from 'hooks/useAllowedCoins'
import useDepositCreditAccount from 'hooks/mutations/useDepositCreditAccount' import useCreditManagerStore from 'stores/useCreditManagerStore'
import Slider from 'components/Slider' import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
import Button from './Button'
import ContainerSecondary from './ContainerSecondary'
import Spinner from './Spinner'
const FundAccountModal = ({ show, onClose }: any) => { const FundAccountModal = ({ show, onClose }: any) => {
const [amount, setAmount] = useState(0) const [amount, setAmount] = useState(0)
@ -39,7 +40,7 @@ const FundAccountModal = ({ show, onClose }: any) => {
toast.success(`${amount} ${getTokenSymbol(selectedToken)} successfully Deposited`) toast.success(`${amount} ${getTokenSymbol(selectedToken)} successfully Deposited`)
onClose() onClose()
}, },
} },
) )
useEffect(() => { useEffect(() => {
@ -71,55 +72,55 @@ const FundAccountModal = ({ show, onClose }: any) => {
return ( return (
<Transition appear show={show} as={React.Fragment}> <Transition appear show={show} as={React.Fragment}>
<Dialog as="div" className="relative z-10" onClose={onClose}> <Dialog as='div' className='relative z-10' onClose={onClose}>
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0" enterFrom='opacity-0'
enterTo="opacity-100" enterTo='opacity-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100" leaveFrom='opacity-100'
leaveTo="opacity-0" leaveTo='opacity-0'
> >
<div className="fixed inset-0 bg-black bg-opacity-80" /> <div className='fixed inset-0 bg-black bg-opacity-80' />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 overflow-y-auto"> <div className='fixed inset-0 overflow-y-auto'>
<div className="flex min-h-full items-center justify-center p-4"> <div className='flex min-h-full items-center justify-center p-4'>
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0 scale-95" enterFrom='opacity-0 scale-95'
enterTo="opacity-100 scale-100" enterTo='opacity-100 scale-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100 scale-100" leaveFrom='opacity-100 scale-100'
leaveTo="opacity-0 scale-95" leaveTo='opacity-0 scale-95'
> >
<Dialog.Panel className="flex min-h-[520px] w-full max-w-3xl transform overflow-hidden rounded-2xl bg-[#585A74] align-middle shadow-xl transition-all"> <Dialog.Panel className='flex min-h-[520px] w-full max-w-3xl transform overflow-hidden rounded-2xl bg-[#585A74] align-middle shadow-xl transition-all'>
{isLoading && ( {isLoading && (
<div className="absolute inset-0 z-40 grid place-items-center bg-black/50"> <div className='absolute inset-0 z-40 grid place-items-center bg-black/50'>
<Spinner /> <Spinner />
</div> </div>
)} )}
<div className="flex flex-1 flex-col items-start justify-between bg-[#4A4C60] p-6"> <div className='flex flex-1 flex-col items-start justify-between bg-[#4A4C60] p-6'>
<div> <div>
<p className="text-bold mb-3 text-xs uppercase text-white/50">About</p> <p className='text-bold mb-3 text-xs uppercase text-white/50'>About</p>
<h4 className="mb-4 text-xl leading-8"> <h4 className='mb-4 text-xl leading-8'>
Bringing the next generation of video creation to the Metaverse. Bringing the next generation of video creation to the Metaverse.
<br /> <br />
Powered by deep-learning. Powered by deep-learning.
</h4> </h4>
</div> </div>
<Image src="/logo.svg" alt="mars" width={150} height={50} /> <Image src='/logo.svg' alt='mars' width={150} height={50} />
</div> </div>
<div className="flex flex-1 flex-col p-4"> <div className='flex flex-1 flex-col p-4'>
<Dialog.Title as="h3" className="mb-4 text-center font-medium"> <Dialog.Title as='h3' className='mb-4 text-center font-medium'>
Fund Account {selectedAccount} Fund Account {selectedAccount}
</Dialog.Title> </Dialog.Title>
<ContainerSecondary className="mb-2 p-3"> <ContainerSecondary className='mb-2 p-3'>
<p className="mb-6 text-sm text-[#585A74]/50"> <p className='mb-6 text-sm text-[#585A74]/50'>
Transfer assets from your injective wallet to your Mars credit account. If you 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 don’t have any assets in your injective wallet use the injective bridge to
transfer funds to your injective wallet. transfer funds to your injective wallet.
@ -128,11 +129,11 @@ const FundAccountModal = ({ show, onClose }: any) => {
<p>Loading...</p> <p>Loading...</p>
) : ( ) : (
<> <>
<div className="mb-2 rounded-md border border-[#585A74] text-sm"> <div className='mb-2 rounded-md border border-[#585A74] text-sm'>
<div className="mb-1 flex justify-between border-b border-[#585A74] p-2"> <div className='mb-1 flex justify-between border-b border-[#585A74] p-2'>
<div className="font-bold">Asset:</div> <div className='font-bold'>Asset:</div>
<select <select
className="bg-transparent outline-0" className='bg-transparent outline-0'
onChange={(e) => { onChange={(e) => {
setSelectedToken(e.target.value) setSelectedToken(e.target.value)
@ -147,13 +148,13 @@ const FundAccountModal = ({ show, onClose }: any) => {
))} ))}
</select> </select>
</div> </div>
<div className="flex justify-between p-2"> <div className='flex justify-between p-2'>
<div className="font-bold">Amount:</div> <div className='font-bold'>Amount:</div>
<input <input
type="number" type='number'
className="bg-transparent text-right outline-0" className='bg-transparent text-right outline-0'
value={amount} value={amount}
min="0" min='0'
onChange={(e) => handleValueChange(e.target.valueAsNumber)} onChange={(e) => handleValueChange(e.target.valueAsNumber)}
onBlur={(e) => { onBlur={(e) => {
if (e.target.value === '') setAmount(0) if (e.target.value === '') setAmount(0)
@ -161,9 +162,9 @@ const FundAccountModal = ({ show, onClose }: any) => {
/> />
</div> </div>
</div> </div>
<p className="mb-2 text-sm">In wallet: {walletAmount.toLocaleString()}</p> <p className='mb-2 text-sm'>In wallet: {walletAmount.toLocaleString()}</p>
<Slider <Slider
className="mb-6" className='mb-6'
value={percentageValue} value={percentageValue}
onChange={(value) => { onChange={(value) => {
const decimal = value[0] / 100 const decimal = value[0] / 100
@ -178,10 +179,10 @@ const FundAccountModal = ({ show, onClose }: any) => {
</> </>
)} )}
</ContainerSecondary> </ContainerSecondary>
<ContainerSecondary className="mb-2 flex items-center justify-between"> <ContainerSecondary 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="text-sm text-[#585A74]/50"> <div className='text-sm text-[#585A74]/50'>
Lend assets from account to earn yield. Lend assets from account to earn yield.
</div> </div>
</div> </div>
@ -201,7 +202,7 @@ const FundAccountModal = ({ show, onClose }: any) => {
</Switch> </Switch>
</ContainerSecondary> </ContainerSecondary>
<Button <Button
className="mt-auto w-full" className='mt-auto w-full'
onClick={() => mutate()} onClick={() => mutate()}
disabled={amount === 0 || !amount} disabled={amount === 0 || !amount}
> >

2
components/Layout/Layout.module.css
View File

@ -8,7 +8,7 @@
background-color: #562a3b; background-color: #562a3b;
background-size: 100% auto; background-size: 100% auto;
background-image: url("/background.svg"); background-image: url('/background.svg');
background-position: center top; background-position: center top;
filter: brightness(1) hue-rotate(0deg); filter: brightness(1) hue-rotate(0deg);

3
components/Layout/index.tsx
View File

@ -1,8 +1,9 @@
import React from 'react' import React from 'react'
import useCreditManagerStore from 'stores/useCreditManagerStore'
import CreditManager from 'components/CreditManager' import CreditManager from 'components/CreditManager'
import Navigation from 'components/Navigation' import Navigation from 'components/Navigation'
import useCreditManagerStore from 'stores/useCreditManagerStore'
import styles from './Layout.module.css' import styles from './Layout.module.css'
const Layout = ({ children }: { children: React.ReactNode }) => { const Layout = ({ children }: { children: React.ReactNode }) => {

73
components/Navigation.tsx
View File

@ -1,24 +1,25 @@
import React, { useMemo } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { useRouter } from 'next/router'
import { Popover } from '@headlessui/react' import { Popover } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/24/solid' import { ChevronDownIcon } from '@heroicons/react/24/solid'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import React, { useMemo } from 'react'
import SearchInput from 'components/SearchInput' import ArrowRightLine from 'components/Icons/arrow-right-line.svg'
import ProgressBar from 'components/ProgressBar' import ProgressBar from 'components/ProgressBar'
import SearchInput from 'components/SearchInput'
import Spinner from 'components/Spinner' import Spinner from 'components/Spinner'
import Wallet from 'components/Wallet' import Wallet from 'components/Wallet'
import { formatCurrency } from 'utils/formatters'
import useCreditAccounts from 'hooks/useCreditAccounts'
import useCreateCreditAccount from 'hooks/mutations/useCreateCreditAccount' import useCreateCreditAccount from 'hooks/mutations/useCreateCreditAccount'
import useDeleteCreditAccount from 'hooks/mutations/useDeleteCreditAccount' import useDeleteCreditAccount from 'hooks/mutations/useDeleteCreditAccount'
import useCreditManagerStore from 'stores/useCreditManagerStore'
import useAccountStats from 'hooks/useAccountStats' import useAccountStats from 'hooks/useAccountStats'
import SemiCircleProgress from './SemiCircleProgress' import useCreditAccounts from 'hooks/useCreditAccounts'
import useCreditManagerStore from 'stores/useCreditManagerStore'
import useWalletStore from 'stores/useWalletStore' import useWalletStore from 'stores/useWalletStore'
import ArrowRightLine from 'components/Icons/arrow-right-line.svg' import { formatCurrency } from 'utils/formatters'
import Button from './Button' import Button from './Button'
import SemiCircleProgress from './SemiCircleProgress'
// TODO: will require some tweaks depending on how lower viewport mocks pans out // TODO: will require some tweaks depending on how lower viewport mocks pans out
const MAX_VISIBLE_CREDIT_ACCOUNTS = 5 const MAX_VISIBLE_CREDIT_ACCOUNTS = 5
@ -52,7 +53,7 @@ const Navigation = () => {
const { data: creditAccountsList, isLoading: isLoadingCreditAccounts } = useCreditAccounts() const { data: creditAccountsList, isLoading: isLoadingCreditAccounts } = useCreditAccounts()
const { mutate: createCreditAccount, isLoading: isLoadingCreate } = useCreateCreditAccount() const { mutate: createCreditAccount, isLoading: isLoadingCreate } = useCreateCreditAccount()
const { mutate: deleteCreditAccount, isLoading: isLoadingDelete } = useDeleteCreditAccount( const { mutate: deleteCreditAccount, isLoading: isLoadingDelete } = useDeleteCreditAccount(
selectedAccount || '' selectedAccount || '',
) )
const accountStats = useAccountStats() const accountStats = useAccountStats()
@ -77,7 +78,7 @@ const Navigation = () => {
} }
return ( return (
<div className="flex items-center gap-4"> <div className='flex items-center gap-4'>
{accountStats && ( {accountStats && (
<> <>
<p>{formatCurrency(accountStats.netWorth)}</p> <p>{formatCurrency(accountStats.netWorth)}</p>
@ -85,15 +86,15 @@ const Navigation = () => {
<div title={`${String(accountStats.currentLeverage.toFixed(1))}x`}> <div title={`${String(accountStats.currentLeverage.toFixed(1))}x`}>
<SemiCircleProgress <SemiCircleProgress
value={accountStats.currentLeverage / accountStats.maxLeverage} value={accountStats.currentLeverage / accountStats.maxLeverage}
label="Lvg" label='Lvg'
/> />
</div> </div>
<SemiCircleProgress value={accountStats.risk} label="Risk" /> <SemiCircleProgress value={accountStats.risk} label='Risk' />
<ProgressBar value={accountStats.health} /> <ProgressBar value={accountStats.health} />
</> </>
)} )}
<div <div
className="flex w-16 cursor-pointer justify-center hover:text-white" className='flex w-16 cursor-pointer justify-center hover:text-white'
onClick={toggleCreditManager} onClick={toggleCreditManager}
> >
<ArrowRightLine /> <ArrowRightLine />
@ -105,13 +106,13 @@ const Navigation = () => {
return ( return (
<div> <div>
{/* Main navigation bar */} {/* Main navigation bar */}
<div className="flex items-center justify-between border-b border-white/20 px-6 py-3"> <div className='flex items-center justify-between border-b border-white/20 px-6 py-3'>
<Link href="/" passHref> <Link href='/' passHref>
<a> <a>
<Image src="/logo.svg" alt="mars" width={123} height={40} /> <Image src='/logo.svg' alt='mars' width={123} height={40} />
</a> </a>
</Link> </Link>
<div className="flex gap-5 px-12 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}
@ -121,8 +122,8 @@ const Navigation = () => {
<Wallet /> <Wallet />
</div> </div>
{/* Sub navigation bar */} {/* Sub navigation bar */}
<div className="flex items-center justify-between border-b border-white/20 px-6 py-3 text-sm text-white/40"> <div className='flex items-center 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 />
{isConnected && hasCreditAccounts && ( {isConnected && hasCreditAccounts && (
<> <>
@ -138,15 +139,15 @@ const Navigation = () => {
</div> </div>
))} ))}
{restCreditAccounts.length > 0 && ( {restCreditAccounts.length > 0 && (
<Popover className="relative"> <Popover className='relative'>
<Popover.Button> <Popover.Button>
<div className="flex cursor-pointer items-center px-3 hover:text-white"> <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 w-[200px] pt-2"> <Popover.Panel className='absolute z-10 w-[200px] pt-2'>
<div className="rounded-2xl bg-white 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}
@ -162,18 +163,18 @@ const Navigation = () => {
</Popover.Panel> </Popover.Panel>
</Popover> </Popover>
)} )}
<Popover className="relative"> <Popover className='relative'>
<Popover.Button> <Popover.Button>
<div className="flex cursor-pointer items-center px-3 hover:text-white"> <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 w-[200px] pt-2"> <Popover.Panel className='absolute z-10 w-[200px] pt-2'>
{({ close }) => ( {({ close }) => (
<div className="rounded-2xl bg-white 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={() => {
close() close()
createCreditAccount() createCreditAccount()
@ -182,7 +183,7 @@ const Navigation = () => {
Create Account Create Account
</div> </div>
<div <div
className="mb-2 cursor-pointer hover:text-orange-500" className='mb-2 cursor-pointer hover:text-orange-500'
onClick={() => { onClick={() => {
close() close()
deleteCreditAccount() deleteCreditAccount()
@ -191,13 +192,13 @@ const Navigation = () => {
Close Account Close Account
</div> </div>
<div <div
className="mb-2 cursor-pointer hover:text-orange-500" className='mb-2 cursor-pointer hover:text-orange-500'
onClick={() => alert('TODO')} onClick={() => alert('TODO')}
> >
Transfer Balance Transfer Balance
</div> </div>
<div <div
className="cursor-pointer hover:text-orange-500" className='cursor-pointer hover:text-orange-500'
onClick={() => alert('TODO')} onClick={() => alert('TODO')}
> >
Rearrange Rearrange
@ -212,7 +213,7 @@ const Navigation = () => {
{rightSideContent()} {rightSideContent()}
</div> </div>
{(isLoadingCreate || isLoadingDelete) && ( {(isLoadingCreate || isLoadingDelete) && (
<div className="absolute inset-0 z-40 grid place-items-center bg-black/50"> <div className='absolute inset-0 z-40 grid place-items-center bg-black/50'>
<Spinner /> <Spinner />
</div> </div>
)} )}

4
components/ProgressBar.tsx
View File

@ -15,12 +15,12 @@ const ProgressBar = ({ value }: Props) => {
} }
return ( return (
<div className="relative z-0 h-4 w-[130px] rounded-full bg-black"> <div className='relative z-0 h-4 w-[130px] rounded-full bg-black'>
<div <div
className={`absolute z-10 h-4 rounded-full ${bgColorClass}`} className={`absolute z-10 h-4 rounded-full ${bgColorClass}`}
style={{ width: percentageValue }} style={{ width: percentageValue }}
/> />
<div className="absolute z-20 flex w-full items-center justify-center gap-x-2 text-xs font-medium text-white"> <div className='absolute z-20 flex w-full items-center justify-center gap-x-2 text-xs font-medium text-white'>
{percentageValue} {percentageValue}
</div> </div>
</div> </div>

91
components/RepayModal.tsx
View File

@ -1,21 +1,22 @@
import React, { useMemo, useState } from 'react' import { Dialog, Transition } from '@headlessui/react'
import Image from 'next/image'
import { Transition, Dialog } from '@headlessui/react'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import { toast } from 'react-toastify' import Image from 'next/image'
import React, { useMemo, useState } from 'react'
import { NumericFormat } from 'react-number-format' import { NumericFormat } from 'react-number-format'
import { toast } from 'react-toastify'
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
import ContainerSecondary from './ContainerSecondary'
import useCreditManagerStore from 'stores/useCreditManagerStore'
import Button from './Button'
import Spinner from './Spinner'
import useAllBalances from 'hooks/useAllBalances'
import Slider from 'components/Slider' import Slider from 'components/Slider'
import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
import useRepayFunds from 'hooks/mutations/useRepayFunds' import useRepayFunds from 'hooks/mutations/useRepayFunds'
import useAllBalances from 'hooks/useAllBalances'
import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
import useTokenPrices from 'hooks/useTokenPrices' import useTokenPrices from 'hooks/useTokenPrices'
import useCreditManagerStore from 'stores/useCreditManagerStore'
import { formatCurrency } from 'utils/formatters' import { formatCurrency } from 'utils/formatters'
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
import Button from './Button'
import ContainerSecondary from './ContainerSecondary'
import Spinner from './Spinner'
type Props = { type Props = {
show: boolean show: boolean
@ -50,7 +51,7 @@ const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
onClose() onClose()
toast.success(`${amount} ${tokenSymbol} successfully repaid`) toast.success(`${amount} ${tokenSymbol} successfully repaid`)
}, },
} },
) )
const { data: tokenPrices } = useTokenPrices() const { data: tokenPrices } = useTokenPrices()
@ -82,71 +83,71 @@ const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
return ( return (
<Transition appear show={show} as={React.Fragment}> <Transition appear show={show} as={React.Fragment}>
<Dialog as="div" className="relative z-10" onClose={onClose}> <Dialog as='div' className='relative z-10' onClose={onClose}>
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0" enterFrom='opacity-0'
enterTo="opacity-100" enterTo='opacity-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100" leaveFrom='opacity-100'
leaveTo="opacity-0" leaveTo='opacity-0'
> >
<div className="fixed inset-0 bg-black bg-opacity-80" /> <div className='fixed inset-0 bg-black bg-opacity-80' />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 overflow-y-auto"> <div className='fixed inset-0 overflow-y-auto'>
<div className="flex min-h-full items-center justify-center p-4"> <div className='flex min-h-full items-center justify-center p-4'>
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0 scale-95" enterFrom='opacity-0 scale-95'
enterTo="opacity-100 scale-100" enterTo='opacity-100 scale-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100 scale-100" leaveFrom='opacity-100 scale-100'
leaveTo="opacity-0 scale-95" leaveTo='opacity-0 scale-95'
> >
<Dialog.Panel className="flex min-h-[520px] w-full max-w-3xl transform overflow-hidden rounded-2xl bg-[#585A74] align-middle shadow-xl transition-all"> <Dialog.Panel className='flex min-h-[520px] w-full max-w-3xl transform overflow-hidden rounded-2xl bg-[#585A74] align-middle shadow-xl transition-all'>
{isLoading && ( {isLoading && (
<div className="absolute inset-0 z-40 grid place-items-center bg-black/50"> <div className='absolute inset-0 z-40 grid place-items-center bg-black/50'>
<Spinner /> <Spinner />
</div> </div>
)} )}
<div className="flex flex-1 flex-col items-start justify-between bg-[#4A4C60] p-6"> <div className='flex flex-1 flex-col items-start justify-between bg-[#4A4C60] p-6'>
<div> <div>
<p className="text-bold mb-3 text-xs uppercase text-white/50">About</p> <p className='text-bold mb-3 text-xs uppercase text-white/50'>About</p>
<h4 className="mb-4 text-xl leading-8"> <h4 className='mb-4 text-xl leading-8'>
Bringing the next generation of video creation to the Metaverse. Bringing the next generation of video creation to the Metaverse.
<br /> <br />
Powered by deep-learning. Powered by deep-learning.
</h4> </h4>
</div> </div>
<Image src="/logo.svg" alt="mars" width={150} height={50} /> <Image src='/logo.svg' alt='mars' width={150} height={50} />
</div> </div>
<div className="flex flex-1 flex-col p-4"> <div className='flex flex-1 flex-col p-4'>
<Dialog.Title as="h3" className="mb-4 text-center font-medium"> <Dialog.Title as='h3' className='mb-4 text-center font-medium'>
Repay {tokenSymbol} Repay {tokenSymbol}
</Dialog.Title> </Dialog.Title>
<div className="mb-4 flex flex-col gap-2 text-sm"> <div className='mb-4 flex flex-col gap-2 text-sm'>
<ContainerSecondary> <ContainerSecondary>
<p className="mb-7"> <p className='mb-7'>
In wallet: {walletAmount.toLocaleString()} {tokenSymbol} In wallet: {walletAmount.toLocaleString()} {tokenSymbol}
</p> </p>
<div className="mb-7"> <div className='mb-7'>
<p className="mb-2 font-semibold uppercase tracking-widest">Amount</p> <p className='mb-2 font-semibold uppercase tracking-widest'>Amount</p>
<NumericFormat <NumericFormat
className="mb-2 h-[32px] w-full rounded-lg border border-black/50 bg-transparent px-2" className='mb-2 h-[32px] w-full rounded-lg border border-black/50 bg-transparent px-2'
value={amount} value={amount}
placeholder="0" placeholder='0'
allowNegative={false} allowNegative={false}
onValueChange={(v) => handleValueChange(v.floatValue || 0)} onValueChange={(v) => handleValueChange(v.floatValue || 0)}
suffix={` ${tokenSymbol}`} suffix={` ${tokenSymbol}`}
decimalScale={getTokenDecimals(tokenDenom)} decimalScale={getTokenDecimals(tokenDenom)}
/> />
<div className="flex justify-between text-xs tracking-widest"> <div className='flex justify-between text-xs tracking-widest'>
<div> <div>
1 {tokenSymbol} = {formatCurrency(tokenPrice)} 1 {tokenSymbol} = {formatCurrency(tokenPrice)}
</div> </div>
@ -155,7 +156,7 @@ const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
</div> </div>
<Slider <Slider
className="mb-6" className='mb-6'
value={percentageValue} value={percentageValue}
onChange={(value) => { onChange={(value) => {
const decimal = value[0] / 100 const decimal = value[0] / 100
@ -170,7 +171,7 @@ const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
</ContainerSecondary> </ContainerSecondary>
</div> </div>
<Button <Button
className="mt-auto w-full" className='mt-auto w-full'
onClick={handleSubmit} onClick={handleSubmit}
disabled={amount === 0 || !amount} disabled={amount === 0 || !amount}
> >

24
components/SearchInput.tsx
View File

@ -1,23 +1,23 @@
import React from 'react' import React from 'react'
const SearchInput = () => ( const SearchInput = () => (
<div className="relative text-white"> <div className='relative text-white'>
<span className="absolute inset-y-0 left-0 flex items-center pl-2"> <span className='absolute inset-y-0 left-0 flex items-center pl-2'>
<svg <svg
fill="none" fill='none'
stroke="currentColor" stroke='currentColor'
strokeLinecap="round" strokeLinecap='round'
strokeLinejoin="round" strokeLinejoin='round'
strokeWidth="2" strokeWidth='2'
viewBox="0 0 24 24" viewBox='0 0 24 24'
className="h-6 w-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="rounded-md bg-black/70 py-2 pl-10 text-sm text-white 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>
) )

8
components/SemiCircleProgress.tsx
View File

@ -58,7 +58,7 @@ const SemiCircleProgress = ({
} }
return ( return (
<div className="semicircle-container" style={{ position: 'relative' }}> <div className='semicircle-container' style={{ position: 'relative' }}>
<svg <svg
width={diameter} width={diameter}
height={diameter / 2} height={diameter / 2}
@ -68,7 +68,7 @@ const SemiCircleProgress = ({
cx={coordinateForCircle} cx={coordinateForCircle}
cy={coordinateForCircle} cy={coordinateForCircle}
r={radius} r={radius}
fill="none" fill='none'
stroke={background} stroke={background}
strokeWidth={strokeWidth} strokeWidth={strokeWidth}
strokeDasharray={circumference} strokeDasharray={circumference}
@ -81,7 +81,7 @@ const SemiCircleProgress = ({
cx={coordinateForCircle} cx={coordinateForCircle}
cy={coordinateForCircle} cy={coordinateForCircle}
r={radius} r={radius}
fill="none" fill='none'
// stroke={stroke} // stroke={stroke}
strokeWidth={strokeWidth} strokeWidth={strokeWidth}
strokeDasharray={circumference} strokeDasharray={circumference}
@ -93,7 +93,7 @@ const SemiCircleProgress = ({
</svg> </svg>
{label && ( {label && (
<span <span
className="text-xs" className='text-xs'
style={{ style={{
width: '100%', width: '100%',
left: '0', left: '0',

14
components/Slider.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'
import * as RadixSlider from '@radix-ui/react-slider' import * as RadixSlider from '@radix-ui/react-slider'
import React from 'react'
type Props = { type Props = {
className?: string className?: string
@ -12,22 +12,22 @@ const Slider = ({ className, value, onChange, onMaxClick }: Props) => {
return ( return (
<div className={`relative flex flex-1 items-center ${className || ''}`}> <div className={`relative flex flex-1 items-center ${className || ''}`}>
<RadixSlider.Root <RadixSlider.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={[value]} value={[value]}
min={0} min={0}
max={100} max={100}
step={1} step={1}
onValueChange={(value) => onChange(value)} onValueChange={(value) => onChange(value)}
> >
<RadixSlider.Track className="relative h-[6px] grow rounded-full bg-gray-400"> <RadixSlider.Track className='relative h-[6px] grow rounded-full bg-gray-400'>
<RadixSlider.Range className="absolute h-[100%] rounded-full bg-blue-600" /> <RadixSlider.Range className='absolute h-[100%] rounded-full bg-blue-600' />
</RadixSlider.Track> </RadixSlider.Track>
<RadixSlider.Thumb className="flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white !outline-none"> <RadixSlider.Thumb className='flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white !outline-none'>
<div className="relative top-5 text-xs">{value.toFixed(0)}%</div> <div className='relative top-5 text-xs'>{value.toFixed(0)}%</div>
</RadixSlider.Thumb> </RadixSlider.Thumb>
</RadixSlider.Root> </RadixSlider.Root>
<button <button
className="ml-4 rounded-md bg-blue-600 py-1 px-2 text-xs font-semibold text-white" className='ml-4 rounded-md bg-blue-600 py-1 px-2 text-xs font-semibold text-white'
onClick={onMaxClick} onClick={onMaxClick}
> >
MAX MAX

26
components/Spinner.tsx
View File

@ -3,23 +3,23 @@ import React from 'react'
const Spinner = () => { const Spinner = () => {
return ( return (
<svg <svg
className="h-8 w-8 animate-spin" 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'
> >
<circle <circle
className="opacity-25" className='opacity-25'
cx="12" cx='12'
cy="12" cy='12'
r="10" r='10'
stroke="currentColor" stroke='currentColor'
strokeWidth="4" strokeWidth='4'
></circle> ></circle>
<path <path
className="opacity-75" className='opacity-75'
fill="currentColor" fill='currentColor'
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
></path> ></path>
</svg> </svg>
) )

4
components/Tooltip.tsx
View File

@ -1,6 +1,6 @@
import { InformationCircleIcon } from '@heroicons/react/24/solid'
import Tippy from '@tippyjs/react' import Tippy from '@tippyjs/react'
import { ReactNode } from 'react' import { ReactNode } from 'react'
import { InformationCircleIcon } from '@heroicons/react/24/solid'
interface TooltipProps { interface TooltipProps {
content: string | ReactNode content: string | ReactNode
@ -11,7 +11,7 @@ const Tooltip = ({ content, className }: TooltipProps) => {
return ( return (
<Tippy <Tippy
appendTo={() => document.body} appendTo={() => document.body}
className="rounded-md bg-[#ED512F] p-2 text-xs" className='rounded-md bg-[#ED512F] p-2 text-xs'
content={<span>{content}</span>} content={<span>{content}</span>}
interactive={true} interactive={true}
> >

51
components/Wallet.tsx
View File

@ -1,14 +1,15 @@
import React, { useState } from 'react'
import { Popover } from '@headlessui/react' import { Popover } from '@headlessui/react'
import { toast } from 'react-toastify'
import Image from 'next/image' import Image from 'next/image'
import React, { useState } from 'react'
import { toast } from 'react-toastify'
import useTokenBalance from 'hooks/useTokenBalance'
import useWalletStore from 'stores/useWalletStore'
import { chain } from 'utils/chains'
import { formatWalletAddress } from 'utils/formatters'
import Button from './Button' import Button from './Button'
import ConnectModal from './ConnectModal' import ConnectModal from './ConnectModal'
import useWalletStore from 'stores/useWalletStore'
import useTokenBalance from 'hooks/useTokenBalance'
import { formatWalletAddress } from 'utils/formatters'
import { chain } from 'utils/chains'
const WalletPopover = ({ children }: { children: React.ReactNode }) => { const WalletPopover = ({ children }: { children: React.ReactNode }) => {
const address = useWalletStore((s) => s.address) const address = useWalletStore((s) => s.address)
@ -17,26 +18,26 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
const { data } = useTokenBalance() const { data } = useTokenBalance()
return ( return (
<Popover className="relative"> <Popover className='relative'>
<Popover.Button as={Button} className="w-[200px] !rounded-3xl !bg-green-500"> <Popover.Button as={Button} className='w-[200px] !rounded-3xl !bg-green-500'>
{children} {children}
</Popover.Button> </Popover.Button>
<Popover.Panel className="absolute right-0 z-10 pt-2"> <Popover.Panel className='absolute right-0 z-10 pt-2'>
<div className="rounded-2xl bg-white p-6 text-gray-900"> <div className='rounded-2xl bg-white p-6 text-gray-900'>
<div className="mb-4 flex items-center justify-between"> <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="ml-1 text-lg font-semibold">{data?.toFixed(2)}</span> <span className='ml-1 text-lg font-semibold'>{data?.toFixed(2)}</span>
</p> </p>
</div> </div>
<Button onClick={() => actions.disconnect()}>Disconnect</Button> <Button onClick={() => actions.disconnect()}>Disconnect</Button>
</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-sm text-slate-500 hover:text-slate-700" 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')
@ -44,16 +45,16 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
}} }}
> >
<svg <svg
fill="none" fill='none'
viewBox="0 0 24 24" viewBox='0 0 24 24'
strokeWidth={1.5} strokeWidth={1.5}
stroke="currentColor" stroke='currentColor'
className="mr-1 h-5 w-5" className='mr-1 h-5 w-5'
> >
<path <path
strokeLinecap="round" strokeLinecap='round'
strokeLinejoin="round" strokeLinejoin='round'
d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z" d='M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z'
/> />
</svg> </svg>
Copy Address Copy Address
@ -75,7 +76,7 @@ const Wallet = () => {
<WalletPopover>{formatWalletAddress(address)}</WalletPopover> <WalletPopover>{formatWalletAddress(address)}</WalletPopover>
) : ( ) : (
<Button <Button
className="w-[200px] !rounded-3xl !bg-green-500" className='w-[200px] !rounded-3xl !bg-green-500'
onClick={() => setShowConnectModal(true)} onClick={() => setShowConnectModal(true)}
> >
Connect Wallet Connect Wallet

145
components/WithdrawModal.tsx
View File

@ -1,25 +1,26 @@
import React, { useEffect, useMemo, useState } from 'react' import { Dialog, Switch, Transition } from '@headlessui/react'
import { Transition, Dialog, Switch } from '@headlessui/react'
import * as RSlider from '@radix-ui/react-slider' import * as RSlider from '@radix-ui/react-slider'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import React, { useEffect, useMemo, useState } from 'react'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import Slider from 'components/Slider'
import useWithdrawFunds from 'hooks/mutations/useWithdrawFunds'
import useAccountStats from 'hooks/useAccountStats'
import useAllBalances from 'hooks/useAllBalances'
import useCalculateMaxWithdrawAmount from 'hooks/useCalculateMaxWithdrawAmount'
import useCreditAccountPositions from 'hooks/useCreditAccountPositions' import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
import ContainerSecondary from './ContainerSecondary'
import useCreditManagerStore from 'stores/useCreditManagerStore'
import Button from './Button'
import useMarkets from 'hooks/useMarkets' import useMarkets from 'hooks/useMarkets'
import useTokenPrices from 'hooks/useTokenPrices' import useTokenPrices from 'hooks/useTokenPrices'
import useCreditManagerStore from 'stores/useCreditManagerStore'
import { formatCurrency } from 'utils/formatters' import { formatCurrency } from 'utils/formatters'
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
import Button from './Button'
import ContainerSecondary from './ContainerSecondary'
import ProgressBar from './ProgressBar' import ProgressBar from './ProgressBar'
import SemiCircleProgress from './SemiCircleProgress' import SemiCircleProgress from './SemiCircleProgress'
import useAccountStats from 'hooks/useAccountStats'
import useWithdrawFunds from 'hooks/mutations/useWithdrawFunds'
import Spinner from './Spinner' import Spinner from './Spinner'
import useCalculateMaxWithdrawAmount from 'hooks/useCalculateMaxWithdrawAmount'
import useAllBalances from 'hooks/useAllBalances'
import Slider from 'components/Slider'
const WithdrawModal = ({ show, onClose }: any) => { const WithdrawModal = ({ show, onClose }: any) => {
const [amount, setAmount] = useState(0) const [amount, setAmount] = useState(0)
@ -28,7 +29,7 @@ const WithdrawModal = ({ show, onClose }: any) => {
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount) const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountPositions( const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountPositions(
selectedAccount ?? '' selectedAccount ?? '',
) )
const { data: balancesData } = useAllBalances() const { data: balancesData } = useAllBalances()
@ -128,46 +129,46 @@ const WithdrawModal = ({ show, onClose }: any) => {
return ( return (
<Transition appear show={show} as={React.Fragment}> <Transition appear show={show} as={React.Fragment}>
<Dialog as="div" className="relative z-10" onClose={onClose}> <Dialog as='div' className='relative z-10' onClose={onClose}>
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0" enterFrom='opacity-0'
enterTo="opacity-100" enterTo='opacity-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100" leaveFrom='opacity-100'
leaveTo="opacity-0" leaveTo='opacity-0'
> >
<div className="fixed inset-0 bg-black bg-opacity-80" /> <div className='fixed inset-0 bg-black bg-opacity-80' />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 overflow-y-auto"> <div className='fixed inset-0 overflow-y-auto'>
<div className="flex min-h-full items-center justify-center p-4"> <div className='flex min-h-full items-center justify-center p-4'>
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0 scale-95" enterFrom='opacity-0 scale-95'
enterTo="opacity-100 scale-100" enterTo='opacity-100 scale-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100 scale-100" leaveFrom='opacity-100 scale-100'
leaveTo="opacity-0 scale-95" leaveTo='opacity-0 scale-95'
> >
<Dialog.Panel className="flex w-full max-w-3xl transform overflow-hidden rounded-2xl bg-[#585A74] align-middle shadow-xl transition-all"> <Dialog.Panel className='flex w-full max-w-3xl transform overflow-hidden rounded-2xl bg-[#585A74] align-middle shadow-xl transition-all'>
{isLoading && ( {isLoading && (
<div className="absolute inset-0 z-40 grid place-items-center bg-black/50"> <div className='absolute inset-0 z-40 grid place-items-center bg-black/50'>
<Spinner /> <Spinner />
</div> </div>
)} )}
<div className="flex w-1/2 flex-col p-4"> <div className='flex w-1/2 flex-col p-4'>
<Dialog.Title as="h3" className="mb-4 text-center text-lg font-medium"> <Dialog.Title as='h3' className='mb-4 text-center text-lg font-medium'>
Withdraw from Account {selectedAccount} Withdraw from Account {selectedAccount}
</Dialog.Title> </Dialog.Title>
<div> <div>
<ContainerSecondary className="mb-3 p-3"> <ContainerSecondary className='mb-3 p-3'>
<div className="mb-4 text-sm"> <div className='mb-4 text-sm'>
<div className="mb-1 flex justify-between"> <div className='mb-1 flex justify-between'>
<div className="font-bold">Asset:</div> <div className='font-bold'>Asset:</div>
<select className="bg-transparent" onChange={handleTokenChange}> <select className='bg-transparent' onChange={handleTokenChange}>
{positionsData?.coins?.map((coin) => ( {positionsData?.coins?.map((coin) => (
<option key={coin.denom} value={coin.denom}> <option key={coin.denom} value={coin.denom}>
{getTokenSymbol(coin.denom)} {getTokenSymbol(coin.denom)}
@ -175,26 +176,26 @@ const WithdrawModal = ({ show, onClose }: any) => {
))} ))}
</select> </select>
</div> </div>
<div className="flex justify-between"> <div className='flex justify-between'>
<div className="font-bold">Amount:</div> <div className='font-bold'>Amount:</div>
<input <input
type="number" type='number'
className="border border-black/50 bg-transparent px-2" className='border border-black/50 bg-transparent px-2'
value={amount} value={amount}
min="0" min='0'
onChange={(e) => handleValueChange(e.target.valueAsNumber)} onChange={(e) => handleValueChange(e.target.valueAsNumber)}
/> />
</div> </div>
</div> </div>
<p className="mb-2 text-sm">In wallet: {walletAmount.toLocaleString()}</p> <p className='mb-2 text-sm'>In wallet: {walletAmount.toLocaleString()}</p>
<Slider <Slider
className="mb-6" className='mb-6'
value={percentageValue} value={percentageValue}
onChange={(value) => { onChange={(value) => {
const decimal = value[0] / 100 const decimal = value[0] / 100
// limit decimal precision based on token contract decimals // limit decimal precision based on token contract decimals
const newAmount = Number( const newAmount = Number(
(decimal * maxWithdrawAmount).toFixed(selectedTokenDecimals) (decimal * maxWithdrawAmount).toFixed(selectedTokenDecimals),
) )
setAmount(newAmount) setAmount(newAmount)
@ -202,10 +203,10 @@ const WithdrawModal = ({ show, onClose }: any) => {
onMaxClick={() => setAmount(maxWithdrawAmount)} onMaxClick={() => setAmount(maxWithdrawAmount)}
/> />
</ContainerSecondary> </ContainerSecondary>
<ContainerSecondary className="mb-10 flex items-center justify-between"> <ContainerSecondary className='mb-10 flex items-center justify-between'>
<div className="text-left"> <div className='text-left'>
<h3 className="font-bold">Withdraw with borrowing</h3> <h3 className='font-bold'>Withdraw with borrowing</h3>
<div className="text-sm text-[#585A74]/50">Explanation....</div> <div className='text-sm text-[#585A74]/50'>Explanation....</div>
</div> </div>
<Switch <Switch
@ -223,60 +224,60 @@ const WithdrawModal = ({ show, onClose }: any) => {
</Switch> </Switch>
</ContainerSecondary> </ContainerSecondary>
</div> </div>
<Button className="mt-auto w-full" onClick={() => mutate()}> <Button className='mt-auto w-full' onClick={() => mutate()}>
Withdraw Withdraw
</Button> </Button>
</div> </div>
<div className="flex w-1/2 flex-col justify-center bg-[#4A4C60] p-4"> <div className='flex w-1/2 flex-col justify-center bg-[#4A4C60] p-4'>
<p className="text-bold mb-3 text-xs uppercase text-white/50">About</p> <p className='text-bold mb-3 text-xs uppercase text-white/50'>About</p>
<h4 className="mb-4 text-xl">Subaccount {selectedAccount}</h4> <h4 className='mb-4 text-xl'>Subaccount {selectedAccount}</h4>
<div className="mb-2 rounded-md border border-white/20 p-3"> <div className='mb-2 rounded-md border border-white/20 p-3'>
{accountStats && ( {accountStats && (
<div className="flex items-center gap-x-3"> <div className='flex items-center gap-x-3'>
<p>{formatCurrency(accountStats.netWorth)}</p> <p>{formatCurrency(accountStats.netWorth)}</p>
{/* TOOLTIP */} {/* TOOLTIP */}
<div title={`${String(accountStats.currentLeverage.toFixed(1))}x`}> <div title={`${String(accountStats.currentLeverage.toFixed(1))}x`}>
<SemiCircleProgress <SemiCircleProgress
value={accountStats.currentLeverage / accountStats.maxLeverage} value={accountStats.currentLeverage / accountStats.maxLeverage}
label="Lvg" label='Lvg'
/> />
</div> </div>
<SemiCircleProgress value={accountStats.risk} label="Risk" /> <SemiCircleProgress value={accountStats.risk} label='Risk' />
<ProgressBar value={accountStats.health} /> <ProgressBar value={accountStats.health} />
</div> </div>
)} )}
</div> </div>
<div className="mb-2 rounded-md border border-white/20 p-3 text-sm"> <div className='mb-2 rounded-md border border-white/20 p-3 text-sm'>
<div className="mb-1 flex justify-between"> <div className='mb-1 flex justify-between'>
<div>Total Position:</div> <div>Total Position:</div>
<div className="font-semibold"> <div className='font-semibold'>
{formatCurrency(accountStats?.totalPosition ?? 0)} {formatCurrency(accountStats?.totalPosition ?? 0)}
</div> </div>
</div> </div>
<div className="flex justify-between"> <div className='flex justify-between'>
<div>Total Liabilities:</div> <div>Total Liabilities:</div>
<div className="font-semibold"> <div className='font-semibold'>
{formatCurrency(accountStats?.totalDebt ?? 0)} {formatCurrency(accountStats?.totalDebt ?? 0)}
</div> </div>
</div> </div>
</div> </div>
<div className="rounded-md border border-white/20 p-3"> <div className='rounded-md border border-white/20 p-3'>
<h4 className="mb-2 font-bold">Balances</h4> <h4 className='mb-2 font-bold'>Balances</h4>
{isLoadingPositions ? ( {isLoadingPositions ? (
<div>Loading...</div> <div>Loading...</div>
) : ( ) : (
<table className="w-full border-separate border-spacing-1"> <table className='w-full border-separate border-spacing-1'>
<thead className="text-left text-xs font-semibold"> <thead className='text-left text-xs font-semibold'>
<tr> <tr>
<th>Asset</th> <th>Asset</th>
<th>Value</th> <th>Value</th>
<th>Size</th> <th>Size</th>
<th className="text-right">APY</th> <th className='text-right'>APY</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{positionsData?.coins.map((coin) => ( {positionsData?.coins.map((coin) => (
<tr key={coin.denom} className="text-xs text-white/50"> <tr key={coin.denom} className='text-xs text-white/50'>
<td>{getTokenSymbol(coin.denom)}</td> <td>{getTokenSymbol(coin.denom)}</td>
<td> <td>
{formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))} {formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))}
@ -289,12 +290,12 @@ const WithdrawModal = ({ show, onClose }: any) => {
maximumFractionDigits: getTokenDecimals(coin.denom), maximumFractionDigits: getTokenDecimals(coin.denom),
})} })}
</td> </td>
<td className="text-right">-</td> <td className='text-right'>-</td>
</tr> </tr>
))} ))}
{positionsData?.debts.map((coin) => ( {positionsData?.debts.map((coin) => (
<tr key={coin.denom} className="text-xs text-red-500"> <tr key={coin.denom} className='text-xs text-red-500'>
<td className="text-white/50">{getTokenSymbol(coin.denom)}</td> <td className='text-white/50'>{getTokenSymbol(coin.denom)}</td>
<td> <td>
-{formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))} -{formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))}
</td> </td>
@ -307,7 +308,7 @@ const WithdrawModal = ({ show, onClose }: any) => {
maximumFractionDigits: 6, maximumFractionDigits: 6,
})} })}
</td> </td>
<td className="text-right"> <td className='text-right'>
-{(Number(marketsData?.[coin.denom].borrow_rate) * 100).toFixed(1)}% -{(Number(marketsData?.[coin.denom].borrow_rate) * 100).toFixed(1)}%
</td> </td>
</tr> </tr>

10
hooks/mutations/useBorrowFunds.tsx
View File

@ -2,16 +2,16 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react
import { useMemo } from 'react' import { useMemo } from 'react'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import useWalletStore from 'stores/useWalletStore'
import { hardcodedFee } from 'utils/contants'
import useCreditManagerStore from 'stores/useCreditManagerStore' import useCreditManagerStore from 'stores/useCreditManagerStore'
import useWalletStore from 'stores/useWalletStore'
import { queryKeys } from 'types/query-keys-factory' import { queryKeys } from 'types/query-keys-factory'
import { hardcodedFee } from 'utils/contants'
const useBorrowFunds = ( const useBorrowFunds = (
amount: number, amount: number,
denom: string, denom: string,
withdraw = false, withdraw = false,
options: Omit<UseMutationOptions, 'onError'> options: Omit<UseMutationOptions, 'onError'>,
) => { ) => {
const creditManagerClient = useWalletStore((s) => s.clients.creditManager) const creditManagerClient = useWalletStore((s) => s.clients.creditManager)
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount ?? '') const selectedAccount = useCreditManagerStore((s) => s.selectedAccount ?? '')
@ -51,7 +51,7 @@ const useBorrowFunds = (
async () => async () =>
await creditManagerClient?.updateCreditAccount( await creditManagerClient?.updateCreditAccount(
{ accountId: selectedAccount, actions }, { accountId: selectedAccount, actions },
hardcodedFee hardcodedFee,
), ),
{ {
onSettled: () => { onSettled: () => {
@ -68,7 +68,7 @@ const useBorrowFunds = (
toast.error(err.message) toast.error(err.message)
}, },
...options, ...options,
} },
) )
} }

8
hooks/mutations/useCreateCreditAccount.tsx
View File

@ -1,11 +1,11 @@
import { useMutation, useQueryClient } from '@tanstack/react-query' import { useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import useWalletStore from 'stores/useWalletStore'
import { contractAddresses } from 'config/contracts' import { contractAddresses } from 'config/contracts'
import { hardcodedFee } from 'utils/contants'
import useCreditManagerStore from 'stores/useCreditManagerStore' import useCreditManagerStore from 'stores/useCreditManagerStore'
import useWalletStore from 'stores/useWalletStore'
import { queryKeys } from 'types/query-keys-factory' import { queryKeys } from 'types/query-keys-factory'
import { hardcodedFee } from 'utils/contants'
// 200000 gas used // 200000 gas used
const executeMsg = { const executeMsg = {
@ -25,7 +25,7 @@ const useCreateCreditAccount = () => {
address, address,
contractAddresses.creditManager, contractAddresses.creditManager,
executeMsg, executeMsg,
hardcodedFee hardcodedFee,
), ),
{ {
onSettled: () => { onSettled: () => {
@ -42,7 +42,7 @@ const useCreateCreditAccount = () => {
setSelectedAccount(createdID) setSelectedAccount(createdID)
toast.success('New account created') toast.success('New account created')
}, },
} },
) )
} }

8
hooks/mutations/useDeleteCreditAccount.tsx
View File

@ -1,10 +1,10 @@
import { useMutation, useQueryClient } from '@tanstack/react-query' import { useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import useWalletStore from 'stores/useWalletStore'
import { contractAddresses } from 'config/contracts' import { contractAddresses } from 'config/contracts'
import { hardcodedFee } from 'utils/contants' import useWalletStore from 'stores/useWalletStore'
import { queryKeys } from 'types/query-keys-factory' import { queryKeys } from 'types/query-keys-factory'
import { hardcodedFee } from 'utils/contants'
const useCreateCreditAccount = (accountId: string) => { const useCreateCreditAccount = (accountId: string) => {
const signingClient = useWalletStore((s) => s.signingClient) const signingClient = useWalletStore((s) => s.signingClient)
@ -22,7 +22,7 @@ const useCreateCreditAccount = (accountId: string) => {
token_id: accountId, token_id: accountId,
}, },
}, },
hardcodedFee hardcodedFee,
), ),
{ {
onSettled: () => { onSettled: () => {
@ -34,7 +34,7 @@ const useCreateCreditAccount = (accountId: string) => {
onSuccess: () => { onSuccess: () => {
toast.success('Credit Account Deleted') toast.success('Credit Account Deleted')
}, },
} },
) )
} }

10
hooks/mutations/useDepositCreditAccount.tsx
View File

@ -1,10 +1,10 @@
import { useMutation, useQueryClient } from '@tanstack/react-query' import { useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import useWalletStore from 'stores/useWalletStore'
import { contractAddresses } from 'config/contracts' import { contractAddresses } from 'config/contracts'
import { hardcodedFee } from 'utils/contants' import useWalletStore from 'stores/useWalletStore'
import { queryKeys } from 'types/query-keys-factory' import { queryKeys } from 'types/query-keys-factory'
import { hardcodedFee } from 'utils/contants'
const useDepositCreditAccount = ( const useDepositCreditAccount = (
accountId: string, accountId: string,
@ -12,7 +12,7 @@ const useDepositCreditAccount = (
amount: number, amount: number,
options?: { options?: {
onSuccess?: () => void onSuccess?: () => void
} },
) => { ) => {
const signingClient = useWalletStore((s) => s.signingClient) const signingClient = useWalletStore((s) => s.signingClient)
const address = useWalletStore((s) => s.address) const address = useWalletStore((s) => s.address)
@ -44,7 +44,7 @@ const useDepositCreditAccount = (
denom, denom,
amount: String(amount), amount: String(amount),
}, },
] ],
), ),
{ {
onError: (err: Error) => { onError: (err: Error) => {
@ -57,7 +57,7 @@ const useDepositCreditAccount = (
options?.onSuccess && options.onSuccess() options?.onSuccess && options.onSuccess()
}, },
} },
) )
} }

12
hooks/mutations/useRepayFunds.tsx
View File

@ -1,13 +1,13 @@
import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query' import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
import BigNumber from 'bignumber.js'
import { useMemo } from 'react' import { useMemo } from 'react'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import BigNumber from 'bignumber.js'
import useWalletStore from 'stores/useWalletStore'
import { contractAddresses } from 'config/contracts' import { contractAddresses } from 'config/contracts'
import { hardcodedFee } from 'utils/contants'
import useCreditManagerStore from 'stores/useCreditManagerStore' import useCreditManagerStore from 'stores/useCreditManagerStore'
import useWalletStore from 'stores/useWalletStore'
import { queryKeys } from 'types/query-keys-factory' import { queryKeys } from 'types/query-keys-factory'
import { hardcodedFee } from 'utils/contants'
import { getTokenDecimals } from 'utils/tokens' import { getTokenDecimals } from 'utils/tokens'
// 0.001% buffer / slippage to avoid repay action from not fully repaying the debt amount // 0.001% buffer / slippage to avoid repay action from not fully repaying the debt amount
@ -16,7 +16,7 @@ const REPAY_BUFFER = 1.00001
const useRepayFunds = ( const useRepayFunds = (
amount: number, amount: number,
denom: string, denom: string,
options: Omit<UseMutationOptions, 'onError'> options: Omit<UseMutationOptions, 'onError'>,
) => { ) => {
const signingClient = useWalletStore((s) => s.signingClient) const signingClient = useWalletStore((s) => s.signingClient)
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount) const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
@ -61,7 +61,7 @@ const useRepayFunds = (
denom, denom,
amount: adjustedAmount, amount: adjustedAmount,
}, },
] ],
), ),
{ {
onSettled: () => { onSettled: () => {
@ -74,7 +74,7 @@ const useRepayFunds = (
toast.error(err.message) toast.error(err.message)
}, },
...options, ...options,
} },
) )
} }

10
hooks/mutations/useWithdrawFunds.tsx
View File

@ -2,10 +2,10 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useMemo } from 'react' import { useMemo } from 'react'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import useWalletStore from 'stores/useWalletStore'
import { hardcodedFee } from 'utils/contants'
import useCreditManagerStore from 'stores/useCreditManagerStore' import useCreditManagerStore from 'stores/useCreditManagerStore'
import useWalletStore from 'stores/useWalletStore'
import { queryKeys } from 'types/query-keys-factory' import { queryKeys } from 'types/query-keys-factory'
import { hardcodedFee } from 'utils/contants'
const useWithdrawFunds = ( const useWithdrawFunds = (
amount: number, amount: number,
@ -13,7 +13,7 @@ const useWithdrawFunds = (
denom: string, denom: string,
options?: { options?: {
onSuccess?: () => void onSuccess?: () => void
} },
) => { ) => {
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount ?? '') const selectedAccount = useCreditManagerStore((s) => s.selectedAccount ?? '')
const address = useWalletStore((s) => s.address) const address = useWalletStore((s) => s.address)
@ -55,7 +55,7 @@ const useWithdrawFunds = (
async () => async () =>
creditManagerClient?.updateCreditAccount( creditManagerClient?.updateCreditAccount(
{ accountId: selectedAccount, actions }, { accountId: selectedAccount, actions },
hardcodedFee hardcodedFee,
), ),
{ {
onSuccess: () => { onSuccess: () => {
@ -69,7 +69,7 @@ const useWithdrawFunds = (
onError: (err: Error) => { onError: (err: Error) => {
toast.error(err.message) toast.error(err.message)
}, },
} },
) )
} }

5
hooks/useAccountStats.tsx
View File

@ -1,8 +1,9 @@
import { useMemo } from 'react'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import { useMemo } from 'react'
import useCreditManagerStore from 'stores/useCreditManagerStore' import useCreditManagerStore from 'stores/useCreditManagerStore'
import { getTokenDecimals } from 'utils/tokens' import { getTokenDecimals } from 'utils/tokens'
import useCreditAccountPositions from './useCreditAccountPositions' import useCreditAccountPositions from './useCreditAccountPositions'
import useMarkets from './useMarkets' import useMarkets from './useMarkets'
import useTokenPrices from './useTokenPrices' import useTokenPrices from './useTokenPrices'
@ -49,7 +50,7 @@ const useAccountStats = () => {
const totalWeightedPositions = positionsData.coins.reduce((acc, coin) => { const totalWeightedPositions = positionsData.coins.reduce((acc, coin) => {
const tokenWeightedValue = BigNumber(getTokenTotalUSDValue(coin.amount, coin.denom)).times( const tokenWeightedValue = BigNumber(getTokenTotalUSDValue(coin.amount, coin.denom)).times(
Number(marketsData[coin.denom].liquidation_threshold) Number(marketsData[coin.denom].liquidation_threshold),
) )
return tokenWeightedValue.plus(acc).toNumber() return tokenWeightedValue.plus(acc).toNumber()

2
hooks/useAllBalances.tsx
View File

@ -17,7 +17,7 @@ const useAllBalances = () => {
{ {
enabled: !!address, enabled: !!address,
staleTime: Infinity, staleTime: Infinity,
} },
) )
return { return {

4
hooks/useAllowedCoins.tsx
View File

@ -1,7 +1,7 @@
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import useWalletStore from 'stores/useWalletStore'
import { contractAddresses } from 'config/contracts' import { contractAddresses } from 'config/contracts'
import useWalletStore from 'stores/useWalletStore'
import { queryKeys } from 'types/query-keys-factory' import { queryKeys } from 'types/query-keys-factory'
type Result = string[] type Result = string[]
@ -19,7 +19,7 @@ const useAllowedCoins = () => {
{ {
enabled: !!client, enabled: !!client,
staleTime: Infinity, staleTime: Infinity,
} },
) )
return { return {

13
hooks/useCalculateMaxBorrowAmount.tsx
View File

@ -1,12 +1,13 @@
import { useCallback, useMemo } from 'react'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import { useCallback, useMemo } from 'react'
import useCreditManagerStore from 'stores/useCreditManagerStore' import useCreditManagerStore from 'stores/useCreditManagerStore'
import { getTokenDecimals } from 'utils/tokens' import { getTokenDecimals } from 'utils/tokens'
import useCreditAccountPositions from './useCreditAccountPositions' import useCreditAccountPositions from './useCreditAccountPositions'
import useMarkets from './useMarkets' import useMarkets from './useMarkets'
import useTokenPrices from './useTokenPrices'
import useRedbankBalances from './useRedbankBalances' import useRedbankBalances from './useRedbankBalances'
import useTokenPrices from './useTokenPrices'
const getApproximateHourlyInterest = (amount: string, borrowAPY: string) => { const getApproximateHourlyInterest = (amount: string, borrowAPY: string) => {
const hourlyAPY = BigNumber(borrowAPY).div(24 * 365) const hourlyAPY = BigNumber(borrowAPY).div(24 * 365)
@ -28,7 +29,7 @@ const useCalculateMaxBorrowAmount = (denom: string, isUnderCollateralized: boole
return BigNumber(amount).times(tokenPrices[denom]).toNumber() return BigNumber(amount).times(tokenPrices[denom]).toNumber()
}, },
[tokenPrices] [tokenPrices],
) )
return useMemo(() => { return useMemo(() => {
@ -37,7 +38,7 @@ const useCalculateMaxBorrowAmount = (denom: string, isUnderCollateralized: boole
// max ltv adjusted collateral // max ltv adjusted collateral
const totalWeightedPositions = positionsData?.coins.reduce((acc, coin) => { const totalWeightedPositions = positionsData?.coins.reduce((acc, coin) => {
const tokenWeightedValue = BigNumber(getTokenValue(coin.amount, coin.denom)).times( const tokenWeightedValue = BigNumber(getTokenValue(coin.amount, coin.denom)).times(
Number(marketsData[coin.denom].max_loan_to_value) Number(marketsData[coin.denom].max_loan_to_value),
) )
return tokenWeightedValue.plus(acc).toNumber() return tokenWeightedValue.plus(acc).toNumber()
@ -48,11 +49,11 @@ const useCalculateMaxBorrowAmount = (denom: string, isUnderCollateralized: boole
const totalLiabilitiesValue = positionsData?.debts.reduce((acc, coin) => { const totalLiabilitiesValue = positionsData?.debts.reduce((acc, coin) => {
const estimatedInterestAmount = getApproximateHourlyInterest( const estimatedInterestAmount = getApproximateHourlyInterest(
coin.amount, coin.amount,
marketsData[coin.denom].borrow_rate marketsData[coin.denom].borrow_rate,
) )
const tokenDebtValue = BigNumber(getTokenValue(coin.amount, coin.denom)).plus( const tokenDebtValue = BigNumber(getTokenValue(coin.amount, coin.denom)).plus(
estimatedInterestAmount estimatedInterestAmount,
) )
return tokenDebtValue.plus(acc).toNumber() return tokenDebtValue.plus(acc).toNumber()

17
hooks/useCalculateMaxWithdrawAmount.tsx
View File

@ -1,11 +1,12 @@
import { useCallback, useMemo } from 'react'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import { useCallback, useMemo } from 'react'
import { getTokenDecimals } from 'utils/tokens'
import useCreditAccountPositions from './useCreditAccountPositions'
import useCreditManagerStore from 'stores/useCreditManagerStore' import useCreditManagerStore from 'stores/useCreditManagerStore'
import useTokenPrices from './useTokenPrices' import { getTokenDecimals } from 'utils/tokens'
import useCreditAccountPositions from './useCreditAccountPositions'
import useMarkets from './useMarkets' import useMarkets from './useMarkets'
import useTokenPrices from './useTokenPrices'
const getApproximateHourlyInterest = (amount: string, borrowAPY: string) => { const getApproximateHourlyInterest = (amount: string, borrowAPY: string) => {
const hourlyAPY = BigNumber(borrowAPY).div(24 * 365) const hourlyAPY = BigNumber(borrowAPY).div(24 * 365)
@ -28,7 +29,7 @@ const useCalculateMaxWithdrawAmount = (denom: string, borrow: boolean) => {
return BigNumber(amount).times(tokenPrices[denom]).toNumber() return BigNumber(amount).times(tokenPrices[denom]).toNumber()
}, },
[tokenPrices] [tokenPrices],
) )
const tokenAmountInCreditAccount = useMemo(() => { const tokenAmountInCreditAccount = useMemo(() => {
@ -48,10 +49,10 @@ const useCalculateMaxWithdrawAmount = (denom: string, borrow: boolean) => {
const totalLiabilitiesValue = positionsData?.debts.reduce((acc, coin) => { const totalLiabilitiesValue = positionsData?.debts.reduce((acc, coin) => {
const estimatedInterestAmount = getApproximateHourlyInterest( const estimatedInterestAmount = getApproximateHourlyInterest(
coin.amount, coin.amount,
marketsData[coin.denom].borrow_rate marketsData[coin.denom].borrow_rate,
) )
const tokenDebtValue = BigNumber(getTokenValue(coin.amount, coin.denom)).plus( const tokenDebtValue = BigNumber(getTokenValue(coin.amount, coin.denom)).plus(
estimatedInterestAmount estimatedInterestAmount,
) )
return tokenDebtValue.plus(acc).toNumber() return tokenDebtValue.plus(acc).toNumber()
@ -61,7 +62,7 @@ const useCalculateMaxWithdrawAmount = (denom: string, borrow: boolean) => {
if (coin.denom === denom) return acc if (coin.denom === denom) return acc
const tokenWeightedValue = BigNumber(getTokenValue(coin.amount, coin.denom)).times( const tokenWeightedValue = BigNumber(getTokenValue(coin.amount, coin.denom)).times(
Number(marketsData[coin.denom].max_loan_to_value) Number(marketsData[coin.denom].max_loan_to_value),
) )
return tokenWeightedValue.plus(acc).toNumber() return tokenWeightedValue.plus(acc).toNumber()

6
hooks/useCreditAccountPositions.tsx
View File

@ -1,9 +1,9 @@
import { Coin } from '@cosmjs/stargate'
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import { useMemo } from 'react' import { useMemo } from 'react'
import { Coin } from '@cosmjs/stargate'
import useWalletStore from 'stores/useWalletStore'
import { contractAddresses } from 'config/contracts' import { contractAddresses } from 'config/contracts'
import useWalletStore from 'stores/useWalletStore'
import { queryKeys } from 'types/query-keys-factory' import { queryKeys } from 'types/query-keys-factory'
interface DebtAmount { interface DebtAmount {
@ -40,7 +40,7 @@ const useCreditAccountPositions = (accountId: string) => {
enabled: !!address && !!client, enabled: !!address && !!client,
refetchInterval: 30000, refetchInterval: 30000,
staleTime: Infinity, staleTime: Infinity,
} },
) )
return { return {

4
hooks/useCreditAccounts.tsx
View File

@ -1,9 +1,9 @@
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import { useMemo } from 'react' import { useMemo } from 'react'
import useWalletStore from 'stores/useWalletStore'
import { contractAddresses } from 'config/contracts' import { contractAddresses } from 'config/contracts'
import useCreditManagerStore from 'stores/useCreditManagerStore' import useCreditManagerStore from 'stores/useCreditManagerStore'
import useWalletStore from 'stores/useWalletStore'
import { queryKeys } from 'types/query-keys-factory' import { queryKeys } from 'types/query-keys-factory'
type Result = { type Result = {
@ -35,7 +35,7 @@ const useCreditAccounts = () => {
creditManagerActions.setSelectedAccount(data.tokens[0]) creditManagerActions.setSelectedAccount(data.tokens[0])
} }
}, },
} },
) )
return { return {

2
hooks/useMarkets.tsx
View File

@ -86,7 +86,7 @@ const useMarkets = () => {
}), }),
{ {
staleTime: Infinity, staleTime: Infinity,
} },
) )
return { return {

6
hooks/useRedbankBalances.tsx
View File

@ -1,6 +1,6 @@
import { useMemo } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Coin } from '@cosmjs/stargate' import { Coin } from '@cosmjs/stargate'
import { useQuery } from '@tanstack/react-query'
import { useMemo } from 'react'
import { contractAddresses } from 'config/contracts' import { contractAddresses } from 'config/contracts'
import { queryKeys } from 'types/query-keys-factory' import { queryKeys } from 'types/query-keys-factory'
@ -50,7 +50,7 @@ const useRedbankBalances = () => {
...acc, ...acc,
[coin.denom]: coin.amount, [coin.denom]: coin.amount,
}), }),
{} {},
) as { [key in string]: string } ) as { [key in string]: string }
}, [result.data]), }, [result.data]),
} }

6
hooks/useTokenBalance.tsx
View File

@ -2,8 +2,8 @@ import { useQuery } from '@tanstack/react-query'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import useWalletStore from 'stores/useWalletStore' import useWalletStore from 'stores/useWalletStore'
import { chain } from 'utils/chains'
import { queryKeys } from 'types/query-keys-factory' import { queryKeys } from 'types/query-keys-factory'
import { chain } from 'utils/chains'
type Result = { type Result = {
balance: { balance: {
@ -21,11 +21,11 @@ const useTokenBalance = (denom?: string) => {
fetch( fetch(
`${chain.rest}/cosmos/bank/v1beta1/balances/${address}/by_denom?denom=${ `${chain.rest}/cosmos/bank/v1beta1/balances/${address}/by_denom?denom=${
denom || chain.stakeCurrency.coinMinimalDenom denom || chain.stakeCurrency.coinMinimalDenom
}` }`,
).then((res) => res.json()), ).then((res) => res.json()),
{ {
enabled: !!address, enabled: !!address,
} },
) )
return { return {

2
hooks/useTokenPrices.tsx
View File

@ -9,7 +9,7 @@ const useTokenPrices = () => {
}), }),
{ {
staleTime: Infinity, staleTime: Infinity,
} },
) )
} }

2
package.json
View File

@ -5,6 +5,7 @@
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",
"format": "eslint . --ext=ts,tsx --fix && prettier --write ./**/*.ts ./**/*.tsx",
"start": "next start", "start": "next start",
"lint": "next lint" "lint": "next lint"
}, },
@ -41,6 +42,7 @@
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
"eslint": "8.23.0", "eslint": "8.23.0",
"eslint-config-next": "12.3.1", "eslint-config-next": "12.3.1",
"eslint-plugin-import": "^2.26.0",
"postcss": "^8.4.16", "postcss": "^8.4.16",
"prettier": "^2.7.1", "prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13", "prettier-plugin-tailwindcss": "^0.1.13",

17
pages/_app.tsx
View File

@ -1,13 +1,14 @@
import { useEffect } from 'react' import 'react-toastify/dist/ReactToastify.min.css'
import '../styles/globals.css'
import detectEthereumProvider from '@metamask/detect-provider'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'
import Head from 'next/head' import Head from 'next/head'
import { useEffect } from 'react'
import { ToastContainer, Zoom } from 'react-toastify' import { ToastContainer, Zoom } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.min.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import detectEthereumProvider from '@metamask/detect-provider'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import '../styles/globals.css'
import Layout from 'components/Layout' import Layout from 'components/Layout'
import useWalletStore from 'stores/useWalletStore' import useWalletStore from 'stores/useWalletStore'
@ -38,7 +39,7 @@ function MyApp({ Component, pageProps }: AppProps) {
<Head> <Head>
<title>Mars V2</title> <title>Mars V2</title>
{/* <meta name="description" content="Generated by create next app" /> */} {/* <meta name="description" content="Generated by create next app" /> */}
<link rel="icon" href="/favicon.svg" /> <link rel='icon' href='/favicon.svg' />
</Head> </Head>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ReactQueryDevtools initialIsOpen={false} /> <ReactQueryDevtools initialIsOpen={false} />
@ -48,7 +49,7 @@ function MyApp({ Component, pageProps }: AppProps) {
<ToastContainer <ToastContainer
autoClose={1500} autoClose={1500}
closeButton={false} closeButton={false}
position="bottom-right" position='bottom-right'
hideProgressBar hideProgressBar
newestOnTop newestOnTop
transition={Zoom} transition={Zoom}

30
pages/borrow.tsx
View File

@ -1,17 +1,17 @@
import React, { useMemo, useRef, useState } from 'react'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import React, { useMemo, useRef, useState } from 'react'
import Container from 'components/Container'
import useAllowedCoins from 'hooks/useAllowedCoins'
import { getTokenDecimals, getTokenInfo } from 'utils/tokens'
import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
import useCreditManagerStore from 'stores/useCreditManagerStore'
import useMarkets from 'hooks/useMarkets'
import useTokenPrices from 'hooks/useTokenPrices'
import BorrowModal from 'components/BorrowModal'
import RepayModal from 'components/RepayModal'
import BorrowTable from 'components/Borrow/BorrowTable' import BorrowTable from 'components/Borrow/BorrowTable'
import BorrowModal from 'components/BorrowModal'
import Container from 'components/Container'
import RepayModal from 'components/RepayModal'
import useAllowedCoins from 'hooks/useAllowedCoins'
import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
import useMarkets from 'hooks/useMarkets'
import useRedbankBalances from 'hooks/useRedbankBalances' import useRedbankBalances from 'hooks/useRedbankBalances'
import useTokenPrices from 'hooks/useTokenPrices'
import useCreditManagerStore from 'stores/useCreditManagerStore'
import { getTokenDecimals, getTokenInfo } from 'utils/tokens'
type ModalState = { type ModalState = {
show: 'borrow' | 'repay' | false show: 'borrow' | 'repay' | false
@ -115,11 +115,11 @@ const Borrow = () => {
} }
return ( return (
<div className="flex items-start gap-4"> <div className='flex items-start gap-4'>
<div className="flex-1"> <div className='flex-1'>
<Container className="mb-4"> <Container className='mb-4'>
<div> <div>
<h3 className="mb-7 text-center text-xl font-medium uppercase">Borrowings</h3> <h3 className='mb-7 text-center text-xl font-medium uppercase'>Borrowings</h3>
<BorrowTable <BorrowTable
data={borrowedAssets} data={borrowedAssets}
onBorrowClick={handleBorrowClick} onBorrowClick={handleBorrowClick}
@ -129,7 +129,7 @@ const Borrow = () => {
</Container> </Container>
<Container> <Container>
<div> <div>
<h3 className="mb-7 text-center text-xl font-medium uppercase">Available to Borrow</h3> <h3 className='mb-7 text-center text-xl font-medium uppercase'>Available to Borrow</h3>
<BorrowTable <BorrowTable
data={notBorrowedAssets} data={notBorrowedAssets}
onBorrowClick={handleBorrowClick} onBorrowClick={handleBorrowClick}

1
pages/council.tsx
View File

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import Container from 'components/Container' import Container from 'components/Container'
const Council = () => { const Council = () => {

7
pages/earn.tsx
View File

@ -1,11 +1,12 @@
import React from 'react' import React from 'react'
import Container from 'components/Container' import Container from 'components/Container'
const Earn = () => { const Earn = () => {
return ( return (
<div className="flex gap-4"> <div className='flex gap-4'>
<Container className="flex-1">Yield Module</Container> <Container className='flex-1'>Yield Module</Container>
<Container className="w-[450px]">Placeholder</Container> <Container className='w-[450px]'>Placeholder</Container>
</div> </div>
) )
} }

98
pages/index.tsx
View File

@ -1,23 +1,23 @@
import React, { useEffect, useState } from 'react'
import type { NextPage } from 'next'
// import Head from "next/head"; // import Head from "next/head";
// import Image from "next/image"; // import Image from "next/image";
// import styles from "../styles/Home.module.css"; // import styles from "../styles/Home.module.css";
import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate' import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
// import { Coin } from "@cosmjs/stargate";
import { toast } from 'react-toastify'
import BigNumber from 'bignumber.js'
import { useQueryClient } from '@tanstack/react-query' import { useQueryClient } from '@tanstack/react-query'
import BigNumber from 'bignumber.js'
import type { NextPage } from 'next'
import React, { useEffect, useState } from 'react'
import { toast } from 'react-toastify'
import Container from 'components/Container'
import Button from 'components/Button' import Button from 'components/Button'
import useWalletStore from 'stores/useWalletStore' import Container from 'components/Container'
import { chain } from 'utils/chains'
import { contractAddresses } from 'config/contracts'
import { hardcodedFee } from 'utils/contants'
import Spinner from 'components/Spinner' import Spinner from 'components/Spinner'
import { contractAddresses } from 'config/contracts'
// import { Coin } from "@cosmjs/stargate";
import useCreditManagerStore from 'stores/useCreditManagerStore' import useCreditManagerStore from 'stores/useCreditManagerStore'
import useWalletStore from 'stores/useWalletStore'
import { queryKeys } from 'types/query-keys-factory' import { queryKeys } from 'types/query-keys-factory'
import { chain } from 'utils/chains'
import { hardcodedFee } from 'utils/contants'
const Home: NextPage = () => { const Home: NextPage = () => {
const [sendAmount, setSendAmount] = useState('') const [sendAmount, setSendAmount] = useState('')
@ -73,7 +73,7 @@ const Home: NextPage = () => {
.toString(), .toString(),
}, },
], ],
hardcodedFee hardcodedFee,
) )
console.log('txResponse', res) console.log('txResponse', res)
@ -81,13 +81,13 @@ const Home: NextPage = () => {
<div> <div>
<a <a
href={`https://testnet.mintscan.io/osmosis-testnet/txs/${res?.transactionHash}`} href={`https://testnet.mintscan.io/osmosis-testnet/txs/${res?.transactionHash}`}
target="_blank" target='_blank'
rel="noreferrer" rel='noreferrer'
> >
Check transaction Check transaction
</a> </a>
</div>, </div>,
{ autoClose: false } { autoClose: false },
) )
} catch (e: any) { } catch (e: any) {
console.log(e) console.log(e)
@ -111,7 +111,7 @@ const Home: NextPage = () => {
address, address,
contractAddresses.creditManager, contractAddresses.creditManager,
executeMsg, executeMsg,
hardcodedFee hardcodedFee,
) )
console.log('mint result', createResult) console.log('mint result', createResult)
@ -119,13 +119,13 @@ const Home: NextPage = () => {
<div> <div>
<a <a
href={`https://testnet.mintscan.io/osmosis-testnet/txs/${createResult?.transactionHash}`} href={`https://testnet.mintscan.io/osmosis-testnet/txs/${createResult?.transactionHash}`}
target="_blank" target='_blank'
rel="noreferrer" rel='noreferrer'
> >
Check transaction Check transaction
</a> </a>
</div>, </div>,
{ autoClose: false } { autoClose: false },
) )
queryClient.invalidateQueries(queryKeys.creditAccounts(address)) queryClient.invalidateQueries(queryKeys.creditAccounts(address))
@ -149,7 +149,7 @@ const Home: NextPage = () => {
const allTokensResponse = await signingClient?.queryContractSmart( const allTokensResponse = await signingClient?.queryContractSmart(
contractAddresses.accountNft, contractAddresses.accountNft,
allTokensQueryMsg allTokensQueryMsg,
) )
setAllTokens(allTokensResponse.tokens) setAllTokens(allTokensResponse.tokens)
@ -179,7 +179,7 @@ const Home: NextPage = () => {
const tokensResponse = await signingClient?.queryContractSmart( const tokensResponse = await signingClient?.queryContractSmart(
contractAddresses.accountNft, contractAddresses.accountNft,
tokensQueryMsg tokensQueryMsg,
) )
console.log('res tokens', tokensResponse) console.log('res tokens', tokensResponse)
@ -219,7 +219,7 @@ const Home: NextPage = () => {
address, address,
contractAddresses.creditManager, contractAddresses.creditManager,
executeMsg, executeMsg,
hardcodedFee hardcodedFee,
) )
console.log('borrow result', borrowResult) console.log('borrow result', borrowResult)
@ -227,13 +227,13 @@ const Home: NextPage = () => {
<div> <div>
<a <a
href={`https://testnet.mintscan.io/osmosis-testnet/txs/${borrowResult?.transactionHash}`} href={`https://testnet.mintscan.io/osmosis-testnet/txs/${borrowResult?.transactionHash}`}
target="_blank" target='_blank'
rel="noreferrer" rel='noreferrer'
> >
Check transaction Check transaction
</a> </a>
</div>, </div>,
{ autoClose: false } { autoClose: false },
) )
queryClient.invalidateQueries(queryKeys.creditAccounts(address)) queryClient.invalidateQueries(queryKeys.creditAccounts(address))
@ -248,64 +248,64 @@ const Home: NextPage = () => {
} }
return ( return (
<div className="mx-auto flex max-w-6xl flex-col gap-y-6"> <div className='mx-auto flex max-w-6xl flex-col gap-y-6'>
<Container> <Container>
<h4 className="mb-5 text-xl">Send Tokens</h4> <h4 className='mb-5 text-xl'>Send Tokens</h4>
<div className="mb-5 flex flex-wrap gap-2"> <div className='mb-5 flex flex-wrap gap-2'>
<div> <div>
<p>Address:</p> <p>Address:</p>
<input <input
className="rounded-lg bg-black/40 px-3 py-1" 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)}
/> />
</div> </div>
<div> <div>
<p>Amount:</p> <p>Amount:</p>
<input <input
type="number" type='number'
className="rounded-lg bg-black/40 px-3 py-1" 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)}
/> />
</div> </div>
</div> </div>
<Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleSendClick}> <Button className='bg-[#524bb1] hover:bg-[#6962cc]' onClick={handleSendClick}>
Send Send
</Button> </Button>
</Container> </Container>
<Container> <Container>
<h4 className="mb-5 text-xl">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="mb-5 text-xl">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="mb-5 text-xl">Borrow OSMO</h4> <h4 className='mb-5 text-xl'>Borrow OSMO</h4>
<input <input
className="rounded-lg bg-black/40 px-3 py-1" 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="ml-4 bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleBorrowClick}> <Button className='ml-4 bg-[#524bb1] hover:bg-[#6962cc]' onClick={handleBorrowClick}>
Borrow Borrow
</Button> </Button>
</Container> </Container>
<div> <div>
{allTokens && ( {allTokens && (
<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="ml-2 text-sm">- {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>
@ -314,9 +314,9 @@ const Home: NextPage = () => {
)} )}
{walletTokens && ( {walletTokens && (
<> <>
<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="ml-2 text-sm">- {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="mt-8 bg-white p-4 text-red-500">{error}</div>} {error && <div className='mt-8 bg-white p-4 text-red-500'>{error}</div>}
{isLoading && ( {isLoading && (
<div> <div>
<Spinner /> <Spinner />

22
pages/portfolio.tsx
View File

@ -48,39 +48,39 @@ const mockedAccounts = [
const Portfolio = () => { const Portfolio = () => {
return ( return (
<div className="flex flex-col gap-4"> <div className='flex flex-col gap-4'>
<Container className="flex-1">Portfolio Module</Container> <Container className='flex-1'>Portfolio Module</Container>
<div className="grid grid-cols-2 gap-4"> <div className='grid grid-cols-2 gap-4'>
{mockedAccounts.map((account) => ( {mockedAccounts.map((account) => (
<Container key={account.id}> <Container key={account.id}>
<p className="mb-4 text-center font-bold">{account.label}</p> <p className='mb-4 text-center font-bold'>{account.label}</p>
<div className="grid grid-cols-3 gap-4"> <div className='grid grid-cols-3 gap-4'>
<div> <div>
<p>{formatCurrency(account.networth)}</p> <p>{formatCurrency(account.networth)}</p>
<p className="text-sm text-white/40">Net worth</p> <p className='text-sm text-white/40'>Net worth</p>
</div> </div>
<div> <div>
<p>{formatCurrency(account.totalPositionValue)}</p> <p>{formatCurrency(account.totalPositionValue)}</p>
<p className="text-sm text-white/40">Total Position Value</p> <p className='text-sm text-white/40'>Total Position Value</p>
</div> </div>
<div> <div>
<p>{formatCurrency(account.debt)}</p> <p>{formatCurrency(account.debt)}</p>
<p className="text-sm text-white/40">Debt</p> <p className='text-sm text-white/40'>Debt</p>
</div> </div>
<div> <div>
<p className={`${account.profit > 0 ? 'text-green-400' : 'text-red-500'}`}> <p className={`${account.profit > 0 ? 'text-green-400' : 'text-red-500'}`}>
{account.profit > 0 && '+'} {account.profit > 0 && '+'}
{formatCurrency(account.profit)} {formatCurrency(account.profit)}
</p> </p>
<p className="text-sm text-white/40">P&L</p> <p className='text-sm text-white/40'>P&L</p>
</div> </div>
<div> <div>
<p>{account.leverage}</p> <p>{account.leverage}</p>
<p className="text-sm text-white/40">Current Leverage</p> <p className='text-sm text-white/40'>Current Leverage</p>
</div> </div>
<div> <div>
<p>{account.maxLeverage}</p> <p>{account.maxLeverage}</p>
<p className="text-sm text-white/40">Max Leverage</p> <p className='text-sm text-white/40'>Max Leverage</p>
</div> </div>
</div> </div>
</Container> </Container>

7
pages/trade.tsx
View File

@ -1,12 +1,13 @@
import React from 'react' import React from 'react'
import Container from 'components/Container' import Container from 'components/Container'
const Trade = () => { const Trade = () => {
return ( return (
<div> <div>
<div className="mb-4 flex gap-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>
<Container>Orderbook module (optional)</Container> <Container>Orderbook module (optional)</Container>
</div> </div>

6
stores/useCreditManagerStore.tsx
View File

@ -28,10 +28,10 @@ const useCreditManagerStore = create<CreditManagerStore>()(
name: 'creditManager', name: 'creditManager',
partialize: (state) => partialize: (state) =>
Object.fromEntries( Object.fromEntries(
Object.entries(state).filter(([key]) => ['selectedAccount'].includes(key)) Object.entries(state).filter(([key]) => ['selectedAccount'].includes(key)),
), ),
} },
) ),
) )
export default useCreditManagerStore export default useCreditManagerStore

22
stores/useWalletStore.tsx
View File

@ -1,12 +1,12 @@
import { CosmWasmClient, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
import create from 'zustand' import create from 'zustand'
import { persist } from 'zustand/middleware' import { persist } from 'zustand/middleware'
import { Wallet } from 'types'
import { CosmWasmClient, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
import { chain } from 'utils/chains'
import { contractAddresses } from 'config/contracts' import { contractAddresses } from 'config/contracts'
import { Wallet } from 'types'
import { AccountNftClient } from 'types/generated/account-nft/AccountNft.client' import { AccountNftClient } from 'types/generated/account-nft/AccountNft.client'
import { CreditManagerClient } from 'types/generated/credit-manager/CreditManager.client' import { CreditManagerClient } from 'types/generated/credit-manager/CreditManager.client'
import { chain } from 'utils/chains'
interface WalletStore { interface WalletStore {
address: string address: string
@ -45,12 +45,12 @@ const useWalletStore = create<WalletStore>()(
const accountNft = new AccountNftClient( const accountNft = new AccountNftClient(
signingClient, signingClient,
address, address,
contractAddresses.accountNft contractAddresses.accountNft,
) )
const creditManager = new CreditManagerClient( const creditManager = new CreditManagerClient(
signingClient, signingClient,
address, address,
contractAddresses.creditManager contractAddresses.creditManager,
) )
set(() => ({ set(() => ({
@ -70,7 +70,7 @@ const useWalletStore = create<WalletStore>()(
const address = key.bech32Address const address = key.bech32Address
const signingClientInstance = await SigningCosmWasmClient.connectWithSigner( const signingClientInstance = await SigningCosmWasmClient.connectWithSigner(
chain.rpc, chain.rpc,
offlineSigner offlineSigner,
) )
get().actions.initClients(address, signingClientInstance) get().actions.initClients(address, signingClientInstance)
@ -91,7 +91,7 @@ const useWalletStore = create<WalletStore>()(
const offlineSigner = window.keplr.getOfflineSigner(chain.chainId) const offlineSigner = window.keplr.getOfflineSigner(chain.chainId)
const signingClientInstance = await SigningCosmWasmClient.connectWithSigner( const signingClientInstance = await SigningCosmWasmClient.connectWithSigner(
chain.rpc, chain.rpc,
offlineSigner offlineSigner,
) )
get().actions.initClients(address, signingClientInstance) get().actions.initClients(address, signingClientInstance)
@ -106,11 +106,11 @@ const useWalletStore = create<WalletStore>()(
partialize: (state) => partialize: (state) =>
Object.fromEntries( Object.fromEntries(
Object.entries(state).filter( Object.entries(state).filter(
([key]) => !['client', 'metamaskInstalled', 'actions', 'address'].includes(key) ([key]) => !['client', 'metamaskInstalled', 'actions', 'address'].includes(key),
) ),
), ),
} },
) ),
) )
export default useWalletStore export default useWalletStore

27
types/generated/account-nft/AccountNft.client.ts
View File

@ -5,29 +5,30 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { Coin, StdFee } from '@cosmjs/amino' import { Coin, StdFee } from '@cosmjs/amino'
import { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
import { import {
InstantiateMsg,
ExecuteMsg,
Binary,
Expiration,
Timestamp,
Uint64,
QueryMsg,
AllNftInfoResponseForEmpty, AllNftInfoResponseForEmpty,
OwnerOfResponse,
Approval, Approval,
NftInfoResponseForEmpty,
Empty,
OperatorsResponse,
TokensResponse,
ApprovalResponse, ApprovalResponse,
ApprovalsResponse, ApprovalsResponse,
Binary,
ContractInfoResponse, ContractInfoResponse,
Empty,
ExecuteMsg,
Expiration,
InstantiateMsg,
MinterResponse, MinterResponse,
NftInfoResponseForEmpty,
NumTokensResponse, NumTokensResponse,
OperatorsResponse,
OwnerOfResponse,
QueryMsg,
String, String,
Timestamp,
TokensResponse,
Uint64,
} from './AccountNft.types' } from './AccountNft.types'
export interface AccountNftReadOnlyInterface { export interface AccountNftReadOnlyInterface {
contractAddress: string contractAddress: string

31
types/generated/account-nft/AccountNft.react-query.ts
View File

@ -5,32 +5,33 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query' import { Coin, StdFee } from '@cosmjs/amino'
import { ExecuteResult } from '@cosmjs/cosmwasm-stargate' import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { StdFee, Coin } from '@cosmjs/amino' import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
import { AccountNftClient, AccountNftQueryClient } from './AccountNft.client'
import { import {
InstantiateMsg,
ExecuteMsg,
Binary,
Expiration,
Timestamp,
Uint64,
QueryMsg,
AllNftInfoResponseForEmpty, AllNftInfoResponseForEmpty,
OwnerOfResponse,
Approval, Approval,
NftInfoResponseForEmpty,
Empty,
OperatorsResponse,
TokensResponse,
ApprovalResponse, ApprovalResponse,
ApprovalsResponse, ApprovalsResponse,
Binary,
ContractInfoResponse, ContractInfoResponse,
Empty,
ExecuteMsg,
Expiration,
InstantiateMsg,
MinterResponse, MinterResponse,
NftInfoResponseForEmpty,
NumTokensResponse, NumTokensResponse,
OperatorsResponse,
OwnerOfResponse,
QueryMsg,
String, String,
Timestamp,
TokensResponse,
Uint64,
} from './AccountNft.types' } from './AccountNft.types'
import { AccountNftQueryClient, AccountNftClient } from './AccountNft.client'
export const accountNftQueryKeys = { export const accountNftQueryKeys = {
contract: [ contract: [
{ {

2
types/generated/account-nft/bundle.ts
View File

@ -5,9 +5,9 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import * as _0 from './AccountNft.types'
import * as _1 from './AccountNft.client' import * as _1 from './AccountNft.client'
import * as _2 from './AccountNft.react-query' import * as _2 from './AccountNft.react-query'
import * as _0 from './AccountNft.types'
export namespace contracts { export namespace contracts {
export const AccountNft = { ..._0, ..._1, ..._2 } export const AccountNft = { ..._0, ..._1, ..._2 }
} }

53
types/generated/credit-manager/CreditManager.client.ts
View File

@ -5,42 +5,43 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { StdFee } from '@cosmjs/amino' import { StdFee } from '@cosmjs/amino'
import { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
import { import {
Decimal,
OracleBaseForString,
RedBankBaseForString,
SwapperBaseForString,
InstantiateMsg,
VaultBaseForString,
ExecuteMsg,
Action, Action,
Uint128,
CallbackMsg,
Addr, Addr,
Coin,
ConfigUpdates,
VaultBaseForAddr,
QueryMsg,
ArrayOfCoinBalanceResponseItem, ArrayOfCoinBalanceResponseItem,
CoinBalanceResponseItem,
ArrayOfSharesResponseItem,
SharesResponseItem,
ArrayOfDebtShares, ArrayOfDebtShares,
DebtShares, ArrayOfSharesResponseItem,
ArrayOfVaultWithBalance,
VaultWithBalance,
ArrayOfVaultPositionResponseItem,
VaultPositionResponseItem,
VaultPosition,
VaultPositionState,
ArrayOfString, ArrayOfString,
ArrayOfVaultBaseForString, ArrayOfVaultBaseForString,
ArrayOfVaultPositionResponseItem,
ArrayOfVaultWithBalance,
CallbackMsg,
Coin,
CoinBalanceResponseItem,
ConfigResponse, ConfigResponse,
HealthResponse, ConfigUpdates,
Positions,
DebtAmount, DebtAmount,
DebtShares,
Decimal,
ExecuteMsg,
HealthResponse,
InstantiateMsg,
OracleBaseForString,
Positions,
QueryMsg,
RedBankBaseForString,
SharesResponseItem,
SwapperBaseForString,
Uint128,
VaultBaseForAddr,
VaultBaseForString,
VaultPosition,
VaultPositionResponseItem,
VaultPositionState,
VaultWithBalance,
} from './CreditManager.types' } from './CreditManager.types'
export interface CreditManagerReadOnlyInterface { export interface CreditManagerReadOnlyInterface {
contractAddress: string contractAddress: string

57
types/generated/credit-manager/CreditManager.react-query.ts
View File

@ -5,45 +5,46 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { StdFee } from '@cosmjs/amino' import { StdFee } from '@cosmjs/amino'
import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
import { CreditManagerClient, CreditManagerQueryClient } from './CreditManager.client'
import { import {
Decimal,
OracleBaseForString,
RedBankBaseForString,
SwapperBaseForString,
InstantiateMsg,
VaultBaseForString,
ExecuteMsg,
Action, Action,
Uint128,
CallbackMsg,
Addr, Addr,
Coin,
ConfigUpdates,
VaultBaseForAddr,
QueryMsg,
ArrayOfCoinBalanceResponseItem, ArrayOfCoinBalanceResponseItem,
CoinBalanceResponseItem,
ArrayOfSharesResponseItem,
SharesResponseItem,
ArrayOfDebtShares, ArrayOfDebtShares,
DebtShares, ArrayOfSharesResponseItem,
ArrayOfVaultWithBalance,
VaultWithBalance,
ArrayOfVaultPositionResponseItem,
VaultPositionResponseItem,
VaultPosition,
VaultPositionState,
ArrayOfString, ArrayOfString,
ArrayOfVaultBaseForString, ArrayOfVaultBaseForString,
ArrayOfVaultPositionResponseItem,
ArrayOfVaultWithBalance,
CallbackMsg,
Coin,
CoinBalanceResponseItem,
ConfigResponse, ConfigResponse,
HealthResponse, ConfigUpdates,
Positions,
DebtAmount, DebtAmount,
DebtShares,
Decimal,
ExecuteMsg,
HealthResponse,
InstantiateMsg,
OracleBaseForString,
Positions,
QueryMsg,
RedBankBaseForString,
SharesResponseItem,
SwapperBaseForString,
Uint128,
VaultBaseForAddr,
VaultBaseForString,
VaultPosition,
VaultPositionResponseItem,
VaultPositionState,
VaultWithBalance,
} from './CreditManager.types' } from './CreditManager.types'
import { CreditManagerQueryClient, CreditManagerClient } from './CreditManager.client'
export const creditManagerQueryKeys = { export const creditManagerQueryKeys = {
contract: [ contract: [
{ {

2
types/generated/credit-manager/bundle.ts
View File

@ -5,9 +5,9 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import * as _3 from './CreditManager.types'
import * as _4 from './CreditManager.client' import * as _4 from './CreditManager.client'
import * as _5 from './CreditManager.react-query' import * as _5 from './CreditManager.react-query'
import * as _3 from './CreditManager.types'
export namespace contracts { export namespace contracts {
export const CreditManager = { ..._3, ..._4, ..._5 } export const CreditManager = { ..._3, ..._4, ..._5 }
} }

19
types/generated/mars-oracle-adapter/MarsOracleAdapter.client.ts
View File

@ -5,22 +5,23 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { Coin, StdFee } from '@cosmjs/amino' import { Coin, StdFee } from '@cosmjs/amino'
import { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
import { import {
OracleBaseForString,
Addr, Addr,
PricingMethod,
InstantiateMsg,
VaultPricingInfo,
ExecuteMsg,
ConfigUpdates,
QueryMsg,
ArrayOfVaultPricingInfo, ArrayOfVaultPricingInfo,
OracleBaseForAddr,
ConfigResponse, ConfigResponse,
ConfigUpdates,
Decimal, Decimal,
ExecuteMsg,
InstantiateMsg,
OracleBaseForAddr,
OracleBaseForString,
PriceResponse, PriceResponse,
PricingMethod,
QueryMsg,
VaultPricingInfo,
} from './MarsOracleAdapter.types' } from './MarsOracleAdapter.types'
export interface MarsOracleAdapterReadOnlyInterface { export interface MarsOracleAdapterReadOnlyInterface {
contractAddress: string contractAddress: string

23
types/generated/mars-oracle-adapter/MarsOracleAdapter.react-query.ts
View File

@ -5,25 +5,26 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query' import { Coin, StdFee } from '@cosmjs/amino'
import { ExecuteResult } from '@cosmjs/cosmwasm-stargate' import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { StdFee, Coin } from '@cosmjs/amino' import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
import { MarsOracleAdapterClient, MarsOracleAdapterQueryClient } from './MarsOracleAdapter.client'
import { import {
OracleBaseForString,
Addr, Addr,
PricingMethod,
InstantiateMsg,
VaultPricingInfo,
ExecuteMsg,
ConfigUpdates,
QueryMsg,
ArrayOfVaultPricingInfo, ArrayOfVaultPricingInfo,
OracleBaseForAddr,
ConfigResponse, ConfigResponse,
ConfigUpdates,
Decimal, Decimal,
ExecuteMsg,
InstantiateMsg,
OracleBaseForAddr,
OracleBaseForString,
PriceResponse, PriceResponse,
PricingMethod,
QueryMsg,
VaultPricingInfo,
} from './MarsOracleAdapter.types' } from './MarsOracleAdapter.types'
import { MarsOracleAdapterQueryClient, MarsOracleAdapterClient } from './MarsOracleAdapter.client'
export const marsOracleAdapterQueryKeys = { export const marsOracleAdapterQueryKeys = {
contract: [ contract: [
{ {

2
types/generated/mars-oracle-adapter/bundle.ts
View File

@ -5,9 +5,9 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import * as _6 from './MarsOracleAdapter.types'
import * as _7 from './MarsOracleAdapter.client' import * as _7 from './MarsOracleAdapter.client'
import * as _8 from './MarsOracleAdapter.react-query' import * as _8 from './MarsOracleAdapter.react-query'
import * as _6 from './MarsOracleAdapter.types'
export namespace contracts { export namespace contracts {
export const MarsOracleAdapter = { ..._6, ..._7, ..._8 } export const MarsOracleAdapter = { ..._6, ..._7, ..._8 }
} }

9
types/generated/mock-oracle/MockOracle.client.ts
View File

@ -5,15 +5,16 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { Coin, StdFee } from '@cosmjs/amino' import { Coin, StdFee } from '@cosmjs/amino'
import { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
import { import {
Decimal,
InstantiateMsg,
CoinPrice, CoinPrice,
Decimal,
ExecuteMsg, ExecuteMsg,
QueryMsg, InstantiateMsg,
PriceResponse, PriceResponse,
QueryMsg,
} from './MockOracle.types' } from './MockOracle.types'
export interface MockOracleReadOnlyInterface { export interface MockOracleReadOnlyInterface {
contractAddress: string contractAddress: string

13
types/generated/mock-oracle/MockOracle.react-query.ts
View File

@ -5,18 +5,19 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query' import { Coin, StdFee } from '@cosmjs/amino'
import { ExecuteResult } from '@cosmjs/cosmwasm-stargate' import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { StdFee, Coin } from '@cosmjs/amino' import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
import { MockOracleClient, MockOracleQueryClient } from './MockOracle.client'
import { import {
Decimal,
InstantiateMsg,
CoinPrice, CoinPrice,
Decimal,
ExecuteMsg, ExecuteMsg,
QueryMsg, InstantiateMsg,
PriceResponse, PriceResponse,
QueryMsg,
} from './MockOracle.types' } from './MockOracle.types'
import { MockOracleQueryClient, MockOracleClient } from './MockOracle.client'
export const mockOracleQueryKeys = { export const mockOracleQueryKeys = {
contract: [ contract: [
{ {

2
types/generated/mock-oracle/bundle.ts
View File

@ -5,9 +5,9 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import * as _9 from './MockOracle.types'
import * as _10 from './MockOracle.client' import * as _10 from './MockOracle.client'
import * as _11 from './MockOracle.react-query' import * as _11 from './MockOracle.react-query'
import * as _9 from './MockOracle.types'
export namespace contracts { export namespace contracts {
export const MockOracle = { ..._9, ..._10, ..._11 } export const MockOracle = { ..._9, ..._10, ..._11 }
} }

17
types/generated/mock-red-bank/MockRedBank.client.ts
View File

@ -5,18 +5,19 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { StdFee } from '@cosmjs/amino' import { StdFee } from '@cosmjs/amino'
import { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
import { import {
Decimal,
InstantiateMsg,
CoinMarketInfo,
ExecuteMsg,
Uint128,
Coin, Coin,
QueryMsg, CoinMarketInfo,
Market, Decimal,
ExecuteMsg,
InstantiateMsg,
InterestRateModel, InterestRateModel,
Market,
QueryMsg,
Uint128,
UserAssetDebtResponse, UserAssetDebtResponse,
} from './MockRedBank.types' } from './MockRedBank.types'
export interface MockRedBankReadOnlyInterface { export interface MockRedBankReadOnlyInterface {

21
types/generated/mock-red-bank/MockRedBank.react-query.ts
View File

@ -5,22 +5,23 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { StdFee } from '@cosmjs/amino' import { StdFee } from '@cosmjs/amino'
import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
import { MockRedBankClient, MockRedBankQueryClient } from './MockRedBank.client'
import { import {
Decimal,
InstantiateMsg,
CoinMarketInfo,
ExecuteMsg,
Uint128,
Coin, Coin,
QueryMsg, CoinMarketInfo,
Market, Decimal,
ExecuteMsg,
InstantiateMsg,
InterestRateModel, InterestRateModel,
Market,
QueryMsg,
Uint128,
UserAssetDebtResponse, UserAssetDebtResponse,
} from './MockRedBank.types' } from './MockRedBank.types'
import { MockRedBankQueryClient, MockRedBankClient } from './MockRedBank.client'
export const mockRedBankQueryKeys = { export const mockRedBankQueryKeys = {
contract: [ contract: [
{ {

2
types/generated/mock-red-bank/bundle.ts
View File

@ -5,9 +5,9 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import * as _12 from './MockRedBank.types'
import * as _13 from './MockRedBank.client' import * as _13 from './MockRedBank.client'
import * as _14 from './MockRedBank.react-query' import * as _14 from './MockRedBank.react-query'
import * as _12 from './MockRedBank.types'
export namespace contracts { export namespace contracts {
export const MockRedBank = { ..._12, ..._13, ..._14 } export const MockRedBank = { ..._12, ..._13, ..._14 }
} }

11
types/generated/mock-vault/MockVault.client.ts
View File

@ -5,17 +5,18 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { StdFee } from '@cosmjs/amino' import { StdFee } from '@cosmjs/amino'
import { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
import { import {
OracleBaseForString, ArrayOfCoin,
InstantiateMsg, Coin,
ExecuteMsg, ExecuteMsg,
InstantiateMsg,
OracleBaseForString,
QueryMsg, QueryMsg,
Uint128, Uint128,
VaultInfo, VaultInfo,
Coin,
ArrayOfCoin,
} from './MockVault.types' } from './MockVault.types'
export interface MockVaultReadOnlyInterface { export interface MockVaultReadOnlyInterface {
contractAddress: string contractAddress: string

15
types/generated/mock-vault/MockVault.react-query.ts
View File

@ -5,20 +5,21 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { StdFee } from '@cosmjs/amino' import { StdFee } from '@cosmjs/amino'
import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
import { MockVaultClient, MockVaultQueryClient } from './MockVault.client'
import { import {
OracleBaseForString, ArrayOfCoin,
InstantiateMsg, Coin,
ExecuteMsg, ExecuteMsg,
InstantiateMsg,
OracleBaseForString,
QueryMsg, QueryMsg,
Uint128, Uint128,
VaultInfo, VaultInfo,
Coin,
ArrayOfCoin,
} from './MockVault.types' } from './MockVault.types'
import { MockVaultQueryClient, MockVaultClient } from './MockVault.client'
export const mockVaultQueryKeys = { export const mockVaultQueryKeys = {
contract: [ contract: [
{ {

2
types/generated/mock-vault/bundle.ts
View File

@ -5,9 +5,9 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import * as _15 from './MockVault.types'
import * as _16 from './MockVault.client' import * as _16 from './MockVault.client'
import * as _17 from './MockVault.react-query' import * as _17 from './MockVault.react-query'
import * as _15 from './MockVault.types'
export namespace contracts { export namespace contracts {
export const MockVault = { ..._15, ..._16, ..._17 } export const MockVault = { ..._15, ..._16, ..._17 }
} }

23
types/generated/swapper-base/SwapperBase.client.ts
View File

@ -5,21 +5,22 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { StdFee } from '@cosmjs/amino' import { StdFee } from '@cosmjs/amino'
import { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
import { import {
InstantiateMsg,
ExecuteMsg,
Uint128,
Decimal,
Addr, Addr,
Empty,
Coin,
QueryMsg,
ConfigForString,
EstimateExactInSwapResponse,
RouteResponseForEmpty,
ArrayOfRouteResponseForEmpty, ArrayOfRouteResponseForEmpty,
Coin,
ConfigForString,
Decimal,
Empty,
EstimateExactInSwapResponse,
ExecuteMsg,
InstantiateMsg,
QueryMsg,
RouteResponseForEmpty,
Uint128,
} from './SwapperBase.types' } from './SwapperBase.types'
export interface SwapperBaseReadOnlyInterface { export interface SwapperBaseReadOnlyInterface {
contractAddress: string contractAddress: string

27
types/generated/swapper-base/SwapperBase.react-query.ts
View File

@ -5,24 +5,25 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { StdFee } from '@cosmjs/amino' import { StdFee } from '@cosmjs/amino'
import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
import { SwapperBaseClient, SwapperBaseQueryClient } from './SwapperBase.client'
import { import {
InstantiateMsg,
ExecuteMsg,
Uint128,
Decimal,
Addr, Addr,
Empty,
Coin,
QueryMsg,
ConfigForString,
EstimateExactInSwapResponse,
RouteResponseForEmpty,
ArrayOfRouteResponseForEmpty, ArrayOfRouteResponseForEmpty,
Coin,
ConfigForString,
Decimal,
Empty,
EstimateExactInSwapResponse,
ExecuteMsg,
InstantiateMsg,
QueryMsg,
RouteResponseForEmpty,
Uint128,
} from './SwapperBase.types' } from './SwapperBase.types'
import { SwapperBaseQueryClient, SwapperBaseClient } from './SwapperBase.client'
export const swapperBaseQueryKeys = { export const swapperBaseQueryKeys = {
contract: [ contract: [
{ {

2
types/generated/swapper-base/bundle.ts
View File

@ -5,9 +5,9 @@
* and run the @cosmwasm/ts-codegen generate command to regenerate this file. * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
*/ */
import * as _18 from './SwapperBase.types'
import * as _19 from './SwapperBase.client' import * as _19 from './SwapperBase.client'
import * as _20 from './SwapperBase.react-query' import * as _20 from './SwapperBase.react-query'
import * as _18 from './SwapperBase.types'
export namespace contracts { export namespace contracts {
export const SwapperBase = { ..._18, ..._19, ..._20 } export const SwapperBase = { ..._18, ..._19, ..._20 }
} }

3
utils/experimental-chains.ts
View File

@ -1,8 +1,9 @@
import { Bech32Address } from '@keplr-wallet/cosmos' import { Bech32Address } from '@keplr-wallet/cosmos'
import { ChainId, CosmosChainId, TestnetCosmosChainId } from 'types' import { ChainId, CosmosChainId, TestnetCosmosChainId } from 'types'
export const getEndpointsFromChainId = ( export const getEndpointsFromChainId = (
chainId: TestnetCosmosChainId | CosmosChainId | ChainId chainId: TestnetCosmosChainId | CosmosChainId | ChainId,
): { rpc: string; rest: string } => { ): { rpc: string; rest: string } => {
switch (chainId) { switch (chainId) {
case CosmosChainId.Osmosis: case CosmosChainId.Osmosis:

2
utils/formatters.ts
View File

@ -5,7 +5,7 @@ export const formatWalletAddress = (address: string, substrLength = 6): string =
return `${address.slice(0, substrLength)}...${address.slice( return `${address.slice(0, substrLength)}...${address.slice(
address.length - substrLength, address.length - substrLength,
address.length address.length,
)}` )}`
} }

2
yarn.lock
View File

@ -3452,7 +3452,7 @@ eslint-module-utils@^2.7.3:
eslint-plugin-import@^2.26.0: eslint-plugin-import@^2.26.0:
version "2.26.0" version "2.26.0"
resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz" resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA== integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
dependencies: dependencies:
array-includes "^3.1.4" array-includes "^3.1.4"