MP-1660: base components (#57)

* MP-1660: base components

* fix: removed lodash.isequal

components/Borrow/AssetRow.tsx

@@ -1,7 +1,8 @@
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid'
 import Image from 'next/image'
 import React, { useState } from 'react'
 
+import ChevronUpIcon from 'components/Icons/collapse.svg'
+import ChevronDownIcon from 'components/Icons/expand.svg'
 import Button from 'components/Button'
 import { formatCurrency } from 'utils/formatters'
 
@@ -53,7 +54,7 @@ const AssetRow = ({ data, onBorrowClick, onRepayClick }: AssetRowProps) => {
         </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='w-5'>{isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}</div>
         </div>
       </div>
       {isExpanded && (

components/Borrow/BorrowTable.tsx

@@ -1,4 +1,3 @@
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid'
 import {
   ColumnDef,
   flexRender,
@@ -10,6 +9,8 @@ import {
 import Image from 'next/image'
 import React from 'react'
 
+import ChevronUpIcon from 'components/Icons/collapse.svg'
+import ChevronDownIcon from 'components/Icons/expand.svg'
 import { formatCurrency } from 'utils/formatters'
 
 import AssetRow from './AssetRow'
@@ -27,42 +28,6 @@ interface Market {
   marketLiquidity: number
 }
 
-// const data = [
-//   {
-//     denom: 'uosmo',
-//     symbol: 'OSMO',
-//     icon: '/tokens/osmo.svg',
-//     chain: 'Osmosis',
-//     borrowed: {
-//       amount: 2.005494,
-//       value: 2.2060434000000004,
-//     },
-//     borrowRate: 0.1,
-//     marketLiquidity: 1000000,
-//   },
-//   {
-//     denom: 'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2',
-//     symbol: 'ATOM',
-//     icon: '/tokens/atom.svg',
-//     chain: 'Cosmos',
-//     borrowed: null,
-//     borrowRate: 0.25,
-//     marketLiquidity: 1000,
-//   },
-//   {
-//     denom: 'uusdc',
-//     symbol: 'USDC',
-//     icon: '/tokens/atom.svg',
-//     chain: 'Ethereum',
-//     borrowed: {
-//       amount: 100,
-//       value: 99.9776,
-//     },
-//     borrowRate: 0.35,
-//     marketLiquidity: 333,
-//   },
-// ]
-
 type Props = {
   data: Market[]
   onBorrowClick: (denom: string) => void
@@ -126,11 +91,9 @@ const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
         width: 150,
         cell: ({ row }) => (
           <div className='flex items-center justify-end'>
-            {row.getIsExpanded() ? (
+            <div className='w-5'>
-              <ChevronUpIcon className='w-5' />
+              {row.getIsExpanded() ? <ChevronUpIcon /> : <ChevronDownIcon />}
-            ) : (
+            </div>
-              <ChevronDownIcon className='w-5' />
-            )}
           </div>
         ),
       },

components/BorrowCapacity.tsx

@@ -0,0 +1,145 @@
+import classNames from 'classnames'
+import { useEffect, useState } from 'react'
+
+import Number from 'components/Number'
+import Tooltip from 'components/Tooltip'
+
+interface Props {
+  balance: number
+  limit: number
+  max: number
+  barHeight?: string
+  showTitle?: boolean
+  showPercentageText?: boolean
+  className?: string
+  hideValues?: boolean
+}
+
+export const BorrowCapacity = ({
+  balance,
+  limit,
+  max,
+  barHeight = '22px',
+  showTitle = true,
+  showPercentageText = true,
+  className,
+  hideValues,
+}: Props) => {
+  const [percentOfMaxRound, setPercentOfMaxRound] = useState(0)
+  const [percentOfMaxRange, setPercentOfMaxRange] = useState(0)
+  const [percentOfMaxMargin, setPercentOfMaxMargin] = useState('10px')
+  const [limitPercentOfMax, setLimitPercentOfMax] = useState(0)
+  const [timer, setTimer] = useState<ReturnType<typeof setTimeout>>()
+
+  useEffect(
+    () => {
+      clearTimeout(timer)
+      const percent = max === 0 ? 0 : (balance / max) * 100
+      const delta = percent - percentOfMaxRound
+      const startingPoint = percentOfMaxRound
+
+      if (max === 0) {
+        setPercentOfMaxMargin('10px')
+        setPercentOfMaxRound(0)
+        setPercentOfMaxRange(0)
+        setLimitPercentOfMax(0)
+        return
+      }
+
+      const pOfMax = +((balance / max) * 100).toFixed(2)
+      setPercentOfMaxRound(+(Math.round(pOfMax * 100) / 100).toFixed(1))
+      setPercentOfMaxRange(Math.min(Math.max(pOfMax, 0), 100))
+      setLimitPercentOfMax((limit / max) * 100)
+
+      for (let i = 0; i < 20; i++) {
+        setTimer(
+          setTimeout(() => {
+            const currentPercentOfMax = startingPoint + (delta / 20) * i
+            setPercentOfMaxMargin(currentPercentOfMax > 15 ? '-60px' : '10px')
+          }, 50 * (i + 1)),
+        )
+      }
+      return () => clearTimeout(timer)
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [balance, max],
+  )
+
+  return (
+    <div className={classNames('flex items-center justify-center', className)}>
+      <div style={{ width: '100%' }}>
+        <div
+          className='flex justify-between'
+          style={{
+            width: `${limitPercentOfMax ? limitPercentOfMax + 6 : '100'}%`,
+            marginBottom: !showTitle && hideValues ? 0 : 12,
+          }}
+        >
+          <div className='text-sm-caps'>{showTitle && 'Borrow Capacity'}</div>
+          {!hideValues && (
+            <div
+              className={classNames(
+                'duration-800 transition-[opcity] delay-[1600ms] text-3xs-caps',
+                limitPercentOfMax ? 'opacity-60' : 'opacity-0',
+              )}
+            >
+              <Number animate={true} amount={limit} />
+            </div>
+          )}
+        </div>
+        <Tooltip content='Tooltip'>
+          <div className='relative' style={{ height: barHeight }}>
+            <div className='absolute h-full w-full rounded-3xl shadow-inset gradient-hatched'>
+              <div
+                className='absolute bottom-0 h-[120%] w-[1px] bg-white transition-[left] duration-1000 ease-linear'
+                style={{ left: `${limitPercentOfMax || 0}%` }}
+              />
+              <div
+                className='absolute left-0 h-full max-w-full rounded-l-3xl bg-body-dark transition-[right] duration-1000 ease-linear'
+                style={{
+                  right: `${limitPercentOfMax ? 100 - limitPercentOfMax : 100}%`,
+                }}
+              ></div>
+
+              <div className='absolute top-0 h-full w-full overflow-hidden'>
+                <div
+                  className='h-full rounded-l transition-[width] duration-1000 ease-linear'
+                  style={{
+                    width: `${percentOfMaxRange || 0.01}%`,
+                    WebkitMask: 'linear-gradient(#fff 0 0)',
+                  }}
+                >
+                  <div className='absolute top-0 bottom-0 left-0 right-0 gradient-limit' />
+                </div>
+                {showPercentageText ? (
+                  <span
+                    className='absolute top-1/2 w-[53px] -translate-y-1/2 transition-[left] duration-1000 ease-linear text-2xs-caps'
+                    style={{
+                      left: `${percentOfMaxRange}%`,
+                      marginLeft: percentOfMaxMargin,
+                    }}
+                  >
+                    {max !== 0 && (
+                      <Number
+                        animate={true}
+                        amount={percentOfMaxRound}
+                        suffix='%'
+                        abbreviated={false}
+                      />
+                    )}
+                  </span>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </Tooltip>
+        {!hideValues && (
+          <div className='mt-2 flex opacity-60 text-3xs-caps'>
+            <Number animate={true} amount={balance} className='mr-1' />
+            <span className='mr-1'>of</span>
+            <Number animate={true} amount={max} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

components/BorrowModal.tsx

@@ -1,30 +1,29 @@
 import { Dialog, Switch, Transition } from '@headlessui/react'
 import BigNumber from 'bignumber.js'
-import Image from 'next/image'
 import React, { useMemo, useState } from 'react'
 import { NumericFormat } from 'react-number-format'
 import { toast } from 'react-toastify'
 
+import Button from 'components/Button'
+import CircularProgress from 'components/CircularProgress'
+import ContainerSecondary from 'components/ContainerSecondary'
+import ProgressBar from 'components/ProgressBar'
+import SemiCircleProgress from 'components/SemiCircleProgress'
 import Slider from 'components/Slider'
+import Text from 'components/Text'
+import Tooltip from 'components/Tooltip'
 import useBorrowFunds from 'hooks/mutations/useBorrowFunds'
+import useAccountStats, { AccountStatsAction } from 'hooks/useAccountStats'
 import useAllBalances from 'hooks/useAllBalances'
 import useCalculateMaxBorrowAmount from 'hooks/useCalculateMaxBorrowAmount'
+import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
 import useMarkets from 'hooks/useMarkets'
 import useTokenPrices from 'hooks/useTokenPrices'
-import { formatCurrency } from 'utils/formatters'
-import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
 import useCreditManagerStore from 'stores/useCreditManagerStore'
-import useAccountStats, { AccountStatsAction } from 'hooks/useAccountStats'
 import { chain } from 'utils/chains'
+import { formatCurrency } from 'utils/formatters'
 import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
 
-import ProgressBar from './ProgressBar'
-import SemiCircleProgress from './SemiCircleProgress'
-import ContainerSecondary from './ContainerSecondary'
-import Spinner from './Spinner'
-import Tooltip from './Tooltip'
-import Button from './Button'
-
 type Props = {
   show: boolean
   onClose: () => void
@@ -165,10 +164,9 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
               <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'>
-                    <Spinner />
+                    <CircularProgress />
                   </div>
                 )}
-
                 <div className='flex flex-1 flex-col p-4'>
                   <Dialog.Title as='h3' className='mb-4 text-center font-medium'>
                     Borrow {tokenSymbol}
@@ -212,16 +210,16 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
                           className='ml-2'
                           content={
                             <>
-                              <p className='mb-2'>
+                              <Text size='sm' 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.
-                              </p>
+                              </Text>
-                              <p>
+                              <Text size='sm'>
                                 ON = Borrow into your Account. The borrowed asset will be available
                                 in the account as an Asset and appear also as a liability in your
                                 account.
-                              </p>
+                              </Text>
                             </>
                           }
                         />
@@ -242,7 +240,7 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
                     </ContainerSecondary>
                   </div>
                   <Button
-                    className='mt-auto w-full rounded-3xl'
+                    className='mt-auto'
                     onClick={handleSubmit}
                     disabled={amount === 0 || !amount}
                   >

components/Button.tsx

@@ -1,26 +1,93 @@
-import React from 'react'
+import classNames from 'classnames'
+import React, { ReactNode } from 'react'
 
-type Props = {
+import CircularProgress from 'components/CircularProgress'
-  children: string
+
+interface Props {
+  children?: string | ReactNode
   className?: string
-  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
+  color?: 'primary' | 'secondary' | 'tertiary' | 'quaternary'
   disabled?: boolean
+  id?: string
+  showProgressIndicator?: boolean
+  size?: 'small' | 'medium' | 'large'
+  text?: string | ReactNode
+  variant?: 'solid' | 'transparent' | 'round'
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
 }
 
-const Button = React.forwardRef<any, Props>(
+const colorClasses = {
-  ({ children, className = '', onClick, disabled }, ref) => (
+  primary:
-    <button
+    'border-none bg-primary hover:bg-primary-highlight active:bg-primary-highlight-10 focus:bg-primary-highlight',
-      ref={ref}
+  secondary:
-      onClick={onClick}
+    'border-none bg-secondary hover:bg-secondary-highlight active:bg-secondary-highlight-10 focus:bg-secondary-highlight',
-      className={`overflow-hidden text-ellipsis rounded-md bg-blue-500 py-2 px-5 text-sm font-semibold text-white ${className} ${
+  tertiary:
-        disabled ? 'opacity-40' : ''
+    'border bg-secondary-dark/60 border-white/60 hover:bg-secondary-dark hover:border-white active:bg-secondary-dark-10 active:border-white focus:bg-secondary-dark focus:border-white',
-      }`}
+  quaternary:
-      disabled={disabled}
+    'border bg-transparent text-white/60 border-transparent hover:text-white hover:border-white active:text-white active:border-white',
-    >
+}
-      {children}
+
-    </button>
+const transparentColorClasses = {
-  ),
+  primary:
-)
+    'border-none text-primary hover:text-primary-highlight active:text-primary-highlight focus:text-primary-highlight',
+  secondary:
+    'border-none text-secondary hover:text-secondary-highlight active:text-secondary-highlight focus:text-secondary-highlight',
+  tertiary:
+    'text-secondary-dark hover:text-secondary-dark-10 active:text-secondary-dark-10 focus:text-secondary-dark-10',
+  quaternary:
+    'border border-transparent text-white/60 hover:text-white hover:border-white active:text-white active:border-white',
+}
+
+const roundSizeClasses = {
+  small: 'h-[32px] w-[32px]',
+  medium: 'h-[40px] w-[40px]',
+  large: 'h-[56px] w-[56px]',
+}
+
+const sizeClasses = {
+  small: 'text-sm px-5 py-1.5 min-h-[32px]',
+  medium: 'text-base px-6 py-2.5 min-h-[40px]',
+  large: 'text-lg px-6 py-2.5 min-h-[56px]',
+}
+
+const variantClasses = {
+  solid: 'text-white',
+  transparent: 'bg-transparent p-0',
+  round: 'rounded-full p-0',
+}
+
+const Button = ({
+  children,
+  className = '',
+  color = 'primary',
+  disabled,
+  id = '',
+  showProgressIndicator,
+  size = 'small',
+  text,
+  variant = 'solid',
+  onClick,
+}: Props) => {
+  return (
+    <button
+      className={classNames(
+        'cursor-pointer appearance-none break-normal rounded-3xl outline-none transition-colors',
+        variant === 'round' ? `${sizeClasses[size]} ${roundSizeClasses[size]}` : sizeClasses[size],
+        variant === 'transparent' ? transparentColorClasses[color] : colorClasses[color],
+        variantClasses[variant],
+        disabled && 'pointer-events-none opacity-50',
+        className,
+      )}
+      id={id}
+      onClick={disabled ? () => {} : onClick}
+    >
+      {text && !children && !showProgressIndicator && <span>{text}</span>}
+      {children && !showProgressIndicator && children}
+      {showProgressIndicator && (
+        <CircularProgress size={size === 'small' ? 10 : size === 'medium' ? 12 : 18} />
+      )}
+    </button>
+  )
+}
 
-Button.displayName = 'Button'
 export default Button

components/Card.tsx

@@ -0,0 +1,22 @@
+import classNames from 'classnames'
+import { ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+  className?: string
+}
+
+const Card = ({ children, className }: Props) => {
+  return (
+    <div
+      className={classNames(
+        className,
+        'h-fit w-full max-w-full rounded-xl border-[7px] border-accent-highlight p-4 gradient-card',
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Card

components/CircularProgress.tsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames'
+
+interface Props {
+  color?: string
+  size?: number
+  className?: string
+}
+
+const CircularProgress = ({ color = '#FFFFFF', size = 20, className }: Props) => {
+  const borderWidth = `${size / 10}px`
+  const borderColor = `${color} transparent transparent transparent`
+  const loaderClasses = classNames('inline-block relative', className)
+  const elementClasses =
+    'block absolute w-4/5 h-4/5 m-[10%] rounded-full animate-progress border-solid'
+
+  return (
+    <div className={loaderClasses} style={{ width: `${size}px`, height: `${size}px` }}>
+      <div
+        className={elementClasses}
+        style={{
+          borderWidth: borderWidth,
+          borderColor: borderColor,
+        }}
+      />
+      <div
+        className={elementClasses}
+        style={{
+          animationDelay: '-0.45s',
+          borderWidth: borderWidth,
+          borderColor: borderColor,
+        }}
+      />
+      <div
+        className={elementClasses}
+        style={{
+          animationDelay: '-0.3s',
+          borderWidth: borderWidth,
+          borderColor: borderColor,
+        }}
+      />
+      <div
+        className={elementClasses}
+        style={{
+          animationDelay: '-0.15s',
+          borderWidth: borderWidth,
+          borderColor: borderColor,
+        }}
+      />
+    </div>
+  )
+}
+
+export default CircularProgress

components/Container/Container.module.css

@@ -1,9 +0,0 @@
-.container {
-  background: linear-gradient(
-    132.82deg,
-    rgba(11, 14, 32, 0.64) 5.03%,
-    rgba(52, 20, 33, 0.9) 73.08%
-  );
-  border-radius: 16px;
-  padding: 16px;
-}

components/Container/index.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-
-import styles from './Container.module.css'
-
-type Props = {
-  children: React.ReactNode
-  className?: string
-}
-
-const Container = ({ children, className = '' }: Props) => {
-  return <div className={`${styles.container} ${className}`}>{children}</div>
-}
-
-export default Container

components/CreditManager/index.tsx

@@ -1,6 +1,7 @@
 import BigNumber from 'bignumber.js'
-import React, { useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 
+import Button from 'components/Button'
 import ContainerSecondary from 'components/ContainerSecondary'
 import FundAccountModal from 'components/FundAccountModal'
 import WithdrawModal from 'components/WithdrawModal'
@@ -10,10 +11,9 @@ import useMarkets from 'hooks/useMarkets'
 import useTokenPrices from 'hooks/useTokenPrices'
 import useCreditManagerStore from 'stores/useCreditManagerStore'
 import useWalletStore from 'stores/useWalletStore'
+import { chain } from 'utils/chains'
 import { formatCurrency } from 'utils/formatters'
 import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
-import { chain } from 'utils/chains'
-import Button from 'components/Button'
 
 const CreditManager = () => {
   const [showFundWalletModal, setShowFundWalletModal] = useState(false)
@@ -46,14 +46,14 @@ 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-grey-medium 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'>
+    <div className='absolute inset-0 left-auto w-[400px] border-l border-white/20 bg-grey-medium p-2'>
       <ContainerSecondary className='mb-2 flex gap-3'>
         <Button
           className='flex-1 rounded-md'
@@ -78,6 +78,7 @@ const CreditManager = () => {
       <ContainerSecondary className='mb-2 text-sm'>
         <div className='mb-1 flex justify-between'>
           <div>Total Position:</div>
+
           <div className='font-semibold'>
             {formatCurrency(
               BigNumber(accountStats?.totalPosition ?? 0)

components/FundAccountModal.tsx

@@ -11,10 +11,9 @@ import useAllBalances from 'hooks/useAllBalances'
 import useAllowedCoins from 'hooks/useAllowedCoins'
 import useCreditManagerStore from 'stores/useCreditManagerStore'
 import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
-
+import Button from 'components/Button'
-import Button from './Button'
+import ContainerSecondary from 'components/ContainerSecondary'
-import ContainerSecondary from './ContainerSecondary'
+import CircularProgress from 'components/CircularProgress'
-import Spinner from './Spinner'
 
 const FundAccountModal = ({ show, onClose }: any) => {
   const [amount, setAmount] = useState(0)
@@ -99,7 +98,7 @@ const FundAccountModal = ({ show, onClose }: any) => {
               <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'>
-                    <Spinner />
+                    <CircularProgress />
                   </div>
                 )}
 
@@ -112,7 +111,7 @@ const FundAccountModal = ({ show, onClose }: any) => {
                       Powered by deep-learning.
                     </h4>
                   </div>
-                  <Image src='/logo.svg' alt='mars' width={150} height={50} />
+                  <Image src='/logo.svg' alt='mars' width={50} height={50} />
                 </div>
 
                 <div className='flex flex-1 flex-col p-4'>

components/Icons/add.svg

@@ -0,0 +1,5 @@
+<svg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg' fill="currentColor">
+  <path
+    d='M10.6667 5.33317H6.66675V1.33317C6.66675 1.15636 6.59651 0.98679 6.47149 0.861766C6.34646 0.736742 6.17689 0.666504 6.00008 0.666504C5.82327 0.666504 5.6537 0.736742 5.52868 0.861766C5.40365 0.98679 5.33341 1.15636 5.33341 1.33317V5.33317H1.33341C1.1566 5.33317 0.987035 5.40341 0.86201 5.52843C0.736986 5.65346 0.666748 5.82303 0.666748 5.99984C0.666748 6.17665 0.736986 6.34622 0.86201 6.47124C0.987035 6.59627 1.1566 6.6665 1.33341 6.6665H5.33341V10.6665C5.33341 10.8433 5.40365 11.0129 5.52868 11.1379C5.6537 11.2629 5.82327 11.3332 6.00008 11.3332C6.17689 11.3332 6.34646 11.2629 6.47149 11.1379C6.59651 11.0129 6.66675 10.8433 6.66675 10.6665V6.6665H10.6667C10.8436 6.6665 11.0131 6.59627 11.1382 6.47124C11.2632 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2632 5.65346 11.1382 5.52843C11.0131 5.40341 10.8436 5.33317 10.6667 5.33317Z'
+  />
+</svg>

components/Icons/arrow-back.svg

@@ -0,0 +1,14 @@
+;<svg version='1.1' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'>
+  <circle
+    cx='24'
+    cy='24'
+    fill='none'
+    r='23.5'
+    stroke='currentColor'
+    transform='rotate(180 24 24)'
+  />
+  <path
+    d='M32 25C32.5523 25 33 24.5523 33 24C33 23.4477 32.5523 23 32 23L32 25ZM15.2929 23.2929C14.9024 23.6834 14.9024 24.3166 15.2929 24.7071L21.6569 31.0711C22.0474 31.4616 22.6805 31.4616 23.0711 31.0711C23.4616 30.6805 23.4616 30.0474 23.0711 29.6569L17.4142 24L23.0711 18.3431C23.4616 17.9526 23.4616 17.3195 23.0711 16.9289C22.6805 16.5384 22.0474 16.5384 21.6569 16.9289L15.2929 23.2929ZM32 23L16 23L16 25L32 25L32 23Z'
+    fill='currentColor'
+  />
+</svg>

components/Icons/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg version='1.1' viewBox='0 0 8 6' xmlns='http://www.w3.org/2000/svg' fill="currentColor">
+  <path d='M4 6L0.535899 -1.75695e-07L7.4641 4.29987e-07L4 6Z' />
+</svg>

components/Icons/arrow-right-line.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="13" viewBox="0 0 14 13" fill="currentColor">
+<svg viewBox="0 0 14 13" fill="currentColor">
     <path d="M0.234863 6.57567C0.234863 7.07288 0.581403 7.41188 1.08615 7.41188H8.04708L9.62912 7.33655L7.45194 9.31785L5.93771 10.8547C5.77951 11.0129 5.68157 11.2163 5.68157 11.4574C5.68157 11.9244 6.02811 12.2634 6.50272 12.2634C6.72872 12.2634 6.93213 12.173 7.12047 11.9922L11.859 7.20094C11.9871 7.07288 12.0775 6.92221 12.1152 6.74894V11.5478C12.1152 12.0148 12.4692 12.3538 12.9363 12.3538C13.4109 12.3538 13.765 12.0148 13.765 11.5478V1.6111C13.765 1.14403 13.4109 0.797485 12.9363 0.797485C12.4692 0.797485 12.1152 1.14403 12.1152 1.6111V6.39486C12.0775 6.22913 11.9871 6.07846 11.859 5.95039L7.12047 1.15156C6.93213 0.970755 6.72872 0.880354 6.50272 0.880354C6.02811 0.880354 5.68157 1.22689 5.68157 1.68644C5.68157 1.92751 5.77951 2.13845 5.93771 2.28911L7.45194 3.83348L9.62912 5.80725L8.04708 5.73192H1.08615C0.581403 5.73192 0.234863 6.07846 0.234863 6.57567Z" />
 </svg>

components/Icons/arrows-up-down.svg

@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'>
+  <path
+    fill-rule='evenodd'
+    d='M6.97 2.47a.75.75 0 011.06 0l4.5 4.5a.75.75 0 01-1.06 1.06L8.25 4.81V16.5a.75.75 0 01-1.5 0V4.81L3.53 8.03a.75.75 0 01-1.06-1.06l4.5-4.5zm9.53 4.28a.75.75 0 01.75.75v11.69l3.22-3.22a.75.75 0 111.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-4.5-4.5a.75.75 0 111.06-1.06l3.22 3.22V7.5a.75.75 0 01.75-.75z'
+    clip-rule='evenodd'
+  />
+</svg>

components/Icons/burger-menu.svg

@@ -0,0 +1,5 @@
+<svg version='1.1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
+  <line stroke='currentColor' x1='3' x2='21' y1='12' y2='12' />
+  <line stroke='currentColor' x1='3' x2='21' y1='6' y2='6' />
+  <line stroke='currentColor' x1='3' x2='21' y1='18' y2='18' />
+</svg>

components/Icons/check.svg

@@ -0,0 +1,3 @@
+<svg version='1.1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'>
+  <path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' />
+</svg>

components/Icons/collapse.svg

@@ -0,0 +1,6 @@
+<svg viewBox='0 0 8 6' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M7.33346 3.93988L4.47346 1.11321C4.41149 1.05073 4.33775 1.00113 4.25651 0.967287C4.17527 0.933441 4.08814 0.916016 4.00013 0.916016C3.91212 0.916016 3.82498 0.933441 3.74374 0.967287C3.6625 1.00113 3.58877 1.05073 3.52679 1.11321L0.700129 3.93988C0.637643 4.00186 0.588047 4.07559 0.554201 4.15683C0.520355 4.23807 0.50293 4.32521 0.50293 4.41321C0.50293 4.50122 0.520355 4.58836 0.554201 4.6696C0.588047 4.75084 0.637643 4.82457 0.700129 4.88655C0.825037 5.01072 0.994005 5.08041 1.17013 5.08041C1.34625 5.08041 1.51522 5.01072 1.64013 4.88655L4.00013 2.52655L6.36013 4.88655C6.4843 5.00971 6.6519 5.07914 6.82679 5.07988C6.91453 5.08039 7.00151 5.06357 7.08273 5.0304C7.16396 4.99722 7.23783 4.94834 7.30013 4.88655C7.36485 4.8268 7.41708 4.75483 7.45382 4.67477C7.49056 4.59472 7.51107 4.50819 7.51417 4.42016C7.51727 4.33214 7.50289 4.24438 7.47188 4.16194C7.44086 4.0795 7.39382 4.00403 7.33346 3.93988Z'
+    fill='currentColor'
+  />
+</svg>

components/Icons/copy.svg

@@ -0,0 +1,3 @@
+;<svg viewBox='0 0 12 14' xmlns='http://www.w3.org/2000/svg' fill='currentColor'>
+  <path d='M8.66667 12.3333H3.33333C2.8029 12.3333 2.29419 12.1225 1.91912 11.7475C1.54405 11.3724 1.33333 10.8637 1.33333 10.3333V3.66659C1.33333 3.48977 1.2631 3.32021 1.13807 3.19518C1.01305 3.07016 0.843478 2.99992 0.666667 2.99992C0.489856 2.99992 0.320286 3.07016 0.195262 3.19518C0.0702379 3.32021 0 3.48977 0 3.66659V10.3333C0 11.2173 0.351189 12.0652 0.976311 12.6903C1.60143 13.3154 2.44928 13.6666 3.33333 13.6666H8.66667C8.84348 13.6666 9.01305 13.5963 9.13807 13.4713C9.2631 13.3463 9.33333 13.1767 9.33333 12.9999C9.33333 12.8231 9.2631 12.6535 9.13807 12.5285C9.01305 12.4035 8.84348 12.3333 8.66667 12.3333ZM12 4.95992C11.9931 4.89867 11.9796 4.83834 11.96 4.77992V4.71992C11.9279 4.65137 11.8852 4.58836 11.8333 4.53325L7.83333 0.533252C7.77822 0.481396 7.71521 0.438639 7.64667 0.406585H7.58667L7.37333 0.333252H4.66667C4.13623 0.333252 3.62753 0.543966 3.25245 0.919038C2.87738 1.29411 2.66667 1.80282 2.66667 2.33325V8.99992C2.66667 9.53035 2.87738 10.0391 3.25245 10.4141C3.62753 10.7892 4.13623 10.9999 4.66667 10.9999H10C10.5304 10.9999 11.0391 10.7892 11.4142 10.4141C11.7893 10.0391 12 9.53035 12 8.99992V4.99992C12 4.99992 12 4.99992 12 4.95992ZM8 2.60659L9.72667 4.33325H8.66667C8.48986 4.33325 8.32029 4.26301 8.19526 4.13799C8.07024 4.01297 8 3.8434 8 3.66659V2.60659ZM10.6667 8.99992C10.6667 9.17673 10.5964 9.3463 10.4714 9.47132C10.3464 9.59635 10.1768 9.66659 10 9.66659H4.66667C4.48986 9.66659 4.32029 9.59635 4.19526 9.47132C4.07024 9.3463 4 9.17673 4 8.99992V2.33325C4 2.15644 4.07024 1.98687 4.19526 1.86185C4.32029 1.73682 4.48986 1.66659 4.66667 1.66659H6.66667V3.66659C6.66667 4.19702 6.87738 4.70573 7.25245 5.0808C7.62753 5.45587 8.13623 5.66659 8.66667 5.66659H10.6667V8.99992Z' />
+</svg>

components/Icons/deposit.svg

@@ -0,0 +1,3 @@
+;<svg fill='currentColor' viewBox='0 0 12 14' xmlns='http://www.w3.org/2000/svg'>
+  <path d='M6.47317 3.19325C6.40977 3.13256 6.335 3.08498 6.25317 3.05325C6.09086 2.98657 5.90881 2.98657 5.7465 3.05325C5.66467 3.08498 5.58991 3.13256 5.5265 3.19325L2.85984 5.85992C2.79768 5.92208 2.74837 5.99587 2.71473 6.07709C2.68109 6.1583 2.66378 6.24535 2.66378 6.33325C2.66378 6.42116 2.68109 6.5082 2.71473 6.58942C2.74837 6.67063 2.79768 6.74443 2.85984 6.80659C2.922 6.86874 2.99579 6.91805 3.077 6.95169C3.15822 6.98533 3.24526 7.00265 3.33317 7.00265C3.42108 7.00265 3.50812 6.98533 3.58934 6.95169C3.67055 6.91805 3.74434 6.86874 3.8065 6.80659L5.33317 5.27325V12.9999C5.33317 13.1767 5.40341 13.3463 5.52843 13.4713C5.65346 13.5963 5.82303 13.6666 5.99984 13.6666C6.17665 13.6666 6.34622 13.5963 6.47124 13.4713C6.59627 13.3463 6.6665 13.1767 6.6665 12.9999V5.27325L8.19317 6.80659C8.25515 6.86907 8.32888 6.91867 8.41012 6.95251C8.49136 6.98636 8.5785 7.00378 8.6665 7.00378C8.75451 7.00378 8.84165 6.98636 8.92289 6.95251C9.00413 6.91867 9.07786 6.86907 9.13984 6.80659C9.20232 6.74461 9.25192 6.67088 9.28576 6.58964C9.31961 6.5084 9.33704 6.42126 9.33704 6.33325C9.33704 6.24524 9.31961 6.15811 9.28576 6.07687C9.25192 5.99563 9.20232 5.92189 9.13984 5.85992L6.47317 3.19325ZM10.6665 0.333252H1.33317C1.15636 0.333252 0.98679 0.40349 0.861766 0.528514C0.736742 0.653538 0.666504 0.823108 0.666504 0.999919C0.666504 1.17673 0.736742 1.3463 0.861766 1.47132C0.98679 1.59635 1.15636 1.66659 1.33317 1.66659H10.6665C10.8433 1.66659 11.0129 1.59635 11.1379 1.47132C11.2629 1.3463 11.3332 1.17673 11.3332 0.999919C11.3332 0.823108 11.2629 0.653538 11.1379 0.528514C11.0129 0.40349 10.8433 0.333252 10.6665 0.333252Z' />
+</svg>

components/Icons/discord.svg

@@ -0,0 +1,6 @@
+<svg viewBox='0 -28.5 256 256' version='1.1' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    fill='currentColor'
+    d='M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z'
+  />
+</svg>

components/Icons/edit.svg

@@ -0,0 +1,5 @@
+<svg viewBox='0 0 14 14' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M13.6668 3.8266C13.6673 3.73886 13.6505 3.65188 13.6174 3.57066C13.5842 3.48943 13.5353 3.41556 13.4735 3.35326L10.6468 0.526596C10.5845 0.464809 10.5107 0.415925 10.4294 0.382749C10.3482 0.349573 10.2612 0.332756 10.1735 0.333263C10.0858 0.332756 9.99879 0.349573 9.91757 0.382749C9.83634 0.415925 9.76247 0.464809 9.70017 0.526596L7.81351 2.41326L0.526841 9.69993C0.465053 9.76222 0.416169 9.8361 0.382993 9.91732C0.349817 9.99855 0.333 10.0855 0.333507 10.1733V12.9999C0.333507 13.1767 0.403745 13.3463 0.528769 13.4713C0.653794 13.5964 0.823363 13.6666 1.00017 13.6666H3.82684C3.92013 13.6717 4.01344 13.6571 4.10072 13.6238C4.188 13.5905 4.26731 13.5392 4.33351 13.4733L11.5802 6.1866L13.4735 4.33326C13.5344 4.26865 13.5839 4.19428 13.6202 4.11326C13.6266 4.06012 13.6266 4.0064 13.6202 3.95326C13.6233 3.92223 13.6233 3.89096 13.6202 3.85993L13.6668 3.8266ZM3.55351 12.3333H1.66684V10.4466L8.28684 3.8266L10.1735 5.71326L3.55351 12.3333ZM11.1135 4.77326L9.22684 2.8866L10.1735 1.9466L12.0535 3.8266L11.1135 4.77326Z'
+  />
+</svg>

components/Icons/ellipsis.svg

@@ -0,0 +1,6 @@
+<svg viewBox='0 0 24 24'>
+  <path
+    d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'
+    fill='currentColor'
+  />
+</svg>

components/Icons/expand.svg

@@ -0,0 +1,6 @@
+<svg fill='currentColor'  viewBox='0 0 8 6' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M7.24327 1.13085C7.12112 1.00795 6.95588 0.938965 6.78364 0.938965C6.6114 0.938965 6.44617 1.00795 6.32401 1.13085L3.9835 3.46685L1.67558 1.13085C1.55343 1.00795 1.38819 0.938965 1.21595 0.938965C1.04371 0.938965 0.878475 1.00795 0.756324 1.13085C0.695217 1.1922 0.646715 1.26518 0.613616 1.3456C0.580517 1.42601 0.563477 1.51226 0.563477 1.59937C0.563477 1.68649 0.580517 1.77274 0.613616 1.85315C0.646715 1.93356 0.695217 2.00655 0.756324 2.06789L3.52061 4.86581C3.58122 4.92766 3.65332 4.97675 3.73277 5.01026C3.81222 5.04376 3.89743 5.06101 3.9835 5.06101C4.06956 5.06101 4.15478 5.04376 4.23422 5.01026C4.31367 4.97675 4.38578 4.92766 4.44639 4.86581L7.24327 2.06789C7.30438 2.00655 7.35288 1.93356 7.38598 1.85315C7.41908 1.77274 7.43612 1.68649 7.43612 1.59937C7.43612 1.51226 7.41908 1.42601 7.38598 1.3456C7.35288 1.26518 7.30438 1.1922 7.24327 1.13085Z'
+
+  />
+</svg>

components/Icons/external-link.svg

@@ -0,0 +1,5 @@
+<svg fill='currentColor' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M11.0002 6.21325C10.8234 6.21325 10.6538 6.28349 10.5288 6.40851C10.4037 6.53354 10.3335 6.70311 10.3335 6.87992V11.6666C10.3335 11.8434 10.2633 12.013 10.1382 12.138C10.0132 12.263 9.84364 12.3333 9.66683 12.3333H2.3335C2.15669 12.3333 1.98712 12.263 1.86209 12.138C1.73707 12.013 1.66683 11.8434 1.66683 11.6666V4.33325C1.66683 4.15644 1.73707 3.98687 1.86209 3.86185C1.98712 3.73682 2.15669 3.66659 2.3335 3.66659H7.12016C7.29697 3.66659 7.46654 3.59635 7.59157 3.47132C7.71659 3.3463 7.78683 3.17673 7.78683 2.99992C7.78683 2.82311 7.71659 2.65354 7.59157 2.52851C7.46654 2.40349 7.29697 2.33325 7.12016 2.33325H2.3335C1.80306 2.33325 1.29436 2.54397 0.919283 2.91904C0.54421 3.29411 0.333496 3.80282 0.333496 4.33325V11.6666C0.333496 12.197 0.54421 12.7057 0.919283 13.0808C1.29436 13.4559 1.80306 13.6666 2.3335 13.6666H9.66683C10.1973 13.6666 10.706 13.4559 11.081 13.0808C11.4561 12.7057 11.6668 12.197 11.6668 11.6666V6.87992C11.6668 6.70311 11.5966 6.53354 11.4716 6.40851C11.3465 6.28349 11.177 6.21325 11.0002 6.21325ZM13.6135 0.746585C13.5458 0.583686 13.4164 0.454235 13.2535 0.386585C13.1733 0.352425 13.0873 0.334305 13.0002 0.333252H9.00016C8.82335 0.333252 8.65378 0.40349 8.52876 0.528514C8.40373 0.653538 8.3335 0.823108 8.3335 0.999919C8.3335 1.17673 8.40373 1.3463 8.52876 1.47132C8.65378 1.59635 8.82335 1.66659 9.00016 1.66659H11.3935L4.52683 8.52659C4.46434 8.58856 4.41475 8.66229 4.3809 8.74353C4.34706 8.82477 4.32963 8.91191 4.32963 8.99992C4.32963 9.08793 4.34706 9.17506 4.3809 9.2563C4.41475 9.33754 4.46434 9.41128 4.52683 9.47325C4.5888 9.53574 4.66254 9.58533 4.74378 9.61918C4.82502 9.65303 4.91216 9.67045 5.00016 9.67045C5.08817 9.67045 5.17531 9.65303 5.25655 9.61918C5.33779 9.58533 5.41152 9.53574 5.4735 9.47325L12.3335 2.60659V4.99992C12.3335 5.17673 12.4037 5.3463 12.5288 5.47132C12.6538 5.59635 12.8234 5.66659 13.0002 5.66659C13.177 5.66659 13.3465 5.59635 13.4716 5.47132C13.5966 5.3463 13.6668 5.17673 13.6668 4.99992V0.999919C13.6658 0.9128 13.6477 0.826733 13.6135 0.746585Z'
+  />
+</svg>

components/Icons/failed.svg

@@ -0,0 +1,12 @@
+<svg version='1.1' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M1.5 40C1.5 18.737 18.737 1.5 40 1.5C61.263 1.5 78.5 18.737 78.5 40C78.5 61.263 61.263 78.5 40 78.5C18.737 78.5 1.5 61.263 1.5 40Z'
+    fill='none'
+    stroke='currentColor'
+    strokeWidth='3'
+  />
+  <path
+    d='M23.6128 21.9054L23.6128 21.9054C23.272 21.9056 22.9391 22.0074 22.6565 22.1979C22.374 22.3883 22.1546 22.6588 22.0265 22.9745C21.8985 23.2903 21.8675 23.6371 21.9375 23.9706C22.0076 24.3039 22.1753 24.6087 22.4194 24.8462C22.4195 24.8463 22.4197 24.8465 22.4199 24.8467L37.5753 40.0025L22.4199 55.1577C22.4197 55.1579 22.4196 55.1581 22.4194 55.1583C22.2567 55.3163 22.127 55.5051 22.0379 55.7137C21.9486 55.9225 21.9018 56.1469 21.9 56.374C21.8983 56.6011 21.9418 56.8262 22.0279 57.0364C22.114 57.2465 22.241 57.4374 22.4015 57.598C22.5621 57.7585 22.7529 57.8856 22.963 57.9718C23.1731 58.0579 23.3982 58.1016 23.6253 58.1C23.8525 58.0983 24.0769 58.0514 24.2857 57.9622C24.4943 57.8731 24.6831 57.7436 24.8412 57.5809C24.8414 57.5807 24.8416 57.5806 24.8417 57.5804L39.9973 42.4245L55.1536 57.5806C55.1537 57.5807 55.1538 57.5808 55.1539 57.5809C55.3122 57.743 55.5011 57.8719 55.7096 57.9605C55.9182 58.0491 56.1424 58.0955 56.3691 58.0968C56.5958 58.0982 56.8205 58.0546 57.0302 57.9684C57.2399 57.8823 57.4304 57.7553 57.5907 57.595C57.751 57.4347 57.8778 57.2442 57.9639 57.0345C58.05 56.8247 58.0936 56.6 58.0922 56.3733C58.0908 56.1466 58.0444 55.9225 57.9557 55.7139C57.8671 55.5055 57.7381 55.3166 57.5761 55.1584C57.5759 55.1582 57.5757 55.1581 57.5756 55.1579L42.4198 40.0025L57.5751 24.847C57.5753 24.8468 57.5756 24.8465 57.5758 24.8463C57.7395 24.6885 57.8701 24.4997 57.9601 24.2909C58.0502 24.0818 58.0978 23.8569 58.0999 23.6292C58.1021 23.4015 58.0588 23.1757 57.9727 22.9649C57.8866 22.7542 57.7593 22.5627 57.5983 22.4017C57.4373 22.2407 57.2458 22.1134 57.0351 22.0273C56.8243 21.9412 56.5985 21.8979 56.3708 21.9001C56.1432 21.9022 55.9182 21.9497 55.7091 22.0399C55.5003 22.1299 55.3115 22.2605 55.1537 22.4242C55.1535 22.4245 55.1533 22.4247 55.1531 22.4249L39.9973 37.5804L24.8417 22.4245C24.8415 22.4244 24.8414 22.4242 24.8412 22.424C24.6816 22.2599 24.4907 22.1295 24.2799 22.0405C24.0688 21.9513 23.842 21.9053 23.6128 21.9054Z'
+    fill='currentColor'
+  />
+</svg>

components/Icons/github.svg

@@ -0,0 +1,5 @@
+<svg fill='currentColor' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z'
+  />
+</svg>

components/Icons/info.svg

@@ -0,0 +1,3 @@
+<svg fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+  <path d='M10 9C9.73479 9 9.48043 9.10536 9.2929 9.29289C9.10536 9.48043 9 9.73478 9 10V14C9 14.2652 9.10536 14.5196 9.2929 14.7071C9.48043 14.8946 9.73479 15 10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14V10C11 9.73478 10.8946 9.48043 10.7071 9.29289C10.5196 9.10536 10.2652 9 10 9ZM10.38 5.08C10.1365 4.97998 9.86347 4.97998 9.62 5.08C9.49725 5.12759 9.38511 5.19896 9.29 5.29C9.20167 5.3872 9.13065 5.49881 9.08 5.62C9.02402 5.73868 8.99662 5.86882 9 6C8.99924 6.13161 9.02447 6.26207 9.07423 6.38391C9.124 6.50574 9.19732 6.61656 9.29 6.71C9.38721 6.79833 9.49882 6.86936 9.62 6.92C9.7715 6.98224 9.93597 7.00632 10.099 6.99011C10.2619 6.97391 10.4184 6.91792 10.5547 6.82707C10.691 6.73622 10.8029 6.61328 10.8805 6.46907C10.9582 6.32486 10.9992 6.16378 11 6C10.9963 5.73523 10.8927 5.48163 10.71 5.29C10.6149 5.19896 10.5028 5.12759 10.38 5.08ZM10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7363 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0V0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C18 12.1217 17.1572 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18V18Z' />
+</svg>

components/Icons/medium.svg

@@ -0,0 +1,5 @@
+<svg viewBox='0 0 33 19' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M18.6139 9.49984C18.6139 14.7465 14.4471 19 9.30681 19C4.16656 19 0 14.7478 0 9.49984C0 4.25188 4.16688 0 9.30681 0C14.4467 0 18.6139 4.25316 18.6139 9.49984ZM28.824 9.49984C28.824 14.4389 26.7404 18.4425 24.1704 18.4425C21.6004 18.4425 19.5168 14.4377 19.5168 9.49984C19.5168 4.56201 21.6004 0.557156 24.1704 0.557156C26.7404 0.557156 28.824 4.56201 28.824 9.49984ZM33 9.49984C33 13.925 32.2671 17.5121 31.3633 17.5121C30.4594 17.5121 29.7266 13.9238 29.7266 9.49984C29.7266 5.07592 30.4594 1.48756 31.3636 1.48756C32.2678 1.48756 33 5.07495 33 9.49984Z'
+  />
+</svg>

components/Icons/reddit.svg

@@ -0,0 +1,5 @@
+<svg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M15.57,15.284 C14.673,15.284 13.91925,14.5565 13.91925,13.6595 C13.91925,12.7625 14.673,12.011 15.57,12.011 C16.467,12.011 17.1945,12.7625 17.1945,13.6595 C17.1945,14.5565 16.467,15.284 15.57,15.284 M15.951,18.437 C15.1155,19.27175 13.827,19.6775 12.012,19.6775 C12.00825,19.6775 12.00375,19.67675 11.99925,19.67675 C11.9955,19.67675 11.991,19.6775 11.9865,19.6775 C10.1715,19.6775 8.88375,19.27175 8.049,18.437 C7.7925,18.1805 7.7925,17.76575 8.049,17.51 C8.30475,17.25425 8.7195,17.25425 8.976,17.51 C9.552,18.086 10.53675,18.3665 11.9865,18.3665 C11.991,18.3665 11.9955,18.36725 11.99925,18.36725 C12.00375,18.36725 12.00825,18.3665 12.012,18.3665 C13.46175,18.3665 14.44725,18.086 15.024,17.51 C15.2805,17.2535 15.69525,17.25425 15.951,17.51 C16.20675,17.7665 16.20675,18.18125 15.951,18.437 M6.8055,13.6595 C6.8055,12.76325 7.55775,12.011 8.454,12.011 C9.351,12.011 10.0785,12.76325 10.0785,13.6595 C10.0785,14.5565 9.351,15.284 8.454,15.284 C7.55775,15.284 6.8055,14.5565 6.8055,13.6595 M19.998,3.311 C20.6055,3.311 21.09975,3.80525 21.09975,4.412 C21.09975,5.0195 20.6055,5.51375 19.998,5.51375 C19.3905,5.51375 18.89625,5.0195 18.89625,4.412 C18.89625,3.80525 19.3905,3.311 19.998,3.311 M24,11.87525 C24,10.2845 22.70625,8.99075 21.1155,8.99075 C20.427,8.99075 19.79475,9.23375 19.29825,9.638 C17.5395,8.5325 15.3075,7.8665 12.915,7.7255 L14.163,3.77975 L17.59275,4.5875 C17.68275,5.83625 18.72675,6.82475 19.998,6.82475 C21.32775,6.82475 22.41,5.7425 22.41,4.412 C22.41,3.08225 21.32775,2 19.998,2 C19.068,2 18.2595,2.5295 17.85675,3.30275 L13.87125,2.3645 C13.5375,2.28575 13.2,2.47775 13.0965,2.80475 L11.547,7.70225 C8.96925,7.76525 6.546,8.4335 4.65825,9.6035 C4.1685,9.22025 3.55275,8.99075 2.8845,8.99075 C1.29375,8.99075 0,10.2845 0,11.87525 C0,12.8585 0.495,13.72775 1.24875,14.24825 C1.21725,14.477 1.20075,14.70725 1.20075,14.9405 C1.20075,16.92875 2.3565,18.77825 4.455,20.14775 C6.4665,21.461 9.129,22.184 11.95125,22.184 C14.7735,22.184 17.436,21.461 19.4475,20.14775 C21.546,18.77825 22.70175,16.92875 22.70175,14.9405 C22.70175,14.72825 22.6875,14.5175 22.66125,14.30825 C23.46525,13.796 24,12.89675 24,11.87525'
+  />
+</svg>

components/Icons/rubbish.svg

@@ -0,0 +1,5 @@
+<svg version='1.1' fill='currentColor' viewBox='0 0 14 16' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M5.23995 0.800781C4.62778 0.800781 4.11995 1.3086 4.11995 1.92078V2.40078H1.07995C1.0633 2.39991 1.04661 2.39991 1.02995 2.40078C0.966911 2.40405 0.905131 2.41971 0.848141 2.44686C0.791151 2.47401 0.740068 2.51213 0.697808 2.55902C0.655549 2.60592 0.622941 2.66068 0.601847 2.72017C0.580753 2.77967 0.571586 2.84274 0.574869 2.90579C0.578153 2.96883 0.593822 3.0306 0.620983 3.08759C0.648144 3.14457 0.686264 3.19565 0.733167 3.2379C0.780069 3.28015 0.834835 3.31275 0.894337 3.33384C0.953839 3.35492 1.01691 3.36408 1.07995 3.36078H11.31L11 14.0658C10.9967 14.1795 10.9368 14.2408 10.84 14.2408H3.15995C3.06314 14.2408 3.00325 14.1795 2.99995 14.0658L2.71995 4.47078C2.71832 4.40774 2.70428 4.34564 2.67865 4.28803C2.65301 4.23041 2.61628 4.17841 2.57054 4.13499C2.52481 4.09158 2.47097 4.05759 2.4121 4.03499C2.35324 4.01238 2.29049 4.00158 2.22745 4.00323C2.16441 4.00487 2.10231 4.01891 2.0447 4.04455C1.98709 4.0702 1.93509 4.10693 1.89168 4.15267C1.84827 4.19841 1.81429 4.25225 1.79169 4.31113C1.76909 4.37 1.7583 4.43274 1.75995 4.49578L2.03995 14.0908C2.0572 14.6859 2.54765 15.2008 3.15995 15.2008H10.84C11.4523 15.2008 11.9427 14.6859 11.96 14.0908L12.27 3.36078H12.92C12.9836 3.36168 13.0467 3.34993 13.1057 3.32621C13.1648 3.30249 13.2185 3.26728 13.2638 3.22262C13.3091 3.17796 13.345 3.12474 13.3696 3.06605C13.3941 3.00737 13.4068 2.94439 13.4068 2.88078C13.4068 2.81717 13.3941 2.75419 13.3696 2.69551C13.345 2.63682 13.3091 2.58361 13.2638 2.53894C13.2185 2.49428 13.1648 2.45907 13.1057 2.43535C13.0467 2.41163 12.9836 2.39988 12.92 2.40078H9.87995V1.92078C9.87995 1.3086 9.37213 0.800781 8.75995 0.800781H5.23995ZM5.23995 1.76078H8.75995C8.8569 1.76078 8.91995 1.82384 8.91995 1.92078V2.40078H5.07995V1.92078C5.07995 1.82384 5.14301 1.76078 5.23995 1.76078ZM4.75495 4.95078C4.69149 4.95143 4.62879 4.96467 4.57048 4.98971C4.51216 5.01475 4.45939 5.05111 4.41522 5.09668C4.37104 5.14224 4.33635 5.19612 4.31313 5.25518C4.28991 5.31425 4.27863 5.37733 4.27995 5.44078V12.1608C4.27905 12.2244 4.2908 12.2875 4.31452 12.3466C4.33824 12.4056 4.37346 12.4593 4.41812 12.5046C4.46278 12.5499 4.516 12.5859 4.57468 12.6104C4.63336 12.635 4.69634 12.6476 4.75995 12.6476C4.82357 12.6476 4.88654 12.635 4.94523 12.6104C5.00391 12.5859 5.05713 12.5499 5.10179 12.5046C5.14645 12.4593 5.18166 12.4056 5.20538 12.3466C5.2291 12.2875 5.24085 12.2244 5.23995 12.1608V5.44078C5.24129 5.37649 5.2297 5.31258 5.20586 5.25286C5.18202 5.19313 5.14643 5.13881 5.10119 5.0931C5.05595 5.0474 5.00199 5.01125 4.94252 4.9868C4.88304 4.96235 4.81926 4.9501 4.75495 4.95078ZM6.99495 4.95078C6.93149 4.95143 6.86879 4.96467 6.81048 4.98971C6.75216 5.01475 6.69939 5.05111 6.65522 5.09668C6.61104 5.14224 6.57634 5.19612 6.55313 5.25518C6.52991 5.31425 6.51863 5.37733 6.51995 5.44078V12.1608C6.51905 12.2244 6.5308 12.2875 6.55452 12.3466C6.57824 12.4056 6.61345 12.4593 6.65812 12.5046C6.70278 12.5499 6.756 12.5859 6.81468 12.6104C6.87336 12.635 6.93634 12.6476 6.99995 12.6476C7.06356 12.6476 7.12654 12.635 7.18523 12.6104C7.24391 12.5859 7.29713 12.5499 7.34179 12.5046C7.38645 12.4593 7.42166 12.4056 7.44538 12.3466C7.4691 12.2875 7.48085 12.2244 7.47995 12.1608V5.44078C7.48129 5.37649 7.4697 5.31258 7.44586 5.25286C7.42202 5.19313 7.38643 5.13881 7.34119 5.0931C7.29595 5.0474 7.24199 5.01125 7.18252 4.9868C7.12304 4.96235 7.05926 4.9501 6.99495 4.95078ZM9.23495 4.95078C9.17149 4.95143 9.10879 4.96467 9.05048 4.98971C8.99216 5.01475 8.93939 5.05111 8.89522 5.09668C8.85104 5.14224 8.81635 5.19612 8.79313 5.25518C8.76991 5.31425 8.75863 5.37733 8.75995 5.44078V12.1608C8.75905 12.2244 8.7708 12.2875 8.79452 12.3466C8.81824 12.4056 8.85346 12.4593 8.89812 12.5046C8.94278 12.5499 8.996 12.5859 9.05468 12.6104C9.11336 12.635 9.17634 12.6476 9.23995 12.6476C9.30357 12.6476 9.36654 12.635 9.42523 12.6104C9.48391 12.5859 9.53713 12.5499 9.58179 12.5046C9.62645 12.4593 9.66166 12.4056 9.68538 12.3466C9.7091 12.2875 9.72085 12.2244 9.71995 12.1608V5.44078C9.72129 5.37649 9.7097 5.31258 9.68586 5.25286C9.66202 5.19313 9.62643 5.13881 9.58119 5.0931C9.53595 5.0474 9.48199 5.01125 9.42252 4.9868C9.36304 4.96235 9.29926 4.9501 9.23495 4.95078Z'
+  />
+</svg>

components/Icons/small-close.svg

@@ -0,0 +1,5 @@
+<svg version='1.1' viewBox='0 0 14 13' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M8.07392 6.5156L12.9444 2.02749C13.3034 1.69622 13.3034 1.1598 12.9444 0.82853C12.5843 0.497261 12.0018 0.497261 11.6428 0.82853L6.77235 5.31631L1.90186 0.82853C1.54197 0.497261 0.960351 0.497261 0.600284 0.82853C0.241312 1.1598 0.241312 1.69622 0.600284 2.02749L5.47077 6.5156L0.600284 11.0036C0.241312 11.3343 0.241312 11.8711 0.600284 12.2028C0.780774 12.3681 1.01583 12.451 1.25107 12.451C1.48704 12.451 1.72228 12.3683 1.90167 12.2028L6.77216 7.71507L11.6427 12.2028C11.822 12.3681 12.0582 12.451 12.2933 12.451C12.5285 12.451 12.7636 12.3683 12.944 12.2028C13.303 11.8711 13.303 11.3343 12.944 11.0036L8.07392 6.5156Z'
+  />
+</svg>

components/Icons/sort-asc.svg

@@ -0,0 +1,11 @@
+<svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M12 7.64031L15.5746 10.5L8.42539 10.5L12 7.64031Z'
+    stroke='currentColor'
+    strokeLinejoin='round'
+  />
+  <path
+    d='M11.6877 16.7501L8.11304 13.8904C7.74397 13.5952 7.95275 13 8.42539 13H15.5746C16.0472 13 16.256 13.5952 15.887 13.8904L12.3123 16.7501C12.1297 16.8962 11.8703 16.8962 11.6877 16.7501Z'
+    fillOpacity='0.2'
+  />
+</svg>

components/Icons/sort-desc.svg

@@ -0,0 +1,11 @@
+<svg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M12.3123 7.24988L15.887 10.1096C16.256 10.4048 16.0472 11 15.5746 11L8.42539 11C7.95275 11 7.74397 10.4048 8.11304 10.1096L11.6877 7.24988C11.8703 7.10379 12.1297 7.10379 12.3123 7.24988Z'
+    fillOpacity='0.2'
+  />
+  <path
+    d='M12 16.3597L8.42539 13.5L15.5746 13.5L12 16.3597Z'
+    stroke='currentColor'
+    strokeLinejoin='round'
+  />
+</svg>

components/Icons/sort-none.svg

@@ -0,0 +1,11 @@
+<svg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M12.3123 7.24988L15.887 10.1096C16.256 10.4048 16.0472 11 15.5746 11L8.42539 11C7.95275 11 7.74397 10.4048 8.11304 10.1096L11.6877 7.24988C11.8703 7.10379 12.1297 7.10379 12.3123 7.24988Z'
+    fillOpacity='0.2'
+  />
+  <path
+    d='M11.6877 16.7501L8.11304 13.8904C7.74397 13.5952 7.95275 13 8.42539 13H15.5746C16.0472 13 16.256 13.5952 15.887 13.8904L12.3123 16.7501C12.1297 16.8962 11.8703 16.8962 11.6877 16.7501Z'
+
+    fillOpacity='0.2'
+  />
+</svg>

components/Icons/subtract.svg

@@ -0,0 +1,7 @@
+<svg fill='currentColor' viewBox='0 0 11 2' version='1.1'>
+  <g transform='matrix(1,0,0,1,-0.666748,-5.33317)'>
+    <path
+      d='M10.667,5.333L1.333,5.333C1.157,5.333 0.987,5.403 0.862,5.528C0.737,5.653 0.667,5.823 0.667,6C0.667,6.177 0.737,6.346 0.862,6.471C0.987,6.596 1.157,6.667 1.333,6.667L10.667,6.667C10.844,6.667 11.013,6.596 11.138,6.471C11.263,6.346 11.333,6.177 11.333,6C11.333,5.823 11.263,5.653 11.138,5.528C11.013,5.403 10.844,5.333 10.667,5.333Z'
+    />
+  </g>
+</svg>

components/Icons/success.svg

@@ -0,0 +1,17 @@
+<svg fill='none' version='1.1' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'>
+  <circle
+    cx='40'
+    cy='40'
+    r='38.5'
+    stroke='currentColor'
+    strokeWidth='3'
+    transform='rotate(180 40 40)'
+  />
+  <path
+    d='M22 43.5L34.507 54L59 27'
+    stroke='currentColor'
+    strokeLinecap='round'
+    strokeLinejoin='round'
+    strokeWidth='3'
+  />
+</svg>

components/Icons/telegram.svg

@@ -0,0 +1,7 @@
+<svg viewBox='0 0 28 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    fillRule='evenodd'
+    clipRule='evenodd'
+    d='M21.448 23.735C21.8236 24.0086 22.3078 24.077 22.7394 23.909C23.1711 23.7398 23.4884 23.3606 23.5841 22.901C24.5979 18.0002 27.0572 5.59578 27.98 1.13778C28.05 0.801779 27.9333 0.452578 27.6767 0.228178C27.42 0.00377795 27.0642 -0.0610223 26.7469 0.0601779C21.8551 1.92258 6.79031 7.73659 0.632783 10.0802C0.241959 10.229 -0.0123689 10.6154 0.000464152 11.039C0.0144638 11.4638 0.292124 11.8322 0.692282 11.9558C3.45372 12.8054 7.07847 13.9874 7.07847 13.9874C7.07847 13.9874 8.77243 19.2494 9.65558 21.9254C9.76641 22.2614 10.0219 22.5254 10.3591 22.6166C10.6951 22.7066 11.0544 22.6118 11.3052 22.3682C12.7238 20.9906 14.9171 18.8606 14.9171 18.8606C14.9171 18.8606 19.0844 22.0034 21.448 23.735ZM8.60327 13.3226L10.5621 19.9682L10.9972 15.7598C10.9972 15.7598 18.5652 8.73859 22.8794 4.73658C23.0054 4.61898 23.0229 4.42218 22.9179 4.28418C22.8141 4.14618 22.6228 4.11378 22.4793 4.20738C17.4791 7.49179 8.60327 13.3226 8.60327 13.3226Z'
+  />
+</svg>

components/Icons/tooltip.svg

@@ -0,0 +1,4 @@
+<svg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
+  <path d='M0 0h24v24H0z' fill='none' />
+  <path d='M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z' />
+</svg>

components/Icons/twitter.svg

@@ -0,0 +1,5 @@
+<svg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z'
+  />
+</svg>

components/Icons/wallet-connect.svg

@@ -0,0 +1,3 @@
+<svg viewBox='0 0 300 185' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+  <path d='M61.4385429,36.2562612 C110.349767,-11.6319051 189.65053,-11.6319051 238.561752,36.2562612 L244.448297,42.0196786 C246.893858,44.4140867 246.893858,48.2961898 244.448297,50.690599 L224.311602,70.406102 C223.088821,71.6033071 221.106302,71.6033071 219.883521,70.406102 L211.782937,62.4749541 C177.661245,29.0669724 122.339051,29.0669724 88.2173582,62.4749541 L79.542302,70.9685592 C78.3195204,72.1657633 76.337001,72.1657633 75.1142214,70.9685592 L54.9775265,51.2530561 C52.5319653,48.8586469 52.5319653,44.9765439 54.9775265,42.5821357 L61.4385429,36.2562612 Z M280.206339,77.0300061 L298.128036,94.5769031 C300.573585,96.9713 300.573599,100.85338 298.128067,103.247793 L217.317896,182.368927 C214.872352,184.763353 210.907314,184.76338 208.461736,182.368989 C208.461726,182.368979 208.461714,182.368967 208.461704,182.368957 L151.107561,126.214385 C150.496171,125.615783 149.504911,125.615783 148.893521,126.214385 C148.893517,126.214389 148.893514,126.214393 148.89351,126.214396 L91.5405888,182.368927 C89.095052,184.763359 85.1300133,184.763399 82.6844276,182.369014 C82.6844133,182.369 82.684398,182.368986 82.6843827,182.36897 L1.87196327,103.246785 C-0.573596939,100.852377 -0.573596939,96.9702735 1.87196327,94.5758653 L19.7936929,77.028998 C22.2392531,74.6345898 26.2042918,74.6345898 28.6498531,77.028998 L86.0048306,133.184355 C86.6162214,133.782957 87.6074796,133.782957 88.2188704,133.184355 C88.2188796,133.184346 88.2188878,133.184338 88.2188969,133.184331 L145.571,77.028998 C148.016505,74.6345347 151.981544,74.6344449 154.427161,77.028798 C154.427195,77.0288316 154.427229,77.0288653 154.427262,77.028899 L211.782164,133.184331 C212.393554,133.782932 213.384814,133.782932 213.996204,133.184331 L271.350179,77.0300061 C273.79574,74.6355969 277.760778,74.6355969 280.206339,77.0300061 Z' />
+</svg>

components/Icons/wallet.svg

@@ -0,0 +1,5 @@
+<svg version='1.1' viewBox='0 0 18 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M13.7929 6.3499L15.0178 6.29599C15.2308 6.24208 15.4438 6.02644 15.4438 5.75688V4.24737H2.23669C1.97041 4.24737 1.7574 4.03172 1.7574 3.81608C1.7574 3.54652 1.97041 3.33088 2.23669 3.33088H4.68639L6.39053 2.52221H1.49112C1.1716 2.52221 0.905325 2.79177 0.905325 3.11524V14.5444C0.905325 14.8679 1.1716 15.1374 1.49112 15.1374H14.858C15.1775 15.1374 15.4438 14.8679 15.4438 14.5444V11.9028C15.4438 11.5793 15.1775 11.3097 14.858 11.3097C14.2722 11.3097 13.6864 11.3097 13.0473 11.3097C12.2485 11.3097 11.6095 10.6628 11.6095 9.80022V7.80551C11.6095 6.45773 12.7278 6.3499 13.7929 6.3499ZM6.76331 3.33088H12.6213L11.503 1.06661L6.76331 3.33088ZM13.6331 3.33088H15.4438V3.11524C15.4438 2.79177 15.1775 2.52221 14.858 2.52221H13.2071L13.6331 3.33088ZM12.7811 1.60572H14.858C15.6568 1.60572 16.2959 2.30657 16.2959 3.11524C16.2959 3.97781 16.2959 4.8943 16.2959 5.75688C16.2959 5.97253 16.2959 6.13426 16.1893 6.3499H16.5089C17.3077 6.3499 18 6.99684 18 7.80551V9.80022C18 10.6089 17.3077 11.3097 16.5089 11.3097H16.1893C16.2959 11.4715 16.2959 11.6871 16.2959 11.9028V14.5444C16.2959 15.3531 15.6568 16 14.858 16H1.49112C0.692308 16 0 15.3531 0 14.5444V3.11524C0 2.30657 0.692308 1.60572 1.49112 1.60572H8.25444L11.5562 0.0422992C11.7692 -0.0655231 12.0355 0.0422992 12.142 0.257944L12.7811 1.60572ZM16.5089 7.26639C15.3373 7.26639 14.2189 7.26639 13.0473 7.26639C12.7278 7.26639 12.5148 7.48204 12.5148 7.80551V9.80022C12.5148 10.1237 12.7278 10.3932 13.0473 10.3932C14.2189 10.3932 15.3373 10.3932 16.5089 10.3932C16.8284 10.3932 17.0947 10.1237 17.0947 9.80022V7.80551C17.0947 7.48204 16.8284 7.26639 16.5089 7.26639Z'
+  />
+</svg>

components/Icons/warning.svg

@@ -0,0 +1,5 @@
+<svg viewBox='0 0 24 21' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M12 14.9998C11.8022 14.9998 11.6088 15.0584 11.4444 15.1683C11.2799 15.2782 11.1518 15.4344 11.0761 15.6171C11.0004 15.7998 10.9806 16.0009 11.0192 16.1949C11.0578 16.3889 11.153 16.567 11.2929 16.7069C11.4327 16.8467 11.6109 16.942 11.8049 16.9806C11.9989 17.0192 12.1999 16.9994 12.3827 16.9237C12.5654 16.848 12.7216 16.7198 12.8314 16.5554C12.9413 16.3909 13 16.1976 13 15.9998C13 15.7346 12.8946 15.4802 12.7071 15.2927C12.5195 15.1051 12.2652 14.9998 12 14.9998ZM22.67 16.4698L14.62 2.46978C14.3598 2.0033 13.9798 1.61474 13.5192 1.34425C13.0586 1.07376 12.5341 0.931152 12 0.931152C11.4658 0.931152 10.9414 1.07376 10.4808 1.34425C10.0202 1.61474 9.64016 2.0033 9.37997 2.46978L1.37997 16.4698C1.11076 16.9238 0.96611 17.4408 0.960612 17.9686C0.955114 18.4964 1.08897 19.0163 1.34865 19.4758C1.60834 19.9354 1.98467 20.3182 2.43965 20.5858C2.89463 20.8534 3.41215 20.9962 3.93997 20.9998H20.06C20.592 21.005 21.1159 20.8687 21.5779 20.6047C22.0399 20.3407 22.4233 19.9586 22.6889 19.4976C22.9546 19.0366 23.0928 18.5132 23.0895 17.9811C23.0861 17.4491 22.9414 16.9274 22.67 16.4698V16.4698ZM20.94 18.4698C20.8523 18.6257 20.7244 18.7553 20.5697 18.845C20.4149 18.9347 20.2389 18.9813 20.06 18.9798H3.93997C3.76108 18.9813 3.58507 18.9347 3.43029 18.845C3.2755 18.7553 3.14762 18.6257 3.05997 18.4698C2.9722 18.3178 2.92599 18.1453 2.92599 17.9698C2.92599 17.7942 2.9722 17.6218 3.05997 17.4698L11.06 3.46978C11.1439 3.30598 11.2714 3.16852 11.4284 3.07253C11.5854 2.97654 11.7659 2.92574 11.95 2.92574C12.134 2.92574 12.3145 2.97654 12.4715 3.07253C12.6286 3.16852 12.756 3.30598 12.84 3.46978L20.89 17.4698C20.9892 17.6196 21.0462 17.7934 21.055 17.9729C21.0638 18.1524 21.0241 18.331 20.94 18.4898V18.4698ZM12 6.99978C11.7348 6.99978 11.4804 7.10514 11.2929 7.29268C11.1053 7.48021 11 7.73457 11 7.99978V11.9998C11 12.265 11.1053 12.5194 11.2929 12.7069C11.4804 12.8944 11.7348 12.9998 12 12.9998C12.2652 12.9998 12.5195 12.8944 12.7071 12.7069C12.8946 12.5194 13 12.265 13 11.9998V7.99978C13 7.73457 12.8946 7.48021 12.7071 7.29268C12.5195 7.10514 12.2652 6.99978 12 6.99978Z'
+  />
+</svg>

components/Icons/withdraw.svg

@@ -0,0 +1,5 @@
+<svg fill='currentColor' viewBox='0 0 12 14' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M8.19317 9.85992L6.6665 11.3933V3.66659C6.6665 3.48977 6.59627 3.32021 6.47124 3.19518C6.34622 3.07016 6.17665 2.99992 5.99984 2.99992C5.82303 2.99992 5.65346 3.07016 5.52843 3.19518C5.40341 3.32021 5.33317 3.48977 5.33317 3.66659V11.3933L3.8065 9.85992C3.68097 9.73438 3.5107 9.66386 3.33317 9.66386C3.15564 9.66386 2.98537 9.73438 2.85984 9.85992C2.7343 9.98546 2.66378 10.1557 2.66378 10.3333C2.66378 10.5108 2.7343 10.681 2.85984 10.8066L5.5265 13.4733C5.58991 13.5339 5.66467 13.5815 5.7465 13.6133C5.8263 13.6485 5.91259 13.6667 5.99984 13.6667C6.08708 13.6667 6.17337 13.6485 6.25317 13.6133C6.335 13.5815 6.40977 13.5339 6.47317 13.4733L9.13984 10.8066C9.26537 10.681 9.3359 10.5108 9.3359 10.3333C9.3359 10.1557 9.26537 9.98546 9.13984 9.85992C9.07768 9.79776 9.00388 9.74845 8.92267 9.71481C8.84145 9.68117 8.75441 9.66386 8.6665 9.66386C8.48897 9.66386 8.31871 9.73438 8.19317 9.85992ZM10.6665 0.333252H1.33317C1.15636 0.333252 0.98679 0.40349 0.861766 0.528514C0.736742 0.653538 0.666504 0.823108 0.666504 0.999919C0.666504 1.17673 0.736742 1.3463 0.861766 1.47132C0.98679 1.59635 1.15636 1.66659 1.33317 1.66659H10.6665C10.8433 1.66659 11.0129 1.59635 11.1379 1.47132C11.2629 1.3463 11.3332 1.17673 11.3332 0.999919C11.3332 0.823108 11.2629 0.653538 11.1379 0.528514C11.0129 0.40349 10.8433 0.333252 10.6665 0.333252Z'
+  />
+</svg>

components/Icons/you-tube.svg

@@ -0,0 +1,6 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 461.001 461.001'>
+  <path
+    fill='currentColor'
+    d='M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z'
+  />
+</svg>

components/Layout.tsx

@@ -0,0 +1,37 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import CreditManager from 'components/CreditManager'
+import Navigation from 'components/Navigation'
+import useCreditManagerStore from 'stores/useCreditManagerStore'
+import useWalletStore from 'stores/useWalletStore'
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  const isOpen = useCreditManagerStore((s) => s.isOpen)
+  const address = useWalletStore((s) => s.address)
+
+  const filter = {
+    day: 'brightness-100 hue-rotate-0',
+    night: '-hue-rotate-82 brightness-30',
+  }
+
+  const isConnected = !!address
+
+  const backgroundClasses = classNames(
+    isConnected ? filter.day : filter.night,
+    'top-0 left-0 absolute block h-full w-full flex-col bg-body bg-mars bg-desktop bg-top bg-no-repeat filter transition-background duration-3000 ease-linear',
+  )
+
+  return (
+    <div className='relative min-h-screen w-full'>
+      <div className={backgroundClasses} />
+      <Navigation />
+      <main className='relative flex-1 p-6'>
+        {children}
+        {isOpen && <CreditManager />}
+      </main>
+    </div>
+  )
+}
+
+export default Layout

components/Layout/Layout.module.css

@@ -1,25 +0,0 @@
-.background {
-  display: flex;
-  flex-direction: column;
-
-  width: 100%;
-  min-height: 100vh;
-  background-repeat: no-repeat;
-
-  background-color: #562a3b;
-  background-size: 100% auto;
-  background-image: url('/background.svg');
-  background-position: center top;
-
-  filter: brightness(1) hue-rotate(0deg);
-  transition: 3s filter linear, 3s -webkit-filter linear;
-}
-
-.night {
-  filter: brightness(0.3) hue-rotate(-82deg);
-}
-
-.container {
-  padding: 1.5rem;
-  flex: 1;
-}

components/Layout/index.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-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 }) => {
-  const isOpen = useCreditManagerStore((s) => s.isOpen)
-
-  return (
-    <div className={styles.background}>
-      <Navigation />
-      <div className={`${styles.container} relative`}>
-        {children}
-        {isOpen && <CreditManager />}
-      </div>
-    </div>
-  )
-}
-
-export default Layout

components/Modal.tsx

@@ -0,0 +1,46 @@
+import classNames from 'classnames'
+import { ReactNode } from 'react'
+
+import Card from 'components/Card'
+import CloseIcon from 'components/Icons/close.svg'
+
+interface Props {
+  children?: ReactNode | string
+  content?: ReactNode | string
+  className?: string
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+const Modal = ({ children, content, className, open, setOpen }: Props) => {
+  const onClickAway = () => {
+    setOpen(false)
+  }
+
+  return open ? (
+    <>
+      <Card
+        className={classNames(
+          'absolute top-0 left-0 right-0 bottom-0 z-40 mx-auto my-0 w-[790px] max-w-full',
+          className,
+        )}
+      >
+        <span
+          className='absolute top-4 right-4 w-[32px] opacity-40 hover:cursor-pointer hover:opacity-80'
+          onClick={onClickAway}
+          role='button'
+        >
+          <CloseIcon />
+        </span>
+        {children ? children : content}
+      </Card>
+      <div
+        className='fixed top-0 left-0 z-30 block h-full w-full bg-black/70 backdrop-blur hover:cursor-pointer'
+        onClick={onClickAway}
+        role='button'
+      />
+    </>
+  ) : null
+}
+
+export default Modal

components/Navigation.tsx

@@ -1,15 +1,17 @@
 import { Popover } from '@headlessui/react'
-import { ChevronDownIcon } from '@heroicons/react/24/solid'
+import BigNumber from 'bignumber.js'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
-import BigNumber from 'bignumber.js'
 
-import ArrowRightLine from 'components/Icons/arrow-right-line.svg'
+import ChevronDownIcon from 'components/Icons/expand.svg'
+import Button from 'components/Button'
+import CircularProgress from 'components/CircularProgress'
+import ArrowRightLineIcon from 'components/Icons/arrow-right-line.svg'
 import ProgressBar from 'components/ProgressBar'
 import SearchInput from 'components/SearchInput'
-import Spinner from 'components/Spinner'
+import SemiCircleProgress from 'components/SemiCircleProgress'
 import Wallet from 'components/Wallet'
 import useCreateCreditAccount from 'hooks/mutations/useCreateCreditAccount'
 import useDeleteCreditAccount from 'hooks/mutations/useDeleteCreditAccount'
@@ -17,11 +19,8 @@ import useAccountStats from 'hooks/useAccountStats'
 import useCreditAccounts from 'hooks/useCreditAccounts'
 import useCreditManagerStore from 'stores/useCreditManagerStore'
 import useWalletStore from 'stores/useWalletStore'
-import { formatCurrency } from 'utils/formatters'
 import { chain } from 'utils/chains'
-
+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
@@ -105,19 +104,19 @@ const Navigation = () => {
           className='flex w-16 cursor-pointer justify-center hover:text-white'
           onClick={toggleCreditManager}
         >
-          <ArrowRightLine />
+          <ArrowRightLineIcon />
         </div>
       </div>
     )
   }
 
   return (
-    <div>
+    <div className='relative'>
       {/* Main navigation bar */}
       <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={40} height={40} />
           </a>
         </Link>
         <div className='flex gap-5 px-12 text-white/40'>
@@ -151,7 +150,9 @@ const Navigation = () => {
                   <Popover.Button>
                     <div className='flex cursor-pointer items-center px-3 hover:text-white'>
                       More
-                      <ChevronDownIcon className='ml-1 h-4 w-4' />
+                      <span className='ml-1 h-4 w-4'>
+                        <ChevronDownIcon />
+                      </span>
                     </div>
                   </Popover.Button>
                   <Popover.Panel className='absolute z-10 w-[200px] pt-2'>
@@ -222,7 +223,7 @@ const Navigation = () => {
       </div>
       {(isLoadingCreate || isLoadingDelete) && (
         <div className='absolute inset-0 z-40 grid place-items-center bg-black/50'>
-          <Spinner />
+          <CircularProgress />
         </div>
       )}
     </div>

components/Number.tsx

@@ -0,0 +1,75 @@
+import classNames from 'classnames'
+import React, { useEffect, useRef } from 'react'
+import { animated, useSpring } from 'react-spring'
+
+import { formatValue } from 'utils/formatters'
+
+interface Props {
+  amount: number
+  animate?: boolean
+  className?: string
+  minDecimals?: number
+  maxDecimals?: number
+  thousandSeparator?: boolean
+  prefix?: boolean | string
+  suffix?: boolean | string
+  rounded?: boolean
+  abbreviated?: boolean
+}
+
+const Number = ({
+  amount,
+  animate = false,
+  className,
+  minDecimals = 2,
+  maxDecimals = 2,
+  thousandSeparator = true,
+  prefix = false,
+  suffix = false,
+  rounded = false,
+  abbreviated = false,
+}: Props) => {
+  const prevAmountRef = useRef<number>(0)
+
+  useEffect(() => {
+    if (prevAmountRef.current !== amount) prevAmountRef.current = amount
+  }, [amount])
+
+  const springAmount = useSpring({
+    number: amount,
+    from: { number: prevAmountRef.current },
+    config: { duration: 1000 },
+  })
+
+  return (prevAmountRef.current === amount && amount === 0) || !animate ? (
+    <span className={classNames('number', className)}>
+      {formatValue(
+        amount,
+        minDecimals,
+        maxDecimals,
+        thousandSeparator,
+        prefix,
+        suffix,
+        rounded,
+        abbreviated,
+      )}
+    </span>
+  ) : (
+    <animated.span className={classNames('number', className)}>
+      {springAmount.number.to((num) =>
+        formatValue(
+          num,
+          minDecimals,
+          maxDecimals,
+          thousandSeparator,
+          prefix,
+          suffix,
+          rounded,
+          abbreviated,
+        ),
+      )}
+    </animated.span>
+  )
+}
+
+export default React.memo(Number)

components/Overlay.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames'
+import { ReactNode } from 'react'
+
+interface Props {
+  children?: ReactNode | string
+  content?: ReactNode | string
+  className?: string
+  show: boolean
+  setShow: (show: boolean) => void
+}
+
+const Overlay = ({ children, content, className, show, setShow }: Props) => {
+  const onClickAway = () => {
+    setShow(false)
+  }
+
+  return show ? (
+    <>
+      <div
+        className={classNames(
+          'absolute z-50 flex max-w-full rounded-lg p-6 text-accent-dark shadow-overlay gradient-popover',
+          className,
+        )}
+      >
+        {children ? children : content}
+      </div>
+      <div
+        className='fixed top-0 left-0 z-40 block h-full w-full hover:cursor-pointer'
+        onClick={onClickAway}
+        role='button'
+      />
+    </>
+  ) : null
+}
+
+export default Overlay

components/RepayModal.tsx

@@ -13,10 +13,9 @@ import useTokenPrices from 'hooks/useTokenPrices'
 import useCreditManagerStore from 'stores/useCreditManagerStore'
 import { formatCurrency } from 'utils/formatters'
 import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
-
+import Button from 'components/Button'
-import Button from './Button'
+import CircularProgress from 'components/CircularProgress'
-import ContainerSecondary from './ContainerSecondary'
+import ContainerSecondary from 'components/ContainerSecondary'
-import Spinner from './Spinner'
 
 // 0.001% buffer / slippage to avoid repay action from not fully repaying the debt amount
 const REPAY_BUFFER = 1.00001
@@ -115,7 +114,7 @@ const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
               <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'>
-                    <Spinner />
+                    <CircularProgress />
                   </div>
                 )}
 
@@ -128,7 +127,7 @@ const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
                       Powered by deep-learning.
                     </h4>
                   </div>
-                  <Image src='/logo.svg' alt='mars' width={150} height={50} />
+                  <Image src='/logo.svg' alt='mars' width={50} height={50} />
                 </div>
 
                 <div className='flex flex-1 flex-col p-4'>

components/Spinner.tsx

@@ -1,28 +0,0 @@
-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'
-    >
-      <circle
-        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'
-      ></path>
-    </svg>
-  )
-}
-
-export default Spinner

components/Text.tsx

@@ -0,0 +1,41 @@
+import classNames from 'classnames'
+import { ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode | string
+  className?: string
+  monospace?: boolean
+  size?: '3xs' | '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '6xl'
+  tag?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4'
+  uppercase?: boolean
+}
+
+const headlines = ['h1', 'h2', 'h3', 'h4']
+const headMap = ['6xl', '5xl', '4xl', '3xl']
+
+const Text = ({
+  children,
+  className,
+  monospace = false,
+  size = 'base',
+  tag = 'p',
+  uppercase = false,
+}: Props) => {
+  const tagIndex = headlines.indexOf(tag)
+  const sizeClass = tagIndex > -1 ? headMap[tagIndex] : size
+  const HtmlElement = tag as keyof JSX.IntrinsicElements
+
+  return (
+    <HtmlElement
+      className={classNames(
+        className,
+        uppercase ? `text-${sizeClass}-caps` : `text-${sizeClass}`,
+        monospace && 'number',
+      )}
+    >
+      {children}
+    </HtmlElement>
+  )
+}
+
+export default Text

components/TextLink.tsx

@@ -0,0 +1,70 @@
+import classNames from 'classnames'
+import React, { ReactNode } from 'react'
+
+interface Props extends React.HTMLProps<HTMLAnchorElement> {
+  children?: string | ReactNode
+  className?: string
+  color?: 'primary' | 'secondary' | 'tertiary' | 'quaternary'
+  externalLink?: boolean
+  textSize?: 'small' | 'medium' | 'large'
+  text?: string | ReactNode
+}
+
+const colorClasses = {
+  primary:
+    'text-primary hover:text-primary-highlight active:text-primary-highlight-10 focus:text-primary-highlight',
+  secondary:
+    'text-secondary hover:text-secondary-highlight active:text-secondary-highlight-10 focus:text-secondary-highlight',
+  tertiary:
+    'text-secondary-dark/60 hover:text-secondary-dark active:text-secondary-dark-10 focus:text-secondary-dark',
+  quaternary: 'text-transparent text-white/60 hover:text-white active:text-white',
+}
+const textSizeClasses = {
+  small: 'text-sm',
+  medium: 'text-base',
+  large: 'text-lg',
+}
+
+const TextLink = ({
+  children,
+  className = '',
+  color = 'primary',
+  disabled,
+  externalLink,
+  href,
+  textSize = 'small',
+  text,
+  onClick,
+  ...restProps
+}: Props) => {
+  const linkClasses = classNames(
+    textSizeClasses[textSize],
+    colorClasses[color],
+    disabled && 'pointer-events-none opacity-50',
+    className,
+  )
+
+  return (
+    <a
+      className={linkClasses}
+      target={externalLink ? '_blank' : '_self'}
+      rel='noreferrer'
+      onClick={
+        onClick && href
+          ? (e) => {
+              e.preventDefault()
+              if (disabled) return
+              onClick
+            }
+          : undefined
+      }
+      href={!href ? '#' : href}
+      {...restProps}
+    >
+      {text && !children && text}
+      {children && children}
+    </a>
+  )
+}
+
+export default TextLink

components/Tooltip.tsx

@@ -1,21 +1,63 @@
-import { InformationCircleIcon } from '@heroicons/react/24/solid'
 import Tippy from '@tippyjs/react'
+import classNames from 'classnames'
 import { ReactNode } from 'react'
 
-interface TooltipProps {
+import TooltipIcon from 'components/Icons/tooltip.svg'
-  content: string | ReactNode
+
+interface Props {
+  children?: ReactNode | string
+  content: ReactNode | string
   className?: string
+  delay?: number
+  inderactive?: boolean
+  underline?: boolean
 }
 
-const Tooltip = ({ content, className }: TooltipProps) => {
+const Tooltip = ({
+  children,
+  content,
+  className,
+  delay = 0,
+  inderactive = false,
+  underline = false,
+}: Props) => {
   return (
     <Tippy
       appendTo={() => document.body}
-      className='rounded-md bg-[#ED512F] p-2 text-xs'
+      interactive={inderactive}
-      content={<span>{content}</span>}
+      animation={false}
-      interactive={true}
+      delay={[delay, 0]}
+      render={(attrs) => {
+        return (
+          <div
+            className='max-w-[320px] rounded-lg px-4 py-2 shadow-tooltip gradient-tooltip'
+            {...attrs}
+          >
+            {content}
+          </div>
+        )
+      }}
     >
-      <InformationCircleIcon className={`w-5 cursor-pointer ${className}`} />
+      {children ? (
+        <span
+          className={classNames(
+            underline &&
+              'border-b-1 cursor-pointer border border-x-0 border-t-0 border-dashed border-white/50 transition-all hover:border-transparent ',
+            className,
+          )}
+        >
+          {children}
+        </span>
+      ) : (
+        <span
+          className={classNames(
+            'mb-2 inline-block w-[18px] cursor-pointer opacity-40 hover:opacity-80',
+            className,
+          )}
+        >
+          <TooltipIcon />
+        </span>
+      )}
     </Tippy>
   )
 }

components/Trade/TradeActionModule.tsx

@@ -1,21 +1,21 @@
-import React, { useEffect, useMemo, useState } from 'react'
 import { Switch } from '@headlessui/react'
 import BigNumber from 'bignumber.js'
+import React, { useEffect, useMemo, useState } from 'react'
 import { toast } from 'react-toastify'
-import { ArrowsUpDownIcon } from '@heroicons/react/24/solid'
 
 import Button from 'components/Button'
-import useAllowedCoins from 'hooks/useAllowedCoins'
+import CircularProgress from 'components/CircularProgress'
-import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
+import ArrowsUpDownIcon from 'components/Icons/arrows-up-down.svg'
 import Slider from 'components/Slider'
 import useTradeAsset from 'hooks/mutations/useTradeAsset'
 import useAllBalances from 'hooks/useAllBalances'
-import useMarkets from 'hooks/useMarkets'
+import useAllowedCoins from 'hooks/useAllowedCoins'
-import useCreditManagerStore from 'stores/useCreditManagerStore'
-import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
-import useTokenPrices from 'hooks/useTokenPrices'
 import useCalculateMaxTradeAmount from 'hooks/useCalculateMaxTradeAmount'
-import Spinner from 'components/Spinner'
+import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
+import useMarkets from 'hooks/useMarkets'
+import useTokenPrices from 'hooks/useTokenPrices'
+import useCreditManagerStore from 'stores/useCreditManagerStore'
+import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
 
 enum FundingMode {
   Account = 'Account',
@@ -174,7 +174,7 @@ const TradeActionModule = () => {
     <div>
       {isLoading && (
         <div className='fixed inset-0 z-40 grid place-items-center bg-black/50'>
-          <Spinner />
+          <CircularProgress />
         </div>
       )}
       <div className='border-b border-b-white/20 p-2'>
@@ -207,14 +207,16 @@ const TradeActionModule = () => {
             />
           </div>
         </div>
-        <ArrowsUpDownIcon
+        <div
-          className='mx-auto h-5 cursor-pointer text-white/70 hover:text-white'
+          className='mx-auto h-5 w-6 cursor-pointer text-white/70 hover:text-white'
           onClick={() => {
             setSelectedTokenIn(selectedTokenOut)
             setSelectedTokenOut(selectedTokenIn)
             resetAmounts()
           }}
-        />
+        >
+          <ArrowsUpDownIcon />
+        </div>
         <div className='mb-5'>
           <p className='mb-1'>To:</p>
           <div className='flex gap-2'>
@@ -283,7 +285,7 @@ const TradeActionModule = () => {
           <p className='mr-2'>Margin</p>
           <Switch
             checked={isMarginEnabled}
-            onChange={(value) => {
+            onChange={(value: boolean) => {
               // reset amounts only if margin is turned off
               if (!value) resetAmounts()
 

components/Wallet.tsx

@@ -7,9 +7,8 @@ import useTokenBalance from 'hooks/useTokenBalance'
 import useWalletStore from 'stores/useWalletStore'
 import { chain } from 'utils/chains'
 import { formatWalletAddress } from 'utils/formatters'
-
+import Button from 'components/Button'
-import Button from './Button'
+import ConnectModal from 'components/ConnectModal'
-import ConnectModal from './ConnectModal'
 
 const WalletPopover = ({ children }: { children: React.ReactNode }) => {
   const address = useWalletStore((s) => s.address)
@@ -35,7 +34,7 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
             </div>
             <Button onClick={() => actions.disconnect()}>Disconnect</Button>
           </div>
-          <p className='mb-6 text-sm'>{address}</p>
+          <p className='color-primary mb-6 text-sm'>{address}</p>
           <button
             className='flex items-center text-sm text-slate-500 hover:text-slate-700'
             onClick={() => {
@@ -75,10 +74,7 @@ const Wallet = () => {
       {address ? (
         <WalletPopover>{formatWalletAddress(address)}</WalletPopover>
       ) : (
-        <Button
+        <Button className='w-[200px]' color='primary' onClick={() => setShowConnectModal(true)}>
-          className='w-[200px] !rounded-3xl !bg-green-500'
-          onClick={() => setShowConnectModal(true)}
-        >
           Connect Wallet
         </Button>
       )}

components/WithdrawModal.tsx

@@ -16,12 +16,11 @@ import { formatCurrency } from 'utils/formatters'
 import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
 import useAccountStats, { AccountStatsAction } from 'hooks/useAccountStats'
 import { chain } from 'utils/chains'
-
+import Button from 'components/Button'
-import Spinner from './Spinner'
+import ContainerSecondary from 'components/ContainerSecondary'
-import SemiCircleProgress from './SemiCircleProgress'
+import ProgressBar from 'components/ProgressBar'
-import ProgressBar from './ProgressBar'
+import SemiCircleProgress from 'components/SemiCircleProgress'
-import ContainerSecondary from './ContainerSecondary'
+import CircularProgress from 'components/CircularProgress'
-import Button from './Button'
 
 const WithdrawModal = ({ show, onClose }: any) => {
   const [amount, setAmount] = useState(0)
@@ -170,7 +169,7 @@ const WithdrawModal = ({ show, onClose }: any) => {
               <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'>
-                    <Spinner />
+                    <CircularProgress />
                   </div>
                 )}
                 <div className='flex w-1/2 flex-col p-4'>

package.json

@@ -3,17 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
+    "dev": "next dev",
     "format": "eslint . --ext=ts,tsx --fix && prettier --write ./**/*.ts ./**/*.tsx",
-    "start": "next start",
+    "lint": "next lint",
-    "lint": "next lint"
+    "start": "next start"
   },
   "dependencies": {
     "@cosmjs/cosmwasm-stargate": "^0.29.0",
     "@cosmjs/stargate": "^0.29.0",
     "@headlessui/react": "^1.7.0",
-    "@heroicons/react": "^2.0.11",
     "@keplr-wallet/cosmos": "^0.10.24",
     "@metamask/detect-provider": "^1.2.0",
     "@radix-ui/react-slider": "^1.0.0",
@@ -24,6 +23,7 @@
     "@tippyjs/react": "^4.2.6",
     "bech32": "^2.0.0",
     "bignumber.js": "^9.1.0",
+    "classnames": "^2.3.2",
     "ethereumjs-util": "^7.1.5",
     "graphql": "^16.6.0",
     "graphql-request": "^5.0.0",
@@ -31,7 +31,9 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-number-format": "^5.1.0",
+    "react-spring": "^9.5.5",
     "react-toastify": "^9.0.8",
+    "tailwindcss-border-gradient-radius": "^3.0.1",
     "use-local-storage-state": "^18.1.1",
     "zustand": "^4.1.1"
   },

pages/borrow.tsx

@@ -3,8 +3,9 @@ import React, { useMemo, useRef, useState } from 'react'
 
 import BorrowTable from 'components/Borrow/BorrowTable'
 import BorrowModal from 'components/BorrowModal'
-import Container from 'components/Container'
+import Card from 'components/Card'
 import RepayModal from 'components/RepayModal'
+import Text from 'components/Text'
 import useAllowedCoins from 'hooks/useAllowedCoins'
 import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
 import useMarkets from 'hooks/useMarkets'
@@ -117,26 +118,30 @@ const Borrow = () => {
   return (
     <div className='flex items-start gap-4'>
       <div className='flex-1'>
-        <Container className='mb-4'>
+        <Card className='mb-4'>
           <div>
-            <h3 className='mb-7 text-center text-xl font-medium uppercase'>Borrowings</h3>
+            <Text tag='h3' size='xl' uppercase={true} className='mb-7 text-center'>
+              Borrowings
+            </Text>
             <BorrowTable
               data={borrowedAssets}
               onBorrowClick={handleBorrowClick}
               onRepayClick={handleRepayClick}
             />
           </div>
-        </Container>
+        </Card>
-        <Container>
+        <Card>
           <div>
-            <h3 className='mb-7 text-center text-xl font-medium uppercase'>Available to Borrow</h3>
+            <Text tag='h3' size='xl' uppercase={true} className='mb-7 text-center text-lg-caps'>
+              Available to Borrow
+            </Text>
             <BorrowTable
               data={notBorrowedAssets}
               onBorrowClick={handleBorrowClick}
               onRepayClick={handleRepayClick}
             />
           </div>
-        </Container>
+        </Card>
       </div>
       <BorrowModal
         key={`borrowModal_${modalId.current}`}

pages/council.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-import Container from 'components/Container'
+import Card from 'components/Card'
 
 const Council = () => {
   return (
     <div>
-      <Container>Council Placeholder</Container>
+      <Card>Council Placeholder</Card>
     </div>
   )
 }

pages/earn.tsx

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

pages/index.tsx

@@ -1,25 +1,22 @@
-// import Head from "next/head";
-// import Image from "next/image";
-// import styles from "../styles/Home.module.css";
 import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
 import { useQueryClient } from '@tanstack/react-query'
 import BigNumber from 'bignumber.js'
 import type { NextPage } from 'next'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 
 import Button from 'components/Button'
-import Container from 'components/Container'
+import Card from 'components/Card'
-import Spinner from 'components/Spinner'
+import CircularProgress from 'components/CircularProgress'
+import Text from 'components/Text'
 import { contractAddresses } from 'config/contracts'
-// import { Coin } from "@cosmjs/stargate";
+import useMarkets from 'hooks/useMarkets'
+import useTokenPrices from 'hooks/useTokenPrices'
 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'
-import useMarkets from 'hooks/useMarkets'
-import useTokenPrices from 'hooks/useTokenPrices'
 
 const Home: NextPage = () => {
   const [sendAmount, setSendAmount] = useState('')
@@ -254,11 +251,13 @@ const Home: NextPage = () => {
 
   return (
     <div className='mx-auto flex max-w-6xl flex-col gap-y-6'>
-      <Container>
+      <Card>
-        <h4 className='mb-5 text-xl'>Send Tokens</h4>
+        <Text tag='h4' className='mb-5'>
+          Send Tokens
+        </Text>
         <div className='mb-5 flex flex-wrap gap-2'>
           <div>
-            <p>Address:</p>
+            <Text>Address:</Text>
             <input
               className='rounded-lg bg-black/40 px-3 py-1'
               value={recipientAddress}
@@ -267,7 +266,7 @@ const Home: NextPage = () => {
             />
           </div>
           <div>
-            <p>Amount:</p>
+            <Text>Amount:</Text>
             <input
               type='number'
               className='rounded-lg bg-black/40 px-3 py-1'
@@ -277,40 +276,48 @@ const Home: NextPage = () => {
             />
           </div>
         </div>
-        <Button className='bg-[#524bb1] hover:bg-[#6962cc]' onClick={handleSendClick}>
+        <Button color='secondary' onClick={handleSendClick}>
           Send
         </Button>
-      </Container>
+      </Card>
-      <Container>
+      <Card>
-        <h4 className='mb-5 text-xl'>Create Credit Account (Mint NFT)</h4>
+        <Text tag='h4' className='mb-5'>
-        <Button className='bg-[#524bb1] hover:bg-[#6962cc]' onClick={handleCreateCreditAccount}>
+          Create Credit Account (Mint NFT)
+        </Text>
+        <Button color='secondary' onClick={handleCreateCreditAccount}>
           Create
         </Button>
-      </Container>
+      </Card>
-      <Container>
+      <Card>
-        <h4 className='mb-5 text-xl'>Get all Credit Accounts</h4>
+        <Text tag='h4' className='mb-5'>
-        <Button className='bg-[#524bb1] hover:bg-[#6962cc]' onClick={handleGetCreditAccounts}>
+          Get all Credit Accounts
+        </Text>
+        <Button color='secondary' onClick={handleGetCreditAccounts}>
           Fetch
         </Button>
-      </Container>
+      </Card>
-      <Container>
+      <Card>
-        <h4 className='mb-5 text-xl'>Borrow OSMO</h4>
+        <Text tag='h4' className='mb-5'>
+          Borrow OSMO
+        </Text>
         <input
           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' color='secondary' onClick={handleBorrowClick}>
           Borrow
         </Button>
-      </Container>
+      </Card>
 
       <div>
         {allTokens && (
           <div className='mb-4'>
             <div className='flex items-end'>
-              <h5 className='text-xl font-medium'>All Tokens</h5>
+              <Text size='2xl'>All Tokens</Text>
-              <p className='ml-2 text-sm'>- {allTokens.length} total</p>
+              <Text size='sm' className='ml-2'>
+                - {allTokens.length} total
+              </Text>
             </div>
             {allTokens.map((token) => (
               <p key={token}>{token}</p>
@@ -320,8 +327,10 @@ const Home: NextPage = () => {
         {walletTokens && (
           <>
             <div className='flex items-end'>
-              <h5 className='text-xl font-medium'>Your Tokens</h5>
+              <Text size='2xl'>Your Tokens</Text>
-              <p className='ml-2 text-sm'>- {walletTokens.length} total</p>
+              <Text size='sm' className='ml-2'>
+                - {walletTokens.length} total
+              </Text>
             </div>
             {walletTokens.map((token) => (
               <p key={token}>{token}</p>
@@ -343,10 +352,14 @@ const Home: NextPage = () => {
           </div>
         )}
       </div>
-      {error && <div className='mt-8 bg-white p-4 text-red-500'>{error}</div>}
+      {error && (
+        <div className='mt-8 rounded-base bg-white p-4'>
+          <Text className='text-red-500'>{error}</Text>
+        </div>
+      )}
       {isLoading && (
         <div>
-          <Spinner />
+          <CircularProgress />
         </div>
       )}
     </div>

pages/portfolio.tsx

@@ -1,7 +1,11 @@
-import React from 'react'
+import { useState } from 'react'
 
-import Container from 'components/Container'
+import Button from 'components/Button'
-import { formatCurrency } from 'utils/formatters'
+import Card from 'components/Card'
+import Modal from 'components/Modal'
+import Number from 'components/Number'
+import Overlay from 'components/Overlay'
+import Text from 'components/Text'
 
 const mockedAccounts = [
   {
@@ -47,45 +51,152 @@ const mockedAccounts = [
 ]
 
 const Portfolio = () => {
+  const [show, setShow] = useState<boolean>(false)
+  const [open, setOpen] = useState<boolean>(true)
   return (
     <div className='flex flex-col gap-4'>
-      <Container className='flex-1'>Portfolio Module</Container>
+      <Card className='flex-1'>
+        <span onClick={() => setShow(!show)} role='button'>
+          Portfolio Module
+        </span>
+        <Overlay show={show} setShow={setShow}>
+          A test overlay
+        </Overlay>
+      </Card>
       <div className='grid grid-cols-2 gap-4'>
         {mockedAccounts.map((account) => (
-          <Container key={account.id}>
+          <Card key={account.id}>
-            <p className='mb-4 text-center font-bold'>{account.label}</p>
+            <Text size='lg' uppercase={true} className='mb-4 text-center'>
+              {account.label}
+            </Text>
             <div className='grid grid-cols-3 gap-4'>
               <div>
-                <p>{formatCurrency(account.networth)}</p>
+                <Text>
-                <p className='text-sm text-white/40'>Net worth</p>
+                  <Number amount={account.networth} animate={true} prefix='$' />
+                </Text>
+                <Text size='sm' className='text-white/40'>
+                  Net worth
+                </Text>
               </div>
               <div>
-                <p>{formatCurrency(account.totalPositionValue)}</p>
+                <Text>
-                <p className='text-sm text-white/40'>Total Position Value</p>
+                  <Number amount={account.totalPositionValue} animate={true} prefix='$' />
+                </Text>
+                <Text size='sm' className='text-white/40'>
+                  Total Position Value
+                </Text>
               </div>
               <div>
-                <p>{formatCurrency(account.debt)}</p>
+                <Text>
-                <p className='text-sm text-white/40'>Debt</p>
+                  <Number amount={account.debt} animate={true} prefix='$' />
+                </Text>
+                <Text size='sm' className='text-white/40'>
+                  Debt
+                </Text>
               </div>
               <div>
-                <p className={`${account.profit > 0 ? 'text-green-400' : 'text-red-500'}`}>
+                <Text className={account.profit > 0 ? 'text-green-400' : 'text-red-500'}>
-                  {account.profit > 0 && '+'}
+                  <Number
-                  {formatCurrency(account.profit)}
+                    amount={account.debt}
-                </p>
+                    animate={true}
-                <p className='text-sm text-white/40'>P&L</p>
+                    prefix={account.profit > 0 ? '+$' : '$'}
+                  />
+                </Text>
+                <Text size='sm' className='text-white/40'>
+                  P&L
+                </Text>
               </div>
               <div>
-                <p>{account.leverage}</p>
+                <Text>
-                <p className='text-sm text-white/40'>Current Leverage</p>
+                  <Number amount={account.leverage} minDecimals={0} suffix='x' />
+                </Text>
+                <Text size='sm' className='text-white/40'>
+                  Current Leverage
+                </Text>
               </div>
               <div>
-                <p>{account.maxLeverage}</p>
+                <Text>
-                <p className='text-sm text-white/40'>Max Leverage</p>
+                  <Number amount={account.maxLeverage} minDecimals={0} suffix='x' />
+                </Text>
+                <Text size='sm' className='text-white/40'>
+                  Max Leverage
+                </Text>
               </div>
             </div>
-          </Container>
+          </Card>
         ))}
       </div>
+      <div className='w-full'>
+        <Button
+          onClick={() => {
+            setOpen(!open)
+          }}
+          text='Toggle Modal'
+        />
+      </div>
+      <Modal open={open} setOpen={setOpen}>
+        {mockedAccounts.map((account) => (
+          <div key={account.id} className='mb-8'>
+            <Text size='lg' uppercase={true} className='mb-4 px-10 text-center'>
+              {account.label}
+            </Text>
+            <div className='grid grid-cols-3 gap-4'>
+              <div>
+                <Text>
+                  <Number amount={account.networth} animate={true} prefix='$' />
+                </Text>
+                <Text size='sm' className='text-white/40'>
+                  Net worth
+                </Text>
+              </div>
+              <div>
+                <Text>
+                  <Number amount={account.totalPositionValue} animate={true} prefix='$' />
+                </Text>
+                <Text size='sm' className='text-white/40'>
+                  Total Position Value
+                </Text>
+              </div>
+              <div>
+                <Text>
+                  <Number amount={account.debt} animate={true} prefix='$' />
+                </Text>
+                <Text size='sm' className='text-white/40'>
+                  Debt
+                </Text>
+              </div>
+              <div>
+                <Text className={account.profit > 0 ? 'text-green-400' : 'text-red-500'}>
+                  <Number
+                    amount={account.debt}
+                    animate={true}
+                    prefix={account.profit > 0 ? '+$' : '$'}
+                  />
+                </Text>
+                <Text size='sm' className='text-white/40'>
+                  P&L
+                </Text>
+              </div>
+              <div>
+                <Text>
+                  <Number amount={account.leverage} minDecimals={0} suffix='x' />
+                </Text>
+                <Text size='sm' className='text-white/40'>
+                  Current Leverage
+                </Text>
+              </div>
+              <div>
+                <Text>
+                  <Number amount={account.maxLeverage} minDecimals={0} suffix='x' />
+                </Text>
+                <Text size='sm' className='text-white/40'>
+                  Max Leverage
+                </Text>
+              </div>
+            </div>
+          </div>
+        ))}
+      </Modal>
     </div>
   )
 }

pages/trade.tsx

@@ -1,21 +1,22 @@
 import React from 'react'
 
-import Container from 'components/Container'
+import Card from 'components/Card'
 import TradeActionModule from 'components/Trade/TradeActionModule'
 
 const Trade = () => {
   return (
     <div>
       <div className='mb-4 flex gap-4'>
-        <Container className='grid flex-1 place-items-center'>Graph/Tradingview Module</Container>
+        <Card className='flex-1'>Graph/Tradingview Module</Card>
         <div className='flex flex-col gap-4'>
-          <Container className='min-w-[350px] !p-2 text-sm'>
+          <Card>
             <TradeActionModule />
-          </Container>
+          </Card>
-          <Container>Orderbook module (optional)</Container>
+          <Card>Orderbook module (optional)</Card>
         </div>
+        <Card>Credit Account essential module</Card>
       </div>
-      <Container>Trader order overview</Container>
+      <Card>Trader order overview</Card>
     </div>
   )
 }

public/background.svg

@@ -1,88 +0,0 @@
-<svg width="1440" height="4655" viewBox="0 0 1440 4655" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0)">
-    <rect width="1440" height="4655" fill="white"/>
-    <rect x="-95" width="1630" height="4655" fill="white"/>
-    <rect x="-95" width="1630" height="4655" fill="url(#paint0_linear)" fill-opacity="0.9"/>
-    <g style="mix-blend-mode:hard-light" opacity="0.2" filter="url(#filter0_f)">
-    <path d="M-95 81H-41.5427C-21.4963 98.2997 20.9354 132.416 30.2904 130.485C39.6454 128.554 57.9471 143.762 65.9286 151.607C85.2326 168.303 124.843 201.454 128.852 200.488C130.084 200.192 133.976 200.223 139.641 200.269C157.018 200.41 191.081 200.687 216.277 192.04C249.688 180.574 266.95 185.402 278.087 192.04C289.224 198.678 349.92 229.455 360.5 227.041C364.049 226.232 374.49 226.916 387.221 227.75C412.442 229.403 446.649 231.644 454.05 224.024C465.187 212.558 658.97 204.713 677.346 214.368C692.047 222.093 711.462 222.214 720 222.214C728.538 222.214 747.953 222.093 762.654 214.368C781.03 204.713 974.812 212.558 985.949 224.024C993.351 231.644 1027.56 229.403 1052.78 227.75C1065.51 226.916 1075.95 226.232 1079.5 227.041C1090.08 229.455 1150.78 198.678 1161.91 192.04C1173.05 185.402 1190.31 180.574 1223.72 192.04C1248.92 200.687 1282.98 200.41 1300.36 200.269C1306.02 200.223 1309.92 200.192 1311.15 200.488C1315.16 201.454 1354.77 168.303 1374.07 151.607C1382.05 143.762 1400.35 128.554 1409.71 130.485C1419.06 132.416 1461.5 98.2997 1481.54 81H1535V5699H-95V81Z" fill="url(#paint1_linear)"/>
-    </g>
-    <g style="mix-blend-mode:hard-light" opacity="0.2" filter="url(#filter1_b)">
-    <path d="M-94.4432 513.757L-95 340.635C-79.1818 340.214 -58.0175 340.376 -39.8412 340.516C-31.7833 340.577 -24.3126 340.635 -18.1552 340.635C0.777557 340.635 41.9842 351.569 77.0655 371.007C80.0141 371.713 82.7676 372.389 85.3812 373.03C103.005 377.355 114.269 380.119 136.091 380.119L288.11 383.156C290.709 382.751 297.02 380.604 301.475 375.259C305.929 369.913 317.066 360.882 322.078 357.035C325.605 354.808 335.665 350.353 347.693 350.353C357.225 350.353 369.218 351.086 377.998 351.622C383.067 351.932 387.065 352.176 388.899 352.176C393.911 352.176 406.162 349.138 410.616 344.279C414.18 340.391 449.967 297.303 467.415 276.245C473.54 269.36 489.8 256.928 505.837 262.274C525.884 268.955 581.011 268.955 589.921 262.274C598.831 255.592 619.434 244.051 639.48 247.696C641.661 248.092 644.286 248.57 647.239 249.108C671.427 253.515 717.519 261.913 720 261.913C722.481 261.913 768.573 253.515 792.761 249.108C795.714 248.57 798.339 248.092 800.52 247.696C820.566 244.051 841.169 255.592 850.079 262.274C858.989 268.955 914.116 268.955 934.163 262.274C950.2 256.928 966.46 269.36 972.585 276.245C990.033 297.303 1025.82 340.391 1029.38 344.279C1033.84 349.138 1046.09 352.176 1051.1 352.176C1052.93 352.176 1056.93 351.932 1062 351.622C1070.78 351.086 1082.78 350.353 1092.31 350.353C1104.34 350.353 1114.4 354.808 1117.92 357.035C1122.93 360.882 1134.07 369.913 1138.53 375.259C1142.98 380.604 1149.29 382.751 1151.89 383.156L1303.91 380.119C1325.73 380.119 1336.99 377.355 1354.62 373.03C1357.23 372.389 1359.99 371.713 1362.93 371.007C1398.02 351.569 1439.22 340.635 1458.16 340.635C1464.31 340.635 1471.78 340.577 1479.84 340.516C1498.02 340.376 1519.18 340.214 1535 340.635L1534.44 513.757L1535 5735H-95L-94.4432 513.757Z" fill="url(#paint2_linear)"/>
-    </g>
-    <g style="mix-blend-mode:hard-light" opacity="0.2" filter="url(#filter2_b)">
-    <path d="M-94.4432 564.916L-95 459.824C-83.4012 458.344 -70.3203 456.725 -56.3558 454.996C23.3155 445.133 131.749 431.709 157.808 420.338C174.83 417.587 251.452 426.321 319.591 434.089C371.82 440.042 419.065 445.428 430.663 444.637C438.9 444.075 458.907 436.012 485.925 425.125C546.58 400.681 642.565 362 720 362C797.435 362 893.42 400.681 954.075 425.125C981.093 436.012 1001.1 444.075 1009.34 444.637C1020.94 445.428 1068.18 440.042 1120.41 434.089C1188.55 426.321 1265.17 417.587 1282.19 420.338C1308.25 431.709 1416.68 445.133 1496.36 454.996C1510.32 456.725 1523.4 458.344 1535 459.824L1534.44 564.916L1535 5694H-95L-94.4432 564.916Z" fill="url(#paint3_linear)"/>
-    </g>
-    <g style="mix-blend-mode:hard-light" opacity="0.2" filter="url(#filter3_f)">
-    <path d="M-95 474.713C-74.9535 467.22 -31.8536 452.843 -22.0531 455.273C-9.80252 458.311 30.2904 476.535 41.9842 492.33C53.678 508.124 75.3046 507.008 77.0655 505.087C78.736 503.265 93.7709 492.127 101.567 486.862C106.207 484.432 118.384 481.03 129.966 486.862C141.548 492.694 209.409 526.552 241.892 542.751C246.161 545.181 255.034 550.041 256.37 550.041C256.615 550.041 257.181 550.093 257.983 550.167C262.657 550.596 275.317 551.76 278.644 547.611C281.762 543.723 299.247 530.197 307.6 523.919C313.725 519.869 328.537 511.769 338.783 511.769C349.029 511.769 421.382 515.819 456.278 517.844C476.51 517.439 518.088 516.508 522.542 516.022C525.854 515.66 557.031 517.663 583.224 519.345C601.072 520.491 616.606 521.489 619.434 521.489C622.857 521.489 633.093 514.341 646.164 505.215C669.243 489.1 701.158 466.815 720 466.815C738.842 466.815 770.757 489.1 793.836 505.215C806.907 514.341 817.143 521.489 820.566 521.489C823.394 521.489 838.928 520.491 856.776 519.345C882.969 517.663 914.146 515.66 917.458 516.022C921.912 516.508 963.49 517.439 983.722 517.844C1018.62 515.819 1090.97 511.769 1101.22 511.769C1111.46 511.769 1126.27 519.869 1132.4 523.919C1140.75 530.197 1158.24 543.723 1161.36 547.611C1164.68 551.76 1177.34 550.596 1182.02 550.167C1182.82 550.093 1183.39 550.041 1183.63 550.041C1184.97 550.041 1193.84 545.181 1198.11 542.751C1230.59 526.552 1298.45 492.694 1310.03 486.862C1321.62 481.03 1333.79 484.432 1338.43 486.862C1346.23 492.127 1361.26 503.265 1362.93 505.087C1364.7 507.008 1386.32 508.124 1398.02 492.33C1409.71 476.535 1449.8 458.311 1462.05 455.273C1471.85 452.843 1514.95 467.22 1535 474.713V5633H-95V474.713Z" fill="url(#paint4_linear)"/>
-    </g>
-    <g style="mix-blend-mode:hard-light" opacity="0.2" filter="url(#filter4_f)">
-    <path d="M-48.7082 749.921C-44.5423 750.554 -40.9302 751.102 -38.2017 751.102C-34.8768 751.102 -32.6091 748.668 -30.2117 746.094C-27.3895 743.063 -24.3874 739.84 -19.2689 740.168C-11.6958 740.654 56.2766 740.371 89.3161 740.168L101.01 742.597L154.467 778.437L160.592 789.371L195.117 792.408L230.755 805.165C243.748 808.607 270.959 815.248 275.86 814.276C278.968 813.66 288.245 806.784 297.502 799.923C306.484 793.266 315.446 786.624 318.737 785.726C325.419 783.904 346.022 774.185 349.363 771.148C349.667 770.872 350.104 770.455 350.656 769.929C356.186 764.659 373.307 748.342 384.445 751.102C389.517 752.36 394.495 755.18 399.337 757.923C406.189 761.805 412.77 765.533 418.969 764.466C426.043 763.247 448.304 744.104 463.112 731.37C470.451 725.06 475.959 720.323 476.881 720.122C479.109 719.636 515.304 681.043 533.123 661.807C539.062 655.53 556.733 646.986 575.443 655.733C594.153 664.48 621.476 664.844 633.355 664.844L701.29 670.918L720 670.86L738.71 670.918L806.645 664.844C818.524 664.844 845.847 664.48 864.557 655.733C883.267 646.986 900.938 655.53 906.877 661.807C924.696 681.043 960.891 719.636 963.119 720.122C964.041 720.323 969.549 725.06 976.888 731.37C991.696 744.104 1013.96 763.247 1021.03 764.466C1027.23 765.533 1033.81 761.805 1040.66 757.923C1045.51 755.18 1050.48 752.36 1055.56 751.102C1066.69 748.342 1083.81 764.659 1089.34 769.929C1089.9 770.455 1090.33 770.872 1090.64 771.148C1093.98 774.185 1114.58 783.904 1121.26 785.726C1124.55 786.624 1133.52 793.266 1142.5 799.923C1151.75 806.784 1161.03 813.66 1164.14 814.276C1169.04 815.248 1196.25 808.607 1209.24 805.165L1244.88 792.408L1279.41 789.371L1285.53 778.437L1338.99 742.597L1350.68 740.168C1383.72 740.371 1451.7 740.654 1459.27 740.168C1464.39 739.84 1467.39 743.063 1470.21 746.094C1472.61 748.668 1474.88 751.102 1478.2 751.102C1480.93 751.102 1484.54 750.554 1488.71 749.921C1502.07 747.89 1521.13 744.994 1535 756.571V5699H-95V756.571C-81.1327 744.994 -62.0716 747.89 -48.7082 749.921Z" fill="url(#paint5_linear)" fill-opacity="0.55"/>
-    </g>
-    <ellipse opacity="0.2" cx="720.5" cy="532.5" rx="1003.5" ry="1123.5" transform="rotate(-90 720.5 532.5)" fill="url(#paint6_radial)"/>
-    </g>
-    <defs>
-    <filter id="filter0_f" x="-102" y="74" width="1644" height="5632" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-    <feGaussianBlur stdDeviation="3.5" result="effect1_foregroundBlur"/>
-    </filter>
-    <filter id="filter1_b" x="-103" y="239" width="1646" height="5504" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feGaussianBlur in="BackgroundImage" stdDeviation="4"/>
-    <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
-    </filter>
-    <filter id="filter2_b" x="-98" y="359" width="1636" height="5338" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feGaussianBlur in="BackgroundImage" stdDeviation="1.5"/>
-    <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
-    </filter>
-    <filter id="filter3_f" x="-98.5" y="451.5" width="1637" height="5185" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-    <feGaussianBlur stdDeviation="1.75" result="effect1_foregroundBlur"/>
-    </filter>
-    <filter id="filter4_f" x="-97" y="650" width="1634" height="5051" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-    <feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur"/>
-    </filter>
-    <linearGradient id="paint0_linear" x1="709.247" y1="-90.5139" x2="709.247" y2="4655" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#EB9E49"/>
-    <stop offset="0.078125" stop-color="#CD4E59"/>
-    <stop offset="0.151042" stop-color="#6E3D6E"/>
-    <stop offset="0.437386" stop-color="#582B3F"/>
-    <stop offset="0.750045" stop-color="#46172C"/>
-    </linearGradient>
-    <linearGradient id="paint1_linear" x1="718.886" y1="234.273" x2="719.05" y2="554.095" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#202020"/>
-    <stop offset="1" stop-color="#807575"/>
-    </linearGradient>
-    <linearGradient id="paint2_linear" x1="720" y1="331.517" x2="720.166" y2="784.035" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#610409" stop-opacity="0.35"/>
-    <stop offset="0.40625" stop-color="#524C4C"/>
-    </linearGradient>
-    <linearGradient id="paint3_linear" x1="720.557" y1="362" x2="720.557" y2="816.963" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#5A0013" stop-opacity="0.54"/>
-    <stop offset="1" stop-color="#AEAEAE"/>
-    </linearGradient>
-    <linearGradient id="paint4_linear" x1="720.556" y1="455" x2="720.556" y2="5633" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#2B0109" stop-opacity="0.37"/>
-    <stop offset="0.25" stop-color="#610D32"/>
-    <stop offset="1" stop-color="#610D32"/>
-    </linearGradient>
-    <linearGradient id="paint5_linear" x1="720" y1="621.113" x2="720" y2="5830.2" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#545454" stop-opacity="0.08"/>
-    <stop offset="0.0001" stop-color="#390013"/>
-    <stop offset="1" stop-color="#582B3F"/>
-    </linearGradient>
-    <radialGradient id="paint6_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(720.5 636.394) rotate(90) scale(1019.61 910.703)">
-    <stop stop-color="#C85658"/>
-    <stop offset="1" stop-color="#FF0707" stop-opacity="0"/>
-    </radialGradient>
-    <clipPath id="clip0">
-    <rect width="1440" height="4655" fill="white"/>
-    </clipPath>
-    </defs>
-</svg>

public/bg.svg

@@ -0,0 +1,88 @@
+<svg width="1440" height="4655" viewBox="0 0 1440 4655" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="1440" height="4655" fill="white"/>
+<rect x="-95" width="1630" height="4655" fill="white"/>
+<rect x="-95" width="1630" height="4655" fill="url(#paint0_linear)" fillOpacity="0.9"/>
+<g style="mix-blend-mode:hard-light" opacity="0.2" filter="url(#filter0_f)">
+<path d="M-95 81H-41.5427C-21.4963 98.2997 20.9354 132.416 30.2904 130.485C39.6454 128.554 57.9471 143.762 65.9286 151.607C85.2326 168.303 124.843 201.454 128.852 200.488C130.084 200.192 133.976 200.223 139.641 200.269C157.018 200.41 191.081 200.687 216.277 192.04C249.688 180.574 266.95 185.402 278.087 192.04C289.224 198.678 349.92 229.455 360.5 227.041C364.049 226.232 374.49 226.916 387.221 227.75C412.442 229.403 446.649 231.644 454.05 224.024C465.187 212.558 658.97 204.713 677.346 214.368C692.047 222.093 711.462 222.214 720 222.214C728.538 222.214 747.953 222.093 762.654 214.368C781.03 204.713 974.812 212.558 985.949 224.024C993.351 231.644 1027.56 229.403 1052.78 227.75C1065.51 226.916 1075.95 226.232 1079.5 227.041C1090.08 229.455 1150.78 198.678 1161.91 192.04C1173.05 185.402 1190.31 180.574 1223.72 192.04C1248.92 200.687 1282.98 200.41 1300.36 200.269C1306.02 200.223 1309.92 200.192 1311.15 200.488C1315.16 201.454 1354.77 168.303 1374.07 151.607C1382.05 143.762 1400.35 128.554 1409.71 130.485C1419.06 132.416 1461.5 98.2997 1481.54 81H1535V5699H-95V81Z" fill="url(#paint1_linear)"/>
+</g>
+<g style="mix-blend-mode:hard-light" opacity="0.2" filter="url(#filter1_b)">
+<path d="M-94.4432 513.757L-95 340.635C-79.1818 340.214 -58.0175 340.376 -39.8412 340.516C-31.7833 340.577 -24.3126 340.635 -18.1552 340.635C0.777557 340.635 41.9842 351.569 77.0655 371.007C80.0141 371.713 82.7676 372.389 85.3812 373.03C103.005 377.355 114.269 380.119 136.091 380.119L288.11 383.156C290.709 382.751 297.02 380.604 301.475 375.259C305.929 369.913 317.066 360.882 322.078 357.035C325.605 354.808 335.665 350.353 347.693 350.353C357.225 350.353 369.218 351.086 377.998 351.622C383.067 351.932 387.065 352.176 388.899 352.176C393.911 352.176 406.162 349.138 410.616 344.279C414.18 340.391 449.967 297.303 467.415 276.245C473.54 269.36 489.8 256.928 505.837 262.274C525.884 268.955 581.011 268.955 589.921 262.274C598.831 255.592 619.434 244.051 639.48 247.696C641.661 248.092 644.286 248.57 647.239 249.108C671.427 253.515 717.519 261.913 720 261.913C722.481 261.913 768.573 253.515 792.761 249.108C795.714 248.57 798.339 248.092 800.52 247.696C820.566 244.051 841.169 255.592 850.079 262.274C858.989 268.955 914.116 268.955 934.163 262.274C950.2 256.928 966.46 269.36 972.585 276.245C990.033 297.303 1025.82 340.391 1029.38 344.279C1033.84 349.138 1046.09 352.176 1051.1 352.176C1052.93 352.176 1056.93 351.932 1062 351.622C1070.78 351.086 1082.78 350.353 1092.31 350.353C1104.34 350.353 1114.4 354.808 1117.92 357.035C1122.93 360.882 1134.07 369.913 1138.53 375.259C1142.98 380.604 1149.29 382.751 1151.89 383.156L1303.91 380.119C1325.73 380.119 1336.99 377.355 1354.62 373.03C1357.23 372.389 1359.99 371.713 1362.93 371.007C1398.02 351.569 1439.22 340.635 1458.16 340.635C1464.31 340.635 1471.78 340.577 1479.84 340.516C1498.02 340.376 1519.18 340.214 1535 340.635L1534.44 513.757L1535 5735H-95L-94.4432 513.757Z" fill="url(#paint2_linear)"/>
+</g>
+<g style="mix-blend-mode:hard-light" opacity="0.2" filter="url(#filter2_b)">
+<path d="M-94.4432 564.916L-95 459.824C-83.4012 458.344 -70.3203 456.725 -56.3558 454.996C23.3155 445.133 131.749 431.709 157.808 420.338C174.83 417.587 251.452 426.321 319.591 434.089C371.82 440.042 419.065 445.428 430.663 444.637C438.9 444.075 458.907 436.012 485.925 425.125C546.58 400.681 642.565 362 720 362C797.435 362 893.42 400.681 954.075 425.125C981.093 436.012 1001.1 444.075 1009.34 444.637C1020.94 445.428 1068.18 440.042 1120.41 434.089C1188.55 426.321 1265.17 417.587 1282.19 420.338C1308.25 431.709 1416.68 445.133 1496.36 454.996C1510.32 456.725 1523.4 458.344 1535 459.824L1534.44 564.916L1535 5694H-95L-94.4432 564.916Z" fill="url(#paint3_linear)"/>
+</g>
+<g style="mix-blend-mode:hard-light" opacity="0.2" filter="url(#filter3_f)">
+<path d="M-95 474.713C-74.9535 467.22 -31.8536 452.843 -22.0531 455.273C-9.80252 458.311 30.2904 476.535 41.9842 492.33C53.678 508.124 75.3046 507.008 77.0655 505.087C78.736 503.265 93.7709 492.127 101.567 486.862C106.207 484.432 118.384 481.03 129.966 486.862C141.548 492.694 209.409 526.552 241.892 542.751C246.161 545.181 255.034 550.041 256.37 550.041C256.615 550.041 257.181 550.093 257.983 550.167C262.657 550.596 275.317 551.76 278.644 547.611C281.762 543.723 299.247 530.197 307.6 523.919C313.725 519.869 328.537 511.769 338.783 511.769C349.029 511.769 421.382 515.819 456.278 517.844C476.51 517.439 518.088 516.508 522.542 516.022C525.854 515.66 557.031 517.663 583.224 519.345C601.072 520.491 616.606 521.489 619.434 521.489C622.857 521.489 633.093 514.341 646.164 505.215C669.243 489.1 701.158 466.815 720 466.815C738.842 466.815 770.757 489.1 793.836 505.215C806.907 514.341 817.143 521.489 820.566 521.489C823.394 521.489 838.928 520.491 856.776 519.345C882.969 517.663 914.146 515.66 917.458 516.022C921.912 516.508 963.49 517.439 983.722 517.844C1018.62 515.819 1090.97 511.769 1101.22 511.769C1111.46 511.769 1126.27 519.869 1132.4 523.919C1140.75 530.197 1158.24 543.723 1161.36 547.611C1164.68 551.76 1177.34 550.596 1182.02 550.167C1182.82 550.093 1183.39 550.041 1183.63 550.041C1184.97 550.041 1193.84 545.181 1198.11 542.751C1230.59 526.552 1298.45 492.694 1310.03 486.862C1321.62 481.03 1333.79 484.432 1338.43 486.862C1346.23 492.127 1361.26 503.265 1362.93 505.087C1364.7 507.008 1386.32 508.124 1398.02 492.33C1409.71 476.535 1449.8 458.311 1462.05 455.273C1471.85 452.843 1514.95 467.22 1535 474.713V5633H-95V474.713Z" fill="url(#paint4_linear)"/>
+</g>
+<g style="mix-blend-mode:hard-light" opacity="0.2" filter="url(#filter4_f)">
+<path d="M-48.7082 749.921C-44.5423 750.554 -40.9302 751.102 -38.2017 751.102C-34.8768 751.102 -32.6091 748.668 -30.2117 746.094C-27.3895 743.063 -24.3874 739.84 -19.2689 740.168C-11.6958 740.654 56.2766 740.371 89.3161 740.168L101.01 742.597L154.467 778.437L160.592 789.371L195.117 792.408L230.755 805.165C243.748 808.607 270.959 815.248 275.86 814.276C278.968 813.66 288.245 806.784 297.502 799.923C306.484 793.266 315.446 786.624 318.737 785.726C325.419 783.904 346.022 774.185 349.363 771.148C349.667 770.872 350.104 770.455 350.656 769.929C356.186 764.659 373.307 748.342 384.445 751.102C389.517 752.36 394.495 755.18 399.337 757.923C406.189 761.805 412.77 765.533 418.969 764.466C426.043 763.247 448.304 744.104 463.112 731.37C470.451 725.06 475.959 720.323 476.881 720.122C479.109 719.636 515.304 681.043 533.123 661.807C539.062 655.53 556.733 646.986 575.443 655.733C594.153 664.48 621.476 664.844 633.355 664.844L701.29 670.918L720 670.86L738.71 670.918L806.645 664.844C818.524 664.844 845.847 664.48 864.557 655.733C883.267 646.986 900.938 655.53 906.877 661.807C924.696 681.043 960.891 719.636 963.119 720.122C964.041 720.323 969.549 725.06 976.888 731.37C991.696 744.104 1013.96 763.247 1021.03 764.466C1027.23 765.533 1033.81 761.805 1040.66 757.923C1045.51 755.18 1050.48 752.36 1055.56 751.102C1066.69 748.342 1083.81 764.659 1089.34 769.929C1089.9 770.455 1090.33 770.872 1090.64 771.148C1093.98 774.185 1114.58 783.904 1121.26 785.726C1124.55 786.624 1133.52 793.266 1142.5 799.923C1151.75 806.784 1161.03 813.66 1164.14 814.276C1169.04 815.248 1196.25 808.607 1209.24 805.165L1244.88 792.408L1279.41 789.371L1285.53 778.437L1338.99 742.597L1350.68 740.168C1383.72 740.371 1451.7 740.654 1459.27 740.168C1464.39 739.84 1467.39 743.063 1470.21 746.094C1472.61 748.668 1474.88 751.102 1478.2 751.102C1480.93 751.102 1484.54 750.554 1488.71 749.921C1502.07 747.89 1521.13 744.994 1535 756.571V5699H-95V756.571C-81.1327 744.994 -62.0716 747.89 -48.7082 749.921Z" fill="url(#paint5_linear)" fillOpacity="0.55"/>
+</g>
+<ellipse opacity="0.2" cx="720.5" cy="532.5" rx="1003.5" ry="1123.5" transform="rotate(-90 720.5 532.5)" fill="url(#paint6_radial)"/>
+</g>
+<defs>
+<filter id="filter0_f" x="-102" y="74" width="1644" height="5632" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.5" result="effect1_foregroundBlur"/>
+</filter>
+<filter id="filter1_b" x="-103" y="239" width="1646" height="5504" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="4"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
+</filter>
+<filter id="filter2_b" x="-98" y="359" width="1636" height="5338" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="1.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
+</filter>
+<filter id="filter3_f" x="-98.5" y="451.5" width="1637" height="5185" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.75" result="effect1_foregroundBlur"/>
+</filter>
+<filter id="filter4_f" x="-97" y="650" width="1634" height="5051" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur"/>
+</filter>
+<linearGradient id="paint0_linear" x1="709.247" y1="-90.5139" x2="709.247" y2="4655" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EB9E49"/>
+<stop offset="0.078125" stop-color="#CD4E59"/>
+<stop offset="0.151042" stop-color="#6E3D6E"/>
+<stop offset="0.437386" stop-color="#582B3F"/>
+<stop offset="0.750045" stop-color="#46172C"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="718.886" y1="234.273" x2="719.05" y2="554.095" gradientUnits="userSpaceOnUse">
+<stop stop-color="#202020"/>
+<stop offset="1" stop-color="#807575"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="720" y1="331.517" x2="720.166" y2="784.035" gradientUnits="userSpaceOnUse">
+<stop stop-color="#610409" stop-opacity="0.35"/>
+<stop offset="0.40625" stop-color="#524C4C"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="720.557" y1="362" x2="720.557" y2="816.963" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5A0013" stop-opacity="0.54"/>
+<stop offset="1" stop-color="#AEAEAE"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="720.556" y1="455" x2="720.556" y2="5633" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B0109" stop-opacity="0.37"/>
+<stop offset="0.25" stop-color="#610D32"/>
+<stop offset="1" stop-color="#610D32"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="720" y1="621.113" x2="720" y2="5830.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#545454" stop-opacity="0.08"/>
+<stop offset="0.0001" stop-color="#390013"/>
+<stop offset="1" stop-color="#582B3F"/>
+</linearGradient>
+<radialGradient id="paint6_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(720.5 636.394) rotate(90) scale(1019.61 910.703)">
+<stop stop-color="#C85658"/>
+<stop offset="1" stop-color="#FF0707" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0">
+<rect width="1440" height="4655" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/vercel.svg

@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>

styles/globals.css

@@ -2,13 +2,49 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: Inter;
+  src: url('../fonts/Inter-ExtraLight.woff2') format('woff2'),
+    url('../fonts/Inter-ExtraLight.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('../fonts/Inter-Regular.woff2') format('woff2'),
+    url('../fonts/Inter-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('../fonts/Inter-SemiBold.woff2') format('woff2'),
+    url('../fonts/Inter-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
+  font-family: Inter, sans-serif;
-    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   color: white;
+  background-color: #141621;
+}
+
+html {
+  scrollbar-width: none;
+}
+
+body {
+  overflow-y: scroll;
+  cursor: default;
 }
 
 a {
@@ -20,6 +56,15 @@ a {
   box-sizing: border-box;
 }
 
+*::-webkit-scrollbar {
+  display: none;
+}
+
+.number {
+  white-space: nowrap;
+  font-feature-settings: 'tnum' on;
+}
+
 /* react-toastify */
 /* https://fkhadra.github.io/react-toastify/how-to-style#override-css-variables  */
 .Toastify__toast {

tailwind.config.js

@@ -1,12 +1,243 @@
 /** @type {import('tailwindcss').Config} */
+const plugin = require('tailwindcss/plugin')
+
 module.exports = {
   content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  safelist: [
+    'text-3xs',
+    'text-3xs-caps',
+    'text-2xs',
+    'text-2xs-caps',
+    'text-xs-caps',
+    'text-xs',
+    'text-sm-caps',
+    'text-sm',
+    'text-lg-caps',
+    'text-lg',
+    'text-xl-caps',
+    'text-xl',
+    'text-2xl-caps',
+    'text-2xl',
+    'text-3xl-caps',
+    'text-3xl',
+    'text-4xl-caps',
+    'text-4xl',
+    'text-5xl-caps',
+    'text-5xl',
+  ],
   theme: {
     extend: {
+      animation: {
+        progress: 'spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite',
+      },
+      backgroundImage: {
+        mars: 'url(/bg.svg)',
+      },
+      backgroundSize: {
+        desktop: '100% auto',
+      },
+      borderRadius: {
+        '3xs': '3px',
+        '2xs': '4px',
+        xs: '5px',
+        sm: '8px',
+        base: '9px',
+        lg: '12px',
+        xl: '16px',
+        '2xl': '20px',
+        '3xl': '30px',
+        '4xl': '100px',
+      },
+      boxShadow: {
+        inset: 'inset 0px 2px 2px rgba(0, 0, 0, 0.25)',
+        overlay: '0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.2)',
+        tooltip:
+          '0 3px 4px rgba(0, 0, 0, 0.14), 0 3px 3px rgba(0, 0, 0, 0.12), 0 1px 8px rgba(0, 0, 0, 0.2)',
+      },
+      brightness: {
+        30: '.3',
+      },
       colors: {
-        'background-2': '#585A74',
+        accent: '#2c1b2f',
+        'accent-dark': '#341a2a',
+        'accent-inverted': '#345dff',
+        'accent-highlight': '#421f32',
+        atom: '#6f7390',
+        axlusdc: '#478edc',
+        body: '#562a3b',
+        'body-dark': '#141621',
+        grey: '#3a3c49',
+        'grey-dark': '#1a1c25',
+        'grey-highlight': '#4c4c4c',
+        'grey-light': '#bfbfbf',
+        'grey-medium': '#5f697a',
+        input: '#282a33',
+        loss: '#f96363',
+        mars: '#a03b45',
+        osmo: '#9f1ab9',
+        profit: '#41a4a9',
+        primary: '#14a693',
+        'primary-highlight': '#15bfa9',
+        'primary-highlight-10': '#20e7cd',
+        secondary: '#524bb1',
+        'secondary-dark': '#440b37',
+        'secondary-dark-10': '#70125b',
+        'secondary-highlight': '#6962cc',
+        'secondary-highlight-10': '#8e88d9',
+        'vote-against': '#eb9e49',
+        warning: '#c83333',
+      },
+      fontFamily: {
+        sans: ['Inter'],
+      },
+      fontSize: {
+        xs: ['11.85px', '16px'],
+        sm: ['13.33px', '20px'],
+        base: ['15px', '20px'],
+        lg: ['16.88px', '24px'],
+        xl: ['18.98px', '28px'],
+        '2xl': ['21.36px', '32px'],
+        '3xl': ['24.03px', '36px'],
+        '4xl': ['30.42px', '40px'],
+        '5xl': ['38.49px', '56px'],
+        '6xl': ['60.84px', '80px'],
+      },
+      fontWeight: {
+        light: 300,
+        normal: 400,
+        semibold: 600,
+        bold: 600,
+      },
+      hueRotate: {
+        '-82': '-82deg',
+      },
+      letterSpacing: {
+        normal: 0,
+        wide: '2px',
+        wider: '3px',
+        widest: '5px',
+      },
+      screens: {
+        sm: '480px',
+        md: '720px',
+        lg: '1024px',
+        xl: '1280px',
+        '2xl': '1920px',
+      },
+      transitionDuration: {
+        3000: '3000ms',
+      },
+      transitionProperty: {
+        background: 'filter, -webkit-filter',
       },
     },
   },
-  plugins: [],
+  plugins: [
+    require('tailwindcss-border-gradient-radius'),
+    plugin(function ({ addBase, addUtilities, theme }) {
+      addBase({
+        h1: { fontSize: '60.84px', lineHeight: '80px', fontWeight: theme('fontWeight.light') },
+        h2: { fontSize: '38.49px', lineHeight: '56px' },
+        h3: { fontSize: '30.42px', lineHeight: '40px' },
+        h4: { fontSize: '24.03px', lineHeight: '36px', fontWeight: theme('fontWeight.normal') },
+      }),
+        addUtilities({
+          '.gradient-atom': {
+            background: 'linear-gradient(to bottom, #2e3148, #6f7390)',
+          },
+          '.gradient-axlusdc': {
+            background: 'linear-gradient(to bottom, #1f5c9e, #478edc)',
+          },
+          '.gradient-card': {
+            background:
+              'linear-gradient(99.79deg, rgba(8, 11, 30, 0.79) 8.17%, rgba(52, 20, 33, 0.9) 94.54%)',
+          },
+          '.gradient-hatched': {
+            backgroundImage:
+              'linear-gradient(135deg,transparent 33.33%,#826d6b 33.33%,#826d6b 50%,transparent 50%,transparent 83.33%,#826d6b 83.33%,#826d6b 100%)',
+            backgroundSize: '5px 5px',
+          },
+          '.gradient-limit': {
+            background:
+              'linear-gradient(to right,#15bfa9 20.9%,#5e4bb1 49.68%,#382685 82.55%,#c83333 100%)',
+          },
+          '.gradient-mars': {
+            background: 'linear-gradient(to bottom, #a03b45, #c83333)',
+          },
+          '.gradient-osmo': {
+            background: 'linear-gradient(to bottom, #3a02e2, #e700ca)',
+          },
+          '.gradient-popover': {
+            background: 'linear-gradient(180deg, #fef4ed -2.1%, #ecdbe0 97.53%)',
+          },
+          '.gradient-tooltip': {
+            background:
+              'linear-gradient(77.47deg, rgba(20, 24, 57, 0.9) 11.58%, rgba(34, 16, 57, 0.9) 93.89%)',
+          },
+          '.text-3xs': { fontSize: '9.36px', lineHeight: '12px' },
+          '.text-3xs-caps': {
+            fontSize: '9.36px',
+            lineHeight: '12px',
+            textTransform: 'uppercase',
+            fontWeight: theme('fontWeight.semibold'),
+            letterSpacing: theme('letterSpacing.wide'),
+          },
+          '.text-2xs': { fontSize: '10.53px', lineHeight: '16px' },
+          '.text-2xs-caps': {
+            fontSize: '10.53px',
+            lineHeight: '16px',
+            textTransform: 'uppercase',
+            fontWeight: theme('fontWeight.semibold'),
+            letterSpacing: theme('letterSpacing.wide'),
+          },
+          '.text-xs-caps': {
+            fontSize: '11.85px',
+            lineHeight: '16px',
+            textTransform: 'uppercase',
+            fontWeight: theme('fontWeight.semibold'),
+            letterSpacing: theme('letterSpacing.wider'),
+          },
+          '.text-sm-caps': {
+            fontSize: '13.33px',
+            lineHeight: '20px',
+            textTransform: 'uppercase',
+            fontWeight: theme('fontWeight.semibold'),
+            letterSpacing: theme('letterSpacing.wider'),
+          },
+          '.text-lg-caps': {
+            fontSize: '16.88px',
+            lineHeight: '24px',
+            textTransform: 'uppercase',
+            fontWeight: theme('fontWeight.semibold'),
+            letterSpacing: theme('letterSpacing.wider'),
+          },
+          '.text-xl-caps': {
+            fontSize: '18.98px',
+            lineHeight: '28px',
+            textTransform: 'uppercase',
+            fontWeight: theme('fontWeight.light'),
+            letterSpacing: theme('letterSpacing.widest'),
+          },
+          '.text-2xl-caps': {
+            fontSize: '21.36px',
+            lineHeight: '32px',
+            textTransform: 'uppercase',
+            letterSpacing: theme('letterSpacing.wider'),
+          },
+          '.text-3xl-caps': {
+            fontSize: '24.03px',
+            lineHeight: '36px',
+            textTransform: 'uppercase',
+            letterSpacing: theme('letterSpacing.wider'),
+          },
+          '.text-4xl-caps': { fontSize: '30.42px', lineHeight: '40px', textTransform: 'uppercase' },
+          '.text-5xl-caps': {
+            fontSize: '38.49px',
+            lineHeight: '56px',
+            textTransform: 'uppercase',
+            letterSpacing: '9px',
+          },
+        })
+    }),
+  ],
 }

types/generated/mars-account-nft/MarsAccountNft.client.ts

@@ -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 { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
 import { Coin, StdFee } from '@cosmjs/amino'
+
 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 './MarsAccountNft.types'
 export interface MarsAccountNftReadOnlyInterface {
   contractAddress: string

types/generated/mars-account-nft/MarsAccountNft.message-composer.ts

@@ -9,27 +9,28 @@ import { Coin } from '@cosmjs/amino'
 import { MsgExecuteContractEncodeObject } from 'cosmwasm'
 import { MsgExecuteContract } from 'cosmjs-types/cosmwasm/wasm/v1/tx'
 import { toUtf8 } from '@cosmjs/encoding'
+
 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 './MarsAccountNft.types'
 export interface MarsAccountNftMessage {
   contractAddress: string

types/generated/mars-account-nft/MarsAccountNft.react-query.ts

@@ -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 { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
-import { StdFee, Coin } from '@cosmjs/amino'
+import { Coin, StdFee } from '@cosmjs/amino'
+
 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 './MarsAccountNft.types'
-import { MarsAccountNftQueryClient, MarsAccountNftClient } from './MarsAccountNft.client'
+import { MarsAccountNftClient, MarsAccountNftQueryClient } from './MarsAccountNft.client'
 export const marsAccountNftQueryKeys = {
   contract: [
     {

types/generated/mars-credit-manager/MarsCreditManager.client.ts

@@ -5,51 +5,52 @@
  * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
  */
 
-import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
 import { StdFee } from '@cosmjs/amino'
+
 import {
-  Uint128,
-  Decimal,
-  OracleBaseForString,
-  RedBankBaseForString,
-  SwapperBaseForString,
-  ZapperBaseForString,
-  InstantiateMsg,
-  VaultInstantiateConfig,
-  VaultConfig,
-  Coin,
-  VaultBaseForString,
-  ExecuteMsg,
   Action,
-  CallbackMsg,
   Addr,
-  ConfigUpdates,
+  ArrayOfCoin,
-  VaultBaseForAddr,
-  QueryMsg,
   ArrayOfCoinBalanceResponseItem,
-  CoinBalanceResponseItem,
-  ArrayOfSharesResponseItem,
-  SharesResponseItem,
   ArrayOfDebtShares,
-  DebtShares,
+  ArrayOfSharesResponseItem,
+  ArrayOfString,
+  ArrayOfVaultInstantiateConfig,
+  ArrayOfVaultPositionResponseItem,
   ArrayOfVaultWithBalance,
-  VaultWithBalance,
+  CallbackMsg,
-  VaultPositionAmount,
+  Coin,
+  CoinBalanceResponseItem,
+  ConfigResponse,
+  ConfigUpdates,
+  DebtAmount,
+  DebtShares,
+  Decimal,
+  ExecuteMsg,
+  HealthResponse,
+  InstantiateMsg,
+  LockingVaultAmount,
+  OracleBaseForString,
+  Positions,
+  QueryMsg,
+  RedBankBaseForString,
+  SharesResponseItem,
+  SwapperBaseForString,
+  Uint128,
+  UnlockingPositions,
   VaultAmount,
   VaultAmount1,
-  UnlockingPositions,
+  VaultBaseForAddr,
-  ArrayOfVaultPositionResponseItem,
+  VaultBaseForString,
-  VaultPositionResponseItem,
+  VaultConfig,
+  VaultInstantiateConfig,
   VaultPosition,
-  LockingVaultAmount,
+  VaultPositionAmount,
+  VaultPositionResponseItem,
   VaultUnlockingPosition,
-  ArrayOfString,
+  VaultWithBalance,
-  ConfigResponse,
+  ZapperBaseForString,
-  ArrayOfCoin,
-  HealthResponse,
-  Positions,
-  DebtAmount,
-  ArrayOfVaultInstantiateConfig,
 } from './MarsCreditManager.types'
 export interface MarsCreditManagerReadOnlyInterface {
   contractAddress: string

types/generated/mars-credit-manager/MarsCreditManager.message-composer.ts

@@ -8,49 +8,50 @@
 import { MsgExecuteContractEncodeObject } from 'cosmwasm'
 import { MsgExecuteContract } from 'cosmjs-types/cosmwasm/wasm/v1/tx'
 import { toUtf8 } from '@cosmjs/encoding'
+
 import {
-  Uint128,
-  Decimal,
-  OracleBaseForString,
-  RedBankBaseForString,
-  SwapperBaseForString,
-  ZapperBaseForString,
-  InstantiateMsg,
-  VaultInstantiateConfig,
-  VaultConfig,
-  Coin,
-  VaultBaseForString,
-  ExecuteMsg,
   Action,
-  CallbackMsg,
   Addr,
-  ConfigUpdates,
+  ArrayOfCoin,
-  VaultBaseForAddr,
-  QueryMsg,
   ArrayOfCoinBalanceResponseItem,
-  CoinBalanceResponseItem,
-  ArrayOfSharesResponseItem,
-  SharesResponseItem,
   ArrayOfDebtShares,
-  DebtShares,
+  ArrayOfSharesResponseItem,
+  ArrayOfString,
+  ArrayOfVaultInstantiateConfig,
+  ArrayOfVaultPositionResponseItem,
   ArrayOfVaultWithBalance,
-  VaultWithBalance,
+  CallbackMsg,
-  VaultPositionAmount,
+  Coin,
+  CoinBalanceResponseItem,
+  ConfigResponse,
+  ConfigUpdates,
+  DebtAmount,
+  DebtShares,
+  Decimal,
+  ExecuteMsg,
+  HealthResponse,
+  InstantiateMsg,
+  LockingVaultAmount,
+  OracleBaseForString,
+  Positions,
+  QueryMsg,
+  RedBankBaseForString,
+  SharesResponseItem,
+  SwapperBaseForString,
+  Uint128,
+  UnlockingPositions,
   VaultAmount,
   VaultAmount1,
-  UnlockingPositions,
+  VaultBaseForAddr,
-  ArrayOfVaultPositionResponseItem,
+  VaultBaseForString,
-  VaultPositionResponseItem,
+  VaultConfig,
+  VaultInstantiateConfig,
   VaultPosition,
-  LockingVaultAmount,
+  VaultPositionAmount,
+  VaultPositionResponseItem,
   VaultUnlockingPosition,
-  ArrayOfString,
+  VaultWithBalance,
-  ConfigResponse,
+  ZapperBaseForString,
-  ArrayOfCoin,
-  HealthResponse,
-  Positions,
-  DebtAmount,
-  ArrayOfVaultInstantiateConfig,
 } from './MarsCreditManager.types'
 export interface MarsCreditManagerMessage {
   contractAddress: string

types/generated/mars-credit-manager/MarsCreditManager.react-query.ts

@@ -5,54 +5,55 @@
  * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
  */
 
-import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
 import { StdFee } from '@cosmjs/amino'
+
 import {
-  Uint128,
-  Decimal,
-  OracleBaseForString,
-  RedBankBaseForString,
-  SwapperBaseForString,
-  ZapperBaseForString,
-  InstantiateMsg,
-  VaultInstantiateConfig,
-  VaultConfig,
-  Coin,
-  VaultBaseForString,
-  ExecuteMsg,
   Action,
-  CallbackMsg,
   Addr,
-  ConfigUpdates,
+  ArrayOfCoin,
-  VaultBaseForAddr,
-  QueryMsg,
   ArrayOfCoinBalanceResponseItem,
-  CoinBalanceResponseItem,
-  ArrayOfSharesResponseItem,
-  SharesResponseItem,
   ArrayOfDebtShares,
-  DebtShares,
+  ArrayOfSharesResponseItem,
+  ArrayOfString,
+  ArrayOfVaultInstantiateConfig,
+  ArrayOfVaultPositionResponseItem,
   ArrayOfVaultWithBalance,
-  VaultWithBalance,
+  CallbackMsg,
-  VaultPositionAmount,
+  Coin,
+  CoinBalanceResponseItem,
+  ConfigResponse,
+  ConfigUpdates,
+  DebtAmount,
+  DebtShares,
+  Decimal,
+  ExecuteMsg,
+  HealthResponse,
+  InstantiateMsg,
+  LockingVaultAmount,
+  OracleBaseForString,
+  Positions,
+  QueryMsg,
+  RedBankBaseForString,
+  SharesResponseItem,
+  SwapperBaseForString,
+  Uint128,
+  UnlockingPositions,
   VaultAmount,
   VaultAmount1,
-  UnlockingPositions,
+  VaultBaseForAddr,
-  ArrayOfVaultPositionResponseItem,
+  VaultBaseForString,
-  VaultPositionResponseItem,
+  VaultConfig,
+  VaultInstantiateConfig,
   VaultPosition,
-  LockingVaultAmount,
+  VaultPositionAmount,
+  VaultPositionResponseItem,
   VaultUnlockingPosition,
-  ArrayOfString,
+  VaultWithBalance,
-  ConfigResponse,
+  ZapperBaseForString,
-  ArrayOfCoin,
-  HealthResponse,
-  Positions,
-  DebtAmount,
-  ArrayOfVaultInstantiateConfig,
 } from './MarsCreditManager.types'
-import { MarsCreditManagerQueryClient, MarsCreditManagerClient } from './MarsCreditManager.client'
+import { MarsCreditManagerClient, MarsCreditManagerQueryClient } from './MarsCreditManager.client'
 export const marsCreditManagerQueryKeys = {
   contract: [
     {

types/generated/mars-mock-oracle/MarsMockOracle.client.ts

@@ -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 { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
 import { Coin, StdFee } from '@cosmjs/amino'
+
 import {
-  Decimal,
-  InstantiateMsg,
   CoinPrice,
+  Decimal,
   ExecuteMsg,
-  QueryMsg,
+  InstantiateMsg,
   PriceResponse,
+  QueryMsg,
 } from './MarsMockOracle.types'
 export interface MarsMockOracleReadOnlyInterface {
   contractAddress: string

types/generated/mars-mock-oracle/MarsMockOracle.message-composer.ts

@@ -9,13 +9,14 @@ import { Coin } from '@cosmjs/amino'
 import { MsgExecuteContractEncodeObject } from 'cosmwasm'
 import { MsgExecuteContract } from 'cosmjs-types/cosmwasm/wasm/v1/tx'
 import { toUtf8 } from '@cosmjs/encoding'
+
 import {
-  Decimal,
-  InstantiateMsg,
   CoinPrice,
+  Decimal,
   ExecuteMsg,
-  QueryMsg,
+  InstantiateMsg,
   PriceResponse,
+  QueryMsg,
 } from './MarsMockOracle.types'
 export interface MarsMockOracleMessage {
   contractAddress: string

types/generated/mars-mock-oracle/MarsMockOracle.react-query.ts

@@ -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 { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
-import { StdFee, Coin } from '@cosmjs/amino'
+import { Coin, StdFee } from '@cosmjs/amino'
+
 import {
-  Decimal,
-  InstantiateMsg,
   CoinPrice,
+  Decimal,
   ExecuteMsg,
-  QueryMsg,
+  InstantiateMsg,
   PriceResponse,
+  QueryMsg,
 } from './MarsMockOracle.types'
-import { MarsMockOracleQueryClient, MarsMockOracleClient } from './MarsMockOracle.client'
+import { MarsMockOracleClient, MarsMockOracleQueryClient } from './MarsMockOracle.client'
 export const marsMockOracleQueryKeys = {
   contract: [
     {

types/generated/mars-mock-red-bank/MarsMockRedBank.client.ts

@@ -5,27 +5,28 @@
  * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
  */
 
-import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
 import { Coin, StdFee } from '@cosmjs/amino'
+
 import {
-  Decimal,
-  InstantiateMsg,
-  CoinMarketInfo,
-  ExecuteMsg,
-  Uint128,
-  CreateOrUpdateConfig,
-  InitOrUpdateAssetParams,
-  InterestRateModel,
-  QueryMsg,
-  ConfigForString,
-  Market,
   ArrayOfMarket,
-  UncollateralizedLoanLimitResponse,
   ArrayOfUncollateralizedLoanLimitResponse,
-  UserCollateralResponse,
   ArrayOfUserCollateralResponse,
-  UserDebtResponse,
   ArrayOfUserDebtResponse,
+  CoinMarketInfo,
+  ConfigForString,
+  CreateOrUpdateConfig,
+  Decimal,
+  ExecuteMsg,
+  InitOrUpdateAssetParams,
+  InstantiateMsg,
+  InterestRateModel,
+  Market,
+  QueryMsg,
+  Uint128,
+  UncollateralizedLoanLimitResponse,
+  UserCollateralResponse,
+  UserDebtResponse,
   UserHealthStatus,
   UserPositionResponse,
 } from './MarsMockRedBank.types'

types/generated/mars-mock-red-bank/MarsMockRedBank.message-composer.ts

@@ -9,25 +9,26 @@ import { Coin } from '@cosmjs/amino'
 import { MsgExecuteContractEncodeObject } from 'cosmwasm'
 import { MsgExecuteContract } from 'cosmjs-types/cosmwasm/wasm/v1/tx'
 import { toUtf8 } from '@cosmjs/encoding'
+
 import {
-  Decimal,
-  InstantiateMsg,
-  CoinMarketInfo,
-  ExecuteMsg,
-  Uint128,
-  CreateOrUpdateConfig,
-  InitOrUpdateAssetParams,
-  InterestRateModel,
-  QueryMsg,
-  ConfigForString,
-  Market,
   ArrayOfMarket,
-  UncollateralizedLoanLimitResponse,
   ArrayOfUncollateralizedLoanLimitResponse,
-  UserCollateralResponse,
   ArrayOfUserCollateralResponse,
-  UserDebtResponse,
   ArrayOfUserDebtResponse,
+  CoinMarketInfo,
+  ConfigForString,
+  CreateOrUpdateConfig,
+  Decimal,
+  ExecuteMsg,
+  InitOrUpdateAssetParams,
+  InstantiateMsg,
+  InterestRateModel,
+  Market,
+  QueryMsg,
+  Uint128,
+  UncollateralizedLoanLimitResponse,
+  UserCollateralResponse,
+  UserDebtResponse,
   UserHealthStatus,
   UserPositionResponse,
 } from './MarsMockRedBank.types'

types/generated/mars-mock-red-bank/MarsMockRedBank.react-query.ts

@@ -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 { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
-import { StdFee, Coin } from '@cosmjs/amino'
+import { Coin, StdFee } from '@cosmjs/amino'
+
 import {
-  Decimal,
-  InstantiateMsg,
-  CoinMarketInfo,
-  ExecuteMsg,
-  Uint128,
-  CreateOrUpdateConfig,
-  InitOrUpdateAssetParams,
-  InterestRateModel,
-  QueryMsg,
-  ConfigForString,
-  Market,
   ArrayOfMarket,
-  UncollateralizedLoanLimitResponse,
   ArrayOfUncollateralizedLoanLimitResponse,
-  UserCollateralResponse,
   ArrayOfUserCollateralResponse,
-  UserDebtResponse,
   ArrayOfUserDebtResponse,
+  CoinMarketInfo,
+  ConfigForString,
+  CreateOrUpdateConfig,
+  Decimal,
+  ExecuteMsg,
+  InitOrUpdateAssetParams,
+  InstantiateMsg,
+  InterestRateModel,
+  Market,
+  QueryMsg,
+  Uint128,
+  UncollateralizedLoanLimitResponse,
+  UserCollateralResponse,
+  UserDebtResponse,
   UserHealthStatus,
   UserPositionResponse,
 } from './MarsMockRedBank.types'
-import { MarsMockRedBankQueryClient, MarsMockRedBankClient } from './MarsMockRedBank.client'
+import { MarsMockRedBankClient, MarsMockRedBankQueryClient } from './MarsMockRedBank.client'
 export const marsMockRedBankQueryKeys = {
   contract: [
     {

types/generated/mars-mock-vault/MarsMockVault.client.ts

@@ -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 { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
 import { Coin, StdFee } from '@cosmjs/amino'
+
 import {
   Duration,
-  OracleBaseForString,
-  InstantiateMsg,
-  ExecuteMsg,
-  Uint128,
-  ExtensionExecuteMsg,
-  LockupExecuteMsg,
-  ForceUnlockExecuteMsg,
-  QueryMsg,
-  ExtensionQueryMsg,
-  LockupQueryMsg,
-  VaultInfo,
   Empty,
+  ExecuteMsg,
+  ExtensionExecuteMsg,
+  ExtensionQueryMsg,
+  ForceUnlockExecuteMsg,
+  InstantiateMsg,
+  LockupExecuteMsg,
+  LockupQueryMsg,
+  OracleBaseForString,
+  QueryMsg,
+  Uint128,
+  VaultInfo,
   VaultStandardInfo,
 } from './MarsMockVault.types'
 export interface MarsMockVaultReadOnlyInterface {

types/generated/mars-mock-vault/MarsMockVault.message-composer.ts

@@ -9,20 +9,21 @@ import { Coin } from '@cosmjs/amino'
 import { MsgExecuteContractEncodeObject } from 'cosmwasm'
 import { MsgExecuteContract } from 'cosmjs-types/cosmwasm/wasm/v1/tx'
 import { toUtf8 } from '@cosmjs/encoding'
+
 import {
   Duration,
-  OracleBaseForString,
-  InstantiateMsg,
-  ExecuteMsg,
-  Uint128,
-  ExtensionExecuteMsg,
-  LockupExecuteMsg,
-  ForceUnlockExecuteMsg,
-  QueryMsg,
-  ExtensionQueryMsg,
-  LockupQueryMsg,
-  VaultInfo,
   Empty,
+  ExecuteMsg,
+  ExtensionExecuteMsg,
+  ExtensionQueryMsg,
+  ForceUnlockExecuteMsg,
+  InstantiateMsg,
+  LockupExecuteMsg,
+  LockupQueryMsg,
+  OracleBaseForString,
+  QueryMsg,
+  Uint128,
+  VaultInfo,
   VaultStandardInfo,
 } from './MarsMockVault.types'
 export interface MarsMockVaultMessage {

types/generated/mars-mock-vault/MarsMockVault.react-query.ts

@@ -5,26 +5,27 @@
  * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
  */
 
-import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
-import { StdFee, Coin } from '@cosmjs/amino'
+import { Coin, StdFee } from '@cosmjs/amino'
+
 import {
   Duration,
-  OracleBaseForString,
-  InstantiateMsg,
-  ExecuteMsg,
-  Uint128,
-  ExtensionExecuteMsg,
-  LockupExecuteMsg,
-  ForceUnlockExecuteMsg,
-  QueryMsg,
-  ExtensionQueryMsg,
-  LockupQueryMsg,
-  VaultInfo,
   Empty,
+  ExecuteMsg,
+  ExtensionExecuteMsg,
+  ExtensionQueryMsg,
+  ForceUnlockExecuteMsg,
+  InstantiateMsg,
+  LockupExecuteMsg,
+  LockupQueryMsg,
+  OracleBaseForString,
+  QueryMsg,
+  Uint128,
+  VaultInfo,
   VaultStandardInfo,
 } from './MarsMockVault.types'
-import { MarsMockVaultQueryClient, MarsMockVaultClient } from './MarsMockVault.client'
+import { MarsMockVaultClient, MarsMockVaultQueryClient } from './MarsMockVault.client'
 export const marsMockVaultQueryKeys = {
   contract: [
     {

types/generated/mars-mock-zapper/MarsMockZapper.client.ts

@@ -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 { CosmWasmClient, ExecuteResult, SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
 import { StdFee } from '@cosmjs/amino'
+
 import {
-  OracleBaseForString,
+  ArrayOfCoin,
+  Coin,
+  ExecuteMsg,
   InstantiateMsg,
   LpConfig,
-  ExecuteMsg,
+  OracleBaseForString,
-  Uint128,
   QueryMsg,
-  Coin,
+  Uint128,
-  ArrayOfCoin,
 } from './MarsMockZapper.types'
 export interface MarsMockZapperReadOnlyInterface {
   contractAddress: string

types/generated/mars-mock-zapper/MarsMockZapper.message-composer.ts

@@ -8,15 +8,16 @@
 import { MsgExecuteContractEncodeObject } from 'cosmwasm'
 import { MsgExecuteContract } from 'cosmjs-types/cosmwasm/wasm/v1/tx'
 import { toUtf8 } from '@cosmjs/encoding'
+
 import {
-  OracleBaseForString,
+  ArrayOfCoin,
+  Coin,
+  ExecuteMsg,
   InstantiateMsg,
   LpConfig,
-  ExecuteMsg,
+  OracleBaseForString,
-  Uint128,
   QueryMsg,
-  Coin,
+  Uint128,
-  ArrayOfCoin,
 } from './MarsMockZapper.types'
 export interface MarsMockZapperMessage {
   contractAddress: string