Mp 2821 unlocked positions (#276)

src/api/vaults/getDepositedVaults.ts

@@ -1,13 +1,14 @@
 import moment from 'moment'
 
 import { getClient, getCreditManagerQueryClient, getVaultQueryClient } from 'api/cosmwasm-client'
-import getVaults from 'api/vaults/getVaults'
-import { BN } from 'utils/helpers'
 import getPrice from 'api/prices/getPrice'
+import getVaults from 'api/vaults/getVaults'
+import { VaultStatus } from 'types/enums/vault'
 import {
   VaultPosition,
   VaultPositionAmount,
 } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
+import { BN } from 'utils/helpers'
 
 async function getUnlocksAtTimestamp(unlockingId: number, vaultAddress: string) {
   try {
@@ -23,26 +24,24 @@ async function getUnlocksAtTimestamp(unlockingId: number, vaultAddress: string)
   }
 }
 
-async function getVaultPositionStatusAndUnlockTime(
+async function getVaultPositionStatusAndUnlockIdAndUnlockTime(
   vaultPosition: VaultPosition,
-): Promise<[VaultStatus, number | undefined]> {
+): Promise<[VaultStatus, number | undefined, number | undefined]> {
   const amount = vaultPosition.amount
 
-  if ('unlocked' in amount) return ['unlocked', undefined]
+  if (VaultStatus.UNLOCKED in amount) return [VaultStatus.UNLOCKED, undefined, undefined]
 
   if (amount.locking.unlocking.length) {
-    const unlocksAtTimestamp = await getUnlocksAtTimestamp(
+    const unlockId = amount.locking.unlocking[0].id
-      amount.locking.unlocking[0].id,
+    const unlocksAtTimestamp = await getUnlocksAtTimestamp(unlockId, vaultPosition.vault.address)
-      vaultPosition.vault.address,
-    )
 
     if (moment(unlocksAtTimestamp).isBefore(new Date())) {
-      return ['unlocked', unlocksAtTimestamp]
+      return [VaultStatus.UNLOCKED, unlockId, unlocksAtTimestamp]
     }
 
-    return ['unlocking', unlocksAtTimestamp]
+    return [VaultStatus.UNLOCKING, unlockId, unlocksAtTimestamp]
   } else {
-    return ['active', undefined]
+    return [VaultStatus.ACTIVE, undefined, undefined]
   }
 }
 
@@ -153,14 +152,15 @@ async function getDepositedVaults(accountId: string): Promise<DepositedVault[]>
         throw 'Could not find the deposited vault among all vaults'
       }
 
-      const [[status, unlocksAt], valuesAndAmounts] = await Promise.all([
+      const [[status, unlockId, unlocksAt], valuesAndAmounts] = await Promise.all([
-        getVaultPositionStatusAndUnlockTime(vaultPosition),
+        getVaultPositionStatusAndUnlockIdAndUnlockTime(vaultPosition),
         getVaultValuesAndAmounts(vault, vaultPosition),
       ])
 
       return {
         ...vault,
         status,
+        unlockId,
         unlocksAt,
         ...valuesAndAmounts,
       }

src/components/Button/index.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames'
 import React, { LegacyRef, ReactElement, ReactNode, useMemo } from 'react'
 
-import { CircularProgress } from 'components/CircularProgress'
 import {
   buttonBorderClasses,
   buttonColorClasses,
@@ -15,6 +14,7 @@ import {
   focusClasses,
 } from 'components/Button/constants'
 import { glowElement } from 'components/Button/utils'
+import { CircularProgress } from 'components/CircularProgress'
 import { ChevronDown } from 'components/Icons'
 import useStore from 'store'
 
@@ -120,7 +120,7 @@ const Button = React.forwardRef(function Button(
           {children && children}
           {rightIcon && <span className={classNames(rightIconClassNames)}>{rightIcon}</span>}
           {hasSubmenu && (
-            <span data-testid='button-submenu-indicator' className='ml-auto inline-block w-2.5'>
+            <span data-testid='button-submenu-indicator' className='ml-2 inline-block w-2.5'>
               <ChevronDown />
             </span>
           )}

src/components/Earn/Lend/LendingMarketsTable.tsx

@@ -1,18 +1,18 @@
 import { ColumnDef, Row, Table } from '@tanstack/react-table'
-import { useMemo } from 'react'
-import Image from 'next/image'
 import classNames from 'classnames'
+import Image from 'next/image'
+import { useMemo } from 'react'
 
-import Text from 'components/Text'
-import AssetListTable from 'components/MarketAssetTable'
-import TitleAndSubCell from 'components/TitleAndSubCell'
-import { ChevronDown, ChevronRight } from 'components/Icons'
-import { convertLiquidityRateToAPR, demagnify, formatValue } from 'utils/formatters'
-import MarketAssetTableRow from 'components/MarketAssetTable/MarketAssetTableRow'
 import LendingActionButtons from 'components/Earn/Lend/LendingActionButtons'
 import LendingDetails from 'components/Earn/Lend/LendingDetails'
-import useDisplayCurrencyPrice from 'hooks/useDisplayCurrencyPrice'
 import { FormattedNumber } from 'components/FormattedNumber'
+import { ChevronDown, ChevronRight } from 'components/Icons'
+import AssetListTable from 'components/MarketAssetTable'
+import MarketAssetTableRow from 'components/MarketAssetTable/MarketAssetTableRow'
+import Text from 'components/Text'
+import TitleAndSubCell from 'components/TitleAndSubCell'
+import useDisplayCurrencyPrice from 'hooks/useDisplayCurrencyPrice'
+import { convertLiquidityRateToAPR, demagnify, formatValue } from 'utils/formatters'
 
 interface Props {
   title: string

src/components/Earn/Tab.tsx

@@ -14,7 +14,7 @@ export default function Tab(props: Props) {
   const { address, accountId } = useParams()
 
   return (
-    <div className='mb-8 w-full'>
+    <div className='mb-4 w-full'>
       <div className='flex gap-2'>
         <div className='relative'>
           <NavLink

src/components/Earn/vault/VaultExpanded.tsx

@@ -1,8 +1,14 @@
 import { Row } from '@tanstack/react-table'
+import moment from 'moment'
+import { useState } from 'react'
+import { useParams } from 'react-router-dom'
 
 import Button from 'components/Button'
-import { LockUnlocked, Plus } from 'components/Icons'
+import { AccountArrowDown, LockLocked, LockUnlocked, Plus } from 'components/Icons'
+import { Tooltip } from 'components/Tooltip'
 import useStore from 'store'
+import { VaultStatus } from 'types/enums/vault'
+import { hardcodedFee } from 'utils/constants'
 
 interface Props {
   row: Row<Vault | DepositedVault>
@@ -10,6 +16,11 @@ interface Props {
 }
 
 export default function VaultExpanded(props: Props) {
+  const vault = props.row.original as DepositedVault
+  const { accountId } = useParams()
+  const [isConfirming, setIsConfirming] = useState(false)
+  const withdrawFromVaults = useStore((s) => s.withdrawFromVaults)
+
   function enterVaultHandler() {
     useStore.setState({
       vaultModal: {
@@ -29,9 +40,79 @@ export default function VaultExpanded(props: Props) {
     })
   }
 
-  let isDeposited: boolean = false
+  function unlockHandler() {
-  if ((props.row.original as DepositedVault)?.amounts) {
+    useStore.setState({ unlockModal: { vault } })
-    isDeposited = true
+  }
+
+  async function withdrawHandler() {
+    if (!accountId) return
+    const vaults = [props.row.original as DepositedVault]
+    setIsConfirming(true)
+    await withdrawFromVaults({
+      fee: hardcodedFee,
+      accountId: accountId,
+      vaults,
+    })
+  }
+
+  const status = vault.status
+
+  /* BUTTONS */
+
+  function DepositButton() {
+    return (
+      <Button onClick={enterVaultHandler} color='tertiary' leftIcon={<Plus className='w-3' />}>
+        Deposit
+      </Button>
+    )
+  }
+
+  function DepositMoreButton() {
+    return (
+      <Button onClick={depositMoreHandler} color='secondary' leftIcon={<Plus className='w-3' />}>
+        Deposit more
+      </Button>
+    )
+  }
+
+  function UnlockButton() {
+    return (
+      <Tooltip
+        type='info'
+        content='In order to withdraw this position, you must first unlock it. This will unlock all the funds within this position.'
+      >
+        <Button onClick={unlockHandler} color='tertiary' leftIcon={<LockUnlocked />}>
+          Unlock to withdraw
+        </Button>
+      </Tooltip>
+    )
+  }
+
+  function UnlockingButton() {
+    return (
+      <Button
+        onClick={withdrawHandler}
+        color='tertiary'
+        showProgressIndicator={isConfirming}
+        disabled={true}
+        leftIcon={<LockLocked />}
+      >
+        {`Withdraw in ${moment(vault?.unlocksAt).fromNow(true)}`}
+      </Button>
+    )
+  }
+
+  function UnlockedButton() {
+    return (
+      <Button
+        onClick={withdrawHandler}
+        color='tertiary'
+        showProgressIndicator={isConfirming}
+        leftIcon={<AccountArrowDown />}
+      >
+        Withdraw funds
+      </Button>
+    )
   }
 
   return (
@@ -45,30 +126,13 @@ export default function VaultExpanded(props: Props) {
         !isExpanded && props.row.toggleExpanded()
       }}
     >
-      <td colSpan={isDeposited ? 6 : 5}>
+      <td colSpan={!status ? 5 : 6}>
         <div className='align-center flex justify-end gap-3 p-4'>
-          {isDeposited ? (
+          {!status && <DepositButton />}
-            <>
+          <DepositMoreButton />
-              <Button
+          {status === VaultStatus.ACTIVE && <UnlockButton />}
-                onClick={depositMoreHandler}
+          {status === VaultStatus.UNLOCKING && <UnlockingButton />}
-                color='secondary'
+          {status === VaultStatus.UNLOCKED && <UnlockedButton />}
-                leftIcon={<Plus className='w-3' />}
-              >
-                Deposit more
-              </Button>
-              <Button color='tertiary' leftIcon={<LockUnlocked />}>
-                Unlock to withdraw
-              </Button>
-            </>
-          ) : (
-            <Button
-              onClick={enterVaultHandler}
-              color='tertiary'
-              leftIcon={<Plus className='w-3' />}
-            >
-              Deposit
-            </Button>
-          )}
         </div>
       </td>
     </tr>

src/components/Earn/vault/VaultTable.tsx

@@ -10,19 +10,20 @@ import {
 import classNames from 'classnames'
 import React from 'react'
 
+import DisplayCurrency from 'components/DisplayCurrency'
 import VaultExpanded from 'components/Earn/vault/VaultExpanded'
 import VaultLogo from 'components/Earn/vault/VaultLogo'
 import { VaultRow } from 'components/Earn/vault/VaultRow'
 import { ChevronDown, SortAsc, SortDesc, SortNone } from 'components/Icons'
+import Loading from 'components/Loading'
 import Text from 'components/Text'
 import TitleAndSubCell from 'components/TitleAndSubCell'
 import { VAULT_DEPOSIT_BUFFER } from 'constants/vaults'
-import { getAssetByDenom } from 'utils/assets'
-import { convertPercentage, formatPercent, formatValue } from 'utils/formatters'
-import DisplayCurrency from 'components/DisplayCurrency'
 import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
-import Loading from 'components/Loading'
+import { VaultStatus } from 'types/enums/vault'
+import { getAssetByDenom } from 'utils/assets'
+import { convertPercentage, formatPercent, formatValue, produceCountdown } from 'utils/formatters'
 
 type Props = {
   data: Vault[] | DepositedVault[]
@@ -40,14 +41,49 @@ export const VaultTable = (props: Props) => {
         header: 'Vault',
         accessorKey: 'name',
         cell: ({ row }) => {
+          const vault = row.original as DepositedVault
+          const timeframe = vault.lockup.timeframe[0]
+          const unlockDuration = !!timeframe ? ` - (${vault.lockup.duration}${timeframe})` : ''
+
+          const status = vault.status
+          let remainingTime = 0
+
+          if (status === VaultStatus.UNLOCKING && vault.unlocksAt) {
+            remainingTime = vault.unlocksAt - Date.now()
+          }
+
           return (
             <div className='flex'>
-              <VaultLogo vault={row.original} />
+              <VaultLogo vault={vault} />
               <TitleAndSubCell
                 className='ml-2 mr-2 text-left'
-                title={`${row.original.name} - (${row.original.lockup.duration} ${row.original.lockup.timeframe})`}
+                title={`${vault.name}${unlockDuration}`}
-                sub={row.original.provider}
+                sub={vault.provider}
               />
+              {status === VaultStatus.UNLOCKING && (
+                <div className='h-5 w-[84px] perspective'>
+                  <div className='delay-5000 relative h-full w-full animate-flip preserve-3d'>
+                    <div className='absolute h-5 rounded-sm bg-green backface-hidden'>
+                      <Text className='w-[84px] text-center leading-5 text-white' size='xs'>
+                        {produceCountdown(remainingTime)}
+                      </Text>
+                    </div>
+                    <div className='absolute h-full w-full overflow-hidden rounded-sm bg-green flip-x-180 backface-hidden'>
+                      <Text className='w-[84px] text-center leading-5 text-white' size='xs'>
+                        Unlocking
+                      </Text>
+                    </div>
+                  </div>
+                </div>
+              )}
+              {status === VaultStatus.UNLOCKED && (
+                <Text
+                  className='h-5 w-[84px] rounded-sm bg-green text-center leading-5 text-white'
+                  size='xs'
+                >
+                  Unlocked
+                </Text>
+              )}
             </div>
           )
         },

src/components/Earn/vault/VaultUnlockBanner.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import { useParams } from 'react-router-dom'
+
+import Button from 'components/Button'
+import { ChevronRight } from 'components/Icons'
+import NotificationBanner from 'components/NotificationBanner'
+import useStore from 'store'
+import { hardcodedFee } from 'utils/constants'
+
+interface Props {
+  vaults: DepositedVault[]
+}
+
+export default function VaultUnlockBanner(props: Props) {
+  const { accountId } = useParams()
+  const [isConfirming, setIsConfirming] = useState(false)
+  const withdrawFromVaults = useStore((s) => s.withdrawFromVaults)
+
+  async function handleWithdraw() {
+    if (!accountId) return
+    if (props.vaults.length > 1) {
+      useStore.setState({
+        withdrawFromVaultsModal: props.vaults,
+      })
+    } else {
+      setIsConfirming(true)
+      await withdrawFromVaults({
+        fee: hardcodedFee,
+        accountId: accountId,
+        vaults: props.vaults,
+      })
+      setIsConfirming(false)
+    }
+  }
+
+  if (props.vaults.length === 0) return null
+
+  return (
+    <NotificationBanner
+      type='success'
+      text={
+        props.vaults.length === 1
+          ? 'There is one vault with funds unlocked. It is not earning fees and can be liquidated'
+          : `There are ${props.vaults.length} vaults with funds unlocked. They are not earning fees and can be liquidated.`
+      }
+      button={
+        <Button
+          onClick={handleWithdraw}
+          variant='transparent'
+          color='quaternary'
+          className='!text-success underline hover:no-underline'
+          text='Withdraw Unlocked Positions'
+          rightIcon={<ChevronRight />}
+          iconClassName='text-success w-2 h-4'
+          showProgressIndicator={isConfirming}
+        />
+      }
+    />
+  )
+}

src/components/Earn/vault/Vaults.tsx

@@ -3,10 +3,12 @@ import { useParams } from 'react-router-dom'
 
 import Card from 'components/Card'
 import { VaultTable } from 'components/Earn/vault/VaultTable'
+import VaultUnlockBanner from 'components/Earn/vault/VaultUnlockBanner'
 import { IS_TESTNET } from 'constants/env'
 import { TESTNET_VAULTS_META_DATA, VAULTS_META_DATA } from 'constants/vaults'
-import useVaults from 'hooks/useVaults'
 import useDepositedVaults from 'hooks/useDepositedVaults'
+import useVaults from 'hooks/useVaults'
+import { VaultStatus } from 'types/enums/vault'
 import { BN } from 'utils/helpers'
 
 interface Props {
@@ -17,6 +19,7 @@ function Content(props: Props) {
   const { accountId } = useParams()
   const { data: vaults } = useVaults()
   const { data: depositedVaults } = useDepositedVaults(accountId || '')
+  const isAvailable = props.type === 'available'
 
   const vaultsMetaData = IS_TESTNET ? TESTNET_VAULTS_META_DATA : VAULTS_META_DATA
 
@@ -38,31 +41,30 @@ function Content(props: Props) {
     )
   }, [vaults, depositedVaults, vaultsMetaData])
 
-  const vaultsToDisplay = props.type === 'available' ? available : deposited
+  const vaultsToDisplay = isAvailable ? available : deposited
 
   if (!vaultsToDisplay.length) return null
 
-  if (props.type === 'deposited') {
+  const unlockedVaults: DepositedVault[] = []
-    return (
+
-      <Card className='mb-4 h-fit w-full bg-white/5' title={'Deposited'}>
+  if (!isAvailable && depositedVaults?.length > 0) {
-        <VaultTable data={vaultsToDisplay} />
+    depositedVaults.forEach((vault) => {
-      </Card>
+      if (vault.status === VaultStatus.UNLOCKED) {
-    )
+        unlockedVaults.push(vault)
+      }
+    })
   }
 
-  return <VaultTable data={vaultsToDisplay} />
-}
-
-export default function Vaults(props: Props) {
   return (
-    <Card
+    <>
-      title={props.type === 'available' ? 'Available vaults' : 'Deposited'}
+      {!isAvailable && <VaultUnlockBanner vaults={unlockedVaults} />}
-      className='mb-4 h-fit w-full bg-white/5'
+      <Card
-    >
+        className='h-fit w-full bg-white/5'
-      <Suspense fallback={props.type === 'available' ? <Fallback /> : null}>
+        title={isAvailable ? 'Available vaults' : 'Deposited'}
-        <Content type={props.type} />
+      >
-      </Suspense>
+        <VaultTable data={vaultsToDisplay} />
-    </Card>
+      </Card>
+    </>
   )
 }
 
@@ -82,16 +84,18 @@ function Fallback() {
     },
   }))
 
-  return <VaultTable data={mockVaults} isLoading />
+  return (
+    <Card className='h-fit w-full bg-white/5' title='Available vaults'>
+      <VaultTable data={mockVaults} isLoading />
+    </Card>
+  )
 }
 
 export function AvailableVaults() {
   return (
-    <Card className='h-fit w-full bg-white/5' title='Available vaults'>
+    <Suspense fallback={<Fallback />}>
-      <Suspense fallback={<Fallback />}>
+      <Content type='available' />
-        <Content type='available' />
+    </Suspense>
-      </Suspense>
-    </Card>
   )
 }
 

src/components/Icons/Account.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.1666 3.6665H0.833252M0.833252 6.33317H3.1977C3.55783 6.33317 3.73789 6.33317 3.91201 6.36421C4.06655 6.39176 4.21732 6.4374 4.36119 6.50021C4.52328 6.57097 4.6731 6.67085 4.97274 6.87061L5.36043 7.12906C5.66007 7.32883 5.80989 7.42871 5.97198 7.49947C6.11585 7.56227 6.26662 7.60792 6.42116 7.63547C6.59528 7.6665 6.77534 7.6665 7.13547 7.6665H7.86437C8.2245 7.6665 8.40456 7.6665 8.57868 7.63547C8.73322 7.60792 8.88399 7.56227 9.02786 7.49947C9.18995 7.42871 9.33977 7.32883 9.63941 7.12906L10.0271 6.87061C10.3267 6.67085 10.4766 6.57097 10.6386 6.50021C10.7825 6.4374 10.9333 6.39176 11.0878 6.36421C11.2619 6.33317 11.442 6.33317 11.8021 6.33317H14.1666M0.833252 2.79984L0.833252 9.19984C0.833252 9.94657 0.833252 10.3199 0.978577 10.6052C1.10641 10.856 1.31038 11.06 1.56126 11.1878C1.84648 11.3332 2.21985 11.3332 2.96659 11.3332L12.0333 11.3332C12.78 11.3332 13.1534 11.3332 13.4386 11.1878C13.6895 11.06 13.8934 10.856 14.0213 10.6052C14.1666 10.3199 14.1666 9.94657 14.1666 9.19984V2.79984C14.1666 2.0531 14.1666 1.67973 14.0213 1.39452C13.8934 1.14363 13.6895 0.939661 13.4386 0.81183C13.1534 0.666505 12.78 0.666505 12.0333 0.666505L2.96659 0.666504C2.21985 0.666504 1.84648 0.666504 1.56126 0.811828C1.31038 0.93966 1.10641 1.14363 0.978577 1.39452C0.833252 1.67973 0.833252 2.0531 0.833252 2.79984Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M14.1666 3.6665H0.833252M0.833252 6.33317H3.1977C3.55783 6.33317 3.73789 6.33317 3.91201 6.36421C4.06655 6.39176 4.21732 6.4374 4.36119 6.50021C4.52328 6.57097 4.6731 6.67085 4.97274 6.87061L5.36043 7.12906C5.66007 7.32883 5.80989 7.42871 5.97198 7.49947C6.11585 7.56227 6.26662 7.60792 6.42116 7.63547C6.59528 7.6665 6.77534 7.6665 7.13547 7.6665H7.86437C8.2245 7.6665 8.40456 7.6665 8.57868 7.63547C8.73322 7.60792 8.88399 7.56227 9.02786 7.49947C9.18995 7.42871 9.33977 7.32883 9.63941 7.12906L10.0271 6.87061C10.3267 6.67085 10.4766 6.57097 10.6386 6.50021C10.7825 6.4374 10.9333 6.39176 11.0878 6.36421C11.2619 6.33317 11.442 6.33317 11.8021 6.33317H14.1666M0.833252 2.79984L0.833252 9.19984C0.833252 9.94657 0.833252 10.3199 0.978577 10.6052C1.10641 10.856 1.31038 11.06 1.56126 11.1878C1.84648 11.3332 2.21985 11.3332 2.96659 11.3332L12.0333 11.3332C12.78 11.3332 13.1534 11.3332 13.4386 11.1878C13.6895 11.06 13.8934 10.856 14.0213 10.6052C14.1666 10.3199 14.1666 9.94657 14.1666 9.19984V2.79984C14.1666 2.0531 14.1666 1.67973 14.0213 1.39452C13.8934 1.14363 13.6895 0.939661 13.4386 0.81183C13.1534 0.666505 12.78 0.666505 12.0333 0.666505L2.96659 0.666504C2.21985 0.666504 1.84648 0.666504 1.56126 0.811828C1.31038 0.93966 1.10641 1.14363 0.978577 1.39452C0.833252 1.67973 0.833252 2.0531 0.833252 2.79984Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/AccountArrowDown.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M5.49967 9.33329L7.49967 11.3333M7.49967 11.3333L9.49967 9.33329M7.49967 11.3333V6.66663M14.1663 3.99996H0.833008M3.16634 9.99996H2.96634C2.2196 9.99996 1.84624 9.99996 1.56102 9.85463C1.31014 9.7268 1.10616 9.52283 0.978332 9.27194C0.833008 8.98673 0.833008 8.61336 0.833008 7.86662V2.79996C0.833008 2.05322 0.833008 1.67985 0.978333 1.39464C1.10616 1.14376 1.31014 0.939782 1.56102 0.811951C1.84624 0.666626 2.2196 0.666626 2.96634 0.666626H12.033C12.7797 0.666626 13.1531 0.666626 13.4383 0.811952C13.6892 0.939783 13.8932 1.14376 14.021 1.39464C14.1663 1.67986 14.1663 2.05322 14.1663 2.79996V7.86663C14.1663 8.61336 14.1663 8.98673 14.021 9.27195C13.8932 9.52283 13.6892 9.7268 13.4383 9.85463C13.1531 9.99996 12.7797 9.99996 12.033 9.99996H11.833"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

src/components/Icons/ArrowChartLineUp.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.6668 0.666016L9.42108 5.91177C9.15707 6.17578 9.02506 6.30779 8.87284 6.35724C8.73895 6.40075 8.59471 6.40075 8.46082 6.35724C8.3086 6.30779 8.17659 6.17578 7.91258 5.91177L6.08774 4.08693C5.82373 3.82292 5.69173 3.69091 5.53951 3.64145C5.40561 3.59795 5.26138 3.59795 5.12748 3.64145C4.97527 3.69091 4.84326 3.82292 4.57925 4.08693L1.3335 7.33268M14.6668 0.666016H10.0002M14.6668 0.666016V5.33268" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M14.6668 0.666016L9.42108 5.91177C9.15707 6.17578 9.02506 6.30779 8.87284 6.35724C8.73895 6.40075 8.59471 6.40075 8.46082 6.35724C8.3086 6.30779 8.17659 6.17578 7.91258 5.91177L6.08774 4.08693C5.82373 3.82292 5.69173 3.69091 5.53951 3.64145C5.40561 3.59795 5.26138 3.59795 5.12748 3.64145C4.97527 3.69091 4.84326 3.82292 4.57925 4.08693L1.3335 7.33268M14.6668 0.666016H10.0002M14.6668 0.666016V5.33268"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/ArrowCircledTopRight.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 10.0007V6.00069M10 6.00069H6.00004M10 6.00069L6.00004 10.0006M14.6666 8.00065C14.6666 11.6826 11.6818 14.6673 7.99992 14.6673C4.31802 14.6673 1.33325 11.6826 1.33325 8.00065C1.33325 4.31875 4.31802 1.33398 7.99992 1.33398C11.6818 1.33398 14.6666 4.31875 14.6666 8.00065Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M10 10.0007V6.00069M10 6.00069H6.00004M10 6.00069L6.00004 10.0006M14.6666 8.00065C14.6666 11.6826 11.6818 14.6673 7.99992 14.6673C4.31802 14.6673 1.33325 11.6826 1.33325 8.00065C1.33325 4.31875 4.31802 1.33398 7.99992 1.33398C11.6818 1.33398 14.6666 4.31875 14.6666 8.00065Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/ArrowDownLine.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.5 14H2.5M12.5 7.33333L8.5 11.3333M8.5 11.3333L4.5 7.33333M8.5 11.3333V2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M14.5 14H2.5M12.5 7.33333L8.5 11.3333M8.5 11.3333L4.5 7.33333M8.5 11.3333V2"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/ArrowRight.svg

@@ -1,3 +1,9 @@
 <svg viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.8335 6.00065H11.1668M11.1668 6.00065L6.50016 1.33398M11.1668 6.00065L6.50016 10.6673" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M1.8335 6.00065H11.1668M11.1668 6.00065L6.50016 1.33398M11.1668 6.00065L6.50016 10.6673"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/ArrowUpLine.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 2H2M12 8.66667L8 4.66667M8 4.66667L4 8.66667M8 4.66667V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M14 2H2M12 8.66667L8 4.66667M8 4.66667L4 8.66667M8 4.66667V14"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/Check.svg

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

src/components/Icons/CheckCircled.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.99998 8L6.99998 10L11 6M14.6666 8C14.6666 11.6819 11.6819 14.6667 7.99998 14.6667C4.31808 14.6667 1.33331 11.6819 1.33331 8C1.33331 4.3181 4.31808 1.33334 7.99998 1.33334C11.6819 1.33334 14.6666 4.3181 14.6666 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M4.99998 8L6.99998 10L11 6M14.6666 8C14.6666 11.6819 11.6819 14.6667 7.99998 14.6667C4.31808 14.6667 1.33331 11.6819 1.33331 8C1.33331 4.3181 4.31808 1.33334 7.99998 1.33334C11.6819 1.33334 14.6666 4.3181 14.6666 8Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/ChevronDown.svg

@@ -1,3 +1,8 @@
-<svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 0.5L6 5.5L11 0.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M1 0.5L6 5.5L11 0.5"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/ChevronLeft.svg

@@ -1,4 +1,7 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 10 16">
-<path fill='currentColor' d="M9.3,0.2C9.6,0.5,9.6,1,9.3,1.3L9.3,1.4L2.5,8l6.7,6.6c0.3,0.3,0.3,0.7,0.1,1.1l-0.1,0.1c-0.3,0.3-0.8,0.3-1.1,0.1l-0.1-0.1
+  <path
-	L0.7,8.6C0.4,8.3,0.4,7.8,0.7,7.5l0.1-0.1l7.3-7.2C8.4-0.1,8.9-0.1,9.3,0.2z"/>
+    fill="currentColor"
+    d="M9.3,0.2C9.6,0.5,9.6,1,9.3,1.3L9.3,1.4L2.5,8l6.7,6.6c0.3,0.3,0.3,0.7,0.1,1.1l-0.1,0.1c-0.3,0.3-0.8,0.3-1.1,0.1l-0.1-0.1
+	L0.7,8.6C0.4,8.3,0.4,7.8,0.7,7.5l0.1-0.1l7.3-7.2C8.4-0.1,8.9-0.1,9.3,0.2z"
+  />
 </svg>

src/components/Icons/ChevronRight.svg

@@ -1,3 +1,8 @@
-<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.5 11L5.5 6L0.5 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M0.5 11L5.5 6L0.5 1"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/ChevronUp.svg

@@ -1,4 +1,7 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 10">
-<path fill='currentColor' d="M15.8,9.3c-0.3,0.3-0.7,0.3-1.1,0.1l-0.1-0.1L8,2.5L1.4,9.3C1.1,9.6,0.7,9.6,0.3,9.3L0.2,9.3
+  <path
-	C-0.1,9-0.1,8.5,0.2,8.2l0.1-0.1l7.2-7.3c0.3-0.3,0.7-0.3,1.1-0.1l0.1,0.1l7.2,7.3C16.1,8.4,16.1,8.9,15.8,9.3z"/>
+    fill="currentColor"
+    d="M15.8,9.3c-0.3,0.3-0.7,0.3-1.1,0.1l-0.1-0.1L8,2.5L1.4,9.3C1.1,9.6,0.7,9.6,0.3,9.3L0.2,9.3
+	C-0.1,9-0.1,8.5,0.2,8.2l0.1-0.1l7.2-7.3c0.3-0.3,0.7-0.3,1.1-0.1l0.1,0.1l7.2,7.3C16.1,8.4,16.1,8.9,15.8,9.3z"
+  />
 </svg>

src/components/Icons/Copy.svg

@@ -1,3 +1,5 @@
-<svg viewBox='0 0 12 14' xmlns='http://www.w3.org/2000/svg' fill='currentColor'>
+<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' />
+  <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>

src/components/Icons/Cross.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 1L1 9M1 1L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 1L1 9M1 1L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
 </svg>

src/components/Icons/CrossCircled.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.99998 6.00001L5.99998 10M5.99998 6.00001L9.99998 10M14.6666 8.00001C14.6666 11.6819 11.6819 14.6667 7.99998 14.6667C4.31808 14.6667 1.33331 11.6819 1.33331 8.00001C1.33331 4.31811 4.31808 1.33334 7.99998 1.33334C11.6819 1.33334 14.6666 4.31811 14.6666 8.00001Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M9.99998 6.00001L5.99998 10M5.99998 6.00001L9.99998 10M14.6666 8.00001C14.6666 11.6819 11.6819 14.6667 7.99998 14.6667C4.31808 14.6667 1.33331 11.6819 1.33331 8.00001C1.33331 4.31811 4.31808 1.33334 7.99998 1.33334C11.6819 1.33334 14.6666 4.31811 14.6666 8.00001Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/Enter.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.5 4.00004H9.5C11.1569 4.00004 12.5 5.34319 12.5 7.00004C12.5 8.6569 11.1569 10 9.5 10H6.5M0.5 4.00004L3.16667 1.33337M0.5 4.00004L3.16667 6.66671" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M0.5 4.00004H9.5C11.1569 4.00004 12.5 5.34319 12.5 7.00004C12.5 8.6569 11.1569 10 9.5 10H6.5M0.5 4.00004L3.16667 1.33337M0.5 4.00004L3.16667 6.66671"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/ExclamationMarkCircled.svg

@@ -1,3 +1,9 @@
 <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.74105 6.66602V9.99935M9.74105 13.3327H9.74938M18.0744 9.99935C18.0744 14.6017 14.3434 18.3327 9.74105 18.3327C5.13868 18.3327 1.40771 14.6017 1.40771 9.99935C1.40771 5.39698 5.13868 1.66602 9.74105 1.66602C14.3434 1.66602 18.0744 5.39698 18.0744 9.99935Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M9.74105 6.66602V9.99935M9.74105 13.3327H9.74938M18.0744 9.99935C18.0744 14.6017 14.3434 18.3327 9.74105 18.3327C5.13868 18.3327 1.40771 14.6017 1.40771 9.99935C1.40771 5.39698 5.13868 1.66602 9.74105 1.66602C14.3434 1.66602 18.0744 5.39698 18.0744 9.99935Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/ExclamationMarkTriangle.svg

@@ -1,3 +1,8 @@
-<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.9998 8.00023V12.0002M10.9998 16.0002H11.0098M9.61507 2.89195L1.39019 17.0986C0.933982 17.8866 0.70588 18.2806 0.739593 18.6039C0.768998 18.886 0.916769 19.1423 1.14613 19.309C1.40908 19.5002 1.86435 19.5002 2.77487 19.5002H19.2246C20.1352 19.5002 20.5904 19.5002 20.8534 19.309C21.0827 19.1423 21.2305 18.886 21.2599 18.6039C21.2936 18.2806 21.0655 17.8866 20.6093 17.0986L12.3844 2.89195C11.9299 2.10679 11.7026 1.71421 11.4061 1.58235C11.1474 1.46734 10.8521 1.46734 10.5935 1.58235C10.2969 1.71421 10.0696 2.10679 9.61507 2.89195Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M10.9998 8.00023V12.0002M10.9998 16.0002H11.0098M9.61507 2.89195L1.39019 17.0986C0.933982 17.8866 0.70588 18.2806 0.739593 18.6039C0.768998 18.886 0.916769 19.1423 1.14613 19.309C1.40908 19.5002 1.86435 19.5002 2.77487 19.5002H19.2246C20.1352 19.5002 20.5904 19.5002 20.8534 19.309C21.0827 19.1423 21.2305 18.886 21.2599 18.6039C21.2936 18.2806 21.0655 17.8866 20.6093 17.0986L12.3844 2.89195C11.9299 2.10679 11.7026 1.71421 11.4061 1.58235C11.1474 1.46734 10.8521 1.46734 10.5935 1.58235C10.2969 1.71421 10.0696 2.10679 9.61507 2.89195Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/ExternalLink.svg

@@ -1,5 +1,5 @@
-<svg fill='currentColor' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'>
+<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'
+    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>

src/components/Icons/Gear.svg

@@ -1,6 +1,6 @@
-<svg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path
+  <path
-    d='M9.99996 13.5C9.0717 13.5 8.18147 13.1313 7.52509 12.4749C6.86871 11.8185 6.49996 10.9283 6.49996 10C6.49996 9.07174 6.86871 8.18151 7.52509 7.52513C8.18147 6.86875 9.0717 6.5 9.99996 6.5C10.9282 6.5 11.8185 6.86875 12.4748 7.52513C13.1312 8.18151 13.5 9.07174 13.5 10C13.5 10.9283 13.1312 11.8185 12.4748 12.4749C11.8185 13.1313 10.9282 13.5 9.99996 13.5M17.43 10.97C17.47 10.65 17.5 10.33 17.5 10C17.5 9.67 17.47 9.34 17.43 9L19.54 7.37C19.73 7.22 19.78 6.95 19.66 6.73L17.66 3.27C17.54 3.05 17.27 2.96 17.05 3.05L14.56 4.05C14.04 3.66 13.5 3.32 12.87 3.07L12.5 0.420002C12.4796 0.302219 12.4183 0.195429 12.3268 0.118553C12.2353 0.0416778 12.1195 -0.000319774 12 1.83347e-06H7.99996C7.74996 1.83347e-06 7.53996 0.180002 7.49996 0.420002L7.12996 3.07C6.49996 3.32 5.95996 3.66 5.43996 4.05L2.94996 3.05C2.72996 2.96 2.45996 3.05 2.33996 3.27L0.339961 6.73C0.209961 6.95 0.269962 7.22 0.459962 7.37L2.56996 9C2.52996 9.34 2.49996 9.67 2.49996 10C2.49996 10.33 2.52996 10.65 2.56996 10.97L0.459962 12.63C0.269962 12.78 0.209961 13.05 0.339961 13.27L2.33996 16.73C2.45996 16.95 2.72996 17.03 2.94996 16.95L5.43996 15.94C5.95996 16.34 6.49996 16.68 7.12996 16.93L7.49996 19.58C7.53996 19.82 7.74996 20 7.99996 20H12C12.25 20 12.46 19.82 12.5 19.58L12.87 16.93C13.5 16.67 14.04 16.34 14.56 15.94L17.05 16.95C17.27 17.03 17.54 16.95 17.66 16.73L19.66 13.27C19.78 13.05 19.73 12.78 19.54 12.63L17.43 10.97V10.97Z'
+    d="M9.99996 13.5C9.0717 13.5 8.18147 13.1313 7.52509 12.4749C6.86871 11.8185 6.49996 10.9283 6.49996 10C6.49996 9.07174 6.86871 8.18151 7.52509 7.52513C8.18147 6.86875 9.0717 6.5 9.99996 6.5C10.9282 6.5 11.8185 6.86875 12.4748 7.52513C13.1312 8.18151 13.5 9.07174 13.5 10C13.5 10.9283 13.1312 11.8185 12.4748 12.4749C11.8185 13.1313 10.9282 13.5 9.99996 13.5M17.43 10.97C17.47 10.65 17.5 10.33 17.5 10C17.5 9.67 17.47 9.34 17.43 9L19.54 7.37C19.73 7.22 19.78 6.95 19.66 6.73L17.66 3.27C17.54 3.05 17.27 2.96 17.05 3.05L14.56 4.05C14.04 3.66 13.5 3.32 12.87 3.07L12.5 0.420002C12.4796 0.302219 12.4183 0.195429 12.3268 0.118553C12.2353 0.0416778 12.1195 -0.000319774 12 1.83347e-06H7.99996C7.74996 1.83347e-06 7.53996 0.180002 7.49996 0.420002L7.12996 3.07C6.49996 3.32 5.95996 3.66 5.43996 4.05L2.94996 3.05C2.72996 2.96 2.45996 3.05 2.33996 3.27L0.339961 6.73C0.209961 6.95 0.269962 7.22 0.459962 7.37L2.56996 9C2.52996 9.34 2.49996 9.67 2.49996 10C2.49996 10.33 2.52996 10.65 2.56996 10.97L0.459962 12.63C0.269962 12.78 0.209961 13.05 0.339961 13.27L2.33996 16.73C2.45996 16.95 2.72996 17.03 2.94996 16.95L5.43996 15.94C5.95996 16.34 6.49996 16.68 7.12996 16.93L7.49996 19.58C7.53996 19.82 7.74996 20 7.99996 20H12C12.25 20 12.46 19.82 12.5 19.58L12.87 16.93C13.5 16.67 14.04 16.34 14.56 15.94L17.05 16.95C17.27 17.03 17.54 16.95 17.66 16.73L19.66 13.27C19.78 13.05 19.73 12.78 19.54 12.63L17.43 10.97V10.97Z"
-    fill='currentColor'
+    fill="currentColor"
-/>
+  />
 </svg>

src/components/Icons/Heart.svg

@@ -1,3 +1,10 @@
 <svg viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99541 2.42388C6.66251 0.8656 4.43981 0.446428 2.76978 1.87334C1.09974 3.30026 0.864625 5.68598 2.17611 7.3736C3.26652 8.77674 6.56649 11.7361 7.64805 12.6939C7.76905 12.801 7.82955 12.8546 7.90012 12.8757C7.96172 12.8941 8.02911 12.8941 8.09071 12.8757C8.16128 12.8546 8.22178 12.801 8.34278 12.6939C9.42433 11.7361 12.7243 8.77674 13.8147 7.3736C15.1262 5.68598 14.9198 3.28525 13.2211 1.87334C11.5223 0.461438 9.32832 0.8656 7.99541 2.42388Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.99541 2.42388C6.66251 0.8656 4.43981 0.446428 2.76978 1.87334C1.09974 3.30026 0.864625 5.68598 2.17611 7.3736C3.26652 8.77674 6.56649 11.7361 7.64805 12.6939C7.76905 12.801 7.82955 12.8546 7.90012 12.8757C7.96172 12.8941 8.02911 12.8941 8.09071 12.8757C8.16128 12.8546 8.22178 12.801 8.34278 12.6939C9.42433 11.7361 12.7243 8.77674 13.8147 7.3736C15.1262 5.68598 14.9198 3.28525 13.2211 1.87334C11.5223 0.461438 9.32832 0.8656 7.99541 2.42388Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/LockLocked.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M9.83317 6.33333V4.33333C9.83317 2.49238 8.34079 1 6.49984 1C4.65889 1 3.1665 2.49238 3.1665 4.33333V6.33333M4.3665 13H8.63317C9.75328 13 10.3133 13 10.7412 12.782C11.1175 12.5903 11.4234 12.2843 11.6152 11.908C11.8332 11.4802 11.8332 10.9201 11.8332 9.8V9.53333C11.8332 8.41323 11.8332 7.85318 11.6152 7.42535C11.4234 7.04903 11.1175 6.74307 10.7412 6.55132C10.3133 6.33333 9.75328 6.33333 8.63317 6.33333H4.3665C3.2464 6.33333 2.68635 6.33333 2.25852 6.55132C1.8822 6.74307 1.57624 7.04903 1.38449 7.42535C1.1665 7.85318 1.1665 8.41323 1.1665 9.53333V9.8C1.1665 10.9201 1.1665 11.4802 1.38449 11.908C1.57624 12.2843 1.8822 12.5903 2.25852 12.782C2.68635 13 3.2464 13 4.3665 13Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

src/components/Icons/LockUnlocked.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 9V6C5 3.23858 7.23858 1 10 1C12.419 1 14.4367 2.71776 14.9 5M5.8 19H14.2C15.8802 19 16.7202 19 17.362 18.673C17.9265 18.3854 18.3854 17.9265 18.673 17.362C19 16.7202 19 15.8802 19 14.2V13.8C19 12.1198 19 11.2798 18.673 10.638C18.3854 10.0735 17.9265 9.6146 17.362 9.32698C16.7202 9 15.8802 9 14.2 9H5.8C4.11984 9 3.27976 9 2.63803 9.32698C2.07354 9.6146 1.6146 10.0735 1.32698 10.638C1 11.2798 1 12.1198 1 13.8V14.2C1 15.8802 1 16.7202 1.32698 17.362C1.6146 17.9265 2.07354 18.3854 2.63803 18.673C3.27976 19 4.11984 19 5.8 19Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M5 9V6C5 3.23858 7.23858 1 10 1C12.419 1 14.4367 2.71776 14.9 5M5.8 19H14.2C15.8802 19 16.7202 19 17.362 18.673C17.9265 18.3854 18.3854 17.9265 18.673 17.362C19 16.7202 19 15.8802 19 14.2V13.8C19 12.1198 19 11.2798 18.673 10.638C18.3854 10.0735 17.9265 9.6146 17.362 9.32698C16.7202 9 15.8802 9 14.2 9H5.8C4.11984 9 3.27976 9 2.63803 9.32698C2.07354 9.6146 1.6146 10.0735 1.32698 10.638C1 11.2798 1 12.1198 1 13.8V14.2C1 15.8802 1 16.7202 1.32698 17.362C1.6146 17.9265 2.07354 18.3854 2.63803 18.673C3.27976 19 4.11984 19 5.8 19Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/Logo.svg

@@ -1,24 +1,151 @@
-<svg  viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M35.5042 8.73388L31.2645 4.49421L25.9215 1.77318L19.999 0.833984L14.0764 1.77318L8.73339 4.49421L4.49372 8.73388L1.7727 14.0769L0.833496 19.9994L1.7727 25.922L4.49372 31.265L8.73339 35.5047L14.0764 38.2281L19.999 39.1673L25.9215 38.2281L31.2645 35.5047L35.5042 31.265L38.2276 25.922L39.1668 19.9994L38.2276 14.0769L35.5042 8.73388Z" stroke="currentColor" stroke-width="1.09999" stroke-miterlimit="10"/>
+  <path
-  <path d="M24.327 14.0462L19.998 6.7832" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    d="M35.5042 8.73388L31.2645 4.49421L25.9215 1.77318L19.999 0.833984L14.0764 1.77318L8.73339 4.49421L4.49372 8.73388L1.7727 14.0769L0.833496 19.9994L1.7727 25.922L4.49372 31.265L8.73339 35.5047L14.0764 38.2281L19.999 39.1673L25.9215 38.2281L31.2645 35.5047L35.5042 31.265L38.2276 25.922L39.1668 19.9994L38.2276 14.0769L35.5042 8.73388Z"
-  <path d="M11.0942 7.74661L19.9983 6.7832L28.9049 7.74661" stroke="currentColor" stroke-width="0.549996" stroke-miterlimit="10"/>
+    stroke="currentColor"
-  <path d="M15.6711 14.043H24.3265" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    stroke-width="1.09999"
-  <path d="M19.9976 6.7832L15.6711 14.0462" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    stroke-miterlimit="10"
-  <path d="M11.0942 7.7466L14.076 1.77539L19.9983 6.78319L25.9207 1.77539L28.9049 7.7466" stroke="currentColor" stroke-width="0.549996" stroke-miterlimit="10"/>
+  />
-  <path d="M31.2649 4.49414L19.9995 20.0004L8.73419 4.49414" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
-  <path d="M7.42725 15.9143L15.6722 14.043L12.9971 22.2766L19.9987 27.3641L27.7705 30.6962" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    d="M24.327 14.0462L19.998 6.7832"
-  <path d="M7.42725 15.918L12.9971 22.2803" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    stroke="currentColor"
-  <path d="M5.58927 24.6842L0.833008 20.0024L7.42658 15.917L4.49316 8.73606L11.094 7.74609L7.42658 15.917L5.58927 24.6842ZM5.58927 24.6842L12.2287 30.6989L19.9981 35.1562L25.9205 38.2323L27.7699 30.6989L35.503 31.2687L34.4069 24.6842" stroke="currentColor" stroke-width="0.549996" stroke-miterlimit="10"/>
+    stroke-width="0.549996"
-  <path d="M12.9973 22.2773L12.2295 30.6969" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    stroke-linecap="round"
-  <path d="M12.2295 30.6954L19.9989 27.3633" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    stroke-linejoin="round"
-  <path d="M19.9984 35.1555L14.076 38.2317L12.229 30.6983L4.49347 31.2681L5.58958 24.6836" stroke="currentColor" stroke-width="0.549996" stroke-miterlimit="10"/>
+  />
-  <path d="M1.77374 25.921L19.9996 19.998V39.1672" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
-  <path d="M27.0025 22.2793L27.7703 30.6989L34.4073 24.6842L39.166 20.0024L32.5724 15.917L35.5035 8.73606L28.9051 7.74609L32.5724 15.917L24.3275 14.0457L27.0025 22.2793ZM27.0025 22.2793L32.5724 15.917L34.4073 24.6842" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    d="M11.0942 7.74661L19.9983 6.7832L28.9049 7.74661"
-  <path d="M19.998 19.998L38.2264 25.921" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    stroke="currentColor"
-  <path d="M19.998 27.3648L27.0021 22.2773" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    stroke-width="0.549996"
-  <path d="M19.998 35.1565L27.7698 30.6992L31.2634 35.509" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    stroke-miterlimit="10"
-  <path d="M19.998 6.78104V0.833984" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+  />
-  <path d="M32.5713 15.9156L38.2257 14.0781" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
-  <path d="M12.2302 30.6992L8.73419 35.509" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    d="M15.6711 14.043H24.3265"
-  <path d="M7.42814 15.9156L1.77374 14.0781" stroke="currentColor" stroke-width="0.549996" stroke-linecap="round" stroke-linejoin="round"/>
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M19.9976 6.7832L15.6711 14.0462"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M11.0942 7.7466L14.076 1.77539L19.9983 6.78319L25.9207 1.77539L28.9049 7.7466"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-miterlimit="10"
+  />
+  <path
+    d="M31.2649 4.49414L19.9995 20.0004L8.73419 4.49414"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M7.42725 15.9143L15.6722 14.043L12.9971 22.2766L19.9987 27.3641L27.7705 30.6962"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M7.42725 15.918L12.9971 22.2803"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M5.58927 24.6842L0.833008 20.0024L7.42658 15.917L4.49316 8.73606L11.094 7.74609L7.42658 15.917L5.58927 24.6842ZM5.58927 24.6842L12.2287 30.6989L19.9981 35.1562L25.9205 38.2323L27.7699 30.6989L35.503 31.2687L34.4069 24.6842"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-miterlimit="10"
+  />
+  <path
+    d="M12.9973 22.2773L12.2295 30.6969"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M12.2295 30.6954L19.9989 27.3633"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M19.9984 35.1555L14.076 38.2317L12.229 30.6983L4.49347 31.2681L5.58958 24.6836"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-miterlimit="10"
+  />
+  <path
+    d="M1.77374 25.921L19.9996 19.998V39.1672"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M27.0025 22.2793L27.7703 30.6989L34.4073 24.6842L39.166 20.0024L32.5724 15.917L35.5035 8.73606L28.9051 7.74609L32.5724 15.917L24.3275 14.0457L27.0025 22.2793ZM27.0025 22.2793L32.5724 15.917L34.4073 24.6842"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M19.998 19.998L38.2264 25.921"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M19.998 27.3648L27.0021 22.2773"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M19.998 35.1565L27.7698 30.6992L31.2634 35.509"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M19.998 6.78104V0.833984"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M32.5713 15.9156L38.2257 14.0781"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M12.2302 30.6992L8.73419 35.509"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M7.42814 15.9156L1.77374 14.0781"
+    stroke="currentColor"
+    stroke-width="0.549996"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/MarsProtocol.svg

@@ -1,5 +1,9 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 242 80">
-<path fill-rule='evenodd' clip-rule='evenodd' fill='currentColor' d="M40.3,0l12.4,2l11.2,5.7l8.8,8.8l5.7,11.2l2,12.4l-2,12.4
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="currentColor"
+    d="M40.3,0l12.4,2l11.2,5.7l8.8,8.8l5.7,11.2l2,12.4l-2,12.4
 	l-5.7,11.2l-8.8,8.8L52.7,78l-12.4,2L28,78l-11.2-5.7L8,63.5L2.3,52.4L0.3,40l2-12.4L8,16.5l8.8-8.8L28,2L40.3,0z M34.6,31.5
 	l5.7,7.9l5.7-7.9H34.6z M34,31.9l5.7,7.9l-9.3,3L34,31.9z M29.3,43.2l-8-8.7l-2.8,12.2L29.3,43.2z M17.8,46.4l2.7-12.1l-9.3,2.9
 	L17.8,46.4z M4.6,39.3l5.6-1.8L8.8,48.8L4.6,39.3z M1.8,40.1l1.8-0.6l-0.7,8L1.8,40.1z M3.6,51.5l-0.2-1l0.8-10.1l4.2,9.4L3.6,51.5z
@@ -35,56 +39,86 @@
 	l0.9,0.1l7.3,3.2h-8.2V1.5z M46.6,10.3l-5.3-4.7h8.6L46.6,10.3z M30.7,5.6l3.3,4.7l5.3-4.7H30.7z M30.2,4.8l-1.1-1.5l7.2-1.1
 	L30.2,4.8z M39.1,1.7l-7.3,3.2H40V1.5L39.1,1.7z M46.6,31.9l-5.7,7.9l9.3,3L46.6,31.9z M50,43.5l-9.3-3v9.7L50,43.5z M40,50.2v-9.7
 	l-9.3,3L40,50.2z M35,10.4l5.4-4.7l5.4,4.7H35z M13.9,25.8l-6.1,3.6l2.8,6.6L13.9,25.8z M18.6,60.8l1.6,7l7.1-0.7L18.6,60.8z
-	 M53.4,67.1l7.1,0.7l1.6-7L53.4,67.1z M66.8,25.8l6.1,3.6L70.1,36L66.8,25.8z"/>
+	 M53.4,67.1l7.1,0.7l1.6-7L53.4,67.1z M66.8,25.8l6.1,3.6L70.1,36L66.8,25.8z"
-<path fill='currentColor' d="M100.8,29l2.7,4.6l2.7-4.6l0.6,5.5h1.6l-1.2-9.4l-3.7,6.1l-3.7-6.1l-1.2,9.4h1.6L100.8,29z"/>
+  />
-<path fill='currentColor' d="M123.6,32.2h4.7l-0.3-1.3h-4.2L123.6,32.2z M126,28l1.4,3.3l0,0.4l1.2,2.7h1.7L126,25l-4.4,9.5h1.7
+  <path
-	l1.2-2.8l0-0.3L126,28z"/>
+    fill="currentColor"
-<path fill='currentColor' d="M145.9,30.2l2.9,4.3h1.8l-3-4.3H145.9z M144.1,25.5v9h1.5v-9H144.1z M145,26.8h1.8
+    d="M100.8,29l2.7,4.6l2.7-4.6l0.6,5.5h1.6l-1.2-9.4l-3.7,6.1l-3.7-6.1l-1.2,9.4h1.6L100.8,29z"
+  />
+  <path
+    fill="currentColor"
+    d="M123.6,32.2h4.7l-0.3-1.3h-4.2L123.6,32.2z M126,28l1.4,3.3l0,0.4l1.2,2.7h1.7L126,25l-4.4,9.5h1.7
+	l1.2-2.8l0-0.3L126,28z"
+  />
+  <path
+    fill="currentColor"
+    d="M145.9,30.2l2.9,4.3h1.8l-3-4.3H145.9z M144.1,25.5v9h1.5v-9H144.1z M145,26.8h1.8
 	c0.3,0,0.6,0.1,0.9,0.2c0.3,0.1,0.5,0.3,0.6,0.5c0.1,0.2,0.2,0.5,0.2,0.8c0,0.3-0.1,0.6-0.2,0.8c-0.1,0.2-0.3,0.4-0.6,0.5
 	c-0.3,0.1-0.6,0.2-0.9,0.2H145v1.2h1.9c0.6,0,1.2-0.1,1.7-0.3c0.5-0.2,0.9-0.6,1.1-1s0.4-0.9,0.4-1.5c0-0.6-0.1-1-0.4-1.5
-	c-0.3-0.4-0.6-0.7-1.1-1c-0.5-0.2-1-0.3-1.7-0.3H145V26.8z"/>
+	c-0.3-0.4-0.6-0.7-1.1-1c-0.5-0.2-1-0.3-1.7-0.3H145V26.8z"
-<path fill='currentColor' d="M164.9,31.6l-1.1,0.8c0.2,0.4,0.5,0.8,0.8,1.1s0.7,0.6,1.2,0.8c0.5,0.2,0.9,0.3,1.5,0.3
+  />
+  <path
+    fill="currentColor"
+    d="M164.9,31.6l-1.1,0.8c0.2,0.4,0.5,0.8,0.8,1.1s0.7,0.6,1.2,0.8c0.5,0.2,0.9,0.3,1.5,0.3
 	c0.4,0,0.8-0.1,1.1-0.2c0.4-0.1,0.7-0.3,1-0.5c0.3-0.2,0.5-0.5,0.7-0.8c0.2-0.3,0.2-0.7,0.2-1.1c0-0.4-0.1-0.7-0.2-1
 	c-0.1-0.3-0.3-0.5-0.5-0.8c-0.2-0.2-0.5-0.4-0.7-0.6c-0.3-0.1-0.5-0.3-0.8-0.4c-0.5-0.2-0.9-0.3-1.2-0.5c-0.3-0.2-0.5-0.3-0.7-0.5
 	c-0.1-0.2-0.2-0.4-0.2-0.6c0-0.3,0.1-0.5,0.3-0.7c0.2-0.2,0.5-0.3,0.9-0.3c0.3,0,0.6,0.1,0.8,0.2c0.2,0.1,0.4,0.3,0.6,0.5
 	c0.2,0.2,0.3,0.4,0.4,0.6l1.2-0.7c-0.2-0.3-0.4-0.6-0.6-0.9c-0.3-0.3-0.6-0.5-1-0.7c-0.4-0.2-0.9-0.3-1.4-0.3c-0.5,0-1,0.1-1.4,0.3
 	c-0.4,0.2-0.8,0.5-1,0.8c-0.2,0.4-0.4,0.8-0.4,1.3c0,0.4,0.1,0.8,0.2,1.1c0.2,0.3,0.4,0.5,0.6,0.7c0.2,0.2,0.5,0.4,0.8,0.5
 	c0.3,0.1,0.5,0.2,0.7,0.3c0.4,0.1,0.7,0.3,1,0.4c0.3,0.1,0.5,0.3,0.7,0.5c0.2,0.2,0.2,0.5,0.2,0.8c0,0.3-0.1,0.6-0.4,0.9
-	c-0.3,0.2-0.6,0.3-1,0.3c-0.3,0-0.6-0.1-0.9-0.2c-0.3-0.1-0.5-0.3-0.8-0.6C165.3,32.2,165.1,31.9,164.9,31.6z"/>
+	c-0.3,0.2-0.6,0.3-1,0.3c-0.3,0-0.6-0.1-0.9-0.2c-0.3-0.1-0.5-0.3-0.8-0.6C165.3,32.2,165.1,31.9,164.9,31.6z"
-<path fill='currentColor' d="M99.1,44.8v9h1.5v-9H99.1z M100,46.2h1.8c0.5,0,0.9,0.1,1.3,0.4c0.3,0.2,0.5,0.6,0.5,1.1
+  />
+  <path
+    fill="currentColor"
+    d="M99.1,44.8v9h1.5v-9H99.1z M100,46.2h1.8c0.5,0,0.9,0.1,1.3,0.4c0.3,0.2,0.5,0.6,0.5,1.1
 	s-0.2,0.8-0.5,1.1c-0.3,0.2-0.7,0.4-1.3,0.4H100v1.3h1.8c0.6,0,1.2-0.1,1.7-0.3c0.5-0.2,0.9-0.6,1.1-1c0.3-0.4,0.4-0.9,0.4-1.5
-	c0-0.6-0.1-1.1-0.4-1.5c-0.3-0.4-0.6-0.7-1.1-1c-0.5-0.2-1-0.3-1.7-0.3H100V46.2z"/>
+	c0-0.6-0.1-1.1-0.4-1.5c-0.3-0.4-0.6-0.7-1.1-1c-0.5-0.2-1-0.3-1.7-0.3H100V46.2z"
-<path fill='currentColor' d="M119.2,49.5l2.9,4.3h1.8l-3-4.3H119.2z M117.4,44.8v9h1.5v-9H117.4z M118.3,46.1h1.8
+  />
+  <path
+    fill="currentColor"
+    d="M119.2,49.5l2.9,4.3h1.8l-3-4.3H119.2z M117.4,44.8v9h1.5v-9H117.4z M118.3,46.1h1.8
 	c0.3,0,0.6,0.1,0.9,0.2c0.3,0.1,0.5,0.3,0.6,0.5c0.1,0.2,0.2,0.5,0.2,0.8c0,0.3-0.1,0.6-0.2,0.8c-0.1,0.2-0.3,0.4-0.6,0.5
 	c-0.3,0.1-0.6,0.2-0.9,0.2h-1.8v1.2h1.9c0.6,0,1.2-0.1,1.7-0.3c0.5-0.2,0.9-0.6,1.1-1c0.3-0.4,0.4-0.9,0.4-1.5c0-0.6-0.1-1-0.4-1.5
-	c-0.3-0.4-0.6-0.7-1.1-1c-0.5-0.2-1-0.3-1.7-0.3h-1.9V46.1z"/>
+	c-0.3-0.4-0.6-0.7-1.1-1c-0.5-0.2-1-0.3-1.7-0.3h-1.9V46.1z"
-<path fill='currentColor' d="M137,49.3c0-0.6,0.1-1.2,0.4-1.6c0.3-0.5,0.6-0.9,1.1-1.1c0.5-0.3,1-0.4,1.6-0.4
+  />
+  <path
+    fill="currentColor"
+    d="M137,49.3c0-0.6,0.1-1.2,0.4-1.6c0.3-0.5,0.6-0.9,1.1-1.1c0.5-0.3,1-0.4,1.6-0.4
 	c0.6,0,1.1,0.1,1.6,0.4c0.5,0.3,0.8,0.7,1.1,1.1c0.3,0.5,0.4,1,0.4,1.6s-0.1,1.2-0.4,1.7c-0.3,0.5-0.6,0.9-1.1,1.1
 	c-0.5,0.3-1,0.4-1.6,0.4c-0.6,0-1.1-0.1-1.6-0.4c-0.5-0.3-0.8-0.6-1.1-1.1C137.1,50.5,137,49.9,137,49.3z M135.4,49.3
 	c0,0.7,0.1,1.3,0.3,1.9c0.2,0.6,0.6,1.1,1,1.5c0.4,0.4,0.9,0.7,1.5,1c0.6,0.2,1.2,0.3,1.9,0.3c0.7,0,1.3-0.1,1.9-0.3
 	c0.6-0.2,1.1-0.6,1.5-1c0.4-0.4,0.7-0.9,1-1.5s0.3-1.2,0.3-1.9c0-0.7-0.1-1.3-0.3-1.9c-0.2-0.6-0.6-1-1-1.5c-0.4-0.4-0.9-0.7-1.5-1
 	c-0.6-0.2-1.2-0.3-1.9-0.3c-0.7,0-1.3,0.1-1.8,0.3c-0.6,0.2-1.1,0.6-1.5,1c-0.4,0.4-0.7,0.9-1,1.5C135.5,48,135.4,48.6,135.4,49.3z"
-	/>
+  />
-<path fill='currentColor' d="M155.7,46.2h2.4v7.6h1.5v-7.6h2.4v-1.4h-6.2V46.2z"/>
+  <path fill="currentColor" d="M155.7,46.2h2.4v7.6h1.5v-7.6h2.4v-1.4h-6.2V46.2z" />
-<path fill='currentColor' d="M174.4,49.3c0-0.6,0.1-1.2,0.4-1.6c0.3-0.5,0.6-0.9,1.1-1.1c0.5-0.3,1-0.4,1.6-0.4
+  <path
+    fill="currentColor"
+    d="M174.4,49.3c0-0.6,0.1-1.2,0.4-1.6c0.3-0.5,0.6-0.9,1.1-1.1c0.5-0.3,1-0.4,1.6-0.4
 	c0.6,0,1.1,0.1,1.6,0.4c0.5,0.3,0.8,0.7,1.1,1.1c0.3,0.5,0.4,1,0.4,1.6s-0.1,1.2-0.4,1.7c-0.3,0.5-0.6,0.9-1.1,1.1
 	c-0.5,0.3-1,0.4-1.6,0.4c-0.6,0-1.1-0.1-1.6-0.4c-0.5-0.3-0.8-0.6-1.1-1.1C174.5,50.5,174.4,49.9,174.4,49.3z M172.8,49.3
 	c0,0.7,0.1,1.3,0.3,1.9c0.2,0.6,0.6,1.1,1,1.5c0.4,0.4,0.9,0.7,1.5,1c0.6,0.2,1.2,0.3,1.9,0.3c0.7,0,1.3-0.1,1.9-0.3
 	c0.6-0.2,1.1-0.6,1.5-1c0.4-0.4,0.7-0.9,1-1.5c0.2-0.6,0.3-1.2,0.3-1.9c0-0.7-0.1-1.3-0.3-1.9c-0.2-0.6-0.6-1-1-1.5
 	c-0.4-0.4-0.9-0.7-1.5-1c-0.6-0.2-1.2-0.3-1.9-0.3c-0.7,0-1.3,0.1-1.8,0.3c-0.6,0.2-1.1,0.6-1.5,1c-0.4,0.4-0.7,0.9-1,1.5
-	C172.9,48,172.8,48.6,172.8,49.3z"/>
+	C172.9,48,172.8,48.6,172.8,49.3z"
-<path fill='currentColor' d="M195.6,49.3c0-0.6,0.1-1.2,0.4-1.7c0.3-0.5,0.7-0.8,1.1-1.1c0.5-0.3,1-0.4,1.5-0.4
+  />
+  <path
+    fill="currentColor"
+    d="M195.6,49.3c0-0.6,0.1-1.2,0.4-1.7c0.3-0.5,0.7-0.8,1.1-1.1c0.5-0.3,1-0.4,1.5-0.4
 	c0.4,0,0.8,0.1,1.2,0.2c0.3,0.1,0.6,0.3,0.9,0.5c0.3,0.2,0.5,0.4,0.7,0.6v-1.8c-0.4-0.3-0.8-0.5-1.2-0.7c-0.4-0.2-1-0.2-1.6-0.2
 	c-0.7,0-1.3,0.1-1.8,0.3c-0.6,0.2-1.1,0.5-1.5,1c-0.4,0.4-0.7,0.9-1,1.5c-0.2,0.6-0.3,1.2-0.3,1.9s0.1,1.3,0.3,1.9
 	c0.2,0.6,0.6,1.1,1,1.5c0.4,0.4,0.9,0.7,1.5,1c0.6,0.2,1.2,0.3,1.8,0.3c0.7,0,1.2-0.1,1.6-0.2c0.4-0.2,0.8-0.4,1.2-0.7v-1.8
 	c-0.2,0.2-0.4,0.5-0.7,0.7c-0.3,0.2-0.6,0.3-0.9,0.4c-0.3,0.1-0.7,0.2-1.2,0.2c-0.5,0-1.1-0.1-1.5-0.4c-0.5-0.3-0.8-0.6-1.1-1.1
-	C195.7,50.5,195.6,50,195.6,49.3z"/>
+	C195.7,50.5,195.6,50,195.6,49.3z"
-<path fill='currentColor' d="M215.3,49.3c0-0.6,0.1-1.2,0.4-1.6c0.3-0.5,0.6-0.9,1.1-1.1c0.5-0.3,1-0.4,1.6-0.4
+  />
+  <path
+    fill="currentColor"
+    d="M215.3,49.3c0-0.6,0.1-1.2,0.4-1.6c0.3-0.5,0.6-0.9,1.1-1.1c0.5-0.3,1-0.4,1.6-0.4
 	c0.6,0,1.1,0.1,1.6,0.4c0.5,0.3,0.8,0.7,1.1,1.1c0.3,0.5,0.4,1,0.4,1.6s-0.1,1.2-0.4,1.7c-0.3,0.5-0.6,0.9-1.1,1.1
 	c-0.5,0.3-1,0.4-1.6,0.4c-0.6,0-1.1-0.1-1.6-0.4c-0.5-0.3-0.8-0.6-1.1-1.1C215.4,50.5,215.3,49.9,215.3,49.3z M213.7,49.3
 	c0,0.7,0.1,1.3,0.3,1.9c0.2,0.6,0.6,1.1,1,1.5c0.4,0.4,0.9,0.7,1.5,1c0.6,0.2,1.2,0.3,1.9,0.3c0.7,0,1.3-0.1,1.9-0.3
 	c0.6-0.2,1.1-0.6,1.5-1c0.4-0.4,0.7-0.9,1-1.5c0.2-0.6,0.3-1.2,0.3-1.9c0-0.7-0.1-1.3-0.3-1.9c-0.2-0.6-0.6-1-1-1.5
 	c-0.4-0.4-0.9-0.7-1.5-1c-0.6-0.2-1.2-0.3-1.9-0.3c-0.7,0-1.3,0.1-1.8,0.3c-0.6,0.2-1.1,0.6-1.5,1c-0.4,0.4-0.7,0.9-1,1.5
-	C213.8,48,213.7,48.6,213.7,49.3z"/>
+	C213.8,48,213.7,48.6,213.7,49.3z"
-<path fill='currentColor' d="M235.4,44.8v9h5.1v-1.4h-3.6v-7.6H235.4z"/>
+  />
+  <path fill="currentColor" d="M235.4,44.8v9h5.1v-1.4h-3.6v-7.6H235.4z" />
 </svg>

src/components/Icons/Osmo.svg

@@ -1,340 +1,340 @@
-<svg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
+<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <path
-    d='M22.8084 4.42014C22.5667 3.50503 21.7897 2.58992 20.3912 1.57122C19.2689 0.759705 18.0775 0.293518 17.1279 0.293518C16.9379 0.293518 16.7653 0.310784 16.5926 0.345317C16.1609 0.431648 15.7811 0.742439 15.5394 1.20863C15.2458 1.76114 15.1768 2.50359 15.3667 2.95251C15.4358 3.09064 15.5221 3.2633 15.6257 3.4187C14.7106 3.97122 14.1926 4.12661 14.1235 4.14388C16.5063 4.93812 18.4919 6.59568 19.735 8.75395L19.7523 8.54676C19.8041 7.97697 19.9768 7.32086 20.2185 6.64748C20.4602 6.71654 20.702 6.75107 20.9437 6.75107C21.5825 6.75107 22.135 6.49208 22.4804 6.02589C22.8257 5.55971 22.9638 4.93812 22.8084 4.42014Z'
+    d="M22.8084 4.42014C22.5667 3.50503 21.7897 2.58992 20.3912 1.57122C19.2689 0.759705 18.0775 0.293518 17.1279 0.293518C16.9379 0.293518 16.7653 0.310784 16.5926 0.345317C16.1609 0.431648 15.7811 0.742439 15.5394 1.20863C15.2458 1.76114 15.1768 2.50359 15.3667 2.95251C15.4358 3.09064 15.5221 3.2633 15.6257 3.4187C14.7106 3.97122 14.1926 4.12661 14.1235 4.14388C16.5063 4.93812 18.4919 6.59568 19.735 8.75395L19.7523 8.54676C19.8041 7.97697 19.9768 7.32086 20.2185 6.64748C20.4602 6.71654 20.702 6.75107 20.9437 6.75107C21.5825 6.75107 22.135 6.49208 22.4804 6.02589C22.8257 5.55971 22.9638 4.93812 22.8084 4.42014Z"
-    fill='#5E12A0'
+    fill="#5E12A0"
   ></path>
   <path
-    d='M20.3225 6.14679C21.8937 6.57844 22.5326 5.36981 22.3254 4.5583C22.1009 3.74679 21.3757 2.91801 20.098 1.98564C18.8203 1.05326 17.5254 0.673409 16.6966 0.846071C15.8678 1.01873 15.6261 2.27916 15.8333 2.76262C15.9196 2.95255 16.1096 3.2288 16.3685 3.5396C16.0405 3.76406 15.7297 3.93672 15.4707 4.09211C17.0592 4.80003 18.4405 5.90506 19.4765 7.28636C19.5973 6.82017 19.77 6.40578 19.9254 6.04319C20.0462 6.06046 20.1844 6.09499 20.3225 6.14679Z'
+    d="M20.3225 6.14679C21.8937 6.57844 22.5326 5.36981 22.3254 4.5583C22.1009 3.74679 21.3757 2.91801 20.098 1.98564C18.8203 1.05326 17.5254 0.673409 16.6966 0.846071C15.8678 1.01873 15.6261 2.27916 15.8333 2.76262C15.9196 2.95255 16.1096 3.2288 16.3685 3.5396C16.0405 3.76406 15.7297 3.93672 15.4707 4.09211C17.0592 4.80003 18.4405 5.90506 19.4765 7.28636C19.5973 6.82017 19.77 6.40578 19.9254 6.04319C20.0462 6.06046 20.1844 6.09499 20.3225 6.14679Z"
-    fill='url(#paint0_radial_8766_48743)'
+    fill="url(#paint0_radial_8766_48743)"
   ></path>
   <path
-    d='M11.3266 23.0676C16.6572 23.0676 20.9784 18.7464 20.9784 13.4158C20.9784 8.08525 16.6572 3.76404 11.3266 3.76404C5.99601 3.76404 1.6748 8.08525 1.6748 13.4158C1.6748 18.7464 5.99601 23.0676 11.3266 23.0676Z'
+    d="M11.3266 23.0676C16.6572 23.0676 20.9784 18.7464 20.9784 13.4158C20.9784 8.08525 16.6572 3.76404 11.3266 3.76404C5.99601 3.76404 1.6748 8.08525 1.6748 13.4158C1.6748 18.7464 5.99601 23.0676 11.3266 23.0676Z"
-    fill='url(#paint1_radial_8766_48743)'
+    fill="url(#paint1_radial_8766_48743)"
   ></path>
   <path
-    d='M21.5307 3.76403C20.2185 2.38274 19.1134 2.02015 17.784 1.72662C16.748 1.4849 17.0242 0.897845 18.2847 1.01871C17.6804 0.811514 17.1106 0.759716 16.6962 0.846047C15.8674 1.01871 15.6257 2.27914 15.8329 2.76259C15.9192 2.95252 16.1091 3.22878 16.3681 3.53957C15.9019 3.85036 15.5048 4.07482 15.1768 4.24749C15.3322 4.31655 15.5221 4.40288 15.7465 4.52375C16.3336 4.83454 16.9724 5.35252 16.9724 5.35252C16.0055 4.52375 16.2127 4.14389 17.5422 3.21151C17.9566 2.91799 18.7163 2.95252 19.4242 3.31511C20.1322 3.6777 20.9609 4.59281 20.9609 4.59281L20.1667 6.11223C20.2185 6.1295 20.2703 6.14677 20.3221 6.16403C20.8228 6.30216 21.2199 6.26763 21.5307 6.14677C21.8933 5.92231 22.8429 5.16259 21.5307 3.76403Z'
+    d="M21.5307 3.76403C20.2185 2.38274 19.1134 2.02015 17.784 1.72662C16.748 1.4849 17.0242 0.897845 18.2847 1.01871C17.6804 0.811514 17.1106 0.759716 16.6962 0.846047C15.8674 1.01871 15.6257 2.27914 15.8329 2.76259C15.9192 2.95252 16.1091 3.22878 16.3681 3.53957C15.9019 3.85036 15.5048 4.07482 15.1768 4.24749C15.3322 4.31655 15.5221 4.40288 15.7465 4.52375C16.3336 4.83454 16.9724 5.35252 16.9724 5.35252C16.0055 4.52375 16.2127 4.14389 17.5422 3.21151C17.9566 2.91799 18.7163 2.95252 19.4242 3.31511C20.1322 3.6777 20.9609 4.59281 20.9609 4.59281L20.1667 6.11223C20.2185 6.1295 20.2703 6.14677 20.3221 6.16403C20.8228 6.30216 21.2199 6.26763 21.5307 6.14677C21.8933 5.92231 22.8429 5.16259 21.5307 3.76403Z"
-    fill='#A98698'
+    fill="#A98698"
-    fill-opacity='0.6'
+    fill-opacity="0.6"
   ></path>
   <path
-    d='M17.7671 2.55539C18.1124 2.69352 18.5613 2.93525 19.1138 3.29784C19.7699 3.72949 20.3397 4.21295 20.7023 4.5928C20.098 5.38705 19.7009 6.47482 19.4592 7.23453C19.58 7.40719 19.7181 7.57985 19.839 7.75252C19.9599 7.32086 20.1671 6.68201 20.4433 6.04316C20.5124 6.06043 20.5987 6.06043 20.6851 6.06043C20.8922 6.06043 21.134 6.0259 21.3239 5.8705C21.462 5.7669 21.6174 5.57698 21.6002 5.23165C21.6002 4.90359 21.3412 4.48921 20.8059 3.98849C20.4261 3.6259 19.9081 3.22878 19.3901 2.86619C17.9052 1.88201 16.8692 1.60575 16.403 2.07194C16.0922 2.38273 16.1268 2.76259 16.2304 3.03885C15.6779 3.40144 15.2117 3.66043 14.9009 3.83309C15.1081 3.90216 15.298 3.98849 15.5052 4.07482C16.0577 3.78129 16.852 3.28057 17.7671 2.55539ZM21.0304 5.02446C21.0822 5.11079 21.0994 5.19712 21.0994 5.24892C21.0994 5.40431 21.0476 5.45611 21.0131 5.49065C20.944 5.54244 20.8059 5.57698 20.6851 5.57698C20.7886 5.36978 20.9095 5.19712 21.0304 5.02446ZM16.7656 2.4518C16.8174 2.4 16.9556 2.36547 17.18 2.4C17.0074 2.53813 16.8347 2.65899 16.662 2.77985C16.6448 2.65899 16.662 2.53813 16.7656 2.4518Z'
+    d="M17.7671 2.55539C18.1124 2.69352 18.5613 2.93525 19.1138 3.29784C19.7699 3.72949 20.3397 4.21295 20.7023 4.5928C20.098 5.38705 19.7009 6.47482 19.4592 7.23453C19.58 7.40719 19.7181 7.57985 19.839 7.75252C19.9599 7.32086 20.1671 6.68201 20.4433 6.04316C20.5124 6.06043 20.5987 6.06043 20.6851 6.06043C20.8922 6.06043 21.134 6.0259 21.3239 5.8705C21.462 5.7669 21.6174 5.57698 21.6002 5.23165C21.6002 4.90359 21.3412 4.48921 20.8059 3.98849C20.4261 3.6259 19.9081 3.22878 19.3901 2.86619C17.9052 1.88201 16.8692 1.60575 16.403 2.07194C16.0922 2.38273 16.1268 2.76259 16.2304 3.03885C15.6779 3.40144 15.2117 3.66043 14.9009 3.83309C15.1081 3.90216 15.298 3.98849 15.5052 4.07482C16.0577 3.78129 16.852 3.28057 17.7671 2.55539ZM21.0304 5.02446C21.0822 5.11079 21.0994 5.19712 21.0994 5.24892C21.0994 5.40431 21.0476 5.45611 21.0131 5.49065C20.944 5.54244 20.8059 5.57698 20.6851 5.57698C20.7886 5.36978 20.9095 5.19712 21.0304 5.02446ZM16.7656 2.4518C16.8174 2.4 16.9556 2.36547 17.18 2.4C17.0074 2.53813 16.8347 2.65899 16.662 2.77985C16.6448 2.65899 16.662 2.53813 16.7656 2.4518Z"
-    fill='#5E12A0'
+    fill="#5E12A0"
   ></path>
   <path
-    d='M11.3266 3.19427C5.68052 3.19427 1.10498 7.76981 1.10498 13.4159C1.10498 19.0619 5.68052 23.6374 11.3266 23.6374C16.9726 23.6374 21.5481 19.0619 21.5481 13.4159C21.5481 7.76981 16.9553 3.19427 11.3266 3.19427ZM11.3266 23.0677C5.99131 23.0677 1.67476 18.7511 1.67476 13.4159C1.67476 8.08061 5.99131 3.76406 11.3266 3.76406C16.6618 3.76406 20.9784 8.08061 20.9784 13.4159C20.9784 18.7511 16.6445 23.0677 11.3266 23.0677Z'
+    d="M11.3266 3.19427C5.68052 3.19427 1.10498 7.76981 1.10498 13.4159C1.10498 19.0619 5.68052 23.6374 11.3266 23.6374C16.9726 23.6374 21.5481 19.0619 21.5481 13.4159C21.5481 7.76981 16.9553 3.19427 11.3266 3.19427ZM11.3266 23.0677C5.99131 23.0677 1.67476 18.7511 1.67476 13.4159C1.67476 8.08061 5.99131 3.76406 11.3266 3.76406C16.6618 3.76406 20.9784 8.08061 20.9784 13.4159C20.9784 18.7511 16.6445 23.0677 11.3266 23.0677Z"
-    fill='#5E12A0'
+    fill="#5E12A0"
   ></path>
   <path
-    d='M11.3266 23.0676C16.6572 23.0676 20.9784 18.7464 20.9784 13.4158C20.9784 8.08525 16.6572 3.76404 11.3266 3.76404C5.99601 3.76404 1.6748 8.08525 1.6748 13.4158C1.6748 18.7464 5.99601 23.0676 11.3266 23.0676Z'
+    d="M11.3266 23.0676C16.6572 23.0676 20.9784 18.7464 20.9784 13.4158C20.9784 8.08525 16.6572 3.76404 11.3266 3.76404C5.99601 3.76404 1.6748 8.08525 1.6748 13.4158C1.6748 18.7464 5.99601 23.0676 11.3266 23.0676Z"
-    fill='url(#paint2_linear_8766_48743)'
+    fill="url(#paint2_linear_8766_48743)"
   ></path>
   <path
-    d='M11.2577 21.8935C5.99153 21.0475 2.41743 16.0921 3.28074 10.8259C3.6606 8.49494 4.8347 6.50933 6.49225 5.07623C4.07499 6.47479 2.2793 8.90933 1.79585 11.8791C0.949806 17.1453 4.52391 22.1007 9.77283 22.9467C12.7081 23.4302 15.5397 22.5151 17.6289 20.7194C15.7815 21.7899 13.5369 22.2561 11.2577 21.8935Z'
+    d="M11.2577 21.8935C5.99153 21.0475 2.41743 16.0921 3.28074 10.8259C3.6606 8.49494 4.8347 6.50933 6.49225 5.07623C4.07499 6.47479 2.2793 8.90933 1.79585 11.8791C0.949806 17.1453 4.52391 22.1007 9.77283 22.9467C12.7081 23.4302 15.5397 22.5151 17.6289 20.7194C15.7815 21.7899 13.5369 22.2561 11.2577 21.8935Z"
-    fill='#A98698'
+    fill="#A98698"
-    fill-opacity='0.6'
+    fill-opacity="0.6"
   ></path>
   <path
-    d='M12.8631 3.90216C10.4285 3.50504 8.06307 4.05756 6.12926 5.28346C6.09473 5.31799 6.0602 5.35252 6.0602 5.35252C6.80264 4.9036 7.89041 4.50648 7.89041 4.50648C5.09329 6.1295 4.22998 7.97698 4.22998 7.97698C5.31775 5.87051 8.51199 4.38562 11.0156 4.28202C13.5192 4.17842 15.1595 4.92087 17.1624 6.52662C19.1652 8.14964 20.3739 11.4648 20.253 14.0892C20.1494 16.7137 18.7681 18.8374 18.7681 18.8374C19.7177 17.6115 20.2875 16.7137 20.6501 15.7986C20.7192 15.5223 20.7883 15.246 20.8228 14.9525C21.6861 9.7036 18.1293 4.74821 12.8631 3.90216Z'
+    d="M12.8631 3.90216C10.4285 3.50504 8.06307 4.05756 6.12926 5.28346C6.09473 5.31799 6.0602 5.35252 6.0602 5.35252C6.80264 4.9036 7.89041 4.50648 7.89041 4.50648C5.09329 6.1295 4.22998 7.97698 4.22998 7.97698C5.31775 5.87051 8.51199 4.38562 11.0156 4.28202C13.5192 4.17842 15.1595 4.92087 17.1624 6.52662C19.1652 8.14964 20.3739 11.4648 20.253 14.0892C20.1494 16.7137 18.7681 18.8374 18.7681 18.8374C19.7177 17.6115 20.2875 16.7137 20.6501 15.7986C20.7192 15.5223 20.7883 15.246 20.8228 14.9525C21.6861 9.7036 18.1293 4.74821 12.8631 3.90216Z"
-    fill='url(#paint3_linear_8766_48743)'
+    fill="url(#paint3_linear_8766_48743)"
   ></path>
   <path
-    d='M20.4951 13.3295C20.4951 18.3885 16.3857 22.4978 11.3267 22.4978C6.26773 22.4978 2.14111 18.3885 2.14111 13.3295H20.4951Z'
+    d="M20.4951 13.3295C20.4951 18.3885 16.3857 22.4978 11.3267 22.4978C6.26773 22.4978 2.14111 18.3885 2.14111 13.3295H20.4951Z"
-    fill='url(#paint4_linear_8766_48743)'
+    fill="url(#paint4_linear_8766_48743)"
   ></path>
   <path
-    d='M19.7696 13.3295C19.7696 18.2676 15.8675 22.3079 10.9639 22.4978H11.3265C16.3855 22.4978 20.4948 18.3885 20.4948 13.3295H19.7696Z'
+    d="M19.7696 13.3295C19.7696 18.2676 15.8675 22.3079 10.9639 22.4978H11.3265C16.3855 22.4978 20.4948 18.3885 20.4948 13.3295H19.7696Z"
-    fill='url(#paint5_linear_8766_48743)'
+    fill="url(#paint5_linear_8766_48743)"
   ></path>
   <path
-    d='M3.43608 13.3295H2.14111C2.14111 18.3885 6.25047 22.4978 11.3095 22.4978C11.5339 22.4978 11.7411 22.4978 11.9483 22.4805C7.20011 22.1352 3.43608 18.164 3.43608 13.3295Z'
+    d="M3.43608 13.3295H2.14111C2.14111 18.3885 6.25047 22.4978 11.3095 22.4978C11.5339 22.4978 11.7411 22.4978 11.9483 22.4805C7.20011 22.1352 3.43608 18.164 3.43608 13.3295Z"
-    fill='url(#paint6_linear_8766_48743)'
+    fill="url(#paint6_linear_8766_48743)"
   ></path>
   <path
-    d='M20.4778 13.4158C20.4778 12.3626 18.6476 11.7583 16.2131 11.5511C14.4519 11.413 12.6735 11.5856 10.6361 12.2072C8.87493 12.7252 7.28644 12.6389 6.1296 12.5007C3.55694 12.2072 2.14111 12.1727 2.14111 13.4158C2.14111 15.2115 5.80155 17.4561 11.2922 16.6792C14.072 16.282 15.5051 15.4705 17.1454 14.918C18.9238 14.331 20.4778 14.3482 20.4778 13.4158Z'
+    d="M20.4778 13.4158C20.4778 12.3626 18.6476 11.7583 16.2131 11.5511C14.4519 11.413 12.6735 11.5856 10.6361 12.2072C8.87493 12.7252 7.28644 12.6389 6.1296 12.5007C3.55694 12.2072 2.14111 12.1727 2.14111 13.4158C2.14111 15.2115 5.80155 17.4561 11.2922 16.6792C14.072 16.282 15.5051 15.4705 17.1454 14.918C18.9238 14.331 20.4778 14.3482 20.4778 13.4158Z"
-    fill='url(#paint7_linear_8766_48743)'
+    fill="url(#paint7_linear_8766_48743)"
   ></path>
   <path
-    d='M14.3308 9.06476C15.1891 9.06476 15.8848 8.36911 15.8848 7.5108C15.8848 6.6525 15.1891 5.95685 14.3308 5.95685C13.4725 5.95685 12.7769 6.6525 12.7769 7.5108C12.7769 8.36911 13.4725 9.06476 14.3308 9.06476Z'
+    d="M14.3308 9.06476C15.1891 9.06476 15.8848 8.36911 15.8848 7.5108C15.8848 6.6525 15.1891 5.95685 14.3308 5.95685C13.4725 5.95685 12.7769 6.6525 12.7769 7.5108C12.7769 8.36911 13.4725 9.06476 14.3308 9.06476Z"
-    fill='white'
+    fill="white"
   ></path>
   <path
-    d='M16.869 10.2216C17.2314 10.2216 17.5251 9.9279 17.5251 9.56548C17.5251 9.20306 17.2314 8.90936 16.869 8.90936C16.5066 8.90936 16.2129 9.20306 16.2129 9.56548C16.2129 9.9279 16.5066 10.2216 16.869 10.2216Z'
+    d="M16.869 10.2216C17.2314 10.2216 17.5251 9.9279 17.5251 9.56548C17.5251 9.20306 17.2314 8.90936 16.869 8.90936C16.5066 8.90936 16.2129 9.20306 16.2129 9.56548C16.2129 9.9279 16.5066 10.2216 16.869 10.2216Z"
-    fill='white'
+    fill="white"
   ></path>
   <path
-    d='M19.2175 6.2676H19.1829C19.0793 6.25034 19.0103 6.14674 19.0275 6.02588C19.1829 5.23163 19.8391 4.47192 19.8736 4.43739C19.9427 4.35106 20.0808 4.35106 20.1498 4.42012C20.2362 4.48919 20.2362 4.62732 20.1671 4.69638C20.1498 4.71365 19.5455 5.42156 19.4074 6.11221C19.3901 6.2158 19.3038 6.2676 19.2175 6.2676Z'
+    d="M19.2175 6.2676H19.1829C19.0793 6.25034 19.0103 6.14674 19.0275 6.02588C19.1829 5.23163 19.8391 4.47192 19.8736 4.43739C19.9427 4.35106 20.0808 4.35106 20.1498 4.42012C20.2362 4.48919 20.2362 4.62732 20.1671 4.69638C20.1498 4.71365 19.5455 5.42156 19.4074 6.11221C19.3901 6.2158 19.3038 6.2676 19.2175 6.2676Z"
-    fill='url(#paint8_linear_8766_48743)'
+    fill="url(#paint8_linear_8766_48743)"
   ></path>
   <path
-    d='M10.6876 20.6158C10.9545 20.6158 11.171 20.3993 11.171 20.1324C11.171 19.8654 10.9545 19.6489 10.6876 19.6489C10.4206 19.6489 10.2041 19.8654 10.2041 20.1324C10.2041 20.3993 10.4206 20.6158 10.6876 20.6158Z'
+    d="M10.6876 20.6158C10.9545 20.6158 11.171 20.3993 11.171 20.1324C11.171 19.8654 10.9545 19.6489 10.6876 19.6489C10.4206 19.6489 10.2041 19.8654 10.2041 20.1324C10.2041 20.3993 10.4206 20.6158 10.6876 20.6158Z"
-    fill='white'
+    fill="white"
-    fill-opacity='0.2'
+    fill-opacity="0.2"
   ></path>
   <path
-    d='M10.4117 20.4432C10.2218 20.2532 10.2218 19.9425 10.4117 19.7525C10.4462 19.718 10.4808 19.7007 10.5153 19.6662C10.4462 19.6835 10.3944 19.718 10.3426 19.7698C10.1527 19.9597 10.1527 20.2705 10.3426 20.4604C10.498 20.6158 10.7398 20.6504 10.9297 20.5468C10.757 20.6158 10.5498 20.5813 10.4117 20.4432Z'
+    d="M10.4117 20.4432C10.2218 20.2532 10.2218 19.9425 10.4117 19.7525C10.4462 19.718 10.4808 19.7007 10.5153 19.6662C10.4462 19.6835 10.3944 19.718 10.3426 19.7698C10.1527 19.9597 10.1527 20.2705 10.3426 20.4604C10.498 20.6158 10.7398 20.6504 10.9297 20.5468C10.757 20.6158 10.5498 20.5813 10.4117 20.4432Z"
-    fill='url(#paint9_linear_8766_48743)'
+    fill="url(#paint9_linear_8766_48743)"
   ></path>
   <path
-    d='M10.8604 19.9942C10.9176 19.9942 10.964 19.9478 10.964 19.8906C10.964 19.8335 10.9176 19.787 10.8604 19.787C10.8033 19.787 10.7568 19.8335 10.7568 19.8906C10.7568 19.9478 10.8033 19.9942 10.8604 19.9942Z'
+    d="M10.8604 19.9942C10.9176 19.9942 10.964 19.9478 10.964 19.8906C10.964 19.8335 10.9176 19.787 10.8604 19.787C10.8033 19.787 10.7568 19.8335 10.7568 19.8906C10.7568 19.9478 10.8033 19.9942 10.8604 19.9942Z"
-    fill='white'
+    fill="white"
-    fill-opacity='0.3'
+    fill-opacity="0.3"
   ></path>
   <path
-    d='M13.2086 20.3741C13.4755 20.3741 13.692 20.1576 13.692 19.8906C13.692 19.6237 13.4755 19.4072 13.2086 19.4072C12.9416 19.4072 12.7251 19.6237 12.7251 19.8906C12.7251 20.1576 12.9416 20.3741 13.2086 20.3741Z'
+    d="M13.2086 20.3741C13.4755 20.3741 13.692 20.1576 13.692 19.8906C13.692 19.6237 13.4755 19.4072 13.2086 19.4072C12.9416 19.4072 12.7251 19.6237 12.7251 19.8906C12.7251 20.1576 12.9416 20.3741 13.2086 20.3741Z"
-    fill='white'
+    fill="white"
-    fill-opacity='0.2'
+    fill-opacity="0.2"
   ></path>
   <path
-    d='M12.9322 20.2014C12.7423 20.0115 12.7423 19.7007 12.9322 19.5108C12.9667 19.4762 13.0013 19.459 13.0358 19.4244C12.9667 19.4417 12.9149 19.4762 12.8631 19.528C12.6732 19.718 12.6732 20.0288 12.8631 20.2187C13.0185 20.3741 13.2603 20.4086 13.4502 20.305C13.2775 20.3741 13.0703 20.3395 12.9322 20.2014Z'
+    d="M12.9322 20.2014C12.7423 20.0115 12.7423 19.7007 12.9322 19.5108C12.9667 19.4762 13.0013 19.459 13.0358 19.4244C12.9667 19.4417 12.9149 19.4762 12.8631 19.528C12.6732 19.718 12.6732 20.0288 12.8631 20.2187C13.0185 20.3741 13.2603 20.4086 13.4502 20.305C13.2775 20.3741 13.0703 20.3395 12.9322 20.2014Z"
-    fill='url(#paint10_linear_8766_48743)'
+    fill="url(#paint10_linear_8766_48743)"
   ></path>
   <path
-    d='M13.3814 19.7525C13.4386 19.7525 13.485 19.7061 13.485 19.6489C13.485 19.5918 13.4386 19.5453 13.3814 19.5453C13.3243 19.5453 13.2778 19.5918 13.2778 19.6489C13.2778 19.7061 13.3243 19.7525 13.3814 19.7525Z'
+    d="M13.3814 19.7525C13.4386 19.7525 13.485 19.7061 13.485 19.6489C13.485 19.5918 13.4386 19.5453 13.3814 19.5453C13.3243 19.5453 13.2778 19.5918 13.2778 19.6489C13.2778 19.7061 13.3243 19.7525 13.3814 19.7525Z"
-    fill='white'
+    fill="white"
-    fill-opacity='0.3'
+    fill-opacity="0.3"
   ></path>
   <path
-    d='M11.9656 21.4964C12.1659 21.4964 12.3282 21.3341 12.3282 21.1338C12.3282 20.9335 12.1659 20.7712 11.9656 20.7712C11.7653 20.7712 11.603 20.9335 11.603 21.1338C11.603 21.3341 11.7653 21.4964 11.9656 21.4964Z'
+    d="M11.9656 21.4964C12.1659 21.4964 12.3282 21.3341 12.3282 21.1338C12.3282 20.9335 12.1659 20.7712 11.9656 20.7712C11.7653 20.7712 11.603 20.9335 11.603 21.1338C11.603 21.3341 11.7653 21.4964 11.9656 21.4964Z"
-    fill='white'
+    fill="white"
-    fill-opacity='0.2'
+    fill-opacity="0.2"
   ></path>
   <path
-    d='M11.7584 21.3583C11.6203 21.2202 11.6203 20.9784 11.7584 20.8403C11.7757 20.823 11.8102 20.8058 11.8275 20.7885C11.7757 20.8058 11.7412 20.8403 11.7066 20.8748C11.5685 21.013 11.5685 21.2547 11.7066 21.3928C11.8275 21.5137 12.0002 21.531 12.1555 21.4446C12.0174 21.4964 11.862 21.4619 11.7584 21.3583Z'
+    d="M11.7584 21.3583C11.6203 21.2202 11.6203 20.9784 11.7584 20.8403C11.7757 20.823 11.8102 20.8058 11.8275 20.7885C11.7757 20.8058 11.7412 20.8403 11.7066 20.8748C11.5685 21.013 11.5685 21.2547 11.7066 21.3928C11.8275 21.5137 12.0002 21.531 12.1555 21.4446C12.0174 21.4964 11.862 21.4619 11.7584 21.3583Z"
-    fill='url(#paint11_linear_8766_48743)'
+    fill="url(#paint11_linear_8766_48743)"
   ></path>
   <path
-    d='M12.0862 21.0129C12.1243 21.0129 12.1552 20.982 12.1552 20.9439C12.1552 20.9057 12.1243 20.8748 12.0862 20.8748C12.048 20.8748 12.0171 20.9057 12.0171 20.9439C12.0171 20.982 12.048 21.0129 12.0862 21.0129Z'
+    d="M12.0862 21.0129C12.1243 21.0129 12.1552 20.982 12.1552 20.9439C12.1552 20.9057 12.1243 20.8748 12.0862 20.8748C12.048 20.8748 12.0171 20.9057 12.0171 20.9439C12.0171 20.982 12.048 21.0129 12.0862 21.0129Z"
-    fill='white'
+    fill="white"
-    fill-opacity='0.3'
+    fill-opacity="0.3"
   ></path>
   <path
-    d='M14.1927 21.2374C14.393 21.2374 14.5553 21.0751 14.5553 20.8748C14.5553 20.6745 14.393 20.5122 14.1927 20.5122C13.9924 20.5122 13.8301 20.6745 13.8301 20.8748C13.8301 21.0751 13.9924 21.2374 14.1927 21.2374Z'
+    d="M14.1927 21.2374C14.393 21.2374 14.5553 21.0751 14.5553 20.8748C14.5553 20.6745 14.393 20.5122 14.1927 20.5122C13.9924 20.5122 13.8301 20.6745 13.8301 20.8748C13.8301 21.0751 13.9924 21.2374 14.1927 21.2374Z"
-    fill='white'
+    fill="white"
-    fill-opacity='0.2'
+    fill-opacity="0.2"
   ></path>
   <path
-    d='M13.9855 21.0993C13.8473 20.9611 13.8473 20.7194 13.9855 20.5813C14.0027 20.564 14.0373 20.5467 14.0545 20.5295C14.0027 20.5467 13.9682 20.5813 13.9337 20.6158C13.7955 20.7539 13.7955 20.9957 13.9337 21.1338C14.0545 21.2547 14.2272 21.2719 14.3826 21.1856C14.2445 21.2374 14.0891 21.2029 13.9855 21.0993Z'
+    d="M13.9855 21.0993C13.8473 20.9611 13.8473 20.7194 13.9855 20.5813C14.0027 20.564 14.0373 20.5467 14.0545 20.5295C14.0027 20.5467 13.9682 20.5813 13.9337 20.6158C13.7955 20.7539 13.7955 20.9957 13.9337 21.1338C14.0545 21.2547 14.2272 21.2719 14.3826 21.1856C14.2445 21.2374 14.0891 21.2029 13.9855 21.0993Z"
-    fill='url(#paint12_linear_8766_48743)'
+    fill="url(#paint12_linear_8766_48743)"
   ></path>
   <path
-    d='M14.3137 20.754C14.3519 20.754 14.3828 20.7231 14.3828 20.6849C14.3828 20.6468 14.3519 20.6158 14.3137 20.6158C14.2755 20.6158 14.2446 20.6468 14.2446 20.6849C14.2446 20.7231 14.2755 20.754 14.3137 20.754Z'
+    d="M14.3137 20.754C14.3519 20.754 14.3828 20.7231 14.3828 20.6849C14.3828 20.6468 14.3519 20.6158 14.3137 20.6158C14.2755 20.6158 14.2446 20.6468 14.2446 20.6849C14.2446 20.7231 14.2755 20.754 14.3137 20.754Z"
-    fill='white'
+    fill="white"
-    fill-opacity='0.3'
+    fill-opacity="0.3"
   ></path>
   <path
-    d='M8.63311 20.4432C9.07185 20.4432 9.42736 20.0877 9.42736 19.6489C9.42736 19.2104 9.07185 18.8547 8.63311 18.8547C8.19455 18.8547 7.83887 19.2104 7.83887 19.6489C7.83887 20.0877 8.19455 20.4432 8.63311 20.4432Z'
+    d="M8.63311 20.4432C9.07185 20.4432 9.42736 20.0877 9.42736 19.6489C9.42736 19.2104 9.07185 18.8547 8.63311 18.8547C8.19455 18.8547 7.83887 19.2104 7.83887 19.6489C7.83887 20.0877 8.19455 20.4432 8.63311 20.4432Z"
-    fill='white'
+    fill="white"
-    fill-opacity='0.2'
+    fill-opacity="0.2"
   ></path>
   <path
-    d='M8.18435 20.1497C7.87356 19.8389 7.87356 19.3381 8.18435 19.0274C8.23615 18.9756 8.28794 18.941 8.35701 18.9065C8.25341 18.941 8.16708 19.0101 8.08075 19.0792C7.76996 19.3899 7.76996 19.8907 8.08075 20.2015C8.33974 20.4605 8.73687 20.5122 9.04766 20.3223C8.75413 20.4432 8.40881 20.3914 8.18435 20.1497Z'
+    d="M8.18435 20.1497C7.87356 19.8389 7.87356 19.3381 8.18435 19.0274C8.23615 18.9756 8.28794 18.941 8.35701 18.9065C8.25341 18.941 8.16708 19.0101 8.08075 19.0792C7.76996 19.3899 7.76996 19.8907 8.08075 20.2015C8.33974 20.4605 8.73687 20.5122 9.04766 20.3223C8.75413 20.4432 8.40881 20.3914 8.18435 20.1497Z"
-    fill='url(#paint13_linear_8766_48743)'
+    fill="url(#paint13_linear_8766_48743)"
   ></path>
   <path
-    d='M8.90948 19.4072C9.00479 19.4072 9.08214 19.3299 9.08214 19.2346C9.08214 19.1392 9.00479 19.0619 8.90948 19.0619C8.81417 19.0619 8.73682 19.1392 8.73682 19.2346C8.73682 19.3299 8.81417 19.4072 8.90948 19.4072Z'
+    d="M8.90948 19.4072C9.00479 19.4072 9.08214 19.3299 9.08214 19.2346C9.08214 19.1392 9.00479 19.0619 8.90948 19.0619C8.81417 19.0619 8.73682 19.1392 8.73682 19.2346C8.73682 19.3299 8.81417 19.4072 8.90948 19.4072Z"
-    fill='white'
+    fill="white"
-    fill-opacity='0.3'
+    fill-opacity="0.3"
   ></path>
   <path
-    d='M15.7293 18.4921C16.168 18.4921 16.5235 18.1366 16.5235 17.6979C16.5235 17.2593 16.168 16.9036 15.7293 16.9036C15.2907 16.9036 14.9351 17.2593 14.9351 17.6979C14.9351 18.1366 15.2907 18.4921 15.7293 18.4921Z'
+    d="M15.7293 18.4921C16.168 18.4921 16.5235 18.1366 16.5235 17.6979C16.5235 17.2593 16.168 16.9036 15.7293 16.9036C15.2907 16.9036 14.9351 17.2593 14.9351 17.6979C14.9351 18.1366 15.2907 18.4921 15.7293 18.4921Z"
-    fill='white'
+    fill="white"
-    fill-opacity='0.2'
+    fill-opacity="0.2"
   ></path>
   <path
-    d='M15.2634 18.1985C14.9527 17.8878 14.9527 17.387 15.2634 17.0762C15.3152 17.0244 15.367 16.9899 15.4361 16.9554C15.3325 16.9899 15.2462 17.059 15.1599 17.128C14.8491 17.4388 14.8491 17.9396 15.1599 18.2503C15.4188 18.5093 15.816 18.5611 16.1268 18.3712C15.8332 18.4921 15.5052 18.4403 15.2634 18.1985Z'
+    d="M15.2634 18.1985C14.9527 17.8878 14.9527 17.387 15.2634 17.0762C15.3152 17.0244 15.367 16.9899 15.4361 16.9554C15.3325 16.9899 15.2462 17.059 15.1599 17.128C14.8491 17.4388 14.8491 17.9396 15.1599 18.2503C15.4188 18.5093 15.816 18.5611 16.1268 18.3712C15.8332 18.4921 15.5052 18.4403 15.2634 18.1985Z"
-    fill='url(#paint14_linear_8766_48743)'
+    fill="url(#paint14_linear_8766_48743)"
   ></path>
   <path
-    d='M16.0057 17.4561C16.101 17.4561 16.1783 17.3788 16.1783 17.2834C16.1783 17.1881 16.101 17.1108 16.0057 17.1108C15.9104 17.1108 15.833 17.1881 15.833 17.2834C15.833 17.3788 15.9104 17.4561 16.0057 17.4561Z'
+    d="M16.0057 17.4561C16.101 17.4561 16.1783 17.3788 16.1783 17.2834C16.1783 17.1881 16.101 17.1108 16.0057 17.1108C15.9104 17.1108 15.833 17.1881 15.833 17.2834C15.833 17.3788 15.9104 17.4561 16.0057 17.4561Z"
-    fill='white'
+    fill="white"
-    fill-opacity='0.3'
+    fill-opacity="0.3"
   ></path>
   <defs>
     <radialGradient
-    cx='0'
+      cx="0"
-    cy='0'
+      cy="0"
-    gradientTransform='translate(22.0104 3.47051) scale(7.71702 7.71702)'
+      gradientTransform="translate(22.0104 3.47051) scale(7.71702 7.71702)"
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint0_radial_8766_48743'
+      id="paint0_radial_8766_48743"
-    r='1'
+      r="1"
     >
-    <stop stop-color='#FFEAFF' stop-opacity='0.6'></stop>
+      <stop stop-color="#FFEAFF" stop-opacity="0.6"></stop>
-    <stop offset='0.68' stop-color='#A087C9'></stop>
+      <stop offset="0.68" stop-color="#A087C9"></stop>
-    <stop offset='1' stop-color='#10002F'></stop>
+      <stop offset="1" stop-color="#10002F"></stop>
     </radialGradient>
     <radialGradient
-    cx='0'
+      cx="0"
-    cy='0'
+      cy="0"
-    gradientTransform='translate(17.7169 6.76169) scale(18.8808)'
+      gradientTransform="translate(17.7169 6.76169) scale(18.8808)"
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint1_radial_8766_48743'
+      id="paint1_radial_8766_48743"
-    r='1'
+      r="1"
     >
-    <stop stop-color='#FFEAFF' stop-opacity='0.6'></stop>
+      <stop stop-color="#FFEAFF" stop-opacity="0.6"></stop>
-    <stop offset='0.68' stop-color='#A087C9'></stop>
+      <stop offset="0.68" stop-color="#A087C9"></stop>
-    <stop offset='1' stop-color='#10002F'></stop>
+      <stop offset="1" stop-color="#10002F"></stop>
     </radialGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint2_linear_8766_48743'
+      id="paint2_linear_8766_48743"
-    x1='9.77838'
+      x1="9.77838"
-    x2='12.8655'
+      x2="12.8655"
-    y1='22.9307'
+      y1="22.9307"
-    y2='3.8849'
+      y2="3.8849"
     >
-    <stop stop-color='#81FFFF' stop-opacity='0.6'></stop>
+      <stop stop-color="#81FFFF" stop-opacity="0.6"></stop>
-    <stop offset='0.62' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="0.62" stop-color="white" stop-opacity="0"></stop>
-    <stop offset='1' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="1" stop-color="white" stop-opacity="0"></stop>
     </linearGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint3_linear_8766_48743'
+      id="paint3_linear_8766_48743"
-    x1='18.1284'
+      x1="18.1284"
-    x2='10.1473'
+      x2="10.1473"
-    y1='6.861'
+      y1="6.861"
-    y2='14.1839'
+      y2="14.1839"
     >
-    <stop stop-color='white' stop-opacity='0.6'></stop>
+      <stop stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.29' stop-color='white' stop-opacity='0.6'></stop>
+      <stop offset="0.29" stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.78' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="0.78" stop-color="white" stop-opacity="0"></stop>
-    <stop offset='1' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="1" stop-color="white" stop-opacity="0"></stop>
     </linearGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint4_linear_8766_48743'
+      id="paint4_linear_8766_48743"
-    x1='2.14889'
+      x1="2.14889"
-    x2='20.4906'
+      x2="20.4906"
-    y1='17.9083'
+      y1="17.9083"
-    y2='17.9083'
+      y2="17.9083"
     >
-    <stop stop-color='#0002E9'></stop>
+      <stop stop-color="#0002E9"></stop>
-    <stop offset='1' stop-color='#FF00C7'></stop>
+      <stop offset="1" stop-color="#FF00C7"></stop>
     </linearGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint5_linear_8766_48743'
+      id="paint5_linear_8766_48743"
-    x1='21.3586'
+      x1="21.3586"
-    x2='11.3753'
+      x2="11.3753"
-    y1='14.134'
+      y1="14.134"
-    y2='23.5688'
+      y2="23.5688"
     >
-    <stop stop-color='white' stop-opacity='0.6'></stop>
+      <stop stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.29' stop-color='white' stop-opacity='0.6'></stop>
+      <stop offset="0.29" stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.78' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="0.78" stop-color="white" stop-opacity="0"></stop>
-    <stop offset='1' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="1" stop-color="white" stop-opacity="0"></stop>
     </linearGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint6_linear_8766_48743'
+      id="paint6_linear_8766_48743"
-    x1='2.14889'
+      x1="2.14889"
-    x2='11.9616'
+      x2="11.9616"
-    y1='17.9083'
+      y1="17.9083"
-    y2='17.9083'
+      y2="17.9083"
     >
-    <stop stop-color='#000292' stop-opacity='0.7'></stop>
+      <stop stop-color="#000292" stop-opacity="0.7"></stop>
-    <stop offset='1' stop-color='#7D00C7' stop-opacity='0.7'></stop>
+      <stop offset="1" stop-color="#7D00C7" stop-opacity="0.7"></stop>
     </linearGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint7_linear_8766_48743'
+      id="paint7_linear_8766_48743"
-    x1='2.1612'
+      x1="2.1612"
-    x2='20.4784'
+      x2="20.4784"
-    y1='14.1775'
+      y1="14.1775"
-    y2='14.1775'
+      y2="14.1775"
     >
-    <stop stop-color='#000292'></stop>
+      <stop stop-color="#000292"></stop>
-    <stop offset='1' stop-color='#BE00C7'></stop>
+      <stop offset="1" stop-color="#BE00C7"></stop>
     </linearGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint8_linear_8766_48743'
+      id="paint8_linear_8766_48743"
-    x1='20.1778'
+      x1="20.1778"
-    x2='18.8614'
+      x2="18.8614"
-    y1='4.3533'
+      y1="4.3533"
-    y2='6.49258'
+      y2="6.49258"
     >
-    <stop stop-color='white' stop-opacity='0.6'></stop>
+      <stop stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.29' stop-color='white' stop-opacity='0.6'></stop>
+      <stop offset="0.29" stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.78' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="0.78" stop-color="white" stop-opacity="0"></stop>
-    <stop offset='1' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="1" stop-color="white" stop-opacity="0"></stop>
     </linearGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint9_linear_8766_48743'
+      id="paint9_linear_8766_48743"
-    x1='10.1997'
+      x1="10.1997"
-    x2='10.9302'
+      x2="10.9302"
-    y1='20.1472'
+      y1="20.1472"
-    y2='20.1472'
+      y2="20.1472"
     >
-    <stop stop-color='white' stop-opacity='0.6'></stop>
+      <stop stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.29' stop-color='white' stop-opacity='0.6'></stop>
+      <stop offset="0.29" stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.78' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="0.78" stop-color="white" stop-opacity="0"></stop>
-    <stop offset='1' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="1" stop-color="white" stop-opacity="0"></stop>
     </linearGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint10_linear_8766_48743'
+      id="paint10_linear_8766_48743"
-    x1='12.7185'
+      x1="12.7185"
-    x2='13.449'
+      x2="13.449"
-    y1='19.9022'
+      y1="19.9022"
-    y2='19.9022'
+      y2="19.9022"
     >
-    <stop stop-color='white' stop-opacity='0.6'></stop>
+      <stop stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.29' stop-color='white' stop-opacity='0.6'></stop>
+      <stop offset="0.29" stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.78' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="0.78" stop-color="white" stop-opacity="0"></stop>
-    <stop offset='1' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="1" stop-color="white" stop-opacity="0"></stop>
     </linearGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint11_linear_8766_48743'
+      id="paint11_linear_8766_48743"
-    x1='11.6008'
+      x1="11.6008"
-    x2='12.1492'
+      x2="12.1492"
-    y1='21.138'
+      y1="21.138"
-    y2='21.138'
+      y2="21.138"
     >
-    <stop stop-color='white' stop-opacity='0.6'></stop>
+      <stop stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.29' stop-color='white' stop-opacity='0.6'></stop>
+      <stop offset="0.29" stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.78' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="0.78" stop-color="white" stop-opacity="0"></stop>
-    <stop offset='1' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="1" stop-color="white" stop-opacity="0"></stop>
     </linearGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint12_linear_8766_48743'
+      id="paint12_linear_8766_48743"
-    x1='13.8204'
+      x1="13.8204"
-    x2='14.3688'
+      x2="14.3688"
-    y1='20.8783'
+      y1="20.8783"
-    y2='20.8783'
+      y2="20.8783"
     >
-    <stop stop-color='white' stop-opacity='0.6'></stop>
+      <stop stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.29' stop-color='white' stop-opacity='0.6'></stop>
+      <stop offset="0.29" stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.78' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="0.78" stop-color="white" stop-opacity="0"></stop>
-    <stop offset='1' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="1" stop-color="white" stop-opacity="0"></stop>
     </linearGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint13_linear_8766_48743'
+      id="paint13_linear_8766_48743"
-    x1='7.83973'
+      x1="7.83973"
-    x2='9.03272'
+      x2="9.03272"
-    y1='19.6691'
+      y1="19.6691"
-    y2='19.6691'
+      y2="19.6691"
     >
-    <stop stop-color='white' stop-opacity='0.6'></stop>
+      <stop stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.29' stop-color='white' stop-opacity='0.6'></stop>
+      <stop offset="0.29" stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.78' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="0.78" stop-color="white" stop-opacity="0"></stop>
-    <stop offset='1' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="1" stop-color="white" stop-opacity="0"></stop>
     </linearGradient>
     <linearGradient
-    gradientUnits='userSpaceOnUse'
+      gradientUnits="userSpaceOnUse"
-    id='paint14_linear_8766_48743'
+      id="paint14_linear_8766_48743"
-    x1='14.9254'
+      x1="14.9254"
-    x2='16.1184'
+      x2="16.1184"
-    y1='17.7175'
+      y1="17.7175"
-    y2='17.7175'
+      y2="17.7175"
     >
-    <stop stop-color='white' stop-opacity='0.6'></stop>
+      <stop stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.29' stop-color='white' stop-opacity='0.6'></stop>
+      <stop offset="0.29" stop-color="white" stop-opacity="0.6"></stop>
-    <stop offset='0.78' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="0.78" stop-color="white" stop-opacity="0"></stop>
-    <stop offset='1' stop-color='white' stop-opacity='0'></stop>
+      <stop offset="1" stop-color="white" stop-opacity="0"></stop>
     </linearGradient>
   </defs>
 </svg>

src/components/Icons/OverlayMark.svg

@@ -1,3 +1,6 @@
 <svg viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.86824 5.48057C4.48435 6.15239 3.51565 6.15239 3.13176 5.48057L0 0L8 0L4.86824 5.48057Z" fill="currentColor"/>
+  <path
+    d="M4.86824 5.48057C4.48435 6.15239 3.51565 6.15239 3.13176 5.48057L0 0L8 0L4.86824 5.48057Z"
+    fill="currentColor"
+  />
 </svg>

src/components/Icons/Plus.svg

@@ -1,3 +1,9 @@
-<svg  viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 1V15M1 8H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M8 1V15M1 8H15"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/PlusCircled.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M7.99992 5.33594V10.6693M5.33325 8.0026H10.6666M14.6666 8.0026C14.6666 11.6845 11.6818 14.6693 7.99992 14.6693C4.31802 14.6693 1.33325 11.6845 1.33325 8.0026C1.33325 4.32071 4.31802 1.33594 7.99992 1.33594C11.6818 1.33594 14.6666 4.32071 14.6666 8.0026Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M7.99992 5.33594V10.6693M5.33325 8.0026H10.6666M14.6666 8.0026C14.6666 11.6845 11.6818 14.6693 7.99992 14.6693C4.31802 14.6693 1.33325 11.6845 1.33325 8.0026C1.33325 4.32071 4.31802 1.33594 7.99992 1.33594C11.6818 1.33594 14.6666 4.32071 14.6666 8.0026Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/Questionmark.svg

@@ -1,4 +1,6 @@
-<svg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
+<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d='M0 0h24v24H0z' fill='none' />
+  <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' />
+  <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>

src/components/Icons/Search.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 13L10.1 10.1M11.6667 6.33333C11.6667 9.27885 9.27885 11.6667 6.33333 11.6667C3.38781 11.6667 1 9.27885 1 6.33333C1 3.38781 3.38781 1 6.33333 1C9.27885 1 11.6667 3.38781 11.6667 6.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M13 13L10.1 10.1M11.6667 6.33333C11.6667 9.27885 9.27885 11.6667 6.33333 11.6667C3.38781 11.6667 1 9.27885 1 6.33333C1 3.38781 3.38781 1 6.33333 1C9.27885 1 11.6667 3.38781 11.6667 6.33333Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/Shield.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.53451 13.4096C5.6821 13.4957 5.7559 13.5388 5.86005 13.5611C5.94088 13.5785 6.0588 13.5785 6.13962 13.5611C6.24377 13.5388 6.31757 13.4957 6.46516 13.4096C7.76386 12.652 11.3332 10.272 11.3332 6.99972V4.46639C11.3332 3.75046 11.3332 3.39249 11.2228 3.13839C11.1106 2.88012 10.9989 2.74273 10.7689 2.58032C10.5426 2.42054 10.0989 2.32827 9.21164 2.14373C8.23371 1.94034 7.48269 1.57308 6.79609 1.04193C6.46684 0.787231 6.30222 0.659881 6.1734 0.625145C6.03746 0.588493 5.96221 0.588493 5.82628 0.625145C5.69746 0.659881 5.53283 0.787231 5.20358 1.04193C4.51698 1.57308 3.76597 1.94034 2.78804 2.14373C1.90075 2.32827 1.45711 2.42054 1.2308 2.58032C1.00078 2.74273 0.889028 2.88012 0.776862 3.13839C0.666504 3.39249 0.666504 3.75046 0.666504 4.46639V6.99972C0.666504 10.272 4.23581 12.652 5.53451 13.4096Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M5.53451 13.4096C5.6821 13.4957 5.7559 13.5388 5.86005 13.5611C5.94088 13.5785 6.0588 13.5785 6.13962 13.5611C6.24377 13.5388 6.31757 13.4957 6.46516 13.4096C7.76386 12.652 11.3332 10.272 11.3332 6.99972V4.46639C11.3332 3.75046 11.3332 3.39249 11.2228 3.13839C11.1106 2.88012 10.9989 2.74273 10.7689 2.58032C10.5426 2.42054 10.0989 2.32827 9.21164 2.14373C8.23371 1.94034 7.48269 1.57308 6.79609 1.04193C6.46684 0.787231 6.30222 0.659881 6.1734 0.625145C6.03746 0.588493 5.96221 0.588493 5.82628 0.625145C5.69746 0.659881 5.53283 0.787231 5.20358 1.04193C4.51698 1.57308 3.76597 1.94034 2.78804 2.14373C1.90075 2.32827 1.45711 2.42054 1.2308 2.58032C1.00078 2.74273 0.889028 2.88012 0.776862 3.13839C0.666504 3.39249 0.666504 3.75046 0.666504 4.46639V6.99972C0.666504 10.272 4.23581 12.652 5.53451 13.4096Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/SortAsc.svg

@@ -1 +1,13 @@
-<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7.64031L15.5746 10.5L8.42539 10.5L12 7.64031Z" fill="currentColor" stroke="currentColor" stroke-linejoin="round"></path><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" fill="currentColor" fill-opacity="0.2"></path></svg>
+<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12 7.64031L15.5746 10.5L8.42539 10.5L12 7.64031Z"
+    fill="currentColor"
+    stroke="currentColor"
+    stroke-linejoin="round"
+  ></path>
+  <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"
+    fill="currentColor"
+    fill-opacity="0.2"
+  ></path>
+</svg>

src/components/Icons/SortDesc.svg

@@ -1 +1,13 @@
-<svg fill="none" 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" fill="currentColor" fill-opacity="0.2"></path><path d="M12 16.3597L8.42539 13.5L15.5746 13.5L12 16.3597Z" fill="currentColor" stroke="currentColor" stroke-linejoin="round"></path></svg>
+<svg fill="none" 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"
+    fill="currentColor"
+    fill-opacity="0.2"
+  ></path>
+  <path
+    d="M12 16.3597L8.42539 13.5L15.5746 13.5L12 16.3597Z"
+    fill="currentColor"
+    stroke="currentColor"
+    stroke-linejoin="round"
+  ></path>
+</svg>

src/components/Icons/SortNone.svg

@@ -1 +1,12 @@
-<svg fill="none" 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" fill="currentColor" fill-opacity="0.2"></path><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" fill="currentColor" fill-opacity="0.2"></path></svg>
+<svg fill="none" 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"
+    fill="currentColor"
+    fill-opacity="0.2"
+  ></path>
+  <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"
+    fill="currentColor"
+    fill-opacity="0.2"
+  ></path>
+</svg>

src/components/Icons/Subtract.svg

@@ -1,7 +1,7 @@
-<svg fill='currentColor' viewBox='0 0 11 2' version='1.1'>
+<svg fill="currentColor" viewBox="0 0 11 2" version="1.1">
-  <g transform='matrix(1,0,0,1,-0.666748,-5.33317)'>
+  <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'
+      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>

src/components/Icons/TrashBin.svg

@@ -1,3 +1,8 @@
 <svg viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.3333 4.00033V3.33366C11.3333 2.40024 11.3333 1.93353 11.1517 1.57701C10.9919 1.2634 10.7369 1.00844 10.4233 0.848648C10.0668 0.666992 9.60009 0.666992 8.66667 0.666992H7.33333C6.39991 0.666992 5.9332 0.666992 5.57668 0.848648C5.26308 1.00844 5.00811 1.2634 4.84832 1.57701C4.66667 1.93353 4.66667 2.40024 4.66667 3.33366V4.00033M0.5 4.00033H15.5M13.8333 4.00033V13.3337C13.8333 14.7338 13.8333 15.4339 13.5608 15.9686C13.3212 16.439 12.9387 16.8215 12.4683 17.0612C11.9335 17.3337 11.2335 17.3337 9.83333 17.3337H6.16667C4.76654 17.3337 4.06647 17.3337 3.53169 17.0612C3.06129 16.8215 2.67883 16.439 2.43915 15.9686C2.16667 15.4339 2.16667 14.7338 2.16667 13.3337V4.00033" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M11.3333 4.00033V3.33366C11.3333 2.40024 11.3333 1.93353 11.1517 1.57701C10.9919 1.2634 10.7369 1.00844 10.4233 0.848648C10.0668 0.666992 9.60009 0.666992 8.66667 0.666992H7.33333C6.39991 0.666992 5.9332 0.666992 5.57668 0.848648C5.26308 1.00844 5.00811 1.2634 4.84832 1.57701C4.66667 1.93353 4.66667 2.40024 4.66667 3.33366V4.00033M0.5 4.00033H15.5M13.8333 4.00033V13.3337C13.8333 14.7338 13.8333 15.4339 13.5608 15.9686C13.3212 16.439 12.9387 16.8215 12.4683 17.0612C11.9335 17.3337 11.2335 17.3337 9.83333 17.3337H6.16667C4.76654 17.3337 4.06647 17.3337 3.53169 17.0612C3.06129 16.8215 2.67883 16.439 2.43915 15.9686C2.16667 15.4339 2.16667 14.7338 2.16667 13.3337V4.00033"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 </svg>

src/components/Icons/Wallet.svg

@@ -1,5 +1,5 @@
-<svg version='1.1' viewBox='0 0 18 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+<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'
+    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>

src/components/Icons/index.ts

@@ -1,5 +1,6 @@
 // @index(['./*.svg'], f => `export { default as ${f.name} } from 'components/Icons/${f.name}.svg'`)
 export { default as Account } from 'components/Icons/Account.svg'
+export { default as AccountArrowDown } from 'components/Icons/AccountArrowDown.svg'
 export { default as ArrowChartLineUp } from 'components/Icons/ArrowChartLineUp.svg'
 export { default as ArrowCircledTopRight } from 'components/Icons/ArrowCircledTopRight.svg'
 export { default as ArrowDownLine } from 'components/Icons/ArrowDownLine.svg'
@@ -20,6 +21,7 @@ export { default as ExclamationMarkTriangle } from 'components/Icons/Exclamation
 export { default as ExternalLink } from 'components/Icons/ExternalLink.svg'
 export { default as Gear } from 'components/Icons/Gear.svg'
 export { default as Heart } from 'components/Icons/Heart.svg'
+export { default as LockLocked } from 'components/Icons/LockLocked.svg'
 export { default as LockUnlocked } from 'components/Icons/LockUnlocked.svg'
 export { default as Logo } from 'components/Icons/Logo.svg'
 export { default as MarsProtocol } from 'components/Icons/MarsProtocol.svg'

src/components/MarketAssetTable/index.tsx

@@ -11,20 +11,21 @@ import {
 import classNames from 'classnames'
 import React from 'react'
 
+import Card from 'components/Card'
 import { SortAsc, SortDesc, SortNone } from 'components/Icons'
 import Text from 'components/Text'
-import Card from 'components/Card'
 
 interface Props<TData> {
   title: string
   data: TData[]
   columns: ColumnDef<TData>[]
+  sorting?: SortingState
   rowRenderer: (row: Row<TData>, table: Table<TData>) => JSX.Element
 }
 
 function AssetListTable<TData>(props: Props<TData>) {
   const { title, data, columns } = props
-  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [sorting, setSorting] = React.useState<SortingState>(props.sorting ?? [])
 
   const table = useReactTable({
     data,

src/components/Modal.tsx

@@ -20,6 +20,7 @@ interface Props {
 
 export default function Modal(props: Props) {
   const ref: any = useRef(null)
+  const modalClassName = props.modalClassName ?? 'max-w-modal'
 
   function onClose() {
     ref.current?.close()
@@ -48,10 +49,10 @@ export default function Modal(props: Props) {
       ref={ref}
       onCancel={onClose}
       className={classNames(
-        'w-[895px] border-none bg-transparent text-white',
+        `w-screen border-none bg-transparent text-white`,
         'focus-visible:outline-none',
         'backdrop:bg-black/50 backdrop:backdrop-blur-sm',
-        props.modalClassName,
+        modalClassName,
       )}
     >
       <Card

src/components/Modals/AddVaultAssets/AddVaultBorrowAssetsModal.tsx

@@ -29,7 +29,7 @@ export default function AddVaultBorrowAssetsModal() {
       open={!!(modal && showContent)}
       header={<Text>Add Assets</Text>}
       onClose={onClose}
-      modalClassName='max-w-[478px]'
+      modalClassName='max-w-modal-xs'
       headerClassName='bg-white/10 border-b-white/5 border-b items-center p-4'
     >
       {showContent ? (

src/components/Modals/AssetAmountSelectActionModal/index.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useState } from 'react'
 
+import CurrentAccountSummary from 'components/Account/CurrentAccountSummary'
+import AssetImage from 'components/AssetImage'
 import Button from 'components/Button'
 import Card from 'components/Card'
 import Divider from 'components/Divider'
@@ -7,10 +9,8 @@ import { ArrowRight } from 'components/Icons'
 import Modal from 'components/Modal'
 import Text from 'components/Text'
 import TokenInputWithSlider from 'components/TokenInputWithSlider'
-import { BN } from 'utils/helpers'
 import { byDenom } from 'utils/array'
-import CurrentAccountSummary from 'components/Account/CurrentAccountSummary'
+import { BN } from 'utils/helpers'
-import AssetImage from 'components/AssetImage'
 
 interface Props {
   asset: Asset

src/components/Modals/Borrow/BorrowModal.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 
 import AccountSummary from 'components/Account/AccountSummary'
+import AssetImage from 'components/AssetImage'
 import Button from 'components/Button'
 import Card from 'components/Card'
 import Divider from 'components/Divider'
@@ -14,11 +15,10 @@ import { ASSETS } from 'constants/assets'
 import useCurrentAccount from 'hooks/useCurrentAccount'
 import useToggle from 'hooks/useToggle'
 import useStore from 'store'
+import { BNCoin } from 'types/classes/BNCoin'
 import { hardcodedFee } from 'utils/constants'
 import { formatPercent, formatValue } from 'utils/formatters'
 import { BN } from 'utils/helpers'
-import AssetImage from 'components/AssetImage'
-import { BNCoin } from 'types/classes/BNCoin'
 
 function getDebtAmount(modal: BorrowModal | null) {
   if (!(modal?.marketData as BorrowAssetActive)?.debt) return '0'

src/components/Modals/ModalsContainer.tsx

@@ -1,9 +1,12 @@
-import VaultModal from 'components/Modals/Vault'
+import {
-import BorrowModal from 'components/Modals/Borrow/BorrowModal'
+  AddVaultBorrowAssetsModal,
-import FundAndWithdrawModal from 'components/Modals/FundWithdraw/FundAndWithdrawModal'
+  BorrowModal,
-import AddVaultBorrowAssetsModal from 'components/Modals/AddVaultAssets/AddVaultBorrowAssetsModal'
+  FundAndWithdrawModal,
-import UnlockModal from 'components/Modals/Unlock/UnlockModal'
+  LendAndReclaimModalController,
-import LendAndReclaimModalController from 'components/Modals/LendAndReclaim'
+  UnlockModal,
+  VaultModal,
+  WithdrawFromVaults,
+} from 'components/Modals'
 
 export default function ModalsContainer() {
   return (
@@ -14,6 +17,7 @@ export default function ModalsContainer() {
       <AddVaultBorrowAssetsModal />
       <UnlockModal />
       <LendAndReclaimModalController />
+      <WithdrawFromVaults />
     </>
   )
 }

src/components/Modals/Unlock/UnlockModal.tsx

@@ -1,8 +1,8 @@
+import { CircularProgress } from 'components/CircularProgress'
 import { LockUnlocked } from 'components/Icons'
 import Modal from 'components/Modal'
-import useStore from 'store'
 import UnlockModalContent from 'components/Modals/Unlock/UnlockModalContent'
-import { CircularProgress } from 'components/CircularProgress'
+import useStore from 'store'
 
 export default function UnlockModal() {
   const modal = useStore((s) => s.unlockModal)
@@ -20,7 +20,7 @@ export default function UnlockModal() {
           <LockUnlocked width={18} />
         </div>
       }
-      modalClassName='w-[577px]'
+      modalClassName='max-w-modal-sm'
       headerClassName='p-8'
       contentClassName='px-8 pb-8'
       hideCloseBtn

src/components/Modals/Unlock/UnlockModalContent.tsx

@@ -1,8 +1,11 @@
-import { hardcodedFee } from 'utils/constants'
+import { useState } from 'react'
+import { useParams } from 'react-router-dom'
+
 import Button from 'components/Button'
 import { Enter } from 'components/Icons'
 import Text from 'components/Text'
 import useStore from 'store'
+import { hardcodedFee } from 'utils/constants'
 
 interface Props {
   depositedVault: DepositedVault
@@ -27,10 +30,15 @@ function YesIcon() {
 
 export default function UnlockModalContent(props: Props) {
   const unlock = useStore((s) => s.unlock)
+  const [isWating, setIsConfirming] = useState(false)
+  const { accountId } = useParams()
 
   async function onConfirm() {
+    if (!accountId) return
+    setIsConfirming(true)
     await unlock({
       fee: hardcodedFee,
+      accountId: accountId,
       vault: props.depositedVault,
       amount: props.depositedVault.amounts.locked.toString(),
     })
@@ -50,6 +58,7 @@ export default function UnlockModalContent(props: Props) {
           className='px-6'
           rightIcon={<YesIcon />}
           onClick={onConfirm}
+          showProgressIndicator={isWating}
         />
         <Button
           text='No'
@@ -58,6 +67,7 @@ export default function UnlockModalContent(props: Props) {
           rightIcon={<NoIcon />}
           tabIndex={1}
           onClick={props.onClose}
+          disabled={isWating}
         />
       </div>
     </>

src/components/Modals/Vault/index.tsx

@@ -1,10 +1,10 @@
 import VaultLogo from 'components/Earn/vault/VaultLogo'
 import Modal from 'components/Modal'
+import VaultModalContent from 'components/Modals/Vault/VaultModalContent'
 import Text from 'components/Text'
 import { ASSETS } from 'constants/assets'
 import useCurrentAccount from 'hooks/useCurrentAccount'
 import useStore from 'store'
-import VaultModalContent from 'components/Modals/Vault/VaultModalContent'
 
 export default function VaultModalController() {
   const currentAccount = useCurrentAccount()
@@ -43,7 +43,7 @@ function VaultModal(props: Props) {
       header={
         <span className='flex items-center gap-4 px-4'>
           <VaultLogo vault={props.modal.vault} />
-          <Text>{`${props.modal.vault.symbols.primary} - ${props.modal.vault.symbols.secondary}`}</Text>
+          <Text>{props.modal.vault.name}</Text>
         </span>
       }
       headerClassName='gradient-header pl-2 pr-2.5 py-2.5 border-b-white/5 border-b'

src/components/Modals/WithdrawFromVaults/WithdrawFromVaults.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react'
+import { useParams } from 'react-router-dom'
+
+import Button from 'components/Button'
+import { CircularProgress } from 'components/CircularProgress'
+import DisplayCurrency from 'components/DisplayCurrency'
+import VaultLogo from 'components/Earn/vault/VaultLogo'
+import { FormattedNumber } from 'components/FormattedNumber'
+import Modal from 'components/Modal'
+import Text from 'components/Text'
+import useStore from 'store'
+import { BNCoin } from 'types/classes/BNCoin'
+import { getAssetByDenom } from 'utils/assets'
+import { hardcodedFee } from 'utils/constants'
+import { demagnify } from 'utils/formatters'
+import { BN } from 'utils/helpers'
+
+export default function WithdrawFromVaults() {
+  const modal = useStore((s) => s.withdrawFromVaultsModal)
+  const { accountId } = useParams()
+  const [isConfirming, setIsConfirming] = useState(false)
+  const withdrawFromVaults = useStore((s) => s.withdrawFromVaults)
+  const baseCurrency = useStore((s) => s.baseCurrency)
+
+  function onClose() {
+    useStore.setState({ withdrawFromVaultsModal: null })
+  }
+
+  async function withdrawHandler() {
+    if (!accountId || !modal) return
+    setIsConfirming(true)
+    await withdrawFromVaults({
+      fee: hardcodedFee,
+      accountId: accountId,
+      vaults: modal,
+    })
+    setIsConfirming(false)
+    onClose()
+  }
+
+  return (
+    <Modal
+      open={!!modal}
+      onClose={onClose}
+      header={
+        <span className='flex items-center'>
+          <Text>Unlocked Vaults</Text>
+        </span>
+      }
+      modalClassName='max-w-modal-xs'
+      headerClassName='px-4 py-5.5 border-b-white/5 border-b'
+      contentClassName='p-4'
+    >
+      {modal ? (
+        <div className='flex w-full flex-wrap gap-4'>
+          {modal.map((vault) => {
+            const positionValue = vault.values.primary.plus(vault.values.secondary)
+            const coin = BNCoin.fromDenomAndBigNumber(baseCurrency.denom, positionValue)
+            const primaryAsset = getAssetByDenom(vault.denoms.primary)
+            const secondaryAsset = getAssetByDenom(vault.denoms.secondary)
+
+            if (!primaryAsset || !secondaryAsset) return null
+            return (
+              <div className='flex items-center gap-4' key={vault.unlockId}>
+                <VaultLogo vault={vault} />
+                <div className='flex flex-grow flex-wrap'>
+                  <Text className='w-full'>{vault.name}</Text>
+                  <Text size='sm' className='w-full text-white/50'>
+                    Unlocked
+                  </Text>
+                </div>
+                <div className='flex flex-wrap'>
+                  <DisplayCurrency coin={coin} className='w-full text-right' />
+                  <FormattedNumber
+                    amount={BN(demagnify(vault.amounts.primary, primaryAsset))}
+                    className='w-full text-right text-sm text-white/50'
+                    options={{ suffix: ` ${vault.symbols.primary}` }}
+                  />
+                  <FormattedNumber
+                    amount={BN(demagnify(vault.amounts.secondary, secondaryAsset))}
+                    className='w-full text-right text-sm text-white/50'
+                    options={{ suffix: ` ${vault.symbols.secondary}` }}
+                  />
+                </div>
+              </div>
+            )
+          })}
+          <Button
+            showProgressIndicator={isConfirming}
+            onClick={withdrawHandler}
+            className='mt-4 w-full'
+            text='Withdraw from all'
+          />
+        </div>
+      ) : (
+        <CircularProgress />
+      )}
+    </Modal>
+  )
+}

src/components/Modals/index.tsx

@@ -0,0 +1,7 @@
+export { default as AddVaultBorrowAssetsModal } from 'components/Modals/AddVaultAssets/AddVaultBorrowAssetsModal'
+export { default as BorrowModal } from 'components/Modals/Borrow/BorrowModal'
+export { default as FundAndWithdrawModal } from 'components/Modals/FundWithdraw/FundAndWithdrawModal'
+export { default as LendAndReclaimModalController } from 'components/Modals/LendAndReclaim'
+export { default as UnlockModal } from 'components/Modals/Unlock/UnlockModal'
+export { default as VaultModal } from 'components/Modals/Vault'
+export { default as WithdrawFromVaults } from 'components/Modals/WithdrawFromVaults/WithdrawFromVaults'

src/components/NotificationBanner.tsx

@@ -0,0 +1,58 @@
+import classNames from 'classnames'
+import { useMemo } from 'react'
+
+import { CheckCircled, CrossCircled, ExclamationMarkTriangle } from 'components/Icons'
+import Text from 'components/Text'
+
+interface Props {
+  type: 'success' | 'error' | 'warning' | 'info'
+  text: string
+  button: React.ReactNode
+}
+
+export default function NotificationBanner(props: Props) {
+  const [glasColor, bgColor, icon] = useMemo(() => {
+    if (props.type === 'success')
+      return [
+        'bg-success-bg/20',
+        'bg-success',
+        <CheckCircled className='block h-4 w-4 text-white' key={props.type} />,
+      ]
+    if (props.type === 'error')
+      return [
+        'bg-error-bg/20',
+        'bg-error',
+        <CrossCircled className='block h-4 w-4 text-white' key={props.type} />,
+      ]
+    if (props.type === 'warning')
+      return [
+        'bg-warning-bg/20',
+        'bg-warning',
+        <ExclamationMarkTriangle className='block h-4 w-4 text-white' key={props.type} />,
+      ]
+
+    return [
+      'bg-info-bg/20',
+      'bg-info',
+      <ExclamationMarkTriangle className='block h-4 w-4 text-white' key={props.type} />,
+    ]
+  }, [props.type])
+
+  return (
+    <div
+      className={classNames(
+        'relative isolate m-0 flex w-full flex-wrap rounded-sm px-4 py-3',
+        'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
+        glasColor,
+      )}
+    >
+      <div className='flex w-full items-center gap-2'>
+        <div className={classNames('rounded-sm p-1.5', bgColor)}>{icon}</div>
+        <Text size='sm' className='flex-1 text-white'>
+          {props.text}
+        </Text>
+        {props.button}
+      </div>
+    </div>
+  )
+}

src/components/Overlay.tsx

@@ -21,7 +21,7 @@ export default function Overlay(props: Props) {
         className={classNames(
           'max-w-screen absolute isolate z-50 rounded-sm shadow-overlay backdrop-blur-lg',
           props.hasBackdropIsolation ? 'bg-body' : 'gradient-popover',
-          'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
+          'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-base before:p-[1px] before:border-glas',
           props.className,
         )}
       >

src/components/SearchBar.tsx

@@ -19,8 +19,8 @@ const SearchBar = (props: Props) => {
     <div
       className={classNames(
         'flex w-full items-center justify-between rounded-sm bg-white/10 p-2.5',
-        'relative isolate max-w-full overflow-hidden rounded-base',
+        'relative isolate max-w-full overflow-hidden rounded-sm',
-        'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-base before:p-[1px] before:border-glas',
+        'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
       )}
     >
       <Search width={14} height={14} className='mr-2.5 text-white' />

src/components/Trade/TradeModule/AssetSelector/AssetList.tsx

@@ -20,7 +20,7 @@ export default function AssetList(props: Props) {
         onClick={props.toggleOpen}
       >
         <Text>{props.type === 'buy' ? 'Buy asset' : 'Sell asset'}</Text>
-        <ChevronDown className={classNames(props.isOpen && '-rotate-180')} />
+        <ChevronDown className={classNames(props.isOpen && '-rotate-180', 'w-4')} />
       </button>
       {props.isOpen &&
         (props.assets.length === 0 ? (

src/components/Trade/TradeModule/AssetSelector/AssetOverlay.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react'
+import { useCallback, useMemo } from 'react'
 
 import EscButton from 'components/Button/EscButton'
 import Divider from 'components/Divider'
@@ -52,7 +52,7 @@ export default function AssetOverlay(props: Props) {
 
   return (
     <Overlay className='w-full' show={props.state !== 'closed'} setShow={handleClose}>
-      <div className='flex justify-between p-4'>
+      <div className='flex justify-between overflow-hidden p-4'>
         <Text>Select asset</Text>
         <EscButton onClick={handleClose} enableKeyPress />
       </div>

src/constants/vaults.ts

@@ -16,7 +16,7 @@ export const TESTNET_VAULTS_META_DATA: VaultMetaData[] = [
     },
     symbols: {
       primary: 'OSMO',
-      secondary: 'OSMO-USDC.n',
+      secondary: 'USDC.n',
     },
     isFeatured: true,
   },
@@ -35,7 +35,7 @@ export const TESTNET_VAULTS_META_DATA: VaultMetaData[] = [
     },
     symbols: {
       primary: 'OSMO',
-      secondary: 'OSMO-USDC.n',
+      secondary: 'USDC.n',
     },
     isFeatured: true,
   },
@@ -54,7 +54,7 @@ export const TESTNET_VAULTS_META_DATA: VaultMetaData[] = [
     },
     symbols: {
       primary: 'OSMO',
-      secondary: 'OSMO-USDC.n',
+      secondary: 'USDC.n',
     },
     isFeatured: true,
   },

src/pages/FarmPage.tsx

@@ -3,11 +3,11 @@ import { AvailableVaults, DepositedVaults } from 'components/Earn/vault/Vaults'
 
 export default function FarmPage() {
   return (
-    <>
+    <div className='flex w-full flex-wrap gap-4'>
       <Tab isFarm />
       {/* <FeaturedVaults /> */}
       <DepositedVaults />
       <AvailableVaults />
-    </>
+    </div>
   )
 }

src/pages/LendPage.tsx

@@ -1,15 +1,15 @@
-import Tab from 'components/Earn/Tab'
 import LendingMarketsTable from 'components/Earn/Lend/LendingMarketsTable'
+import Tab from 'components/Earn/Tab'
 import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'
 
 export default function LendPage() {
   const { accountLentAssets, availableAssets } = useLendingMarketAssetsTableData()
 
   return (
-    <>
+    <div className='flex w-full flex-wrap gap-4'>
       <Tab />
       <LendingMarketsTable data={accountLentAssets} title='Lent Assets' />
       <LendingMarketsTable data={availableAssets} title='Available Markets' />
-    </>
+    </div>
   )
 }

src/pages/_layout.tsx

@@ -22,7 +22,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         className={classNames(
           'lg:h-[calc(100vh-89px)]',
           'p-6 lg:mt-[65px]',
-          'align-items-center grid h-full grid-cols-[auto_min-content] place-items-start gap-6',
+          'align-items-center grid h-full min-h-[900px] grid-cols-[auto_min-content] place-items-start gap-6',
         )}
       >
         {isFullWidth ? children : <div className='mx-auto w-full max-w-content'>{children}</div>}

src/store/slices/broadcast.ts

@@ -4,15 +4,15 @@ import { GetState, SetState } from 'zustand'
 
 import { ENV } from 'constants/env'
 import { Store } from 'store'
-import { getSingleValueFromBroadcastResult } from 'utils/broadcast'
-import { formatAmountWithSymbol } from 'utils/formatters'
-import { Action } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
 import { BNCoin } from 'types/classes/BNCoin'
+import { ExecuteMsg as AccountNftExecuteMsg } from 'types/generated/mars-account-nft/MarsAccountNft.types'
 import {
+  Action,
   Action as CreditManagerAction,
   ExecuteMsg as CreditManagerExecuteMsg,
 } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
-import { ExecuteMsg as AccountNftExecuteMsg } from 'types/generated/mars-account-nft/MarsAccountNft.types'
+import { getSingleValueFromBroadcastResult } from 'utils/broadcast'
+import { formatAmountWithSymbol } from 'utils/formatters'
 
 export default function createBroadcastSlice(
   set: SetState<Store>,
@@ -116,11 +116,23 @@ export default function createBroadcastSlice(
       )
       return !!response.result
     },
-    unlock: async (options: { fee: StdFee; vault: Vault; amount: string }) => {
+    unlock: async (options: {
-      const msg: CreditManagerAction = {
+      fee: StdFee
-        request_vault_unlock: {
+      accountId: string
-          vault: { address: options.vault.address },
+      vault: DepositedVault
-          amount: options.amount,
+      amount: string
+    }) => {
+      const msg: CreditManagerExecuteMsg = {
+        update_credit_account: {
+          account_id: options.accountId,
+          actions: [
+            {
+              request_vault_unlock: {
+                vault: { address: options.vault.address },
+                amount: options.amount,
+              },
+            },
+          ],
         },
       }
 
@@ -133,6 +145,37 @@ export default function createBroadcastSlice(
       handleResponseMessages(response, `Requested unlock for ${options.vault.name}`)
       return !!response.result
     },
+
+    withdrawFromVaults: async (options: {
+      fee: StdFee
+      accountId: string
+      vaults: DepositedVault[]
+    }) => {
+      const actions: CreditManagerAction[] = []
+      options.vaults.forEach((vault) => {
+        if (vault.unlockId)
+          actions.push({
+            exit_vault_unlocked: {
+              id: vault.unlockId,
+              vault: { address: vault.address },
+            },
+          })
+      })
+      const msg: CreditManagerExecuteMsg = {
+        update_credit_account: {
+          account_id: options.accountId,
+          actions,
+        },
+      }
+
+      const response = await get().executeMsg({ msg, fee: options.fee })
+      const vaultsString = options.vaults.length === 1 ? 'vault' : 'vaults'
+      handleResponseMessages(
+        response,
+        `You successfully withdrew ${options.vaults.length} unlocked ${vaultsString} to your account`,
+      )
+      return !!response.result
+    },
     depositIntoVault: async (options: { fee: StdFee; accountId: string; actions: Action[] }) => {
       const msg: CreditManagerExecuteMsg = {
         update_credit_account: {

src/store/slices/modal.ts

@@ -11,5 +11,6 @@ export default function createModalSlice(set: SetState<ModalSlice>, get: GetStat
     unlockModal: null,
     lendAndReclaimModal: null,
     vaultModal: null,
+    withdrawFromVaultsModal: null,
   }
 }

src/types/enums/vault.ts

@@ -0,0 +1,5 @@
+export enum VaultStatus {
+  ACTIVE = 'active',
+  UNLOCKING = 'unlocking',
+  UNLOCKED = 'unlocked',
+}

src/types/interfaces/store/broadcast.d.ts

@@ -16,7 +16,17 @@ interface BroadcastSlice {
   createAccount: (options: { fee: StdFee }) => Promise<string | null>
   deleteAccount: (options: { fee: StdFee; accountId: string }) => Promise<boolean>
   deposit: (options: { fee: StdFee; accountId: string; coin: Coin }) => Promise<boolean>
-  unlock: (options: { fee: StdFee; vault: Vault; amount: string }) => Promise<boolean>
+  unlock: (options: {
+    fee: StdFee
+    accountId: string
+    vault: DepositedVault
+    amount: string
+  }) => Promise<boolean>
+  withdrawFromVaults: (options: {
+    fee: StdFee
+    accountId: string
+    vaults: DepositedVault[]
+  }) => Promise<boolean>
   depositIntoVault: (options: {
     fee: StdFee
     accountId: string

src/types/interfaces/store/modals.d.ts

@@ -6,6 +6,7 @@ interface ModalSlice {
   fundAccountModal: boolean
   fundAndWithdrawModal: 'fund' | 'withdraw' | null
   vaultModal: VaultModal | null
+  withdrawFromVaultsModal: DepositedVault[] | null
   unlockModal: UnlockModal | null
   lendAndReclaimModal: LendAndReclaimModalConfig | null
 }

src/types/interfaces/vaults.d.ts

@@ -55,6 +55,7 @@ interface VaultValuesAndAmounts {
 type VaultStatus = 'active' | 'unlocking' | 'unlocked'
 interface DepositedVault extends Vault, VaultValuesAndAmounts {
   status: VaultStatus
+  unlockId?: number
   unlocksAt?: number
 }
 

src/utils/formatters.ts

@@ -1,4 +1,5 @@
 import BigNumber from 'bignumber.js'
+import moment from 'moment'
 
 import { BNCoin } from 'types/classes/BNCoin'
 import { getEnabledMarketAssets } from 'utils/assets'
@@ -23,6 +24,19 @@ export interface FormatOptions {
   abbreviated?: boolean
 }
 
+export const produceCountdown = (remainingTime: number) => {
+  const duration = moment.duration(remainingTime, 'milliseconds')
+  const days = formatValue(duration.asDays(), { minDecimals: 0, maxDecimals: 0 })
+
+  duration.subtract(days, 'days')
+  const hours = formatValue(duration.asHours(), { minDecimals: 0, maxDecimals: 0 })
+
+  duration.subtract(hours, 'hours')
+  const minutes = formatValue(duration.asMinutes(), { minDecimals: 0, maxDecimals: 0 })
+
+  return `${days}d ${hours}h ${minutes}m`
+}
+
 export const formatValue = (amount: number | string, options?: FormatOptions): string => {
   let numberOfZeroDecimals: number | null = null
   const minDecimals = options?.minDecimals ?? 2

src/utils/vaults.ts

@@ -1,9 +1,12 @@
+import moment from 'moment'
+
 import { IS_TESTNET } from 'constants/env'
 import { TESTNET_VAULTS_META_DATA, VAULTS_META_DATA } from 'constants/vaults'
-import { BN } from 'utils/helpers'
-import { getNetCollateralValue } from 'utils/accounts'
 import { BNCoin } from 'types/classes/BNCoin'
+import { VaultStatus } from 'types/enums/vault'
 import { Action } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
+import { getNetCollateralValue } from 'utils/accounts'
+import { BN } from 'utils/helpers'
 import { getTokenPrice, getTokenValue } from 'utils/tokens'
 
 export function getVaultMetaData(address: string) {

tailwind.config.js

@@ -1,12 +1,27 @@
 /** @type {import('tailwindcss').Config} */
 const plugin = require('tailwindcss/plugin')
 
+const flipClass = plugin(function ({ addUtilities }) {
+  addUtilities({
+    '.flip-x-180': {
+      transform: 'rotateX(180deg)',
+    },
+    '.preserve-3d': {
+      transformStyle: 'preserve-3d',
+    },
+    '.perspective': {
+      perspective: '1000px',
+    },
+    '.backface-hidden': {
+      backfaceVisibility: 'hidden',
+    },
+  })
+})
+
 module.exports = {
   content: ['./src/pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
   safelist: [
     'h-2',
-    'h-4.5',
-    'h-15',
     'text-3xs',
     'text-3xs-caps',
     'text-2xs',
@@ -30,8 +45,6 @@ module.exports = {
     'text-5xl-caps',
     'text-5xl',
     'w-2',
-    'w-4.5',
-    'w-15',
   ],
   theme: {
     extend: {
@@ -39,6 +52,7 @@ module.exports = {
         fadein: 'fadein 1s ease-in-out forwards',
         glow: 'glow 1000ms ease-in-out forwards',
         progress: 'spin 1200ms cubic-bezier(0.5, 0, 0.5, 1) infinite',
+        flip: 'flip 10s linear alternate-reverse infinite',
       },
       backdropBlur: {
         sticky: '50px',
@@ -80,12 +94,15 @@ module.exports = {
         'body-dark': '#141621',
         error: '#F04438',
         'error-bg': '#FDA29B',
+        green: '#039855',
         grey: '#3a3c49',
         'grey-dark': '#1a1c25',
         'grey-highlight': '#4c4c4c',
         'grey-light': '#bfbfbf',
         'grey-medium': '#5f697a',
         header: 'rgba(59, 25, 40, 0.4);',
+        info: '#FDB022',
+        'info-bg': '#FEDB7C',
         input: '#282a33',
         loss: '#f96363',
         mars: '#a03b45',
@@ -101,6 +118,7 @@ module.exports = {
         'success-bg': '#6CE9A6',
         'vote-against': '#eb9e49',
         warning: '#F79009',
+        'warning-bg': '#FEC84B',
         white: '#FFF',
       },
       fontFamily: {
@@ -148,6 +166,12 @@ module.exports = {
           '66%': { opacity: 1 },
           '100%': { opacity: 0 },
         },
+        flip: {
+          '0%': { transform: 'rotateX(0deg)' },
+          '45%': { transform: 'rotateX(0deg)' },
+          '55%': { transform: 'rotateX(180deg)' },
+          '100%': { transform: 'rotateX(180deg)' },
+        },
       },
       letterSpacing: {
         normal: 0,
@@ -164,10 +188,16 @@ module.exports = {
       },
       maxWidth: {
         content: '1024px',
+        modal: '895px',
+        'modal-sm': '517px',
+        'modal-xs': '442px'
       },
       minWidth: {
         15: '60px',
       },
+      padding: {
+        5.5: '22px',
+      },
       screens: {
         sm: '480px',
         md: '720px',
@@ -202,6 +232,7 @@ module.exports = {
     },
   },
   plugins: [
+    flipClass,
     require('tailwind-scrollbar-hide'),
     plugin(function ({ addBase, addUtilities, theme }) {
       addBase({