Linter and prettier adjustments (#50)
* 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
GitHub
parent
8bde02c2e9
commit
27cdd1c954
@ -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
8
.github/dependabot.yml
vendored
@ -5,8 +5,8 @@
|
||||
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: "npm" # See documentation for possible values
|
||||
directory: "/" # Location of package manifests
|
||||
- package-ecosystem: 'npm' # See documentation for possible values
|
||||
directory: '/' # Location of package manifests
|
||||
schedule:
|
||||
interval: "weekly"
|
||||
target-branch: "develop"
|
||||
interval: 'weekly'
|
||||
target-branch: 'develop'
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"jsxSingleQuote": true,
|
||||
"semi": false,
|
||||
"printWidth": 100
|
||||
"printWidth": 100,
|
||||
"trailingComma": "all"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react'
|
||||
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid'
|
||||
import Image from 'next/image'
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import Button from 'components/Button'
|
||||
import { formatCurrency } from 'utils/formatters'
|
||||
@ -27,39 +27,39 @@ const AssetRow = ({ data, onBorrowClick, onRepayClick }: AssetRowProps) => {
|
||||
|
||||
return (
|
||||
<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)}
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="flex flex-1 items-center">
|
||||
<Image src={data.icon} alt="token" width={32} height={32} />
|
||||
<div className="pl-2">
|
||||
<div className='flex'>
|
||||
<div className='flex flex-1 items-center'>
|
||||
<Image src={data.icon} alt='token' width={32} height={32} />
|
||||
<div className='pl-2'>
|
||||
<div>{data.symbol}</div>
|
||||
<div className="text-xs">{data.chain}</div>
|
||||
<div className='text-xs'>{data.chain}</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)}%` : '-'}
|
||||
</div>
|
||||
<div className="flex flex-1 items-center text-xs">
|
||||
<div className='flex flex-1 items-center text-xs'>
|
||||
{data.borrowed ? (
|
||||
<div>
|
||||
<div className="font-bold">{data.borrowed.amount}</div>
|
||||
<div className='font-bold'>{data.borrowed.amount}</div>
|
||||
<div>{formatCurrency(data.borrowed.value)}</div>
|
||||
</div>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-1 items-center text-xs">{data.marketLiquidity}</div>
|
||||
<div className="flex w-[50px] items-center justify-end">
|
||||
{isExpanded ? <ChevronUpIcon className="w-5" /> : <ChevronDownIcon className="w-5" />}
|
||||
<div className='flex flex-1 items-center text-xs'>{data.marketLiquidity}</div>
|
||||
<div className='flex w-[50px] items-center justify-end'>
|
||||
{isExpanded ? <ChevronUpIcon className='w-5' /> : <ChevronDownIcon className='w-5' />}
|
||||
</div>
|
||||
</div>
|
||||
{isExpanded && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className='flex items-center justify-between'>
|
||||
<div>Additional Stuff Placeholder</div>
|
||||
<div className="flex gap-2">
|
||||
<div className='flex gap-2'>
|
||||
<Button
|
||||
onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation()
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid'
|
||||
import {
|
||||
ColumnDef,
|
||||
flexRender,
|
||||
@ -8,9 +7,11 @@ import {
|
||||
SortingState,
|
||||
useReactTable,
|
||||
} 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 AssetRow from './AssetRow'
|
||||
|
||||
interface Market {
|
||||
@ -77,11 +78,11 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
|
||||
header: 'Asset',
|
||||
id: 'symbol',
|
||||
accessorFn: (row) => (
|
||||
<div className="flex flex-1 items-center">
|
||||
<Image src={row.icon} alt="token" width={32} height={32} />
|
||||
<div className="pl-2">
|
||||
<div className='flex flex-1 items-center'>
|
||||
<Image src={row.icon} alt='token' width={32} height={32} />
|
||||
<div className='pl-2'>
|
||||
<div>{row.symbol}</div>
|
||||
<div className="text-xs">{row.chain}</div>
|
||||
<div className='text-xs'>{row.chain}</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
@ -91,7 +92,7 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
|
||||
accessorKey: 'borrowRate',
|
||||
header: 'Borrow Rate',
|
||||
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)}%` : '-'}
|
||||
</div>
|
||||
),
|
||||
@ -101,10 +102,10 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
|
||||
accessorKey: 'age',
|
||||
header: 'Borrowed',
|
||||
accessorFn: (row) => (
|
||||
<div className="flex flex-1 items-center text-xs">
|
||||
<div className='flex flex-1 items-center text-xs'>
|
||||
{row.borrowed ? (
|
||||
<div>
|
||||
<div className="font-bold">{row.borrowed.amount}</div>
|
||||
<div className='font-bold'>{row.borrowed.amount}</div>
|
||||
<div>{formatCurrency(row.borrowed.value)}</div>
|
||||
</div>
|
||||
) : (
|
||||
@ -124,17 +125,17 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
|
||||
header: 'Manage',
|
||||
width: 150,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center justify-end">
|
||||
<div className='flex items-center justify-end'>
|
||||
{row.getIsExpanded() ? (
|
||||
<ChevronUpIcon className="w-5" />
|
||||
<ChevronUpIcon className='w-5' />
|
||||
) : (
|
||||
<ChevronDownIcon className="w-5" />
|
||||
<ChevronDownIcon className='w-5' />
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
[]
|
||||
[],
|
||||
)
|
||||
|
||||
const table = useReactTable({
|
||||
@ -150,9 +151,9 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
|
||||
})
|
||||
|
||||
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) => (
|
||||
<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) => {
|
||||
return (
|
||||
<div key={header.id} className={`${header.index === 4 ? 'w-[50px]' : 'flex-1'}`}>
|
||||
@ -175,7 +176,7 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className='flex flex-col gap-2'>
|
||||
{table.getRowModel().rows.length === 0 ? (
|
||||
<div>No Data</div>
|
||||
) : (
|
||||
|
||||
@ -1,22 +1,23 @@
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import Image from 'next/image'
|
||||
import { Transition, Dialog, Switch } from '@headlessui/react'
|
||||
import { Dialog, Switch, Transition } from '@headlessui/react'
|
||||
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 { 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 useBorrowFunds from 'hooks/mutations/useBorrowFunds'
|
||||
import useTokenPrices from 'hooks/useTokenPrices'
|
||||
import useMarkets from 'hooks/useMarkets'
|
||||
import useAllBalances from 'hooks/useAllBalances'
|
||||
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 { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
|
||||
|
||||
import Button from './Button'
|
||||
import ContainerSecondary from './ContainerSecondary'
|
||||
import Spinner from './Spinner'
|
||||
import Tooltip from './Tooltip'
|
||||
|
||||
type Props = {
|
||||
show: boolean
|
||||
@ -41,7 +42,7 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
|
||||
onClose()
|
||||
toast.success(`${amount} ${tokenSymbol} successfully Borrowed`)
|
||||
},
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
const { data: tokenPrices } = useTokenPrices()
|
||||
@ -95,72 +96,72 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
|
||||
|
||||
return (
|
||||
<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
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0'
|
||||
enterTo='opacity-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100'
|
||||
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>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4">
|
||||
<div className='fixed inset-0 overflow-y-auto'>
|
||||
<div className='flex min-h-full items-center justify-center p-4'>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0 scale-95'
|
||||
enterTo='opacity-100 scale-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100 scale-100'
|
||||
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 && (
|
||||
<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 />
|
||||
</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>
|
||||
<p className="text-bold mb-3 text-xs uppercase text-white/50">About</p>
|
||||
<h4 className="mb-4 text-xl leading-8">
|
||||
<p className='text-bold mb-3 text-xs uppercase text-white/50'>About</p>
|
||||
<h4 className='mb-4 text-xl leading-8'>
|
||||
Bringing the next generation of video creation to the Metaverse.
|
||||
<br />
|
||||
Powered by deep-learning.
|
||||
</h4>
|
||||
</div>
|
||||
<Image src="/logo.svg" alt="mars" width={150} height={50} />
|
||||
<Image src='/logo.svg' alt='mars' width={150} height={50} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col p-4">
|
||||
<Dialog.Title as="h3" className="mb-4 text-center font-medium">
|
||||
<div className='flex flex-1 flex-col p-4'>
|
||||
<Dialog.Title as='h3' className='mb-4 text-center font-medium'>
|
||||
Borrow {tokenSymbol}
|
||||
</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>
|
||||
<p className="mb-1">
|
||||
<p className='mb-1'>
|
||||
In wallet: {walletAmount.toLocaleString()} {tokenSymbol}
|
||||
</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">
|
||||
<p className="mb-2 font-semibold uppercase tracking-widest">Amount</p>
|
||||
<div className='mb-7'>
|
||||
<p className='mb-2 font-semibold uppercase tracking-widest'>Amount</p>
|
||||
<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}
|
||||
placeholder="0"
|
||||
placeholder='0'
|
||||
allowNegative={false}
|
||||
onValueChange={(v) => handleValueChange(v.floatValue || 0)}
|
||||
suffix={` ${tokenSymbol}`}
|
||||
decimalScale={getTokenDecimals(tokenDenom)}
|
||||
/>
|
||||
<div className="flex justify-between text-xs tracking-widest">
|
||||
<div className='flex justify-between text-xs tracking-widest'>
|
||||
<div>
|
||||
1 {tokenSymbol} = {formatCurrency(tokenPrice)}
|
||||
</div>
|
||||
@ -168,20 +169,20 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
|
||||
</div>
|
||||
</div>
|
||||
<Slider
|
||||
className="mb-6"
|
||||
className='mb-6'
|
||||
value={percentageValue}
|
||||
onChange={handleSliderValueChange}
|
||||
onMaxClick={() => setAmount(maxValue)}
|
||||
/>
|
||||
</ContainerSecondary>
|
||||
<ContainerSecondary className="flex items-center justify-between">
|
||||
<div className="flex">
|
||||
<ContainerSecondary className='flex items-center justify-between'>
|
||||
<div className='flex'>
|
||||
Borrow to Credit Account{' '}
|
||||
<Tooltip
|
||||
className="ml-2"
|
||||
className='ml-2'
|
||||
content={
|
||||
<>
|
||||
<p className="mb-2">
|
||||
<p className='mb-2'>
|
||||
OFF = Borrow directly into your wallet by using your account Assets
|
||||
as collateral. The borrowed asset will become a liability in your
|
||||
account.
|
||||
@ -211,7 +212,7 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
|
||||
</ContainerSecondary>
|
||||
</div>
|
||||
<Button
|
||||
className="mt-auto w-full rounded-3xl"
|
||||
className='mt-auto w-full rounded-3xl'
|
||||
onClick={handleSubmit}
|
||||
disabled={amount === 0 || !amount}
|
||||
>
|
||||
|
||||
@ -19,7 +19,7 @@ const Button = React.forwardRef<any, Props>(
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
),
|
||||
)
|
||||
|
||||
Button.displayName = 'Button'
|
||||
|
||||
@ -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 { 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 { ChainId, Wallet } from 'types'
|
||||
import { getInjectiveAddress } from 'utils/address'
|
||||
import { chain } from 'utils/chains'
|
||||
import { getExperimentalChainConfigBasedOnChainId } from 'utils/experimental-chains'
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean
|
||||
@ -83,68 +83,68 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
|
||||
|
||||
return (
|
||||
<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
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0'
|
||||
enterTo='opacity-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100'
|
||||
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>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<div className='fixed inset-0 overflow-y-auto'>
|
||||
<div className='flex min-h-full items-center justify-center p-4 text-center'>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0 scale-95'
|
||||
enterTo='opacity-100 scale-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100 scale-100'
|
||||
leaveTo='opacity-0 scale-95'
|
||||
>
|
||||
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<Dialog.Title as="h3" className="mb-6 text-lg font-medium leading-6 text-gray-900">
|
||||
<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'>
|
||||
Connect your wallet
|
||||
</Dialog.Title>
|
||||
{isLoading ? (
|
||||
<div role="status" className="text-center">
|
||||
<div role='status' className='text-center'>
|
||||
<svg
|
||||
className="inline h-10 w-10 animate-spin fill-orange-500 text-gray-200"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className='inline h-10 w-10 animate-spin fill-orange-500 text-gray-200'
|
||||
viewBox='0 0 100 101'
|
||||
fill='none'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
>
|
||||
<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"
|
||||
fill="currentColor"
|
||||
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'
|
||||
/>
|
||||
<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"
|
||||
fill="currentFill"
|
||||
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'
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Loading...</span>
|
||||
<span className='sr-only'>Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-2 flex flex-col gap-3">
|
||||
<div className='mt-2 flex flex-col gap-3'>
|
||||
<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}
|
||||
// temporarily disable metamask connection as its not supported on osmosis
|
||||
disabled
|
||||
>
|
||||
<Image src="/wallets/metamask.webp" height={30} width={30} alt="metamask" />
|
||||
<div className="ml-4 text-left">
|
||||
<div className="flex items-end">
|
||||
<Image src='/wallets/metamask.webp' height={30} width={30} alt='metamask' />
|
||||
<div className='ml-4 text-left'>
|
||||
<div className='flex items-end'>
|
||||
<p>Metamask</p>
|
||||
{!metamaskInstalled && (
|
||||
<a
|
||||
className="ml-3 text-sm text-blue-600"
|
||||
className='ml-3 text-sm text-blue-600'
|
||||
onClick={(e) => {
|
||||
window.open('https://metamask.io/', '_blank')
|
||||
e.stopPropagation()
|
||||
@ -154,20 +154,20 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">Connect using Metamask</p>
|
||||
<p className='text-sm text-gray-400'>Connect using Metamask</p>
|
||||
</div>
|
||||
</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}
|
||||
>
|
||||
<Image src="/wallets/keplr.png" height={30} width={30} alt="keplr" />
|
||||
<div className="ml-4 text-left">
|
||||
<div className="flex items-end">
|
||||
<Image src='/wallets/keplr.png' height={30} width={30} alt='keplr' />
|
||||
<div className='ml-4 text-left'>
|
||||
<div className='flex items-end'>
|
||||
<p>Keplr</p>
|
||||
{!isKeplrInstalled && (
|
||||
<a
|
||||
className="ml-3 text-sm text-blue-600"
|
||||
className='ml-3 text-sm text-blue-600'
|
||||
onClick={(e) => {
|
||||
window.open('https://www.keplr.app/', '_blank')
|
||||
e.stopPropagation()
|
||||
@ -177,7 +177,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">Connect using Keplr</p>
|
||||
<p className='text-sm text-gray-400'>Connect using Keplr</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react'
|
||||
|
||||
import styles from './Container.module.css'
|
||||
|
||||
type Props = {
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
import React, { useRef, useState } from 'react'
|
||||
import BigNumber from 'bignumber.js'
|
||||
import React, { useRef, useState } from 'react'
|
||||
|
||||
import Button from '../Button'
|
||||
import { formatCurrency } from 'utils/formatters'
|
||||
import ContainerSecondary from 'components/ContainerSecondary'
|
||||
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 useWalletStore from 'stores/useWalletStore'
|
||||
import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
|
||||
import { formatCurrency } from 'utils/formatters'
|
||||
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
|
||||
import useTokenPrices from 'hooks/useTokenPrices'
|
||||
import useAccountStats from 'hooks/useAccountStats'
|
||||
import useMarkets from 'hooks/useMarkets'
|
||||
import ContainerSecondary from 'components/ContainerSecondary'
|
||||
import WithdrawModal from 'components/WithdrawModal'
|
||||
import FundAccountModal from 'components/FundAccountModal'
|
||||
|
||||
import Button from '../Button'
|
||||
|
||||
const CreditManager = () => {
|
||||
const [showFundWalletModal, setShowFundWalletModal] = useState(false)
|
||||
@ -25,7 +26,7 @@ const CreditManager = () => {
|
||||
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
|
||||
|
||||
const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountPositions(
|
||||
selectedAccount ?? ''
|
||||
selectedAccount ?? '',
|
||||
)
|
||||
|
||||
const { data: tokenPrices } = useTokenPrices()
|
||||
@ -45,17 +46,17 @@ const CreditManager = () => {
|
||||
|
||||
if (!address) {
|
||||
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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<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">
|
||||
<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'>
|
||||
<Button
|
||||
className="flex-1 rounded-md"
|
||||
className='flex-1 rounded-md'
|
||||
onClick={() => {
|
||||
setShowFundWalletModal(true)
|
||||
modalId.current += 1
|
||||
@ -64,7 +65,7 @@ const CreditManager = () => {
|
||||
Fund
|
||||
</Button>
|
||||
<Button
|
||||
className="flex-1 rounded-md"
|
||||
className='flex-1 rounded-md'
|
||||
onClick={() => {
|
||||
setShowWithdrawModal(true)
|
||||
modalId.current += 1
|
||||
@ -74,35 +75,35 @@ const CreditManager = () => {
|
||||
Withdraw
|
||||
</Button>
|
||||
</ContainerSecondary>
|
||||
<ContainerSecondary className="mb-2 text-sm">
|
||||
<div className="mb-1 flex justify-between">
|
||||
<ContainerSecondary className='mb-2 text-sm'>
|
||||
<div className='mb-1 flex justify-between'>
|
||||
<div>Total Position:</div>
|
||||
<div className="font-semibold">{formatCurrency(accountStats?.totalPosition ?? 0)}</div>
|
||||
<div className='font-semibold'>{formatCurrency(accountStats?.totalPosition ?? 0)}</div>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className='flex justify-between'>
|
||||
<div>Total Liabilities:</div>
|
||||
<div className="font-semibold">{formatCurrency(accountStats?.totalDebt ?? 0)}</div>
|
||||
<div className='font-semibold'>{formatCurrency(accountStats?.totalDebt ?? 0)}</div>
|
||||
</div>
|
||||
</ContainerSecondary>
|
||||
<ContainerSecondary>
|
||||
<h4 className="font-bold">Balances</h4>
|
||||
<h4 className='font-bold'>Balances</h4>
|
||||
{isLoadingPositions ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex text-xs font-semibold">
|
||||
<div className="flex-1">Asset</div>
|
||||
<div className="flex-1">Value</div>
|
||||
<div className="flex-1">Size</div>
|
||||
<div className="flex-1">APY</div>
|
||||
<div className='flex text-xs font-semibold'>
|
||||
<div className='flex-1'>Asset</div>
|
||||
<div className='flex-1'>Value</div>
|
||||
<div className='flex-1'>Size</div>
|
||||
<div className='flex-1'>APY</div>
|
||||
</div>
|
||||
{positionsData?.coins.map((coin) => (
|
||||
<div key={coin.denom} className="flex text-xs text-black/40">
|
||||
<div className="flex-1">{getTokenSymbol(coin.denom)}</div>
|
||||
<div className="flex-1">
|
||||
<div key={coin.denom} className='flex text-xs text-black/40'>
|
||||
<div className='flex-1'>{getTokenSymbol(coin.denom)}</div>
|
||||
<div className='flex-1'>
|
||||
{formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className='flex-1'>
|
||||
{BigNumber(coin.amount)
|
||||
.div(10 ** getTokenDecimals(coin.denom))
|
||||
.toNumber()
|
||||
@ -110,16 +111,16 @@ const CreditManager = () => {
|
||||
maximumFractionDigits: getTokenDecimals(coin.denom),
|
||||
})}
|
||||
</div>
|
||||
<div className="flex-1">-</div>
|
||||
<div className='flex-1'>-</div>
|
||||
</div>
|
||||
))}
|
||||
{positionsData?.debts.map((coin) => (
|
||||
<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">
|
||||
<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'>
|
||||
-{formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className='flex-1'>
|
||||
-
|
||||
{BigNumber(coin.amount)
|
||||
.div(10 ** getTokenDecimals(coin.denom))
|
||||
@ -128,7 +129,7 @@ const CreditManager = () => {
|
||||
maximumFractionDigits: 6,
|
||||
})}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className='flex-1'>
|
||||
-{(Number(marketsData?.[coin.denom].borrow_rate) * 100).toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react'
|
||||
import Image from 'next/image'
|
||||
import { Transition, Dialog, Switch } from '@headlessui/react'
|
||||
import { Dialog, Switch, Transition } from '@headlessui/react'
|
||||
import BigNumber from 'bignumber.js'
|
||||
import Image from 'next/image'
|
||||
import React, { useEffect, useMemo, useState } from 'react'
|
||||
import { toast } from 'react-toastify'
|
||||
import useLocalStorageState from 'use-local-storage-state'
|
||||
|
||||
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
|
||||
import ContainerSecondary from './ContainerSecondary'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import Button from './Button'
|
||||
import Spinner from './Spinner'
|
||||
import Slider from 'components/Slider'
|
||||
import useDepositCreditAccount from 'hooks/mutations/useDepositCreditAccount'
|
||||
import useAllBalances from 'hooks/useAllBalances'
|
||||
import useAllowedCoins from 'hooks/useAllowedCoins'
|
||||
import useDepositCreditAccount from 'hooks/mutations/useDepositCreditAccount'
|
||||
import Slider from 'components/Slider'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
|
||||
|
||||
import Button from './Button'
|
||||
import ContainerSecondary from './ContainerSecondary'
|
||||
import Spinner from './Spinner'
|
||||
|
||||
const FundAccountModal = ({ show, onClose }: any) => {
|
||||
const [amount, setAmount] = useState(0)
|
||||
@ -39,7 +40,7 @@ const FundAccountModal = ({ show, onClose }: any) => {
|
||||
toast.success(`${amount} ${getTokenSymbol(selectedToken)} successfully Deposited`)
|
||||
onClose()
|
||||
},
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
@ -71,55 +72,55 @@ const FundAccountModal = ({ show, onClose }: any) => {
|
||||
|
||||
return (
|
||||
<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
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0'
|
||||
enterTo='opacity-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100'
|
||||
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>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4">
|
||||
<div className='fixed inset-0 overflow-y-auto'>
|
||||
<div className='flex min-h-full items-center justify-center p-4'>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0 scale-95'
|
||||
enterTo='opacity-100 scale-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100 scale-100'
|
||||
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 && (
|
||||
<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 />
|
||||
</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>
|
||||
<p className="text-bold mb-3 text-xs uppercase text-white/50">About</p>
|
||||
<h4 className="mb-4 text-xl leading-8">
|
||||
<p className='text-bold mb-3 text-xs uppercase text-white/50'>About</p>
|
||||
<h4 className='mb-4 text-xl leading-8'>
|
||||
Bringing the next generation of video creation to the Metaverse.
|
||||
<br />
|
||||
Powered by deep-learning.
|
||||
</h4>
|
||||
</div>
|
||||
<Image src="/logo.svg" alt="mars" width={150} height={50} />
|
||||
<Image src='/logo.svg' alt='mars' width={150} height={50} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col p-4">
|
||||
<Dialog.Title as="h3" className="mb-4 text-center font-medium">
|
||||
<div className='flex flex-1 flex-col p-4'>
|
||||
<Dialog.Title as='h3' className='mb-4 text-center font-medium'>
|
||||
Fund Account {selectedAccount}
|
||||
</Dialog.Title>
|
||||
<ContainerSecondary className="mb-2 p-3">
|
||||
<p className="mb-6 text-sm text-[#585A74]/50">
|
||||
<ContainerSecondary className='mb-2 p-3'>
|
||||
<p className='mb-6 text-sm text-[#585A74]/50'>
|
||||
Transfer assets from your injective wallet to your Mars credit account. If you
|
||||
don’t have any assets in your injective wallet use the injective bridge to
|
||||
transfer funds to your injective wallet.
|
||||
@ -128,11 +129,11 @@ const FundAccountModal = ({ show, onClose }: any) => {
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<>
|
||||
<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="font-bold">Asset:</div>
|
||||
<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='font-bold'>Asset:</div>
|
||||
<select
|
||||
className="bg-transparent outline-0"
|
||||
className='bg-transparent outline-0'
|
||||
onChange={(e) => {
|
||||
setSelectedToken(e.target.value)
|
||||
|
||||
@ -147,13 +148,13 @@ const FundAccountModal = ({ show, onClose }: any) => {
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex justify-between p-2">
|
||||
<div className="font-bold">Amount:</div>
|
||||
<div className='flex justify-between p-2'>
|
||||
<div className='font-bold'>Amount:</div>
|
||||
<input
|
||||
type="number"
|
||||
className="bg-transparent text-right outline-0"
|
||||
type='number'
|
||||
className='bg-transparent text-right outline-0'
|
||||
value={amount}
|
||||
min="0"
|
||||
min='0'
|
||||
onChange={(e) => handleValueChange(e.target.valueAsNumber)}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === '') setAmount(0)
|
||||
@ -161,9 +162,9 @@ const FundAccountModal = ({ show, onClose }: any) => {
|
||||
/>
|
||||
</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
|
||||
className="mb-6"
|
||||
className='mb-6'
|
||||
value={percentageValue}
|
||||
onChange={(value) => {
|
||||
const decimal = value[0] / 100
|
||||
@ -178,10 +179,10 @@ const FundAccountModal = ({ show, onClose }: any) => {
|
||||
</>
|
||||
)}
|
||||
</ContainerSecondary>
|
||||
<ContainerSecondary className="mb-2 flex items-center justify-between">
|
||||
<ContainerSecondary className='mb-2 flex items-center justify-between'>
|
||||
<div>
|
||||
<h3 className="font-bold">Lending Assets</h3>
|
||||
<div className="text-sm text-[#585A74]/50">
|
||||
<h3 className='font-bold'>Lending Assets</h3>
|
||||
<div className='text-sm text-[#585A74]/50'>
|
||||
Lend assets from account to earn yield.
|
||||
</div>
|
||||
</div>
|
||||
@ -201,7 +202,7 @@ const FundAccountModal = ({ show, onClose }: any) => {
|
||||
</Switch>
|
||||
</ContainerSecondary>
|
||||
<Button
|
||||
className="mt-auto w-full"
|
||||
className='mt-auto w-full'
|
||||
onClick={() => mutate()}
|
||||
disabled={amount === 0 || !amount}
|
||||
>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
background-color: #562a3b;
|
||||
background-size: 100% auto;
|
||||
background-image: url("/background.svg");
|
||||
background-image: url('/background.svg');
|
||||
background-position: center top;
|
||||
|
||||
filter: brightness(1) hue-rotate(0deg);
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React from 'react'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
|
||||
import CreditManager from 'components/CreditManager'
|
||||
import Navigation from 'components/Navigation'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
|
||||
import styles from './Layout.module.css'
|
||||
|
||||
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
@ -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 { 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 SearchInput from 'components/SearchInput'
|
||||
import Spinner from 'components/Spinner'
|
||||
import Wallet from 'components/Wallet'
|
||||
import { formatCurrency } from 'utils/formatters'
|
||||
import useCreditAccounts from 'hooks/useCreditAccounts'
|
||||
import useCreateCreditAccount from 'hooks/mutations/useCreateCreditAccount'
|
||||
import useDeleteCreditAccount from 'hooks/mutations/useDeleteCreditAccount'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
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 ArrowRightLine from 'components/Icons/arrow-right-line.svg'
|
||||
import { formatCurrency } from 'utils/formatters'
|
||||
|
||||
import Button from './Button'
|
||||
import SemiCircleProgress from './SemiCircleProgress'
|
||||
|
||||
// TODO: will require some tweaks depending on how lower viewport mocks pans out
|
||||
const MAX_VISIBLE_CREDIT_ACCOUNTS = 5
|
||||
@ -52,7 +53,7 @@ const Navigation = () => {
|
||||
const { data: creditAccountsList, isLoading: isLoadingCreditAccounts } = useCreditAccounts()
|
||||
const { mutate: createCreditAccount, isLoading: isLoadingCreate } = useCreateCreditAccount()
|
||||
const { mutate: deleteCreditAccount, isLoading: isLoadingDelete } = useDeleteCreditAccount(
|
||||
selectedAccount || ''
|
||||
selectedAccount || '',
|
||||
)
|
||||
|
||||
const accountStats = useAccountStats()
|
||||
@ -77,7 +78,7 @@ const Navigation = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className='flex items-center gap-4'>
|
||||
{accountStats && (
|
||||
<>
|
||||
<p>{formatCurrency(accountStats.netWorth)}</p>
|
||||
@ -85,15 +86,15 @@ const Navigation = () => {
|
||||
<div title={`${String(accountStats.currentLeverage.toFixed(1))}x`}>
|
||||
<SemiCircleProgress
|
||||
value={accountStats.currentLeverage / accountStats.maxLeverage}
|
||||
label="Lvg"
|
||||
label='Lvg'
|
||||
/>
|
||||
</div>
|
||||
<SemiCircleProgress value={accountStats.risk} label="Risk" />
|
||||
<SemiCircleProgress value={accountStats.risk} label='Risk' />
|
||||
<ProgressBar value={accountStats.health} />
|
||||
</>
|
||||
)}
|
||||
<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}
|
||||
>
|
||||
<ArrowRightLine />
|
||||
@ -105,13 +106,13 @@ const Navigation = () => {
|
||||
return (
|
||||
<div>
|
||||
{/* Main navigation bar */}
|
||||
<div className="flex items-center justify-between border-b border-white/20 px-6 py-3">
|
||||
<Link href="/" passHref>
|
||||
<div className='flex items-center justify-between border-b border-white/20 px-6 py-3'>
|
||||
<Link href='/' passHref>
|
||||
<a>
|
||||
<Image src="/logo.svg" alt="mars" width={123} height={40} />
|
||||
<Image src='/logo.svg' alt='mars' width={123} height={40} />
|
||||
</a>
|
||||
</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) => (
|
||||
<NavLink key={index} href={item.href}>
|
||||
{item.label}
|
||||
@ -121,8 +122,8 @@ const Navigation = () => {
|
||||
<Wallet />
|
||||
</div>
|
||||
{/* 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">
|
||||
<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'>
|
||||
<SearchInput />
|
||||
{isConnected && hasCreditAccounts && (
|
||||
<>
|
||||
@ -138,15 +139,15 @@ const Navigation = () => {
|
||||
</div>
|
||||
))}
|
||||
{restCreditAccounts.length > 0 && (
|
||||
<Popover className="relative">
|
||||
<Popover className='relative'>
|
||||
<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
|
||||
<ChevronDownIcon className="ml-1 h-4 w-4" />
|
||||
<ChevronDownIcon className='ml-1 h-4 w-4' />
|
||||
</div>
|
||||
</Popover.Button>
|
||||
<Popover.Panel className="absolute z-10 w-[200px] pt-2">
|
||||
<div className="rounded-2xl bg-white p-4 text-gray-900">
|
||||
<Popover.Panel className='absolute z-10 w-[200px] pt-2'>
|
||||
<div className='rounded-2xl bg-white p-4 text-gray-900'>
|
||||
{restCreditAccounts.map((account) => (
|
||||
<div
|
||||
key={account}
|
||||
@ -162,18 +163,18 @@ const Navigation = () => {
|
||||
</Popover.Panel>
|
||||
</Popover>
|
||||
)}
|
||||
<Popover className="relative">
|
||||
<Popover className='relative'>
|
||||
<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
|
||||
<ChevronDownIcon className="ml-1 h-4 w-4" />
|
||||
<ChevronDownIcon className='ml-1 h-4 w-4' />
|
||||
</div>
|
||||
</Popover.Button>
|
||||
<Popover.Panel className="absolute z-10 w-[200px] pt-2">
|
||||
<Popover.Panel className='absolute z-10 w-[200px] pt-2'>
|
||||
{({ close }) => (
|
||||
<div className="rounded-2xl bg-white p-4 text-gray-900">
|
||||
<div className='rounded-2xl bg-white p-4 text-gray-900'>
|
||||
<div
|
||||
className="mb-2 cursor-pointer hover:text-orange-500"
|
||||
className='mb-2 cursor-pointer hover:text-orange-500'
|
||||
onClick={() => {
|
||||
close()
|
||||
createCreditAccount()
|
||||
@ -182,7 +183,7 @@ const Navigation = () => {
|
||||
Create Account
|
||||
</div>
|
||||
<div
|
||||
className="mb-2 cursor-pointer hover:text-orange-500"
|
||||
className='mb-2 cursor-pointer hover:text-orange-500'
|
||||
onClick={() => {
|
||||
close()
|
||||
deleteCreditAccount()
|
||||
@ -191,13 +192,13 @@ const Navigation = () => {
|
||||
Close Account
|
||||
</div>
|
||||
<div
|
||||
className="mb-2 cursor-pointer hover:text-orange-500"
|
||||
className='mb-2 cursor-pointer hover:text-orange-500'
|
||||
onClick={() => alert('TODO')}
|
||||
>
|
||||
Transfer Balance
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:text-orange-500"
|
||||
className='cursor-pointer hover:text-orange-500'
|
||||
onClick={() => alert('TODO')}
|
||||
>
|
||||
Rearrange
|
||||
@ -212,7 +213,7 @@ const Navigation = () => {
|
||||
{rightSideContent()}
|
||||
</div>
|
||||
{(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 />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -15,12 +15,12 @@ const ProgressBar = ({ value }: Props) => {
|
||||
}
|
||||
|
||||
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
|
||||
className={`absolute z-10 h-4 rounded-full ${bgColorClass}`}
|
||||
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}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import Image from 'next/image'
|
||||
import { Transition, Dialog } from '@headlessui/react'
|
||||
import { Dialog, Transition } from '@headlessui/react'
|
||||
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 { 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 useCreditAccountPositions from 'hooks/useCreditAccountPositions'
|
||||
import useRepayFunds from 'hooks/mutations/useRepayFunds'
|
||||
import useAllBalances from 'hooks/useAllBalances'
|
||||
import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
|
||||
import useTokenPrices from 'hooks/useTokenPrices'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
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 = {
|
||||
show: boolean
|
||||
@ -50,7 +51,7 @@ const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
|
||||
onClose()
|
||||
toast.success(`${amount} ${tokenSymbol} successfully repaid`)
|
||||
},
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
const { data: tokenPrices } = useTokenPrices()
|
||||
@ -82,71 +83,71 @@ const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
|
||||
|
||||
return (
|
||||
<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
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0'
|
||||
enterTo='opacity-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100'
|
||||
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>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4">
|
||||
<div className='fixed inset-0 overflow-y-auto'>
|
||||
<div className='flex min-h-full items-center justify-center p-4'>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0 scale-95'
|
||||
enterTo='opacity-100 scale-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100 scale-100'
|
||||
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 && (
|
||||
<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 />
|
||||
</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>
|
||||
<p className="text-bold mb-3 text-xs uppercase text-white/50">About</p>
|
||||
<h4 className="mb-4 text-xl leading-8">
|
||||
<p className='text-bold mb-3 text-xs uppercase text-white/50'>About</p>
|
||||
<h4 className='mb-4 text-xl leading-8'>
|
||||
Bringing the next generation of video creation to the Metaverse.
|
||||
<br />
|
||||
Powered by deep-learning.
|
||||
</h4>
|
||||
</div>
|
||||
<Image src="/logo.svg" alt="mars" width={150} height={50} />
|
||||
<Image src='/logo.svg' alt='mars' width={150} height={50} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col p-4">
|
||||
<Dialog.Title as="h3" className="mb-4 text-center font-medium">
|
||||
<div className='flex flex-1 flex-col p-4'>
|
||||
<Dialog.Title as='h3' className='mb-4 text-center font-medium'>
|
||||
Repay {tokenSymbol}
|
||||
</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>
|
||||
<p className="mb-7">
|
||||
<p className='mb-7'>
|
||||
In wallet: {walletAmount.toLocaleString()} {tokenSymbol}
|
||||
</p>
|
||||
|
||||
<div className="mb-7">
|
||||
<p className="mb-2 font-semibold uppercase tracking-widest">Amount</p>
|
||||
<div className='mb-7'>
|
||||
<p className='mb-2 font-semibold uppercase tracking-widest'>Amount</p>
|
||||
<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}
|
||||
placeholder="0"
|
||||
placeholder='0'
|
||||
allowNegative={false}
|
||||
onValueChange={(v) => handleValueChange(v.floatValue || 0)}
|
||||
suffix={` ${tokenSymbol}`}
|
||||
decimalScale={getTokenDecimals(tokenDenom)}
|
||||
/>
|
||||
<div className="flex justify-between text-xs tracking-widest">
|
||||
<div className='flex justify-between text-xs tracking-widest'>
|
||||
<div>
|
||||
1 {tokenSymbol} = {formatCurrency(tokenPrice)}
|
||||
</div>
|
||||
@ -155,7 +156,7 @@ const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
|
||||
</div>
|
||||
|
||||
<Slider
|
||||
className="mb-6"
|
||||
className='mb-6'
|
||||
value={percentageValue}
|
||||
onChange={(value) => {
|
||||
const decimal = value[0] / 100
|
||||
@ -170,7 +171,7 @@ const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
|
||||
</ContainerSecondary>
|
||||
</div>
|
||||
<Button
|
||||
className="mt-auto w-full"
|
||||
className='mt-auto w-full'
|
||||
onClick={handleSubmit}
|
||||
disabled={amount === 0 || !amount}
|
||||
>
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
import React from 'react'
|
||||
|
||||
const SearchInput = () => (
|
||||
<div className="relative text-white">
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-2">
|
||||
<div className='relative text-white'>
|
||||
<span className='absolute inset-y-0 left-0 flex items-center pl-2'>
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
className="h-6 w-6"
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
strokeWidth='2'
|
||||
viewBox='0 0 24 24'
|
||||
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>
|
||||
</span>
|
||||
<input
|
||||
className="rounded-md bg-black/70 py-2 pl-10 text-sm text-white focus:outline-none"
|
||||
placeholder="Search"
|
||||
className='rounded-md bg-black/70 py-2 pl-10 text-sm text-white focus:outline-none'
|
||||
placeholder='Search'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -58,7 +58,7 @@ const SemiCircleProgress = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="semicircle-container" style={{ position: 'relative' }}>
|
||||
<div className='semicircle-container' style={{ position: 'relative' }}>
|
||||
<svg
|
||||
width={diameter}
|
||||
height={diameter / 2}
|
||||
@ -68,7 +68,7 @@ const SemiCircleProgress = ({
|
||||
cx={coordinateForCircle}
|
||||
cy={coordinateForCircle}
|
||||
r={radius}
|
||||
fill="none"
|
||||
fill='none'
|
||||
stroke={background}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={circumference}
|
||||
@ -81,7 +81,7 @@ const SemiCircleProgress = ({
|
||||
cx={coordinateForCircle}
|
||||
cy={coordinateForCircle}
|
||||
r={radius}
|
||||
fill="none"
|
||||
fill='none'
|
||||
// stroke={stroke}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={circumference}
|
||||
@ -93,7 +93,7 @@ const SemiCircleProgress = ({
|
||||
</svg>
|
||||
{label && (
|
||||
<span
|
||||
className="text-xs"
|
||||
className='text-xs'
|
||||
style={{
|
||||
width: '100%',
|
||||
left: '0',
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import * as RadixSlider from '@radix-ui/react-slider'
|
||||
import React from 'react'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
@ -12,22 +12,22 @@ const Slider = ({ className, value, onChange, onMaxClick }: Props) => {
|
||||
return (
|
||||
<div className={`relative flex flex-1 items-center ${className || ''}`}>
|
||||
<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]}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
onValueChange={(value) => onChange(value)}
|
||||
>
|
||||
<RadixSlider.Track className="relative h-[6px] grow rounded-full bg-gray-400">
|
||||
<RadixSlider.Range className="absolute h-[100%] rounded-full bg-blue-600" />
|
||||
<RadixSlider.Track className='relative h-[6px] grow rounded-full bg-gray-400'>
|
||||
<RadixSlider.Range className='absolute h-[100%] rounded-full bg-blue-600' />
|
||||
</RadixSlider.Track>
|
||||
<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>
|
||||
<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>
|
||||
</RadixSlider.Thumb>
|
||||
</RadixSlider.Root>
|
||||
<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}
|
||||
>
|
||||
MAX
|
||||
|
||||
@ -3,23 +3,23 @@ import React from 'react'
|
||||
const Spinner = () => {
|
||||
return (
|
||||
<svg
|
||||
className="h-8 w-8 animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
className='h-8 w-8 animate-spin'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
fill='none'
|
||||
viewBox='0 0 24 24'
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
className='opacity-25'
|
||||
cx='12'
|
||||
cy='12'
|
||||
r='10'
|
||||
stroke='currentColor'
|
||||
strokeWidth='4'
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
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"
|
||||
className='opacity-75'
|
||||
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'
|
||||
></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { InformationCircleIcon } from '@heroicons/react/24/solid'
|
||||
import Tippy from '@tippyjs/react'
|
||||
import { ReactNode } from 'react'
|
||||
import { InformationCircleIcon } from '@heroicons/react/24/solid'
|
||||
|
||||
interface TooltipProps {
|
||||
content: string | ReactNode
|
||||
@ -11,7 +11,7 @@ const Tooltip = ({ content, className }: TooltipProps) => {
|
||||
return (
|
||||
<Tippy
|
||||
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>}
|
||||
interactive={true}
|
||||
>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Popover } from '@headlessui/react'
|
||||
import { toast } from 'react-toastify'
|
||||
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 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 address = useWalletStore((s) => s.address)
|
||||
@ -17,26 +18,26 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
|
||||
const { data } = useTokenBalance()
|
||||
|
||||
return (
|
||||
<Popover className="relative">
|
||||
<Popover.Button as={Button} className="w-[200px] !rounded-3xl !bg-green-500">
|
||||
<Popover className='relative'>
|
||||
<Popover.Button as={Button} className='w-[200px] !rounded-3xl !bg-green-500'>
|
||||
{children}
|
||||
</Popover.Button>
|
||||
|
||||
<Popover.Panel className="absolute right-0 z-10 pt-2">
|
||||
<div className="rounded-2xl bg-white p-6 text-gray-900">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<Image src={chain.stakeCurrency.coinImageUrl} alt="token" width={24} height={24} />
|
||||
<p className="ml-2">
|
||||
<Popover.Panel className='absolute right-0 z-10 pt-2'>
|
||||
<div className='rounded-2xl bg-white p-6 text-gray-900'>
|
||||
<div className='mb-4 flex items-center justify-between'>
|
||||
<div className='flex items-center'>
|
||||
<Image src={chain.stakeCurrency.coinImageUrl} alt='token' width={24} height={24} />
|
||||
<p className='ml-2'>
|
||||
{chain.stakeCurrency.coinDenom}{' '}
|
||||
<span className="ml-1 text-lg font-semibold">{data?.toFixed(2)}</span>
|
||||
<span className='ml-1 text-lg font-semibold'>{data?.toFixed(2)}</span>
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => actions.disconnect()}>Disconnect</Button>
|
||||
</div>
|
||||
<p className="mb-6 text-sm">{address}</p>
|
||||
<p className='mb-6 text-sm'>{address}</p>
|
||||
<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={() => {
|
||||
navigator.clipboard.writeText(address).then(() => {
|
||||
toast.success('Address copied to your clipboard')
|
||||
@ -44,16 +45,16 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
fill='none'
|
||||
viewBox='0 0 24 24'
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="mr-1 h-5 w-5"
|
||||
stroke='currentColor'
|
||||
className='mr-1 h-5 w-5'
|
||||
>
|
||||
<path
|
||||
strokeLinecap="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"
|
||||
strokeLinecap='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'
|
||||
/>
|
||||
</svg>
|
||||
Copy Address
|
||||
@ -75,7 +76,7 @@ const Wallet = () => {
|
||||
<WalletPopover>{formatWalletAddress(address)}</WalletPopover>
|
||||
) : (
|
||||
<Button
|
||||
className="w-[200px] !rounded-3xl !bg-green-500"
|
||||
className='w-[200px] !rounded-3xl !bg-green-500'
|
||||
onClick={() => setShowConnectModal(true)}
|
||||
>
|
||||
Connect Wallet
|
||||
|
||||
@ -1,25 +1,26 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react'
|
||||
import { Transition, Dialog, Switch } from '@headlessui/react'
|
||||
import { Dialog, Switch, Transition } from '@headlessui/react'
|
||||
import * as RSlider from '@radix-ui/react-slider'
|
||||
import BigNumber from 'bignumber.js'
|
||||
import React, { useEffect, useMemo, useState } from 'react'
|
||||
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 { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
|
||||
import ContainerSecondary from './ContainerSecondary'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import Button from './Button'
|
||||
import useMarkets from 'hooks/useMarkets'
|
||||
import useTokenPrices from 'hooks/useTokenPrices'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import { formatCurrency } from 'utils/formatters'
|
||||
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
|
||||
|
||||
import Button from './Button'
|
||||
import ContainerSecondary from './ContainerSecondary'
|
||||
import ProgressBar from './ProgressBar'
|
||||
import SemiCircleProgress from './SemiCircleProgress'
|
||||
import useAccountStats from 'hooks/useAccountStats'
|
||||
import useWithdrawFunds from 'hooks/mutations/useWithdrawFunds'
|
||||
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 [amount, setAmount] = useState(0)
|
||||
@ -28,7 +29,7 @@ const WithdrawModal = ({ show, onClose }: any) => {
|
||||
|
||||
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
|
||||
const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountPositions(
|
||||
selectedAccount ?? ''
|
||||
selectedAccount ?? '',
|
||||
)
|
||||
|
||||
const { data: balancesData } = useAllBalances()
|
||||
@ -128,46 +129,46 @@ const WithdrawModal = ({ show, onClose }: any) => {
|
||||
|
||||
return (
|
||||
<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
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0'
|
||||
enterTo='opacity-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100'
|
||||
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>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4">
|
||||
<div className='fixed inset-0 overflow-y-auto'>
|
||||
<div className='flex min-h-full items-center justify-center p-4'>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0 scale-95'
|
||||
enterTo='opacity-100 scale-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100 scale-100'
|
||||
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 && (
|
||||
<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 />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex w-1/2 flex-col p-4">
|
||||
<Dialog.Title as="h3" className="mb-4 text-center text-lg font-medium">
|
||||
<div className='flex w-1/2 flex-col p-4'>
|
||||
<Dialog.Title as='h3' className='mb-4 text-center text-lg font-medium'>
|
||||
Withdraw from Account {selectedAccount}
|
||||
</Dialog.Title>
|
||||
<div>
|
||||
<ContainerSecondary className="mb-3 p-3">
|
||||
<div className="mb-4 text-sm">
|
||||
<div className="mb-1 flex justify-between">
|
||||
<div className="font-bold">Asset:</div>
|
||||
<select className="bg-transparent" onChange={handleTokenChange}>
|
||||
<ContainerSecondary className='mb-3 p-3'>
|
||||
<div className='mb-4 text-sm'>
|
||||
<div className='mb-1 flex justify-between'>
|
||||
<div className='font-bold'>Asset:</div>
|
||||
<select className='bg-transparent' onChange={handleTokenChange}>
|
||||
{positionsData?.coins?.map((coin) => (
|
||||
<option key={coin.denom} value={coin.denom}>
|
||||
{getTokenSymbol(coin.denom)}
|
||||
@ -175,26 +176,26 @@ const WithdrawModal = ({ show, onClose }: any) => {
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="font-bold">Amount:</div>
|
||||
<div className='flex justify-between'>
|
||||
<div className='font-bold'>Amount:</div>
|
||||
<input
|
||||
type="number"
|
||||
className="border border-black/50 bg-transparent px-2"
|
||||
type='number'
|
||||
className='border border-black/50 bg-transparent px-2'
|
||||
value={amount}
|
||||
min="0"
|
||||
min='0'
|
||||
onChange={(e) => handleValueChange(e.target.valueAsNumber)}
|
||||
/>
|
||||
</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
|
||||
className="mb-6"
|
||||
className='mb-6'
|
||||
value={percentageValue}
|
||||
onChange={(value) => {
|
||||
const decimal = value[0] / 100
|
||||
// limit decimal precision based on token contract decimals
|
||||
const newAmount = Number(
|
||||
(decimal * maxWithdrawAmount).toFixed(selectedTokenDecimals)
|
||||
(decimal * maxWithdrawAmount).toFixed(selectedTokenDecimals),
|
||||
)
|
||||
|
||||
setAmount(newAmount)
|
||||
@ -202,10 +203,10 @@ const WithdrawModal = ({ show, onClose }: any) => {
|
||||
onMaxClick={() => setAmount(maxWithdrawAmount)}
|
||||
/>
|
||||
</ContainerSecondary>
|
||||
<ContainerSecondary className="mb-10 flex items-center justify-between">
|
||||
<div className="text-left">
|
||||
<h3 className="font-bold">Withdraw with borrowing</h3>
|
||||
<div className="text-sm text-[#585A74]/50">Explanation....</div>
|
||||
<ContainerSecondary className='mb-10 flex items-center justify-between'>
|
||||
<div className='text-left'>
|
||||
<h3 className='font-bold'>Withdraw with borrowing</h3>
|
||||
<div className='text-sm text-[#585A74]/50'>Explanation....</div>
|
||||
</div>
|
||||
|
||||
<Switch
|
||||
@ -223,60 +224,60 @@ const WithdrawModal = ({ show, onClose }: any) => {
|
||||
</Switch>
|
||||
</ContainerSecondary>
|
||||
</div>
|
||||
<Button className="mt-auto w-full" onClick={() => mutate()}>
|
||||
<Button className='mt-auto w-full' onClick={() => mutate()}>
|
||||
Withdraw
|
||||
</Button>
|
||||
</div>
|
||||
<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>
|
||||
<h4 className="mb-4 text-xl">Subaccount {selectedAccount}</h4>
|
||||
<div className="mb-2 rounded-md border border-white/20 p-3">
|
||||
<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>
|
||||
<h4 className='mb-4 text-xl'>Subaccount {selectedAccount}</h4>
|
||||
<div className='mb-2 rounded-md border border-white/20 p-3'>
|
||||
{accountStats && (
|
||||
<div className="flex items-center gap-x-3">
|
||||
<div className='flex items-center gap-x-3'>
|
||||
<p>{formatCurrency(accountStats.netWorth)}</p>
|
||||
{/* TOOLTIP */}
|
||||
<div title={`${String(accountStats.currentLeverage.toFixed(1))}x`}>
|
||||
<SemiCircleProgress
|
||||
value={accountStats.currentLeverage / accountStats.maxLeverage}
|
||||
label="Lvg"
|
||||
label='Lvg'
|
||||
/>
|
||||
</div>
|
||||
<SemiCircleProgress value={accountStats.risk} label="Risk" />
|
||||
<SemiCircleProgress value={accountStats.risk} label='Risk' />
|
||||
<ProgressBar value={accountStats.health} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-2 rounded-md border border-white/20 p-3 text-sm">
|
||||
<div className="mb-1 flex justify-between">
|
||||
<div className='mb-2 rounded-md border border-white/20 p-3 text-sm'>
|
||||
<div className='mb-1 flex justify-between'>
|
||||
<div>Total Position:</div>
|
||||
<div className="font-semibold">
|
||||
<div className='font-semibold'>
|
||||
{formatCurrency(accountStats?.totalPosition ?? 0)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className='flex justify-between'>
|
||||
<div>Total Liabilities:</div>
|
||||
<div className="font-semibold">
|
||||
<div className='font-semibold'>
|
||||
{formatCurrency(accountStats?.totalDebt ?? 0)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-md border border-white/20 p-3">
|
||||
<h4 className="mb-2 font-bold">Balances</h4>
|
||||
<div className='rounded-md border border-white/20 p-3'>
|
||||
<h4 className='mb-2 font-bold'>Balances</h4>
|
||||
{isLoadingPositions ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<table className="w-full border-separate border-spacing-1">
|
||||
<thead className="text-left text-xs font-semibold">
|
||||
<table className='w-full border-separate border-spacing-1'>
|
||||
<thead className='text-left text-xs font-semibold'>
|
||||
<tr>
|
||||
<th>Asset</th>
|
||||
<th>Value</th>
|
||||
<th>Size</th>
|
||||
<th className="text-right">APY</th>
|
||||
<th className='text-right'>APY</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{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>
|
||||
{formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))}
|
||||
@ -289,12 +290,12 @@ const WithdrawModal = ({ show, onClose }: any) => {
|
||||
maximumFractionDigits: getTokenDecimals(coin.denom),
|
||||
})}
|
||||
</td>
|
||||
<td className="text-right">-</td>
|
||||
<td className='text-right'>-</td>
|
||||
</tr>
|
||||
))}
|
||||
{positionsData?.debts.map((coin) => (
|
||||
<tr key={coin.denom} className="text-xs text-red-500">
|
||||
<td className="text-white/50">{getTokenSymbol(coin.denom)}</td>
|
||||
<tr key={coin.denom} className='text-xs text-red-500'>
|
||||
<td className='text-white/50'>{getTokenSymbol(coin.denom)}</td>
|
||||
<td>
|
||||
-{formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))}
|
||||
</td>
|
||||
@ -307,7 +308,7 @@ const WithdrawModal = ({ show, onClose }: any) => {
|
||||
maximumFractionDigits: 6,
|
||||
})}
|
||||
</td>
|
||||
<td className="text-right">
|
||||
<td className='text-right'>
|
||||
-{(Number(marketsData?.[coin.denom].borrow_rate) * 100).toFixed(1)}%
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -2,16 +2,16 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react
|
||||
import { useMemo } from 'react'
|
||||
import { toast } from 'react-toastify'
|
||||
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { queryKeys } from 'types/query-keys-factory'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
|
||||
const useBorrowFunds = (
|
||||
amount: number,
|
||||
denom: string,
|
||||
withdraw = false,
|
||||
options: Omit<UseMutationOptions, 'onError'>
|
||||
options: Omit<UseMutationOptions, 'onError'>,
|
||||
) => {
|
||||
const creditManagerClient = useWalletStore((s) => s.clients.creditManager)
|
||||
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount ?? '')
|
||||
@ -51,7 +51,7 @@ const useBorrowFunds = (
|
||||
async () =>
|
||||
await creditManagerClient?.updateCreditAccount(
|
||||
{ accountId: selectedAccount, actions },
|
||||
hardcodedFee
|
||||
hardcodedFee,
|
||||
),
|
||||
{
|
||||
onSettled: () => {
|
||||
@ -68,7 +68,7 @@ const useBorrowFunds = (
|
||||
toast.error(err.message)
|
||||
},
|
||||
...options,
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { toast } from 'react-toastify'
|
||||
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { contractAddresses } from 'config/contracts'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { queryKeys } from 'types/query-keys-factory'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
|
||||
// 200000 gas used
|
||||
const executeMsg = {
|
||||
@ -25,7 +25,7 @@ const useCreateCreditAccount = () => {
|
||||
address,
|
||||
contractAddresses.creditManager,
|
||||
executeMsg,
|
||||
hardcodedFee
|
||||
hardcodedFee,
|
||||
),
|
||||
{
|
||||
onSettled: () => {
|
||||
@ -42,7 +42,7 @@ const useCreateCreditAccount = () => {
|
||||
setSelectedAccount(createdID)
|
||||
toast.success('New account created')
|
||||
},
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { toast } from 'react-toastify'
|
||||
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { contractAddresses } from 'config/contracts'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { queryKeys } from 'types/query-keys-factory'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
|
||||
const useCreateCreditAccount = (accountId: string) => {
|
||||
const signingClient = useWalletStore((s) => s.signingClient)
|
||||
@ -22,7 +22,7 @@ const useCreateCreditAccount = (accountId: string) => {
|
||||
token_id: accountId,
|
||||
},
|
||||
},
|
||||
hardcodedFee
|
||||
hardcodedFee,
|
||||
),
|
||||
{
|
||||
onSettled: () => {
|
||||
@ -34,7 +34,7 @@ const useCreateCreditAccount = (accountId: string) => {
|
||||
onSuccess: () => {
|
||||
toast.success('Credit Account Deleted')
|
||||
},
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { toast } from 'react-toastify'
|
||||
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { contractAddresses } from 'config/contracts'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { queryKeys } from 'types/query-keys-factory'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
|
||||
const useDepositCreditAccount = (
|
||||
accountId: string,
|
||||
@ -12,7 +12,7 @@ const useDepositCreditAccount = (
|
||||
amount: number,
|
||||
options?: {
|
||||
onSuccess?: () => void
|
||||
}
|
||||
},
|
||||
) => {
|
||||
const signingClient = useWalletStore((s) => s.signingClient)
|
||||
const address = useWalletStore((s) => s.address)
|
||||
@ -44,7 +44,7 @@ const useDepositCreditAccount = (
|
||||
denom,
|
||||
amount: String(amount),
|
||||
},
|
||||
]
|
||||
],
|
||||
),
|
||||
{
|
||||
onError: (err: Error) => {
|
||||
@ -57,7 +57,7 @@ const useDepositCreditAccount = (
|
||||
|
||||
options?.onSuccess && options.onSuccess()
|
||||
},
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
|
||||
import BigNumber from 'bignumber.js'
|
||||
import { useMemo } from 'react'
|
||||
import { toast } from 'react-toastify'
|
||||
import BigNumber from 'bignumber.js'
|
||||
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { contractAddresses } from 'config/contracts'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { queryKeys } from 'types/query-keys-factory'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
import { getTokenDecimals } from 'utils/tokens'
|
||||
|
||||
// 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 = (
|
||||
amount: number,
|
||||
denom: string,
|
||||
options: Omit<UseMutationOptions, 'onError'>
|
||||
options: Omit<UseMutationOptions, 'onError'>,
|
||||
) => {
|
||||
const signingClient = useWalletStore((s) => s.signingClient)
|
||||
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
|
||||
@ -61,7 +61,7 @@ const useRepayFunds = (
|
||||
denom,
|
||||
amount: adjustedAmount,
|
||||
},
|
||||
]
|
||||
],
|
||||
),
|
||||
{
|
||||
onSettled: () => {
|
||||
@ -74,7 +74,7 @@ const useRepayFunds = (
|
||||
toast.error(err.message)
|
||||
},
|
||||
...options,
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -2,10 +2,10 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { useMemo } from 'react'
|
||||
import { toast } from 'react-toastify'
|
||||
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { queryKeys } from 'types/query-keys-factory'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
|
||||
const useWithdrawFunds = (
|
||||
amount: number,
|
||||
@ -13,7 +13,7 @@ const useWithdrawFunds = (
|
||||
denom: string,
|
||||
options?: {
|
||||
onSuccess?: () => void
|
||||
}
|
||||
},
|
||||
) => {
|
||||
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount ?? '')
|
||||
const address = useWalletStore((s) => s.address)
|
||||
@ -55,7 +55,7 @@ const useWithdrawFunds = (
|
||||
async () =>
|
||||
creditManagerClient?.updateCreditAccount(
|
||||
{ accountId: selectedAccount, actions },
|
||||
hardcodedFee
|
||||
hardcodedFee,
|
||||
),
|
||||
{
|
||||
onSuccess: () => {
|
||||
@ -69,7 +69,7 @@ const useWithdrawFunds = (
|
||||
onError: (err: Error) => {
|
||||
toast.error(err.message)
|
||||
},
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { useMemo } from 'react'
|
||||
import BigNumber from 'bignumber.js'
|
||||
import { useMemo } from 'react'
|
||||
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import { getTokenDecimals } from 'utils/tokens'
|
||||
|
||||
import useCreditAccountPositions from './useCreditAccountPositions'
|
||||
import useMarkets from './useMarkets'
|
||||
import useTokenPrices from './useTokenPrices'
|
||||
@ -49,7 +50,7 @@ const useAccountStats = () => {
|
||||
|
||||
const totalWeightedPositions = positionsData.coins.reduce((acc, coin) => {
|
||||
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()
|
||||
|
||||
@ -17,7 +17,7 @@ const useAllBalances = () => {
|
||||
{
|
||||
enabled: !!address,
|
||||
staleTime: Infinity,
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
return {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { contractAddresses } from 'config/contracts'
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { queryKeys } from 'types/query-keys-factory'
|
||||
|
||||
type Result = string[]
|
||||
@ -19,7 +19,7 @@ const useAllowedCoins = () => {
|
||||
{
|
||||
enabled: !!client,
|
||||
staleTime: Infinity,
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
return {
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import { useCallback, useMemo } from 'react'
|
||||
import BigNumber from 'bignumber.js'
|
||||
import { useCallback, useMemo } from 'react'
|
||||
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import { getTokenDecimals } from 'utils/tokens'
|
||||
|
||||
import useCreditAccountPositions from './useCreditAccountPositions'
|
||||
import useMarkets from './useMarkets'
|
||||
import useTokenPrices from './useTokenPrices'
|
||||
import useRedbankBalances from './useRedbankBalances'
|
||||
import useTokenPrices from './useTokenPrices'
|
||||
|
||||
const getApproximateHourlyInterest = (amount: string, borrowAPY: string) => {
|
||||
const hourlyAPY = BigNumber(borrowAPY).div(24 * 365)
|
||||
@ -28,7 +29,7 @@ const useCalculateMaxBorrowAmount = (denom: string, isUnderCollateralized: boole
|
||||
|
||||
return BigNumber(amount).times(tokenPrices[denom]).toNumber()
|
||||
},
|
||||
[tokenPrices]
|
||||
[tokenPrices],
|
||||
)
|
||||
|
||||
return useMemo(() => {
|
||||
@ -37,7 +38,7 @@ const useCalculateMaxBorrowAmount = (denom: string, isUnderCollateralized: boole
|
||||
// max ltv adjusted collateral
|
||||
const totalWeightedPositions = positionsData?.coins.reduce((acc, coin) => {
|
||||
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()
|
||||
@ -48,11 +49,11 @@ const useCalculateMaxBorrowAmount = (denom: string, isUnderCollateralized: boole
|
||||
const totalLiabilitiesValue = positionsData?.debts.reduce((acc, coin) => {
|
||||
const estimatedInterestAmount = getApproximateHourlyInterest(
|
||||
coin.amount,
|
||||
marketsData[coin.denom].borrow_rate
|
||||
marketsData[coin.denom].borrow_rate,
|
||||
)
|
||||
|
||||
const tokenDebtValue = BigNumber(getTokenValue(coin.amount, coin.denom)).plus(
|
||||
estimatedInterestAmount
|
||||
estimatedInterestAmount,
|
||||
)
|
||||
|
||||
return tokenDebtValue.plus(acc).toNumber()
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import { useCallback, useMemo } from 'react'
|
||||
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 useTokenPrices from './useTokenPrices'
|
||||
import { getTokenDecimals } from 'utils/tokens'
|
||||
|
||||
import useCreditAccountPositions from './useCreditAccountPositions'
|
||||
import useMarkets from './useMarkets'
|
||||
import useTokenPrices from './useTokenPrices'
|
||||
|
||||
const getApproximateHourlyInterest = (amount: string, borrowAPY: string) => {
|
||||
const hourlyAPY = BigNumber(borrowAPY).div(24 * 365)
|
||||
@ -28,7 +29,7 @@ const useCalculateMaxWithdrawAmount = (denom: string, borrow: boolean) => {
|
||||
|
||||
return BigNumber(amount).times(tokenPrices[denom]).toNumber()
|
||||
},
|
||||
[tokenPrices]
|
||||
[tokenPrices],
|
||||
)
|
||||
|
||||
const tokenAmountInCreditAccount = useMemo(() => {
|
||||
@ -48,10 +49,10 @@ const useCalculateMaxWithdrawAmount = (denom: string, borrow: boolean) => {
|
||||
const totalLiabilitiesValue = positionsData?.debts.reduce((acc, coin) => {
|
||||
const estimatedInterestAmount = getApproximateHourlyInterest(
|
||||
coin.amount,
|
||||
marketsData[coin.denom].borrow_rate
|
||||
marketsData[coin.denom].borrow_rate,
|
||||
)
|
||||
const tokenDebtValue = BigNumber(getTokenValue(coin.amount, coin.denom)).plus(
|
||||
estimatedInterestAmount
|
||||
estimatedInterestAmount,
|
||||
)
|
||||
|
||||
return tokenDebtValue.plus(acc).toNumber()
|
||||
@ -61,7 +62,7 @@ const useCalculateMaxWithdrawAmount = (denom: string, borrow: boolean) => {
|
||||
if (coin.denom === denom) return acc
|
||||
|
||||
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()
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Coin } from '@cosmjs/stargate'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useMemo } from 'react'
|
||||
import { Coin } from '@cosmjs/stargate'
|
||||
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { contractAddresses } from 'config/contracts'
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { queryKeys } from 'types/query-keys-factory'
|
||||
|
||||
interface DebtAmount {
|
||||
@ -40,7 +40,7 @@ const useCreditAccountPositions = (accountId: string) => {
|
||||
enabled: !!address && !!client,
|
||||
refetchInterval: 30000,
|
||||
staleTime: Infinity,
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
return {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useMemo } from 'react'
|
||||
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { contractAddresses } from 'config/contracts'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { queryKeys } from 'types/query-keys-factory'
|
||||
|
||||
type Result = {
|
||||
@ -35,7 +35,7 @@ const useCreditAccounts = () => {
|
||||
creditManagerActions.setSelectedAccount(data.tokens[0])
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
return {
|
||||
|
||||
@ -86,7 +86,7 @@ const useMarkets = () => {
|
||||
}),
|
||||
{
|
||||
staleTime: Infinity,
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
return {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useMemo } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Coin } from '@cosmjs/stargate'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useMemo } from 'react'
|
||||
|
||||
import { contractAddresses } from 'config/contracts'
|
||||
import { queryKeys } from 'types/query-keys-factory'
|
||||
@ -50,7 +50,7 @@ const useRedbankBalances = () => {
|
||||
...acc,
|
||||
[coin.denom]: coin.amount,
|
||||
}),
|
||||
{}
|
||||
{},
|
||||
) as { [key in string]: string }
|
||||
}, [result.data]),
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@ import { useQuery } from '@tanstack/react-query'
|
||||
import BigNumber from 'bignumber.js'
|
||||
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { chain } from 'utils/chains'
|
||||
import { queryKeys } from 'types/query-keys-factory'
|
||||
import { chain } from 'utils/chains'
|
||||
|
||||
type Result = {
|
||||
balance: {
|
||||
@ -21,11 +21,11 @@ const useTokenBalance = (denom?: string) => {
|
||||
fetch(
|
||||
`${chain.rest}/cosmos/bank/v1beta1/balances/${address}/by_denom?denom=${
|
||||
denom || chain.stakeCurrency.coinMinimalDenom
|
||||
}`
|
||||
}`,
|
||||
).then((res) => res.json()),
|
||||
{
|
||||
enabled: !!address,
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
return {
|
||||
|
||||
@ -9,7 +9,7 @@ const useTokenPrices = () => {
|
||||
}),
|
||||
{
|
||||
staleTime: Infinity,
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"format": "eslint . --ext=ts,tsx --fix && prettier --write ./**/*.ts ./**/*.tsx",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
@ -41,6 +42,7 @@
|
||||
"autoprefixer": "^10.4.13",
|
||||
"eslint": "8.23.0",
|
||||
"eslint-config-next": "12.3.1",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"postcss": "^8.4.16",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-tailwindcss": "^0.1.13",
|
||||
|
||||
@ -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 Head from 'next/head'
|
||||
import { useEffect } from 'react'
|
||||
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 useWalletStore from 'stores/useWalletStore'
|
||||
|
||||
@ -38,7 +39,7 @@ function MyApp({ Component, pageProps }: AppProps) {
|
||||
<Head>
|
||||
<title>Mars V2</title>
|
||||
{/* <meta name="description" content="Generated by create next app" /> */}
|
||||
<link rel="icon" href="/favicon.svg" />
|
||||
<link rel='icon' href='/favicon.svg' />
|
||||
</Head>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
@ -48,7 +49,7 @@ function MyApp({ Component, pageProps }: AppProps) {
|
||||
<ToastContainer
|
||||
autoClose={1500}
|
||||
closeButton={false}
|
||||
position="bottom-right"
|
||||
position='bottom-right'
|
||||
hideProgressBar
|
||||
newestOnTop
|
||||
transition={Zoom}
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import React, { useMemo, useRef, useState } from 'react'
|
||||
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 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 useTokenPrices from 'hooks/useTokenPrices'
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import { getTokenDecimals, getTokenInfo } from 'utils/tokens'
|
||||
|
||||
type ModalState = {
|
||||
show: 'borrow' | 'repay' | false
|
||||
@ -115,11 +115,11 @@ const Borrow = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-1">
|
||||
<Container className="mb-4">
|
||||
<div className='flex items-start gap-4'>
|
||||
<div className='flex-1'>
|
||||
<Container className='mb-4'>
|
||||
<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
|
||||
data={borrowedAssets}
|
||||
onBorrowClick={handleBorrowClick}
|
||||
@ -129,7 +129,7 @@ const Borrow = () => {
|
||||
</Container>
|
||||
<Container>
|
||||
<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
|
||||
data={notBorrowedAssets}
|
||||
onBorrowClick={handleBorrowClick}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react'
|
||||
|
||||
import Container from 'components/Container'
|
||||
|
||||
const Council = () => {
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import React from 'react'
|
||||
|
||||
import Container from 'components/Container'
|
||||
|
||||
const Earn = () => {
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
<Container className="flex-1">Yield Module</Container>
|
||||
<Container className="w-[450px]">Placeholder</Container>
|
||||
<div className='flex gap-4'>
|
||||
<Container className='flex-1'>Yield Module</Container>
|
||||
<Container className='w-[450px]'>Placeholder</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import type { NextPage } from 'next'
|
||||
// import Head from "next/head";
|
||||
// import Image from "next/image";
|
||||
// import styles from "../styles/Home.module.css";
|
||||
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 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 useWalletStore from 'stores/useWalletStore'
|
||||
import { chain } from 'utils/chains'
|
||||
import { contractAddresses } from 'config/contracts'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
import Container from 'components/Container'
|
||||
import Spinner from 'components/Spinner'
|
||||
import { contractAddresses } from 'config/contracts'
|
||||
// import { Coin } from "@cosmjs/stargate";
|
||||
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
||||
import useWalletStore from 'stores/useWalletStore'
|
||||
import { queryKeys } from 'types/query-keys-factory'
|
||||
import { chain } from 'utils/chains'
|
||||
import { hardcodedFee } from 'utils/contants'
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const [sendAmount, setSendAmount] = useState('')
|
||||
@ -73,7 +73,7 @@ const Home: NextPage = () => {
|
||||
.toString(),
|
||||
},
|
||||
],
|
||||
hardcodedFee
|
||||
hardcodedFee,
|
||||
)
|
||||
|
||||
console.log('txResponse', res)
|
||||
@ -81,13 +81,13 @@ const Home: NextPage = () => {
|
||||
<div>
|
||||
<a
|
||||
href={`https://testnet.mintscan.io/osmosis-testnet/txs/${res?.transactionHash}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Check transaction
|
||||
</a>
|
||||
</div>,
|
||||
{ autoClose: false }
|
||||
{ autoClose: false },
|
||||
)
|
||||
} catch (e: any) {
|
||||
console.log(e)
|
||||
@ -111,7 +111,7 @@ const Home: NextPage = () => {
|
||||
address,
|
||||
contractAddresses.creditManager,
|
||||
executeMsg,
|
||||
hardcodedFee
|
||||
hardcodedFee,
|
||||
)
|
||||
|
||||
console.log('mint result', createResult)
|
||||
@ -119,13 +119,13 @@ const Home: NextPage = () => {
|
||||
<div>
|
||||
<a
|
||||
href={`https://testnet.mintscan.io/osmosis-testnet/txs/${createResult?.transactionHash}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Check transaction
|
||||
</a>
|
||||
</div>,
|
||||
{ autoClose: false }
|
||||
{ autoClose: false },
|
||||
)
|
||||
|
||||
queryClient.invalidateQueries(queryKeys.creditAccounts(address))
|
||||
@ -149,7 +149,7 @@ const Home: NextPage = () => {
|
||||
|
||||
const allTokensResponse = await signingClient?.queryContractSmart(
|
||||
contractAddresses.accountNft,
|
||||
allTokensQueryMsg
|
||||
allTokensQueryMsg,
|
||||
)
|
||||
|
||||
setAllTokens(allTokensResponse.tokens)
|
||||
@ -179,7 +179,7 @@ const Home: NextPage = () => {
|
||||
|
||||
const tokensResponse = await signingClient?.queryContractSmart(
|
||||
contractAddresses.accountNft,
|
||||
tokensQueryMsg
|
||||
tokensQueryMsg,
|
||||
)
|
||||
|
||||
console.log('res tokens', tokensResponse)
|
||||
@ -219,7 +219,7 @@ const Home: NextPage = () => {
|
||||
address,
|
||||
contractAddresses.creditManager,
|
||||
executeMsg,
|
||||
hardcodedFee
|
||||
hardcodedFee,
|
||||
)
|
||||
|
||||
console.log('borrow result', borrowResult)
|
||||
@ -227,13 +227,13 @@ const Home: NextPage = () => {
|
||||
<div>
|
||||
<a
|
||||
href={`https://testnet.mintscan.io/osmosis-testnet/txs/${borrowResult?.transactionHash}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Check transaction
|
||||
</a>
|
||||
</div>,
|
||||
{ autoClose: false }
|
||||
{ autoClose: false },
|
||||
)
|
||||
|
||||
queryClient.invalidateQueries(queryKeys.creditAccounts(address))
|
||||
@ -248,64 +248,64 @@ const Home: NextPage = () => {
|
||||
}
|
||||
|
||||
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>
|
||||
<h4 className="mb-5 text-xl">Send Tokens</h4>
|
||||
<div className="mb-5 flex flex-wrap gap-2">
|
||||
<h4 className='mb-5 text-xl'>Send Tokens</h4>
|
||||
<div className='mb-5 flex flex-wrap gap-2'>
|
||||
<div>
|
||||
<p>Address:</p>
|
||||
<input
|
||||
className="rounded-lg bg-black/40 px-3 py-1"
|
||||
className='rounded-lg bg-black/40 px-3 py-1'
|
||||
value={recipientAddress}
|
||||
placeholder="address"
|
||||
placeholder='address'
|
||||
onChange={(e) => setRecipientAddress(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Amount:</p>
|
||||
<input
|
||||
type="number"
|
||||
className="rounded-lg bg-black/40 px-3 py-1"
|
||||
type='number'
|
||||
className='rounded-lg bg-black/40 px-3 py-1'
|
||||
value={sendAmount}
|
||||
placeholder="amount"
|
||||
placeholder='amount'
|
||||
onChange={(e) => setSendAmount(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleSendClick}>
|
||||
<Button className='bg-[#524bb1] hover:bg-[#6962cc]' onClick={handleSendClick}>
|
||||
Send
|
||||
</Button>
|
||||
</Container>
|
||||
<Container>
|
||||
<h4 className="mb-5 text-xl">Create Credit Account (Mint NFT)</h4>
|
||||
<Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleCreateCreditAccount}>
|
||||
<h4 className='mb-5 text-xl'>Create Credit Account (Mint NFT)</h4>
|
||||
<Button className='bg-[#524bb1] hover:bg-[#6962cc]' onClick={handleCreateCreditAccount}>
|
||||
Create
|
||||
</Button>
|
||||
</Container>
|
||||
<Container>
|
||||
<h4 className="mb-5 text-xl">Get all Credit Accounts</h4>
|
||||
<Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleGetCreditAccounts}>
|
||||
<h4 className='mb-5 text-xl'>Get all Credit Accounts</h4>
|
||||
<Button className='bg-[#524bb1] hover:bg-[#6962cc]' onClick={handleGetCreditAccounts}>
|
||||
Fetch
|
||||
</Button>
|
||||
</Container>
|
||||
<Container>
|
||||
<h4 className="mb-5 text-xl">Borrow OSMO</h4>
|
||||
<h4 className='mb-5 text-xl'>Borrow OSMO</h4>
|
||||
<input
|
||||
className="rounded-lg bg-black/40 px-3 py-1"
|
||||
type="number"
|
||||
className='rounded-lg bg-black/40 px-3 py-1'
|
||||
type='number'
|
||||
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
|
||||
</Button>
|
||||
</Container>
|
||||
|
||||
<div>
|
||||
{allTokens && (
|
||||
<div className="mb-4">
|
||||
<div className="flex items-end">
|
||||
<h5 className="text-xl font-medium">All Tokens</h5>
|
||||
<p className="ml-2 text-sm">- {allTokens.length} total</p>
|
||||
<div className='mb-4'>
|
||||
<div className='flex items-end'>
|
||||
<h5 className='text-xl font-medium'>All Tokens</h5>
|
||||
<p className='ml-2 text-sm'>- {allTokens.length} total</p>
|
||||
</div>
|
||||
{allTokens.map((token) => (
|
||||
<p key={token}>{token}</p>
|
||||
@ -314,9 +314,9 @@ const Home: NextPage = () => {
|
||||
)}
|
||||
{walletTokens && (
|
||||
<>
|
||||
<div className="flex items-end">
|
||||
<h5 className="text-xl font-medium">Your Tokens</h5>
|
||||
<p className="ml-2 text-sm">- {walletTokens.length} total</p>
|
||||
<div className='flex items-end'>
|
||||
<h5 className='text-xl font-medium'>Your Tokens</h5>
|
||||
<p className='ml-2 text-sm'>- {walletTokens.length} total</p>
|
||||
</div>
|
||||
{walletTokens.map((token) => (
|
||||
<p key={token}>{token}</p>
|
||||
@ -324,7 +324,7 @@ const Home: NextPage = () => {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{error && <div className="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 && (
|
||||
<div>
|
||||
<Spinner />
|
||||
|
||||
@ -48,39 +48,39 @@ const mockedAccounts = [
|
||||
|
||||
const Portfolio = () => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Container className="flex-1">Portfolio Module</Container>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className='flex flex-col gap-4'>
|
||||
<Container className='flex-1'>Portfolio Module</Container>
|
||||
<div className='grid grid-cols-2 gap-4'>
|
||||
{mockedAccounts.map((account) => (
|
||||
<Container key={account.id}>
|
||||
<p className="mb-4 text-center font-bold">{account.label}</p>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<p className='mb-4 text-center font-bold'>{account.label}</p>
|
||||
<div className='grid grid-cols-3 gap-4'>
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<p className={`${account.profit > 0 ? 'text-green-400' : 'text-red-500'}`}>
|
||||
{account.profit > 0 && '+'}
|
||||
{formatCurrency(account.profit)}
|
||||
</p>
|
||||
<p className="text-sm text-white/40">P&L</p>
|
||||
<p className='text-sm text-white/40'>P&L</p>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
</Container>
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import React from 'react'
|
||||
|
||||
import Container from 'components/Container'
|
||||
|
||||
const Trade = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-4 flex gap-4">
|
||||
<Container className="flex-1">Graph/Tradingview Module</Container>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className='mb-4 flex gap-4'>
|
||||
<Container className='flex-1'>Graph/Tradingview Module</Container>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<Container>Buy/Sell module</Container>
|
||||
<Container>Orderbook module (optional)</Container>
|
||||
</div>
|
||||
|
||||
@ -28,10 +28,10 @@ const useCreditManagerStore = create<CreditManagerStore>()(
|
||||
name: 'creditManager',
|
||||
partialize: (state) =>
|
||||
Object.fromEntries(
|
||||
Object.entries(state).filter(([key]) => ['selectedAccount'].includes(key))
|
||||
Object.entries(state).filter(([key]) => ['selectedAccount'].includes(key)),
|
||||
),
|
||||
}
|
||||
)
|
||||
},
|
||||
),
|
||||
)
|
||||
|
||||
export default useCreditManagerStore
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { CosmWasmClient, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
|
||||
import create from 'zustand'
|
||||
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 { Wallet } from 'types'
|
||||
import { AccountNftClient } from 'types/generated/account-nft/AccountNft.client'
|
||||
import { CreditManagerClient } from 'types/generated/credit-manager/CreditManager.client'
|
||||
import { chain } from 'utils/chains'
|
||||
|
||||
interface WalletStore {
|
||||
address: string
|
||||
@ -45,12 +45,12 @@ const useWalletStore = create<WalletStore>()(
|
||||
const accountNft = new AccountNftClient(
|
||||
signingClient,
|
||||
address,
|
||||
contractAddresses.accountNft
|
||||
contractAddresses.accountNft,
|
||||
)
|
||||
const creditManager = new CreditManagerClient(
|
||||
signingClient,
|
||||
address,
|
||||
contractAddresses.creditManager
|
||||
contractAddresses.creditManager,
|
||||
)
|
||||
|
||||
set(() => ({
|
||||
@ -70,7 +70,7 @@ const useWalletStore = create<WalletStore>()(
|
||||
const address = key.bech32Address
|
||||
const signingClientInstance = await SigningCosmWasmClient.connectWithSigner(
|
||||
chain.rpc,
|
||||
offlineSigner
|
||||
offlineSigner,
|
||||
)
|
||||
|
||||
get().actions.initClients(address, signingClientInstance)
|
||||
@ -91,7 +91,7 @@ const useWalletStore = create<WalletStore>()(
|
||||
const offlineSigner = window.keplr.getOfflineSigner(chain.chainId)
|
||||
const signingClientInstance = await SigningCosmWasmClient.connectWithSigner(
|
||||
chain.rpc,
|
||||
offlineSigner
|
||||
offlineSigner,
|
||||
)
|
||||
|
||||
get().actions.initClients(address, signingClientInstance)
|
||||
@ -106,11 +106,11 @@ const useWalletStore = create<WalletStore>()(
|
||||
partialize: (state) =>
|
||||
Object.fromEntries(
|
||||
Object.entries(state).filter(
|
||||
([key]) => !['client', 'metamaskInstalled', 'actions', 'address'].includes(key)
|
||||
)
|
||||
([key]) => !['client', 'metamaskInstalled', 'actions', 'address'].includes(key),
|
||||
),
|
||||
),
|
||||
}
|
||||
)
|
||||
},
|
||||
),
|
||||
)
|
||||
|
||||
export default useWalletStore
|
||||
|
||||
@ -5,29 +5,30 @@
|
||||
* 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 { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
|
||||
|
||||
import {
|
||||
InstantiateMsg,
|
||||
ExecuteMsg,
|
||||
Binary,
|
||||
Expiration,
|
||||
Timestamp,
|
||||
Uint64,
|
||||
QueryMsg,
|
||||
AllNftInfoResponseForEmpty,
|
||||
OwnerOfResponse,
|
||||
Approval,
|
||||
NftInfoResponseForEmpty,
|
||||
Empty,
|
||||
OperatorsResponse,
|
||||
TokensResponse,
|
||||
ApprovalResponse,
|
||||
ApprovalsResponse,
|
||||
Binary,
|
||||
ContractInfoResponse,
|
||||
Empty,
|
||||
ExecuteMsg,
|
||||
Expiration,
|
||||
InstantiateMsg,
|
||||
MinterResponse,
|
||||
NftInfoResponseForEmpty,
|
||||
NumTokensResponse,
|
||||
OperatorsResponse,
|
||||
OwnerOfResponse,
|
||||
QueryMsg,
|
||||
String,
|
||||
Timestamp,
|
||||
TokensResponse,
|
||||
Uint64,
|
||||
} from './AccountNft.types'
|
||||
export interface AccountNftReadOnlyInterface {
|
||||
contractAddress: string
|
||||
|
||||
@ -5,32 +5,33 @@
|
||||
* 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 { StdFee, Coin } from '@cosmjs/amino'
|
||||
import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
|
||||
|
||||
import { AccountNftClient, AccountNftQueryClient } from './AccountNft.client'
|
||||
import {
|
||||
InstantiateMsg,
|
||||
ExecuteMsg,
|
||||
Binary,
|
||||
Expiration,
|
||||
Timestamp,
|
||||
Uint64,
|
||||
QueryMsg,
|
||||
AllNftInfoResponseForEmpty,
|
||||
OwnerOfResponse,
|
||||
Approval,
|
||||
NftInfoResponseForEmpty,
|
||||
Empty,
|
||||
OperatorsResponse,
|
||||
TokensResponse,
|
||||
ApprovalResponse,
|
||||
ApprovalsResponse,
|
||||
Binary,
|
||||
ContractInfoResponse,
|
||||
Empty,
|
||||
ExecuteMsg,
|
||||
Expiration,
|
||||
InstantiateMsg,
|
||||
MinterResponse,
|
||||
NftInfoResponseForEmpty,
|
||||
NumTokensResponse,
|
||||
OperatorsResponse,
|
||||
OwnerOfResponse,
|
||||
QueryMsg,
|
||||
String,
|
||||
Timestamp,
|
||||
TokensResponse,
|
||||
Uint64,
|
||||
} from './AccountNft.types'
|
||||
import { AccountNftQueryClient, AccountNftClient } from './AccountNft.client'
|
||||
export const accountNftQueryKeys = {
|
||||
contract: [
|
||||
{
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
* 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 _2 from './AccountNft.react-query'
|
||||
import * as _0 from './AccountNft.types'
|
||||
export namespace contracts {
|
||||
export const AccountNft = { ..._0, ..._1, ..._2 }
|
||||
}
|
||||
|
||||
@ -5,42 +5,43 @@
|
||||
* 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 { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
|
||||
|
||||
import {
|
||||
Decimal,
|
||||
OracleBaseForString,
|
||||
RedBankBaseForString,
|
||||
SwapperBaseForString,
|
||||
InstantiateMsg,
|
||||
VaultBaseForString,
|
||||
ExecuteMsg,
|
||||
Action,
|
||||
Uint128,
|
||||
CallbackMsg,
|
||||
Addr,
|
||||
Coin,
|
||||
ConfigUpdates,
|
||||
VaultBaseForAddr,
|
||||
QueryMsg,
|
||||
ArrayOfCoinBalanceResponseItem,
|
||||
CoinBalanceResponseItem,
|
||||
ArrayOfSharesResponseItem,
|
||||
SharesResponseItem,
|
||||
ArrayOfDebtShares,
|
||||
DebtShares,
|
||||
ArrayOfVaultWithBalance,
|
||||
VaultWithBalance,
|
||||
ArrayOfVaultPositionResponseItem,
|
||||
VaultPositionResponseItem,
|
||||
VaultPosition,
|
||||
VaultPositionState,
|
||||
ArrayOfSharesResponseItem,
|
||||
ArrayOfString,
|
||||
ArrayOfVaultBaseForString,
|
||||
ArrayOfVaultPositionResponseItem,
|
||||
ArrayOfVaultWithBalance,
|
||||
CallbackMsg,
|
||||
Coin,
|
||||
CoinBalanceResponseItem,
|
||||
ConfigResponse,
|
||||
HealthResponse,
|
||||
Positions,
|
||||
ConfigUpdates,
|
||||
DebtAmount,
|
||||
DebtShares,
|
||||
Decimal,
|
||||
ExecuteMsg,
|
||||
HealthResponse,
|
||||
InstantiateMsg,
|
||||
OracleBaseForString,
|
||||
Positions,
|
||||
QueryMsg,
|
||||
RedBankBaseForString,
|
||||
SharesResponseItem,
|
||||
SwapperBaseForString,
|
||||
Uint128,
|
||||
VaultBaseForAddr,
|
||||
VaultBaseForString,
|
||||
VaultPosition,
|
||||
VaultPositionResponseItem,
|
||||
VaultPositionState,
|
||||
VaultWithBalance,
|
||||
} from './CreditManager.types'
|
||||
export interface CreditManagerReadOnlyInterface {
|
||||
contractAddress: string
|
||||
|
||||
@ -5,45 +5,46 @@
|
||||
* 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 { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
|
||||
import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
|
||||
|
||||
import { CreditManagerClient, CreditManagerQueryClient } from './CreditManager.client'
|
||||
import {
|
||||
Decimal,
|
||||
OracleBaseForString,
|
||||
RedBankBaseForString,
|
||||
SwapperBaseForString,
|
||||
InstantiateMsg,
|
||||
VaultBaseForString,
|
||||
ExecuteMsg,
|
||||
Action,
|
||||
Uint128,
|
||||
CallbackMsg,
|
||||
Addr,
|
||||
Coin,
|
||||
ConfigUpdates,
|
||||
VaultBaseForAddr,
|
||||
QueryMsg,
|
||||
ArrayOfCoinBalanceResponseItem,
|
||||
CoinBalanceResponseItem,
|
||||
ArrayOfSharesResponseItem,
|
||||
SharesResponseItem,
|
||||
ArrayOfDebtShares,
|
||||
DebtShares,
|
||||
ArrayOfVaultWithBalance,
|
||||
VaultWithBalance,
|
||||
ArrayOfVaultPositionResponseItem,
|
||||
VaultPositionResponseItem,
|
||||
VaultPosition,
|
||||
VaultPositionState,
|
||||
ArrayOfSharesResponseItem,
|
||||
ArrayOfString,
|
||||
ArrayOfVaultBaseForString,
|
||||
ArrayOfVaultPositionResponseItem,
|
||||
ArrayOfVaultWithBalance,
|
||||
CallbackMsg,
|
||||
Coin,
|
||||
CoinBalanceResponseItem,
|
||||
ConfigResponse,
|
||||
HealthResponse,
|
||||
Positions,
|
||||
ConfigUpdates,
|
||||
DebtAmount,
|
||||
DebtShares,
|
||||
Decimal,
|
||||
ExecuteMsg,
|
||||
HealthResponse,
|
||||
InstantiateMsg,
|
||||
OracleBaseForString,
|
||||
Positions,
|
||||
QueryMsg,
|
||||
RedBankBaseForString,
|
||||
SharesResponseItem,
|
||||
SwapperBaseForString,
|
||||
Uint128,
|
||||
VaultBaseForAddr,
|
||||
VaultBaseForString,
|
||||
VaultPosition,
|
||||
VaultPositionResponseItem,
|
||||
VaultPositionState,
|
||||
VaultWithBalance,
|
||||
} from './CreditManager.types'
|
||||
import { CreditManagerQueryClient, CreditManagerClient } from './CreditManager.client'
|
||||
export const creditManagerQueryKeys = {
|
||||
contract: [
|
||||
{
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
* 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 _5 from './CreditManager.react-query'
|
||||
import * as _3 from './CreditManager.types'
|
||||
export namespace contracts {
|
||||
export const CreditManager = { ..._3, ..._4, ..._5 }
|
||||
}
|
||||
|
||||
@ -5,22 +5,23 @@
|
||||
* 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 { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
|
||||
|
||||
import {
|
||||
OracleBaseForString,
|
||||
Addr,
|
||||
PricingMethod,
|
||||
InstantiateMsg,
|
||||
VaultPricingInfo,
|
||||
ExecuteMsg,
|
||||
ConfigUpdates,
|
||||
QueryMsg,
|
||||
ArrayOfVaultPricingInfo,
|
||||
OracleBaseForAddr,
|
||||
ConfigResponse,
|
||||
ConfigUpdates,
|
||||
Decimal,
|
||||
ExecuteMsg,
|
||||
InstantiateMsg,
|
||||
OracleBaseForAddr,
|
||||
OracleBaseForString,
|
||||
PriceResponse,
|
||||
PricingMethod,
|
||||
QueryMsg,
|
||||
VaultPricingInfo,
|
||||
} from './MarsOracleAdapter.types'
|
||||
export interface MarsOracleAdapterReadOnlyInterface {
|
||||
contractAddress: string
|
||||
|
||||
@ -5,25 +5,26 @@
|
||||
* 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 { StdFee, Coin } from '@cosmjs/amino'
|
||||
import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
|
||||
|
||||
import { MarsOracleAdapterClient, MarsOracleAdapterQueryClient } from './MarsOracleAdapter.client'
|
||||
import {
|
||||
OracleBaseForString,
|
||||
Addr,
|
||||
PricingMethod,
|
||||
InstantiateMsg,
|
||||
VaultPricingInfo,
|
||||
ExecuteMsg,
|
||||
ConfigUpdates,
|
||||
QueryMsg,
|
||||
ArrayOfVaultPricingInfo,
|
||||
OracleBaseForAddr,
|
||||
ConfigResponse,
|
||||
ConfigUpdates,
|
||||
Decimal,
|
||||
ExecuteMsg,
|
||||
InstantiateMsg,
|
||||
OracleBaseForAddr,
|
||||
OracleBaseForString,
|
||||
PriceResponse,
|
||||
PricingMethod,
|
||||
QueryMsg,
|
||||
VaultPricingInfo,
|
||||
} from './MarsOracleAdapter.types'
|
||||
import { MarsOracleAdapterQueryClient, MarsOracleAdapterClient } from './MarsOracleAdapter.client'
|
||||
export const marsOracleAdapterQueryKeys = {
|
||||
contract: [
|
||||
{
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
* 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 _8 from './MarsOracleAdapter.react-query'
|
||||
import * as _6 from './MarsOracleAdapter.types'
|
||||
export namespace contracts {
|
||||
export const MarsOracleAdapter = { ..._6, ..._7, ..._8 }
|
||||
}
|
||||
|
||||
@ -5,15 +5,16 @@
|
||||
* 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 { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
|
||||
|
||||
import {
|
||||
Decimal,
|
||||
InstantiateMsg,
|
||||
CoinPrice,
|
||||
Decimal,
|
||||
ExecuteMsg,
|
||||
QueryMsg,
|
||||
InstantiateMsg,
|
||||
PriceResponse,
|
||||
QueryMsg,
|
||||
} from './MockOracle.types'
|
||||
export interface MockOracleReadOnlyInterface {
|
||||
contractAddress: string
|
||||
|
||||
@ -5,18 +5,19 @@
|
||||
* 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 { StdFee, Coin } from '@cosmjs/amino'
|
||||
import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
|
||||
|
||||
import { MockOracleClient, MockOracleQueryClient } from './MockOracle.client'
|
||||
import {
|
||||
Decimal,
|
||||
InstantiateMsg,
|
||||
CoinPrice,
|
||||
Decimal,
|
||||
ExecuteMsg,
|
||||
QueryMsg,
|
||||
InstantiateMsg,
|
||||
PriceResponse,
|
||||
QueryMsg,
|
||||
} from './MockOracle.types'
|
||||
import { MockOracleQueryClient, MockOracleClient } from './MockOracle.client'
|
||||
export const mockOracleQueryKeys = {
|
||||
contract: [
|
||||
{
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
* 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 _11 from './MockOracle.react-query'
|
||||
import * as _9 from './MockOracle.types'
|
||||
export namespace contracts {
|
||||
export const MockOracle = { ..._9, ..._10, ..._11 }
|
||||
}
|
||||
|
||||
@ -5,18 +5,19 @@
|
||||
* 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 { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
|
||||
|
||||
import {
|
||||
Decimal,
|
||||
InstantiateMsg,
|
||||
CoinMarketInfo,
|
||||
ExecuteMsg,
|
||||
Uint128,
|
||||
Coin,
|
||||
QueryMsg,
|
||||
Market,
|
||||
CoinMarketInfo,
|
||||
Decimal,
|
||||
ExecuteMsg,
|
||||
InstantiateMsg,
|
||||
InterestRateModel,
|
||||
Market,
|
||||
QueryMsg,
|
||||
Uint128,
|
||||
UserAssetDebtResponse,
|
||||
} from './MockRedBank.types'
|
||||
export interface MockRedBankReadOnlyInterface {
|
||||
|
||||
@ -5,22 +5,23 @@
|
||||
* 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 { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
|
||||
import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
|
||||
|
||||
import { MockRedBankClient, MockRedBankQueryClient } from './MockRedBank.client'
|
||||
import {
|
||||
Decimal,
|
||||
InstantiateMsg,
|
||||
CoinMarketInfo,
|
||||
ExecuteMsg,
|
||||
Uint128,
|
||||
Coin,
|
||||
QueryMsg,
|
||||
Market,
|
||||
CoinMarketInfo,
|
||||
Decimal,
|
||||
ExecuteMsg,
|
||||
InstantiateMsg,
|
||||
InterestRateModel,
|
||||
Market,
|
||||
QueryMsg,
|
||||
Uint128,
|
||||
UserAssetDebtResponse,
|
||||
} from './MockRedBank.types'
|
||||
import { MockRedBankQueryClient, MockRedBankClient } from './MockRedBank.client'
|
||||
export const mockRedBankQueryKeys = {
|
||||
contract: [
|
||||
{
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
* 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 _14 from './MockRedBank.react-query'
|
||||
import * as _12 from './MockRedBank.types'
|
||||
export namespace contracts {
|
||||
export const MockRedBank = { ..._12, ..._13, ..._14 }
|
||||
}
|
||||
|
||||
@ -5,17 +5,18 @@
|
||||
* 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 { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
|
||||
|
||||
import {
|
||||
OracleBaseForString,
|
||||
InstantiateMsg,
|
||||
ArrayOfCoin,
|
||||
Coin,
|
||||
ExecuteMsg,
|
||||
InstantiateMsg,
|
||||
OracleBaseForString,
|
||||
QueryMsg,
|
||||
Uint128,
|
||||
VaultInfo,
|
||||
Coin,
|
||||
ArrayOfCoin,
|
||||
} from './MockVault.types'
|
||||
export interface MockVaultReadOnlyInterface {
|
||||
contractAddress: string
|
||||
|
||||
@ -5,20 +5,21 @@
|
||||
* 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 { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
|
||||
import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
|
||||
|
||||
import { MockVaultClient, MockVaultQueryClient } from './MockVault.client'
|
||||
import {
|
||||
OracleBaseForString,
|
||||
InstantiateMsg,
|
||||
ArrayOfCoin,
|
||||
Coin,
|
||||
ExecuteMsg,
|
||||
InstantiateMsg,
|
||||
OracleBaseForString,
|
||||
QueryMsg,
|
||||
Uint128,
|
||||
VaultInfo,
|
||||
Coin,
|
||||
ArrayOfCoin,
|
||||
} from './MockVault.types'
|
||||
import { MockVaultQueryClient, MockVaultClient } from './MockVault.client'
|
||||
export const mockVaultQueryKeys = {
|
||||
contract: [
|
||||
{
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
* 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 _17 from './MockVault.react-query'
|
||||
import * as _15 from './MockVault.types'
|
||||
export namespace contracts {
|
||||
export const MockVault = { ..._15, ..._16, ..._17 }
|
||||
}
|
||||
|
||||
@ -5,21 +5,22 @@
|
||||
* 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 { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
|
||||
|
||||
import {
|
||||
InstantiateMsg,
|
||||
ExecuteMsg,
|
||||
Uint128,
|
||||
Decimal,
|
||||
Addr,
|
||||
Empty,
|
||||
Coin,
|
||||
QueryMsg,
|
||||
ConfigForString,
|
||||
EstimateExactInSwapResponse,
|
||||
RouteResponseForEmpty,
|
||||
ArrayOfRouteResponseForEmpty,
|
||||
Coin,
|
||||
ConfigForString,
|
||||
Decimal,
|
||||
Empty,
|
||||
EstimateExactInSwapResponse,
|
||||
ExecuteMsg,
|
||||
InstantiateMsg,
|
||||
QueryMsg,
|
||||
RouteResponseForEmpty,
|
||||
Uint128,
|
||||
} from './SwapperBase.types'
|
||||
export interface SwapperBaseReadOnlyInterface {
|
||||
contractAddress: string
|
||||
|
||||
@ -5,24 +5,25 @@
|
||||
* 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 { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
|
||||
import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
|
||||
|
||||
import { SwapperBaseClient, SwapperBaseQueryClient } from './SwapperBase.client'
|
||||
import {
|
||||
InstantiateMsg,
|
||||
ExecuteMsg,
|
||||
Uint128,
|
||||
Decimal,
|
||||
Addr,
|
||||
Empty,
|
||||
Coin,
|
||||
QueryMsg,
|
||||
ConfigForString,
|
||||
EstimateExactInSwapResponse,
|
||||
RouteResponseForEmpty,
|
||||
ArrayOfRouteResponseForEmpty,
|
||||
Coin,
|
||||
ConfigForString,
|
||||
Decimal,
|
||||
Empty,
|
||||
EstimateExactInSwapResponse,
|
||||
ExecuteMsg,
|
||||
InstantiateMsg,
|
||||
QueryMsg,
|
||||
RouteResponseForEmpty,
|
||||
Uint128,
|
||||
} from './SwapperBase.types'
|
||||
import { SwapperBaseQueryClient, SwapperBaseClient } from './SwapperBase.client'
|
||||
export const swapperBaseQueryKeys = {
|
||||
contract: [
|
||||
{
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
* 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 _20 from './SwapperBase.react-query'
|
||||
import * as _18 from './SwapperBase.types'
|
||||
export namespace contracts {
|
||||
export const SwapperBase = { ..._18, ..._19, ..._20 }
|
||||
}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { Bech32Address } from '@keplr-wallet/cosmos'
|
||||
|
||||
import { ChainId, CosmosChainId, TestnetCosmosChainId } from 'types'
|
||||
|
||||
export const getEndpointsFromChainId = (
|
||||
chainId: TestnetCosmosChainId | CosmosChainId | ChainId
|
||||
chainId: TestnetCosmosChainId | CosmosChainId | ChainId,
|
||||
): { rpc: string; rest: string } => {
|
||||
switch (chainId) {
|
||||
case CosmosChainId.Osmosis:
|
||||
|
||||
@ -5,7 +5,7 @@ export const formatWalletAddress = (address: string, substrLength = 6): string =
|
||||
|
||||
return `${address.slice(0, substrLength)}...${address.slice(
|
||||
address.length - substrLength,
|
||||
address.length
|
||||
address.length,
|
||||
)}`
|
||||
}
|
||||
|
||||
|
||||
@ -3452,7 +3452,7 @@ eslint-module-utils@^2.7.3:
|
||||
|
||||
eslint-plugin-import@^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==
|
||||
dependencies:
|
||||
array-includes "^3.1.4"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user