Small adjustments (#115)

* fix: added current SCs

* fix: fixed disabled buttons

* chore: updated all packages

* tidy: cleanup

---------

Co-authored-by: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com>

.env.example

@@ -5,10 +5,10 @@ NEXT_PUBLIC_GQL=https://testnet-osmosis-node.marsprotocol.io/XF32UOOU55CX/osmosi
 NEXT_PUBLIC_REST=https://testnet-osmosis-node.marsprotocol.io/XF32UOOU55CX/osmosis-lcd-front/
 NEXT_PUBLIC_SWAP=https://testnet.osmosis.zone
 NEXT_PUBLIC_WALLETS=keplr,cosmostation
-NEXT_PUBLIC_ACCOUNT_NFT=osmo1l8c3g6zy7kjhuh8d2kqyvxkw0myn4puxv0tzcdf9nwxd386r9l7s3vlhzq
+NEXT_PUBLIC_ACCOUNT_NFT=osmo1xpgx06z2c6zjk49feq75swgv78m6dvht6wramu2gltzjz5j959nq4hggxz
 NEXT_PUBLIC_ORACLE=osmo1dqz2u3c8rs5e7w5fnchsr2mpzzsxew69wtdy0aq4jsd76w7upmsstqe0s8
-NEXT_PUBLIC_RED_BANK=osmo1g30recyv8pfy3qd4qn3dn7plc0rn5z68y5gn32j39e96tjhthzxsw3uvvu
+NEXT_PUBLIC_RED_BANK=osmo1t0dl6r27phqetfu0geaxrng0u9zn8qgrdwztapt5xr32adtwptaq6vwg36
-NEXT_PUBLIC_CREDIT_MANAGER=osmo12hgn4jec4tftahm7spf7c2aqsqrxzzk50hkq60e89atumyu0zvys7vzxdc
+NEXT_PUBLIC_CREDIT_MANAGER=osmo169xhpftsee275j3cjudj6qfzdpfp8sdllgeeprud4ynwr4sj6m4qel2ezp
 NEXT_PUBLIC_INCENTIVES=osmo1zxs8fry3m8j94pqg7h4muunyx86en27cl0xgk76fc839xg2qnn6qtpjs48
 NEXT_PUBLIC_ZAPPER=osmo1ua8dwc9v8qjh7n3qf8kg6xvrwjm5yu9xxln7yjvgmrvfzaxvzsuqfcdnjq
 NEXT_PUBLIC_SWAPPER=osmo1uj6r9tu440wwp2mhtagh48yvmeyeaqt2xa7kdnlhyrqcuthlj4ss7ghg6n

package.json

@@ -11,24 +11,20 @@
     "start": "next start"
   },
   "dependencies": {
-    "@cosmjs/cosmwasm-stargate": "^0.29.5",
+    "@cosmjs/cosmwasm-stargate": "^0.30.0",
-    "@cosmjs/stargate": "^0.29.5",
+    "@cosmjs/stargate": "^0.30.0",
-    "@headlessui/react": "^1.7.13",
     "@marsprotocol/wallet-connector": "^1.5.2",
-    "@radix-ui/react-slider": "^1.1.0",
+    "@radix-ui/react-slider": "^1.1.1",
     "@sentry/nextjs": "^7.43.0",
     "@tanstack/react-query": "^4.26.1",
-    "@tanstack/react-query-devtools": "^4.26.1",
     "@tanstack/react-table": "^8.7.9",
     "@tippyjs/react": "^4.2.6",
-    "bech32": "^2.0.0",
     "bignumber.js": "^9.1.1",
     "classnames": "^2.3.2",
-    "ethereumjs-util": "^7.1.5",
     "graphql": "^16.6.0",
     "graphql-request": "^5.2.0",
     "moment": "^2.29.4",
-    "next": "^13.2.3",
+    "next": "^13.2.4",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
@@ -37,10 +33,8 @@
     "react-toastify": "^9.1.1",
     "react-use-clipboard": "^1.0.9",
     "recharts": "^2.4.3",
-    "sass": "^1.58.3",
     "swr": "^2.1.0",
     "tailwind-scrollbar-hide": "^1.1.7",
-    "use-local-storage-state": "^18.2.1",
     "zustand": "^4.3.6"
   },
   "devDependencies": {

src/app/layout.tsx

@@ -8,7 +8,7 @@ import DesktopNavigation from 'components/Navigation/DesktopNavigation'
 import Toaster from 'components/Toaster'
 import { WalletConnectProvider } from 'components/Wallet/WalletConnectProvider'
 import 'react-toastify/dist/ReactToastify.min.css'
-import 'styles/globals.scss'
+import 'styles/globals.css'
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (

src/components/Account/FundAccountModal.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Switch } from '@headlessui/react'
 import { useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
 
@@ -9,6 +8,7 @@ import { CircularProgress } from 'components/CircularProgress'
 import { MarsProtocol } from 'components/Icons'
 import { Modal } from 'components/Modal'
 import { Slider } from 'components/Slider'
+import Switch from 'components/Switch'
 import { Text } from 'components/Text'
 import useParams from 'hooks/useParams'
 import useStore from 'store'
@@ -203,19 +203,7 @@ export const FundAccountModal = () => {
               </Text>
             </div>
 
-            <Switch
+            <Switch name='lendAssets' checked={lendAssets} onChange={setLendAssets} />
-              checked={lendAssets}
-              onChange={setLendAssets}
-              className={`${
-                lendAssets ? 'bg-blue-600' : 'bg-gray-400'
-              } relative inline-flex h-6 w-11 items-center rounded-full`}
-            >
-              <span
-                className={`${
-                  lendAssets ? 'translate-x-6' : 'translate-x-1'
-                } inline-block h-4 w-4 transform rounded-full bg-white`}
-              />
-            </Switch>
           </div>
           <Button
             className='mt-auto w-full'

src/components/Account/WithdrawModal.tsx

@@ -1,4 +1,3 @@
-import { Switch } from '@headlessui/react'
 import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
 import React, { useEffect, useMemo, useState } from 'react'
@@ -21,6 +20,7 @@ import useStore from 'store'
 import { getBaseAsset, getMarketAssets } from 'utils/assets'
 import { convertFromGwei, formatLeverage, formatValue } from 'utils/formatters'
 import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
+import Switch from 'components/Switch'
 
 export const WithdrawModal = () => {
   // ---------------
@@ -228,20 +228,7 @@ export const WithdrawModal = () => {
                 </Text>
               </div>
 
-              <Switch
+              <Switch name='borrowAssets' checked={isBorrowEnabled} onChange={handleBorrowChange} />
-                checked={isBorrowEnabled}
-                onChange={handleBorrowChange}
-                className={classNames(
-                  'relative inline-flex h-6 w-11 items-center rounded-full',
-                  isBorrowEnabled ? 'bg-blue-600' : 'bg-gray-400',
-                )}
-              >
-                <span
-                  className={`${
-                    isBorrowEnabled ? 'translate-x-6' : 'translate-x-1'
-                  } inline-block h-4 w-4 transform rounded-full bg-white`}
-                />
-              </Switch>
             </div>
             <div className='flex p-6'>
               <Button className='mt-auto w-full' onClick={() => mutate()}>

src/components/Borrow/Borrowings.tsx

@@ -4,7 +4,7 @@ import { Card } from 'components/Card'
 import { getAccountDebts, getBorrowData } from 'utils/api'
 import { getMarketAssets } from 'utils/assets'
 
-import { BorrowTable } from './BorrowTable'
+import { BorrowTable } from 'components/Borrow/BorrowTable'
 
 interface Props extends PageProps {
   type: 'active' | 'available'

src/components/Button.tsx

@@ -157,7 +157,7 @@ export const Button = React.forwardRef(function Button(
       ref={ref as LegacyRef<HTMLButtonElement>}
       onClick={disabled ? () => {} : onClick}
     >
-      {icon && !isDisabled && (
+      {icon && !showProgressIndicator && (
         <span
           className={classNames(
             'flex items-center justify-center',
@@ -168,9 +168,9 @@ export const Button = React.forwardRef(function Button(
           {icon}
         </span>
       )}
-      {text && !children && !isDisabled && <span>{text}</span>}
+      {text && !children && !showProgressIndicator && <span>{text}</span>}
-      {children && !isDisabled && children}
+      {children && !showProgressIndicator && children}
-      {hasSubmenu && !isDisabled && (
+      {hasSubmenu && !showProgressIndicator && (
         <span className='ml-2 inline-block w-2.5'>
           <ChevronDown />
         </span>

src/components/RepayModal.tsx

@@ -1,195 +0,0 @@
-import { Dialog, 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 { Button } from 'components/Button'
-import { Card } from 'components/Card'
-import { CircularProgress } from 'components/CircularProgress'
-import { Slider } from 'components/Slider'
-import { useRepayFunds } from 'hooks/mutations/useRepayFunds'
-import { useAllBalances } from 'hooks/queries/useAllBalances'
-import { useCreditAccountPositions } from 'hooks/queries/useCreditAccountPositions'
-import { useTokenPrices } from 'hooks/queries/useTokenPrices'
-import useStore from 'store'
-import { getMarketAssets } from 'utils/assets'
-import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
-
-// 0.001% buffer / slippage to avoid repay action from not fully repaying the debt amount
-const REPAY_BUFFER = 1.00001
-
-type Props = {
-  show: boolean
-  onClose: () => void
-  tokenDenom: string
-}
-
-export const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
-  const [amount, setAmount] = useState(0)
-
-  const selectedAccount = useStore((s) => s.selectedAccount)
-  const { data: positionsData } = useCreditAccountPositions(selectedAccount ?? '')
-  const marketAssets = getMarketAssets()
-  const formatCurrency = useStore((s) => s.formatCurrency)
-
-  const tokenSymbol = getTokenSymbol(tokenDenom, marketAssets)
-
-  const maxRepayAmount = useMemo(() => {
-    const tokenDebtAmount =
-      positionsData?.debts.find((coin) => coin.denom === tokenDenom)?.amount ?? 0
-
-    return BigNumber(tokenDebtAmount)
-      .times(REPAY_BUFFER)
-      .decimalPlaces(0)
-      .div(10 ** getTokenDecimals(tokenDenom, marketAssets))
-      .toNumber()
-  }, [positionsData, tokenDenom, marketAssets])
-
-  const { mutate, isLoading } = useRepayFunds(
-    BigNumber(amount)
-      .times(10 ** getTokenDecimals(tokenDenom, marketAssets))
-      .toNumber(),
-    tokenDenom,
-    {
-      onSuccess: () => {
-        onClose()
-        useStore.setState({
-          toast: { message: `${amount} ${tokenSymbol} successfully repaid` },
-        })
-      },
-    },
-  )
-
-  const { data: tokenPrices } = useTokenPrices()
-  const { data: balancesData } = useAllBalances()
-
-  const handleSubmit = () => {
-    mutate()
-  }
-
-  const walletAmount = useMemo(() => {
-    return BigNumber(balancesData?.find((balance) => balance.denom === tokenDenom)?.amount ?? 0)
-      .div(10 ** getTokenDecimals(tokenDenom, marketAssets))
-      .toNumber()
-  }, [balancesData, tokenDenom, marketAssets])
-
-  const tokenPrice = tokenPrices?.[tokenDenom] ?? 0
-
-  const maxValue = walletAmount > maxRepayAmount ? maxRepayAmount : walletAmount
-  const percentageValue = isNaN(amount) ? 0 : (amount * 100) / maxValue
-
-  const handleValueChange = (value: number) => {
-    if (value > maxValue) {
-      setAmount(maxValue)
-      return
-    }
-
-    setAmount(value)
-  }
-
-  return (
-    <Transition appear show={show} as={React.Fragment}>
-      <Dialog as='div' className='relative z-10' onClose={onClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter='ease-out duration-300'
-          enterFrom='opacity-0'
-          enterTo='opacity-100'
-          leave='ease-in duration-200'
-          leaveFrom='opacity-100'
-          leaveTo='opacity-0'
-        >
-          <div className='fixed inset-0 bg-black bg-opacity-80' />
-        </Transition.Child>
-
-        <div className='fixed inset-0 overflow-y-auto'>
-          <div className='flex min-h-full items-center justify-center p-4'>
-            <Transition.Child
-              as={React.Fragment}
-              enter='ease-out duration-300'
-              enterFrom='opacity-0 scale-95'
-              enterTo='opacity-100 scale-100'
-              leave='ease-in duration-200'
-              leaveFrom='opacity-100 scale-100'
-              leaveTo='opacity-0 scale-95'
-            >
-              <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'>
-                    <CircularProgress />
-                  </div>
-                )}
-
-                <div className='flex flex-1 flex-col items-start justify-between bg-[#4A4C60] p-6'>
-                  <div>
-                    <p className='text-bold mb-3 text-xs uppercase text-white/50'>Repay</p>
-                    <h4 className='mb-4 text-xl leading-8'>
-                      Repay borrowed amounts to reduce risk.
-                    </h4>
-                  </div>
-                  <Image src='/logo.svg' alt='mars' width={50} height={50} />
-                </div>
-
-                <div className='flex flex-1 flex-col p-4'>
-                  <Dialog.Title as='h3' className='mb-4 text-center font-medium'>
-                    Repay {tokenSymbol}
-                  </Dialog.Title>
-                  <div className='mb-4 flex flex-col gap-2 text-sm'>
-                    <Card>
-                      <p className='mb-7'>
-                        In wallet: {walletAmount.toLocaleString()} {tokenSymbol}
-                      </p>
-
-                      <div className='mb-7'>
-                        <p className='mb-2 font-semibold uppercase tracking-widest'>Amount</p>
-                        <NumericFormat
-                          className='mb-2 h-[32px] w-full rounded-lg border border-black/50 bg-transparent px-2'
-                          value={amount}
-                          placeholder='0'
-                          allowNegative={false}
-                          onValueChange={(v) => handleValueChange(v.floatValue || 0)}
-                          suffix={` ${tokenSymbol}`}
-                          decimalScale={getTokenDecimals(tokenDenom, marketAssets)}
-                        />
-                        <div className='flex justify-between text-xs tracking-widest'>
-                          <div>
-                            1 {tokenSymbol} = {formatCurrency({ denom: tokenDenom, amount: '1' })}
-                          </div>
-                          <div>
-                            {formatCurrency({ denom: tokenDenom, amount: amount.toString() })}
-                          </div>
-                        </div>
-                      </div>
-
-                      <Slider
-                        className='mb-6'
-                        value={percentageValue}
-                        onChange={(value) => {
-                          const decimal = value[0] / 100
-                          const tokenDecimals = getTokenDecimals(tokenDenom, marketAssets)
-                          // limit decimal precision based on token contract decimals
-                          const newAmount = Number((decimal * maxValue).toFixed(tokenDecimals))
-
-                          setAmount(newAmount)
-                        }}
-                        onMaxClick={() => setAmount(maxValue)}
-                      />
-                    </Card>
-                  </div>
-                  <Button
-                    className='mt-auto w-full'
-                    onClick={handleSubmit}
-                    disabled={amount === 0 || !amount}
-                  >
-                    Repay
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  )
-}

src/components/Switch.tsx

@@ -0,0 +1,33 @@
+import classNames from 'classnames'
+
+interface Props {
+  name: string
+  checked: boolean
+  onChange: (checked: boolean) => void
+  className?: string
+}
+
+export default function Toggle(props: Props) {
+  return (
+    <div className={classNames('relative', props.className)}>
+      <input
+        type='checkbox'
+        id={props.name}
+        name={props.name}
+        className={classNames('peer hidden')}
+        checked={props.checked}
+        onChange={(e) => props.onChange(e.target.checked)}
+      />
+      <label
+        htmlFor={props.name}
+        className={classNames(
+          'flex cursor-pointer items-center justify-between',
+          'relative h-5 w-10 rounded-full bg-white/20 shadow-sm',
+          'before:content-[" "] before:absolute before:left-[1px] before:top-[1px]',
+          'before:z-1 before:h-4.5 before:w-4.5 before:rounded-full before:bg-white before:transition-transform',
+          'peer-checked:gradient-primary-to-secondary peer-checked:before:translate-x-5',
+        )}
+      ></label>
+    </div>
+  )
+}

src/components/Trade/TradeActionModule.tsx

@@ -1,15 +1,12 @@
 'use client'
 
-import { Switch } from '@headlessui/react'
 import BigNumber from 'bignumber.js'
 import React, { useEffect, useMemo, useState } from 'react'
-import { toast } from 'react-toastify'
 
-import { ArrowsUpDown } from 'components/Icons'
-import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
-import { Slider } from 'components/Slider'
 import { Button } from 'components/Button'
 import { CircularProgress } from 'components/CircularProgress'
+import { ArrowsUpDown } from 'components/Icons'
+import { Slider } from 'components/Slider'
 import { useCalculateMaxTradeAmount } from 'hooks/data/useCalculateMaxTradeAmount'
 import { useTradeAsset } from 'hooks/mutations/useTradeAsset'
 import { useAllBalances } from 'hooks/queries/useAllBalances'
@@ -17,8 +14,10 @@ import { useAllowedCoins } from 'hooks/queries/useAllowedCoins'
 import { useCreditAccountPositions } from 'hooks/queries/useCreditAccountPositions'
 import { useMarkets } from 'hooks/queries/useMarkets'
 import { useTokenPrices } from 'hooks/queries/useTokenPrices'
-import { getMarketAssets } from 'utils/assets'
 import useStore from 'store'
+import { getMarketAssets } from 'utils/assets'
+import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
+import Switch from 'components/Switch'
 
 enum FundingMode {
   Account = 'Account',
@@ -295,6 +294,7 @@ export const TradeActionModule = () => {
         <div className='mb-4 flex items-center'>
           <p className='mr-2'>Margin</p>
           <Switch
+            name='marginEnabled'
             checked={isMarginEnabled}
             onChange={(value: boolean) => {
               // reset amounts only if margin is turned off
@@ -302,16 +302,7 @@ export const TradeActionModule = () => {
 
               setIsMarginEnabled(value)
             }}
-            className={`${
+          />
-              isMarginEnabled ? 'bg-[#524BB1]' : 'bg-gray-400'
-            } relative inline-flex h-4 w-8 items-center rounded-full`}
-          >
-            <span
-              className={`${
-                isMarginEnabled ? 'translate-x-4' : ''
-              } inline-block h-4 w-4 transform rounded-full bg-white`}
-            />
-          </Switch>
         </div>
         <div className='mb-1 flex justify-between'>
           <p>Borrow</p>

tailwind.config.js

@@ -5,6 +5,7 @@ module.exports = {
   content: ['./src/app/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
   safelist: [
     'h-2',
+    'h-4.5',
     'h-15',
     'text-3xs',
     'text-3xs-caps',
@@ -29,6 +30,7 @@ module.exports = {
     'text-5xl-caps',
     'text-5xl',
     'w-2',
+    'w-4.5',
     'w-15',
   ],
   theme: {
@@ -121,6 +123,7 @@ module.exports = {
         bold: 600,
       },
       height: {
+        4.5: '18px',
         15: '60px',
       },
       hueRotate: {
@@ -172,6 +175,7 @@ module.exports = {
         background: 'filter, -webkit-filter',
       },
       width: {
+        4.5: '18px',
         15: '60px',
         30: '120px',
         35: '140px',

yarn.lock

@@ -1688,13 +1688,6 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.2.tgz#6fc464307cbe3c8ca5064549b806360d84457b04"
   integrity sha512-9anpBMM9mEgZN4wr2v8wHJI2/u5TnnggewRN6OlvXTTnuVyoY19X6rOv9XTqKRw6dcGKwZsBi8n0kDE2I5i4VA==
 
-"@headlessui/react@^1.7.13":
-  version "1.7.13"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.13.tgz#fd150b394954e9f1d86ed2340cffd1217d6e7628"
-  integrity sha512-9n+EQKRtD9266xIHXdY5MfiXPDfYwl7zBM7KOx2Ae3Gdgxy8QML1FkCMjq6AsOf0l6N9uvI4HcFtuFlenaldKg==
-  dependencies:
-    client-only "^0.0.1"
-
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
@@ -2701,27 +2694,11 @@
   dependencies:
     tslib "^2.4.0"
 
-"@tanstack/match-sorter-utils@^8.7.0":
-  version "8.7.6"
-  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.7.6.tgz#ccf54a37447770e0cf0fe49a579c595fd2655b16"
-  integrity sha512-2AMpRiA6QivHOUiBpQAVxjiHAA68Ei23ZUMNaRJrN6omWiSFLoYrxGcT6BXtuzp0Jw4h6HZCmGGIM/gbwebO2A==
-  dependencies:
-    remove-accents "0.4.2"
-
 "@tanstack/query-core@4.26.1":
   version "4.26.1"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.26.1.tgz#7a441086c4d3d79e1d156c0a355bd3567213626e"
   integrity sha512-Zrx2pVQUP4ndnsu6+K/m8zerXSVY8QM+YSbxA1/jbBY21GeCd5oKfYl92oXPK0hPEUtoNuunIdiq0ZMqLos+Zg==
 
-"@tanstack/react-query-devtools@^4.26.1":
-  version "4.26.1"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.26.1.tgz#1895b2c6a257e461fa071a30202565d174e36238"
-  integrity sha512-ts2mA+fyFYFRi3Cee4xBk8Fx6waSFOM+yCkFqwJfGQRGjjTIMYMZPJv4wkv7vy12IVi1SYhL8au22LRKlXS1Zg==
-  dependencies:
-    "@tanstack/match-sorter-utils" "^8.7.0"
-    superjson "^1.10.0"
-    use-sync-external-store "^1.2.0"
-
 "@tanstack/react-query@^4.26.1":
   version "4.26.1"
   resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.26.1.tgz#d254f6b7b297b5ae4204c84e6622506e5ec77d09"
@@ -3800,7 +3777,7 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
+chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3833,7 +3810,7 @@ classnames@^2.2.5, classnames@^2.3.2:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
 
-client-only@0.0.1, client-only@^0.0.1:
+client-only@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -3932,13 +3909,6 @@ cookie@^0.4.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
-copy-anything@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.3.tgz#206767156f08da0e02efd392f71abcdf79643559"
-  integrity sha512-fpW2W/BqEzqPp29QS+MwwfisHCQZtiduTe/m8idFo0xbti9fIZ2WVhAsCv4ggFVH3AgCkVdpoOCtQC6gBrdhjw==
-  dependencies:
-    is-what "^4.1.8"
-
 copy-to-clipboard@^3.3.1:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
@@ -5343,11 +5313,6 @@ immediate@~3.0.5:
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
   integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
 
-immutable@^4.0.0:
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.2.4.tgz#83260d50889526b4b531a5e293709a77f7c55a2a"
-  integrity sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==
-
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -5607,11 +5572,6 @@ is-weakset@^2.0.1:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
-is-what@^4.1.8:
-  version "4.1.8"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.8.tgz#0e2a8807fda30980ddb2571c79db3d209b14cbe4"
-  integrity sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA==
-
 is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
@@ -6775,11 +6735,6 @@ regjsparser@^0.9.1:
   dependencies:
     jsesc "~0.5.0"
 
-remove-accents@0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
-  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -6885,15 +6840,6 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
-sass@^1.58.3:
-  version "1.58.3"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.58.3.tgz#2348cc052061ba4f00243a208b09c40e031f270d"
-  integrity sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==
-  dependencies:
-    chokidar ">=3.0.0 <4.0.0"
-    immutable "^4.0.0"
-    source-map-js ">=0.6.2 <2.0.0"
-
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@@ -7051,7 +6997,7 @@ snakecase-keys@^5.1.2, snakecase-keys@^5.4.1:
     snake-case "^3.0.4"
     type-fest "^2.5.2"
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
+source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -7194,13 +7140,6 @@ styled-jsx@5.1.1:
   dependencies:
     client-only "0.0.1"
 
-superjson@^1.10.0:
-  version "1.12.2"
-  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.12.2.tgz#072471f1e6add2d95a38b77fef8c7a199d82103a"
-  integrity sha512-ugvUo9/WmvWOjstornQhsN/sR9mnGtWGYeTxFuqLb4AiT4QdUavjGFRALCPKWWnAiUJ4HTpytj5e0t5HoMRkXg==
-  dependencies:
-    copy-anything "^3.0.2"
-
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -7546,11 +7485,6 @@ use-local-storage-state@^18.1.2:
   resolved "https://registry.yarnpkg.com/use-local-storage-state/-/use-local-storage-state-18.1.2.tgz#f131c0aa3803742ca261c547cdfd9d61e848581d"
   integrity sha512-V+kYQNC5R0N/JDpsg6b4ED5UaItKJcSvbne68DwJDZWHxGMQBiF41ATktFIOyet3PIq30d2qtzVp/2aB6hQ8Bg==
 
-use-local-storage-state@^18.2.1:
-  version "18.2.1"
-  resolved "https://registry.yarnpkg.com/use-local-storage-state/-/use-local-storage-state-18.2.1.tgz#21c2949d8ecff898d0039a5140603a17fd114e27"
-  integrity sha512-JgFWmMIIsN3uIQ2hSDhYGiYdfykMFVPNX/vz5JX/9V1igJSUjEe30CgswH076YqBx4Njea1NJ6B4farIlnSLuA==
-
 use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"