@huma-finance/widgets 0.0.6-alpha.0

package/src/components/TxSendModal.tsx

@@ -0,0 +1,59 @@
+import { useWeb3React } from '@web3-react/core'
+import { Contract } from 'ethers'
+import {
+  PoolInfoType,
+  sendTxAtom,
+  TxStateType,
+  useMount,
+  usePoolContract,
+} from '@huma-finance/shared'
+import { useAtom } from 'jotai'
+import React, { useEffect } from 'react'
+
+import { useAppDispatch } from '../hooks/useRedux'
+import { LoadingModal } from './LoadingModal'
+import { ViewOnExplorer } from './ViewOnExplorer'
+
+type Props = {
+  poolInfo: PoolInfoType
+  method: string
+  params: unknown[]
+  title?: string
+  contract?: Contract
+  handleSuccess?: () => void
+}
+
+export function TxSendModal({
+  poolInfo,
+  title,
+  method,
+  params,
+  contract,
+  handleSuccess,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { provider } = useWeb3React()
+  const poolContract = usePoolContract(poolInfo.poolName, poolInfo.poolType)
+  const [{ state, txHash }, send] = useAtom(sendTxAtom)
+
+  useEffect(() => {
+    if (state === TxStateType.Success) {
+      if (handleSuccess) {
+        handleSuccess()
+      }
+    }
+  }, [dispatch, handleSuccess, state])
+
+  useMount(() => {
+    send({ contract: contract ?? poolContract!, method, params, provider })
+  })
+
+  return (
+    <LoadingModal
+      title={title ?? 'Transaction Pending'}
+      description='Waiting for confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}

package/src/components/ViewOnExplorer.tsx

@@ -0,0 +1,26 @@
+import { Box, Button } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { CHAINS, openInNewTab } from '@huma-finance/shared'
+import React from 'react'
+
+type Props = {
+  txHash: string
+}
+
+export function ViewOnExplorer({ txHash }: Props): React.ReactElement | null {
+  const { chainId } = useWeb3React()
+  const chain = chainId ? CHAINS[chainId] : null
+
+  if (!txHash || !chain) {
+    return null
+  }
+
+  return (
+    <Button
+      variant='outlined'
+      onClick={() => openInNewTab(`${chain.explorer}/${txHash}`)}
+    >
+      <Box component='span'>VIEW ON EXPLORER</Box>
+    </Button>
+  )
+}

package/src/components/WidgetWrapper.tsx

@@ -0,0 +1,74 @@
+import { isTxFailed, sendTxAtom, txAtom } from '@huma-finance/shared'
+import { useAtom } from 'jotai'
+import { useResetAtom } from 'jotai/utils'
+import React, { useCallback, useEffect } from 'react'
+
+import { useAppDispatch, useAppSelector } from '../hooks/useRedux'
+import { resetState, setError } from '../store/widgets.reducers'
+import { selectWidgetState } from '../store/widgets.selectors'
+import { WIDGET_STEP } from '../store/widgets.store'
+import { WCProps } from '../utilTypes'
+import { HumaModal, HumaModalHeader } from './humaModal'
+import { LoadingModal } from './LoadingModal'
+
+type Props = {
+  isOpen: boolean
+  isLoading?: boolean
+  loadingTitle?: string
+  handleClose: () => void
+  handleSuccess?: (blockNumber: number) => void
+}
+
+export function WidgetWrapper({
+  isOpen,
+  isLoading = false,
+  loadingTitle = '',
+  handleClose,
+  handleSuccess,
+  children,
+}: WCProps<Props>): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { step } = useAppSelector(selectWidgetState)
+  const [{ state, failReason, txReceipt }] = useAtom(sendTxAtom)
+  const reset = useResetAtom(txAtom)
+
+  useEffect(() => {
+    if (isTxFailed(state) && failReason) {
+      dispatch(setError({ errorMessage: failReason }))
+    }
+  }, [dispatch, failReason, state])
+
+  useEffect(() => {
+    if (step === WIDGET_STEP.Done && txReceipt) {
+      if (handleSuccess) {
+        handleSuccess(txReceipt.blockNumber)
+      }
+    }
+  }, [handleSuccess, step, txReceipt])
+
+  const handleCloseModal = useCallback(() => {
+    reset()
+    dispatch(resetState())
+    handleClose()
+  }, [dispatch, handleClose, reset])
+
+  // when close modal, return null to make sure all the states are reset
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <HumaModal
+      isOpen={isOpen}
+      overflowY='auto'
+      onClose={handleCloseModal}
+      width='480px'
+      padding='30px 40px'
+      disableBackdropClick
+    >
+      <HumaModalHeader onClose={handleCloseModal} height={0} />
+      {isLoading && <LoadingModal title={loadingTitle} />}
+      {!isLoading && children}
+    </HumaModal>
+  )
+}

package/src/components/WrapperModal.tsx

@@ -0,0 +1,54 @@
+import { Box, css, Typography, useTheme } from '@mui/material'
+import React from 'react'
+
+type Props = {
+  title: string
+  subTitle?: string | React.ReactNode
+  children: React.ReactNode
+}
+
+export function WrapperModal({
+  title,
+  subTitle,
+  children,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      font-family: 'Uni-Neue-Bold';
+      font-size: 20px;
+      margin-top: -5px;
+    `,
+    content: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 30px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      line-height: 24px;
+      color: #49505b;
+    `,
+    bottom: css`
+      & .MuiButtonBase-root {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+      }
+    `,
+  }
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        {title}
+      </Typography>
+      {subTitle && <Box css={styles.content}>{subTitle}</Box>}
+      {children}
+    </Box>
+  )
+}

package/src/components/buttons/TableActionButton.tsx

@@ -0,0 +1,36 @@
+import { Box, Button, css } from '@mui/material'
+
+type Props = {
+  title: string
+  className?: string
+  handleClick: () => void
+  disabled?: boolean
+}
+
+export function TableActionButton({
+  title,
+  className,
+  handleClick,
+  disabled = false,
+}: Props): React.ReactElement {
+  const styles = css`
+    border: none;
+    padding: 0;
+    background: ${disabled ? 'unset !important' : 'inherit'};
+    &:hover {
+      border: none;
+    }
+  `
+
+  return (
+    <Button
+      className={className}
+      variant={disabled ? undefined : 'outlined'}
+      onClick={handleClick}
+      css={styles}
+      disabled={disabled}
+    >
+      <Box>{title}</Box>
+    </Button>
+  )
+}

package/src/components/buttons/index.ts

@@ -0,0 +1 @@
+export * from './TableActionButton'

package/src/components/humaModal/HumaModal.tsx

@@ -0,0 +1,68 @@
+import { css } from '@emotion/react'
+import { Dialog } from '@mui/material'
+import { useMQ } from '@huma-finance/shared'
+import React from 'react'
+
+import { white } from '../../theme/palette'
+
+type HumaModalType = {
+  children?: React.ReactNode
+  isOpen: boolean
+  onClose: () => void
+  overflow?: string
+  overflowY?: 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto'
+  width?: string
+  padding?: string
+  disableBackdropClick?: boolean
+}
+
+export function HumaModal({
+  children,
+  isOpen,
+  onClose,
+  overflow,
+  overflowY,
+  width = '480px',
+  padding = '30px',
+  disableBackdropClick = false,
+}: HumaModalType): React.ReactElement {
+  const { isXsSize } = useMQ()
+
+  const styles = {
+    wrapper: css`
+      max-width: 100vw;
+      width: ${isXsSize ? '100%' : width};
+      height: auto;
+      padding: ${padding};
+      box-sizing: border-box;
+    `,
+  }
+
+  const handleClose = (reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (!disableBackdropClick) {
+      onClose()
+    } else if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
+      onClose()
+    }
+  }
+
+  return (
+    <Dialog
+      disableScrollLock
+      maxWidth={false}
+      fullScreen={isXsSize}
+      open={isOpen}
+      PaperProps={{
+        style: {
+          background: white,
+          borderRadius: '16px',
+          overflow: overflow || 'inherit',
+          overflowY: overflowY || 'inherit',
+        },
+      }}
+      onClose={(event, reason) => handleClose(reason)}
+    >
+      <div css={styles.wrapper}>{children}</div>
+    </Dialog>
+  )
+}

package/src/components/humaModal/HumaModalHeader.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { css } from '@emotion/react'
+import ChevronLeftOutlinedIcon from '@mui/icons-material/ChevronLeftOutlined'
+import CloseIcon from '@mui/icons-material/Close'
+import { useTheme } from '@mui/material'
+import React from 'react'
+
+type HumaModalHeaderType = {
+  allowBack?: boolean
+  children?: React.ReactNode
+  hideClose?: boolean
+  onBack?: () => void
+  onClose: () => void
+  title?: React.ReactNode
+  height?: number
+}
+
+export function HumaModalHeader({
+  hideClose,
+  allowBack,
+  onBack = (): void => {},
+  onClose,
+  height = 52,
+  ...props
+}: HumaModalHeaderType): React.ReactElement {
+  const theme = useTheme()
+  const styles = {
+    buttonBackWrapper: css`
+      cursor: pointer;
+      position: absolute;
+      left: ${theme.spacing(2)};
+      top: ${theme.spacing(3)};
+    `,
+    buttonClose: css`
+      &:hover {
+        stroke: ${theme.palette.grey[200]};
+      }
+      stroke: ${theme.palette.common.white};
+    `,
+    buttonCloseWrapper: css`
+      cursor: pointer;
+      position: absolute;
+      right: ${theme.spacing(3)};
+      top: ${theme.spacing(3)};
+    `,
+    headerBand: css`
+      height: ${height}px;
+    `,
+  }
+
+  return (
+    <div>
+      <div css={styles.headerBand}>
+        {props.title}
+        {!!allowBack && (
+          <div css={styles.buttonBackWrapper} onClick={onBack}>
+            <ChevronLeftOutlinedIcon height={16} width={16} />
+          </div>
+        )}
+        {!hideClose && (
+          <div css={styles.buttonCloseWrapper} onClick={onClose}>
+            <CloseIcon css={styles.buttonClose} height={16} width={16} />
+          </div>
+        )}
+      </div>
+      <div>{props.children}</div>
+    </div>
+  )
+}

package/src/components/humaModal/index.tsx

@@ -0,0 +1,2 @@
+export * from './HumaModal'
+export * from './HumaModalHeader'

package/src/components/icons/approve-lender.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="246" height="231" fill="none" viewBox="0 0 246 231">
+  <path stroke="#000" d="M217.875 117.345a.487.487 0 1 0 0-.974.487.487 0 0 0 0 .974ZM61.268 163.38a.487.487 0 1 0 0-.974.487.487 0 0 0 0 .974Zm-36.873 14.304a.487.487 0 1 0 0-.974.487.487 0 0 0 0 .974Zm-.908-162.709a.487.487 0 1 0 0-.975.487.487 0 0 0 0 .975Zm135.609 15.076a.488.488 0 1 0 0-.976.488.488 0 0 0 0 .976ZM93.62 189.508a.487.487 0 1 0 0-.975.487.487 0 0 0 0 .975Z"/>
+  <path stroke="#000" stroke-linecap="round" d="m214.338 44.34 2.684 1.952"/>
+  <path stroke="#A363F4" stroke-linecap="round" d="M15.164 171c-2.998 4.153-6.873 11.115-7.164 16.646m32.208 31.238a29.811 29.811 0 0 1-4.524-.062m-27.66-29.566c.055.609.165 1.193.338 1.745m.348.892c.29.607.671 1.165 1.158 1.66m.485.444c.735.607 1.662 1.097 2.808 1.446 10.258 3.126 17.831-7.246 20.335-12.822 1.761-4.303 1.703-10.9-5.51-6.812-7.212 4.086-9.55 17.53-9.817 23.742-.022 4.682 1.991 12.432 8.867 16.574m1.411.764c.33.16.67.312 1.019.455m.776.299c.603.218 1.233.411 1.892.577m.791.185c.651.139 1.33.252 2.035.339"/>
+  <path stroke="#000" stroke-linecap="round" d="M171 36.624c7.505-11.578 22.634-31.055 23.108-16.338.594 18.395-5.272 9.529-3.431 4.138 2.297-6.723 9.495-11.486 17.612-7.198m-46.81 52.681 2.684 1.953M115 2.626 117.893 1M76.568 210.462l2.684 1.952m-75.505-80.7-2.723 1.897m159.434 68.13-2.723 1.897m70.875-48.419-2.724 1.898M14.323 50.414l-1.925-2.704m217.698-31.277 3.089-1.213M211 5l1.806 2.785M1 204.976l1.805 2.784"/>
+  <path stroke="#A363F4" d="m153.061 80.582 19.053.451m-40.582 107.563 44.841.879m10.574-108.09 19.94.474v108.197l-21.926-.425"/>
+  <path stroke="#A363F4" stroke-linecap="round" d="M172.855 93.715h19.711m-31.083 12.003h27.799m-36.012 12.13h37.275m-35.885 11.246h32.473m-33.863 14.784h33.863m-29.946 13.773 23.123 1.39"/>
+  <path stroke="#000" d="m39.007 39.073 23.1-23.686m-23.1 23.686 2.154 136.638H99.9M39.007 39.073l23.1 4.11V15.388m0 0h91.026v142.48m-10.536 17.844h-15.049"/>
+  <path stroke="#000" stroke-linecap="round" d="m52.5 113 4.684 6.127L69.5 105.5m-17-21c.254.635 2.5 4 4.684 6.387L68 77.085M52.5 55.5l4.684 6.037 4.124-6.037m3.967 6.989h50.648m18.364 0H119.41M66.703 89.777h11.105m-11.106 27.922h37.918"/>
+  <path fill="#000" d="M82.439 111.271c-10.332-6.935-12.36-34.654-12.22-48.7 2.774 10.675 9.102 33.31 12.22 38.451 3.119 5.141 9.797 2.984 12.746 1.263l12.326-5.583-1.42 11.537c-5.878 4.306-17.587 7.102-23.652 3.032Zm58.592-4.658 12.008 51.485-7.925-58.605 7.925 6.259v3.174c2.955 1.85 7.132 2.875 11.835 2.468 12.346-1.066 15.158-17.043 18.675-25.652l6.547-4.686h-2.417l-5.452 3.364-1.146 2.115c-2.978 5.326-10.388 16.796-16.207 20.078-5.819 3.283-10.314-1.367-11.835-4.102l-12.008-12.345v16.447Z"/>
+  <path stroke="#000" stroke-linecap="round" d="M105.467 110.895c-1.692 13.658-5.128 43.751-5.73 55.781-.6 12.029 2.256 34.333 3.759 43.982l33.269-3.196-11.465-39.095 1.599-21.217m1.22-16.187-1.22 16.187m0 0c.407 7.698 5.619 25.089 23.211 33.058 17.593 7.969 30.387 10.464 34.585 10.714l6.766-22.555-38.72-10.526-10.697-50.524"/>
+  <path fill="#000" d="M126.49 229.746h7.797l-3.936-21.82-14.189 1.567 1.251 3.96-31.537 16.293H122.3l3.492-4.772.698 4.772Zm83.397-45.501 2.365-7.429-22.188-2.953-4.259 14.079 5.804.01 5.956 34.994 11.052-34.709-3.488-4.774 4.758.782Z"/>
+  <path stroke="#000" d="m115.14 68.176-.054-.298-.303-.004a19.468 19.468 0 0 1-1.257-.065c.905-.818 1.457-1.875 1.758-3.093a9.582 9.582 0 0 1 .539-1.573c.83-1.88 2.162-3.313 3.631-4.115 1.468-.801 3.052-.966 4.423-.36 1.373.606 2.319 1.887 2.716 3.511.396 1.626.236 3.575-.594 5.456-.83 1.882-2.163 3.313-3.631 4.115-1.467.802-3.052.967-4.424.36-1.488-.657-2.477-2.11-2.804-3.934Z" clip-rule="evenodd"/>
+  <path fill="#000" d="M121.125 66.359c-2.728-2.343-2.709-5.886-2.41-7.142 4.517-4.153 10.992-1.8 11.644 3.331 0 3.115.34 4.73 1.447 5.528 2.598 1.353 2.535 4.133 2.374 5.715l-9.096.541-.591-4.732c-.911-.178-1.564-.846-1.806-1.216.904-.447 1.989-1.7 1.094-2.72-.896-1.023-2.778.588-2.656.695Z"/>
+  <path stroke="#000" stroke-linecap="round" d="M116.521 64.11c.455-.443 1.657-1.07 2.835-.04m-2.432 5.632c.355.026 1.17-.112 1.587-.865m-1.852-3.151c.382-.544 1.434-1.334 2.594-.143"/>
+  <path fill="#000" d="M117.981 66.08a.531.531 0 1 0-.059-1.061.531.531 0 0 0 .059 1.06Z"/>
+  <path stroke="#000" stroke-linecap="round" d="M121.541 67.269c.17-.312.726-.923 1.586-.867"/>
+  <path stroke="#000" stroke-linecap="round" d="M122.324 66.642c.234.063.613.359.251 1.043m-3.537 5.037.22 2.24m5.353-4.649.492 4.24"/>
+  <path fill="#000" d="m119.549 74.485-.642-2.155c2.057.197 4.117-.67 4.891-1.13-1.549 2.072-3.479 3.053-4.249 3.285Z"/>
+  <path stroke="#000" stroke-linecap="round" d="M14.943 230h229.992"/>
+  <path stroke="#000" d="m180.362 87.471 1.694-2.987 14.07-8.565c1.385-.793 1.391-1.613.104-1.803 1.109-.264 2.164-2.151.098-2.991.883-.424 1.342-1.813-.052-2.425-.144-.064-.549-.168-1.01-.078-.461.091-1.765.544-2.36.76l2.409-2.255c.746-.699.088-2.47-1.531-1.637l-10.001 6.718 2.258-5.695c.346-1.129-.823-3.052-2.559-1.186-.873.816-7.142 9.072-10.167 13.098l-1.499 4.046"/>
+  <path stroke="#000" stroke-linecap="round" d="m196.293 74.098-7.753 3.785m7.881-6.8-8.428 4.077m5.222-6.013-5.167 3.768"/>
+  <path stroke="#000" d="M82.297 58.438c-.149-.2-7.991-14.531-11.894-21.672-.737-1.349-2.491-.922-1.744 1.868a77.534 77.534 0 0 0 2.118 6.601c-3.903 1.35-11.198 6.029-9.155 13.95 2.117 8.407 2.678-3.052 4.172-3.114 1.196-.05 5.647 6.705 7.723 10.089"/>
+  <path fill="#000" d="M118.822 72.413c-1.906-.158-3.156-2.239-3.544-3.26.294-.142.21-.153-2.467.936-2.676 1.088-2.645 3.95-2.295 5.244l8.646-.68-.34-2.24Z"/>
+  <path fill="#A363F4" d="m108.855 75.05 28.279-1.54c4.59.573 9.197 4.569 10.926 6.495l13.057 15.42 10.694-15.42 10.197 6.058c-2.528 5.359-9.078 17.022-15.046 20.802-5.969 3.78-11.357-.083-13.306-2.488L141.47 91.196l1.367 17.907-37.802 2.238 1.492-13.679-12.433 6.715c-5.258 2.488-10.026 1.652-14.427-5.222-4.239-6.622-8.487-27.382-9.684-37.218l13.626-4.294 5.227 28.42c1.897-1.09 5.775-3.86 7.716-5.167 5.712-4.144 9.307-5.595 12.303-5.846Z"/>
+  <path stroke="#000" stroke-linecap="round" d="m106.595 96.192.181-6.024m34.632-.643.181-6.023m19.279 18.713.181-6.023m-77.904-6.226 4.84-3.589"/>
+  <path fill="#000" d="m104.823 115.177.416-3.865 10.194-.603v3.941l-10.61.527Zm37.637-6.066.9 4.154-6.466.32-.357-4.123 5.923-.351Zm-24.019 5.39v-3.969l15.575-.922v4.118l-15.575.773Z"/>
+  <path stroke="#000" stroke-linecap="round" d="M107.275 116.857c.274 2.189 1.79 6.023 5.613 8.526m6.525 2.28c-2.688-.327-4.832-1.173-6.525-2.28m0 0-8.869 39.138 17.023 44.407"/>
+  <path stroke="#000" d="m127.554 140.837 21.167 31.677 41.595-.889"/>
+</svg>

package/src/components/icons/auto-payback.svg

@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" fill="none" viewBox="0 0 320 240">
+  <g clip-path="url(#a)">
+    <path stroke="#000" d="M75.485 131.459a.458.458 0 1 1-.001-.917.458.458 0 0 1 0 .917Zm74.89-125.824a.458.458 0 1 1 0-.916.458.458 0 0 1 0 .916ZM252.461 84.67a.458.458 0 1 1 0-.917.458.458 0 0 1 0 .917Zm-73.903 105.961a.459.459 0 1 1 0-.918.459.459 0 0 1 0 .918ZM43.08 91.663a.459.459 0 1 1 0-.918.459.459 0 0 1 0 .918Zm134.651-48.684a.46.46 0 1 1 0-.918.46.46 0 0 1 0 .918ZM52.01 186.308a.458.458 0 1 1-.002-.917.458.458 0 0 1 .001.917Z"/>
+    <path stroke="#000" stroke-linecap="round" d="m39.732 206.948-2.526 1.838M220.815.385l-2.525 1.837m-47.262 114.98-2.526 1.838M144.87 225.973l2.563 1.786m-77.277-9.808 2.563 1.785M247.603 37.505l2.563 1.785M200.82 84.813l2.563 1.785m-82.998-75.102-2.907-1.142M56.587 5.177l-1.7 2.62m159.509 219.961-1.699 2.621"/>
+    <path stroke="#A363F4" stroke-linecap="round" d="M198.977 194.782c.254 1.317.406 3.395-.134 4.74m-11.086 3.863c.373.201.733.36 1.081.484m9.822-3.968a2.204 2.204 0 0 1-.273.377m-.181.174a1.58 1.58 0 0 1-.458.266m-.164.052a2.103 2.103 0 0 1-.825.034c-2.779-.389-3.433-3.685-3.412-5.284.056-1.216.797-2.775 2.058-1.009 1.261 1.764.334 5.212-.287 6.715-.511 1.114-1.843 2.731-3.932 2.956m-.419.026a5.71 5.71 0 0 1-.291-.004m-.217-.015a5.354 5.354 0 0 1-.513-.072m-.208-.043a6.4 6.4 0 0 1-.521-.144"/>
+    <path stroke="#000" stroke-linecap="round" d="M83.541 30.684c-2.207 1.12-5.82 2.445-8.481 2.169M62.572 15.138a14.378 14.378 0 0 0-.31 2.164M74.294 32.72a4.037 4.037 0 0 1-.806-.292m-.4-.234a2.929 2.929 0 0 1-.706-.678m-.175-.264c-.234-.396-.399-.875-.48-1.448-.72-5.13 4.798-7.965 7.647-8.741 2.185-.517 5.328.006 2.836 3.14-2.491 3.136-9.082 3.241-12.066 2.902-2.236-.34-5.783-1.884-7.243-5.476m-.259-.73a8.837 8.837 0 0 1-.14-.52m-.085-.393a9.679 9.679 0 0 1-.133-.946m-.029-.392c-.017-.32-.02-.653-.009-.996"/>
+    <path stroke="#000" d="M182.929 128.653h47.014c-.755-4.702-3.393-3.498-4.617-2.308-7.892-16.708-15.252-7.312-17.946-.525-3.862-6.297-7.906-2.624-9.445 0-7.976-5.289-13.328-.315-15.006 2.833ZM81.015 48.952H34c.755-4.701 3.393-3.498 4.617-2.308 7.892-16.708 15.252-7.312 17.946-.525 3.862-6.297 7.906-2.624 9.445 0 7.976-5.29 13.328-.315 15.007 2.833Z" clip-rule="evenodd"/>
+    <path fill="#A363F4" d="m228.409 53.234-2.354 12.722-10.03-4.167 9.304 7.304-8.315 4.089 9.636-1.797-2.018 11.95 4.97-11.622 8.764 9.487-5.77-10.812 8.668-2.91-8.287-.52 2.486-5.337-4.826 3.822-2.228-12.209Zm-67.077-25.837-.982 5.306-4.184-1.738 3.881 3.046-3.468 1.706 4.019-.75-.841 4.985 2.073-4.848 3.655 3.957-2.407-4.51 3.615-1.213-3.456-.217 1.037-2.226-2.013 1.594-.929-5.092Z"/>
+    <path stroke="#000" d="m225.61 151.6-2.799 15.13-11.929-4.955 11.066 8.686-9.89 4.864 11.46-2.137-2.4 14.213 5.912-13.823 10.422 11.282-6.862-12.858 10.309-3.462-9.856-.617 2.958-6.349-5.741 4.547-2.65-14.521Z" clip-rule="evenodd"/>
+    <path stroke="#000" stroke-linecap="round" d="m188.864 70.503-58.299 169.882m12.274-179.498-9.088 26.48M84.541 230.77l24.605-71.701m37.444 34.772-47.162-6.32m78.64-85.303-42.198-5.73m27.153 48.865-15.899-2.131"/>
+    <path stroke="#000" d="m79.598 91.473-8.975 11.928c-1.322 1.36-2.992 0-2.06-2.332 0-.466 1.58-3.794 2.37-5.4l-4.662 3.07-11.034.582-5.595-4.623c-1.438-1.166-.614-2.455 1.282-2.02-1.01-.894-1.515-3.07 1.593-1.944-.466-.918-1.15-2.455.777-2.02.442.136 2.653 2.02 2.653 2.02s2.842.17 3.641.506l-6.294-4.39c-.738-.506-.233-1.865 1.126-1.438.312 0 4.767 2.046 6.955 3.07l10.568-5.362"/>
+    <path stroke="#000" stroke-linecap="round" d="M70.9 95.639c-1.29-1.308-3.287-4.776-.967-8.187m60.492-13.734 18.16 76.235H83.138l21.396-82.528"/>
+    <path stroke="#000" d="M173.246 53.62c.141-.187 7.521-13.674 11.193-20.394.694-1.269 2.344-.867 1.641 1.758a73.353 73.353 0 0 1-1.992 6.212c3.672 1.27 10.536 5.673 8.614 13.128-1.993 7.911-2.52-2.872-3.927-2.93-1.124-.048-5.313 6.309-7.266 9.493"/>
+    <path stroke="#000" stroke-linecap="round" d="M102.434 149.862c-4.488-3.272-10.571-11.831 1.007-19.885 14.473-10.068 5.286-14.347 0-25.799-3.139-6.804-4.153-11.327 7.3-17.745 9.162-5.136 3.314-14.474-.755-18.5"/>
+    <path stroke="#000" d="M140.517 30.061c-1.02-.528-1.774-1.359-2.338-2.395a9.116 9.116 0 0 0-.865-1.304c-1.205-1.514-2.759-2.5-4.287-2.88-1.527-.38-3.009-.151-4.114.727-1.104.879-1.659 2.27-1.633 3.844.026 1.574.636 3.31 1.841 4.825 1.204 1.515 2.759 2.5 4.287 2.88 1.527.38 3.008.152 4.113-.727 1.198-.953 1.752-2.513 1.614-4.251l-.022-.284.275-.075c.348-.095.767-.233 1.129-.36Z" clip-rule="evenodd"/>
+    <path fill="#000" d="M133.255 30.553c1.925-2.782 1.062-6.004.49-7.076-.421-.286-1.672-.734-3.311-.238-2.05.62-3.098 2.025-3.36 5.027-.21 2.402 2.153 5.147 3.36 6.219 1.124-.23 1.723-1.24 1.882-1.716-.929-.19-2.216-1.072-1.644-2.216.571-1.143 2.668-.125 2.583 0Z"/>
+    <path fill="#000" d="M121.715 21.585c3.537-1.488 6.223 1.064 7.124 2.526l-.176.913c-.222-.304-2.059-.352-3.298 0-3.761 1.067-3.123 7.65-3.123 9.51l-7.896-6.913c.982-1.392 3.832-4.548 7.369-6.036Z"/>
+    <path stroke="#000" stroke-linecap="round" d="M136.909 27.408c-.519-.294-1.762-.578-2.589.64m4.04 4.942c-.316.107-1.091.175-1.651-.41m.449-3.703c-.476-.404-1.623-.872-2.396.488"/>
+    <path fill="#000" d="M136.047 29.55a.5.5 0 1 1-.2-.98.5.5 0 0 1 .2.98Z"/>
+    <path stroke="#000" stroke-linecap="round" d="M133.094 31.48c-.23-.242-.882-.665-1.651-.41"/>
+    <path stroke="#000" stroke-linecap="round" d="M132.229 31.098c-.198.113-.472.473.02 1.008m3.197 4.038-1.076 2.967m-3.942-4.596-.945 2.269"/>
+    <path fill="#000" d="m134.734 38.21.712-1.993c-1.943.081-3.835-.84-4.538-1.31 1.35 2.025 3.113 3.046 3.826 3.303Z"/>
+    <path fill="#A363F4" d="M141.165 41.471s-14.678-6.193-20.004-6.874c-5.326-.682-11.591 2.632-13.759 4.738l-38.74 41.369 13.934 14.36 21.895-27.44 29.998 7.534 3.413-8.814c.522 2.938 2.787 10.805 7.678 18.767s14.265 5.024 18.34 2.559l25.876-21.326-16.776-15.355-13.649 19.193c-1.185-2.89-3.798-10.327-7.21-16.924-3.412-6.597-4.678-8.442-10.996-11.787Z"/>
+    <path stroke="#000" stroke-linecap="round" d="m104.764 66.084 5.3-16.963m28.308 15.664 2.027-7.182m15.737 16.599 2.63-3.38"/>
+    <path fill="#000" d="m109.966 188.991-5.416-.861-.652-29.167h14.777l1.629 14.15 26.955 20.677-32.986-4.799-2.584-5.047-1.723 5.047Z"/>
+    <path stroke="#000" stroke-linecap="round" d="m103.659 150.058.239 8.905m13.768-8.905 1.009 8.905m0 0 1.629 14.15 26.955 20.677-32.986-4.799-2.584-5.047-1.723 5.047-5.416-.862-.652-29.166m14.777 0h-14.777"/>
+    <path fill="#000" d="m129.428 189.024-5.414-.861-.653-29.167h14.777l1.63 14.151 26.954 20.678-32.985-4.801-2.585-5.046-1.724 5.046Z"/>
+    <path stroke="#000" stroke-linecap="round" d="m123.121 150.092.24 8.905m13.769-8.905 1.008 8.905m0 0 1.63 14.15 26.954 20.678-32.985-4.801-2.585-5.045-1.724 5.045-5.414-.861-.653-29.166m14.777 0h-14.777m-9.093-8.905.646 7.174m-3.569-7.174 1.257 7.684m-4.624-7.684.238 7.174m25.512-7.14.646 7.174m-3.57-7.174 1.257 7.683m-4.623-7.683.238 7.174m-76.87-64.7 5.206 3.73 3.07-.428m-6.605-5.206 3.73 2.526 2.875-.35"/>
+    <mask id="b" width="103" height="36" x="192" y="6" fill="#000" maskUnits="userSpaceOnUse">
+      <path fill="#fff" d="M192 6h103v36H192z"/>
+      <path d="M217.151 21.981h-4.33l4.878-14.779h5.484l4.879 14.78h-4.33l-3.233-10.71h-.115l-3.233 10.71Zm-.809-5.83h8.14v3.001h-8.14V16.15Zm21.889-8.949h4.013v9.468c0 1.126-.27 2.1-.808 2.923-.534.817-1.28 1.45-2.238 1.898-.957.442-2.068.663-3.333.663-1.275 0-2.392-.22-3.349-.663-.957-.448-1.703-1.08-2.237-1.898-.529-.823-.794-1.797-.794-2.923V7.202h4.013v9.122c0 .457.101.866.303 1.226.202.356.481.635.837.837.361.203.769.304 1.227.304.461 0 .87-.101 1.226-.303.356-.203.635-.482.837-.838.202-.36.303-.77.303-1.226V7.202Zm5.516 3.233V7.202h12.845v3.233h-4.445v11.546h-3.955V10.435h-4.445Zm27.978 4.157c0 1.645-.32 3.033-.96 4.164-.64 1.125-1.504 1.98-2.591 2.561-1.087.578-2.299.866-3.637.866-1.347 0-2.564-.29-3.651-.873-1.083-.587-1.944-1.443-2.584-2.569-.635-1.13-.952-2.514-.952-4.15 0-1.645.317-3.03.952-4.156.64-1.13 1.501-1.985 2.584-2.562 1.087-.582 2.304-.873 3.651-.873 1.338 0 2.55.291 3.637.873 1.087.577 1.951 1.431 2.591 2.562.64 1.126.96 2.511.96 4.157Zm-4.128 0c0-.886-.118-1.631-.354-2.237-.231-.611-.575-1.073-1.032-1.386-.452-.317-1.01-.476-1.674-.476-.664 0-1.224.159-1.681.476-.453.313-.797.775-1.032 1.386-.231.606-.347 1.351-.347 2.237 0 .885.116 1.633.347 2.244.235.606.579 1.068 1.032 1.386.457.312 1.017.469 1.681.469.664 0 1.222-.157 1.674-.47.457-.317.801-.779 1.032-1.385.236-.611.354-1.36.354-2.244ZM193 40.045v-14.78h6.379c1.097 0 2.057.217 2.88.65a4.717 4.717 0 0 1 1.919 1.826c.457.784.686 1.7.686 2.75 0 1.058-.236 1.974-.707 2.749a4.649 4.649 0 0 1-1.971 1.79c-.841.418-1.825.627-2.951.627h-3.81V32.54h3.002c.471 0 .873-.082 1.205-.246.337-.168.594-.406.772-.714.183-.308.274-.671.274-1.09 0-.423-.091-.784-.274-1.082a1.719 1.719 0 0 0-.772-.693c-.332-.164-.734-.245-1.205-.245h-1.415v11.575H193Zm15.329 0H204l4.878-14.78h5.484l4.879 14.78h-4.33l-3.233-10.71h-.116l-3.233 10.71Zm-.808-5.831h8.14v3.002h-8.14v-3.002Zm11.029-8.949h4.474l2.886 6.005h.116l2.886-6.005h4.475l-5.427 10.132v4.648h-3.984v-4.648l-5.426-10.131Zm16.145 14.78v-14.78h6.408c1.125 0 2.071.152 2.836.455.77.303 1.349.731 1.739 1.285.394.553.592 1.205.592 1.955 0 .544-.121 1.04-.361 1.487a3.19 3.19 0 0 1-.996 1.126 3.966 3.966 0 0 1-1.501.62v.145a3.707 3.707 0 0 1 1.732.483c.519.294.933.7 1.241 1.22.308.514.462 1.12.462 1.818 0 .808-.212 1.528-.635 2.158-.419.63-1.015 1.126-1.79 1.486-.774.361-1.698.542-2.771.542h-6.956Zm4.012-3.204h1.876c.674 0 1.179-.126 1.516-.376.336-.255.505-.63.505-1.125 0-.347-.08-.64-.238-.88a1.485 1.485 0 0 0-.679-.55c-.288-.124-.637-.187-1.046-.187h-1.934v3.118Zm0-5.6h1.645c.351 0 .662-.056.931-.166.27-.11.479-.27.628-.477.154-.211.231-.469.231-.772 0-.457-.164-.806-.491-1.046-.327-.245-.741-.368-1.241-.368h-1.703v2.829Zm13.401 8.804h-4.33l4.878-14.78h5.485l4.878 14.78h-4.33l-3.233-10.71h-.115l-3.233 10.71Zm-.809-5.831h8.141v3.002h-8.141v-3.002Zm26.247-3.406h-4.071a2.74 2.74 0 0 0-.23-.917 2.075 2.075 0 0 0-.506-.707 2.102 2.102 0 0 0-.772-.462 2.994 2.994 0 0 0-1.032-.166c-.673 0-1.243.164-1.71.49-.462.328-.813.797-1.054 1.408-.235.611-.353 1.345-.353 2.201 0 .905.12 1.662.361 2.273.245.606.599 1.064 1.06 1.371.462.303 1.018.455 1.667.455.371 0 .703-.046.996-.137.294-.096.549-.233.765-.411.217-.178.392-.393.527-.643.14-.255.233-.54.281-.858l4.071.028a5.539 5.539 0 0 1-.527 1.913 6.22 6.22 0 0 1-1.292 1.79c-.553.543-1.239.98-2.057 1.313-.818.332-1.768.498-2.85.498-1.357 0-2.574-.291-3.652-.873-1.072-.583-1.922-1.439-2.547-2.57-.621-1.13-.931-2.513-.931-4.149 0-1.645.318-3.03.953-4.157.635-1.13 1.491-1.984 2.569-2.561 1.077-.582 2.28-.874 3.608-.874.933 0 1.792.128 2.576.383a6.202 6.202 0 0 1 2.064 1.118 5.524 5.524 0 0 1 1.429 1.797c.361.712.58 1.528.657 2.447Zm1.82 9.237v-14.78h4.012v5.976h.202l4.446-5.976h4.676l-4.994 6.582 5.109 8.198h-4.791l-3.32-5.543-1.328 1.732v3.81h-4.012Z"/>
+    </mask>
+    <path stroke="#000" stroke-width="2" d="M217.151 21.981h-4.33l4.878-14.779h5.484l4.879 14.78h-4.33l-3.233-10.71h-.115l-3.233 10.71Zm-.809-5.83h8.14v3.001h-8.14V16.15Zm21.889-8.949h4.013v9.468c0 1.126-.27 2.1-.808 2.923-.534.817-1.28 1.45-2.238 1.898-.957.442-2.068.663-3.333.663-1.275 0-2.392-.22-3.349-.663-.957-.448-1.703-1.08-2.237-1.898-.529-.823-.794-1.797-.794-2.923V7.202h4.013v9.122c0 .457.101.866.303 1.226.202.356.481.635.837.837.361.203.769.304 1.227.304.461 0 .87-.101 1.226-.303.356-.203.635-.482.837-.838.202-.36.303-.77.303-1.226V7.202Zm5.516 3.233V7.202h12.845v3.233h-4.445v11.546h-3.955V10.435h-4.445Zm27.978 4.157c0 1.645-.32 3.033-.96 4.164-.64 1.125-1.504 1.98-2.591 2.561-1.087.578-2.299.866-3.637.866-1.347 0-2.564-.29-3.651-.873-1.083-.587-1.944-1.443-2.584-2.569-.635-1.13-.952-2.514-.952-4.15 0-1.645.317-3.03.952-4.156.64-1.13 1.501-1.985 2.584-2.562 1.087-.582 2.304-.873 3.651-.873 1.338 0 2.55.291 3.637.873 1.087.577 1.951 1.431 2.591 2.562.64 1.126.96 2.511.96 4.157Zm-4.128 0c0-.886-.118-1.631-.354-2.237-.231-.611-.575-1.073-1.032-1.386-.452-.317-1.01-.476-1.674-.476-.664 0-1.224.159-1.681.476-.453.313-.797.775-1.032 1.386-.231.606-.347 1.351-.347 2.237 0 .885.116 1.633.347 2.244.235.606.579 1.068 1.032 1.386.457.312 1.017.469 1.681.469.664 0 1.222-.157 1.674-.47.457-.317.801-.779 1.032-1.385.236-.611.354-1.36.354-2.244ZM193 40.045v-14.78h6.379c1.097 0 2.057.217 2.88.65a4.717 4.717 0 0 1 1.919 1.826c.457.784.686 1.7.686 2.75 0 1.058-.236 1.974-.707 2.749a4.649 4.649 0 0 1-1.971 1.79c-.841.418-1.825.627-2.951.627h-3.81V32.54h3.002c.471 0 .873-.082 1.205-.246.337-.168.594-.406.772-.714.183-.308.274-.671.274-1.09 0-.423-.091-.784-.274-1.082a1.719 1.719 0 0 0-.772-.693c-.332-.164-.734-.245-1.205-.245h-1.415v11.575H193Zm15.329 0H204l4.878-14.78h5.484l4.879 14.78h-4.33l-3.233-10.71h-.116l-3.233 10.71Zm-.808-5.831h8.14v3.002h-8.14v-3.002Zm11.029-8.949h4.474l2.886 6.005h.116l2.886-6.005h4.475l-5.427 10.132v4.648h-3.984v-4.648l-5.426-10.131Zm16.145 14.78v-14.78h6.408c1.125 0 2.071.152 2.836.455.77.303 1.349.731 1.739 1.285.394.553.592 1.205.592 1.955 0 .544-.121 1.04-.361 1.487a3.19 3.19 0 0 1-.996 1.126 3.966 3.966 0 0 1-1.501.62v.145a3.707 3.707 0 0 1 1.732.483c.519.294.933.7 1.241 1.22.308.514.462 1.12.462 1.818 0 .808-.212 1.528-.635 2.158-.419.63-1.015 1.126-1.79 1.486-.774.361-1.698.542-2.771.542h-6.956Zm4.012-3.204h1.876c.674 0 1.179-.126 1.516-.376.336-.255.505-.63.505-1.125 0-.347-.08-.64-.238-.88a1.485 1.485 0 0 0-.679-.55c-.288-.124-.637-.187-1.046-.187h-1.934v3.118Zm0-5.6h1.645c.351 0 .662-.056.931-.166.27-.11.479-.27.628-.477.154-.211.231-.469.231-.772 0-.457-.164-.806-.491-1.046-.327-.245-.741-.368-1.241-.368h-1.703v2.829Zm13.401 8.804h-4.33l4.878-14.78h5.485l4.878 14.78h-4.33l-3.233-10.71h-.115l-3.233 10.71Zm-.809-5.831h8.141v3.002h-8.141v-3.002Zm26.247-3.406h-4.071a2.74 2.74 0 0 0-.23-.917 2.075 2.075 0 0 0-.506-.707 2.102 2.102 0 0 0-.772-.462 2.994 2.994 0 0 0-1.032-.166c-.673 0-1.243.164-1.71.49-.462.328-.813.797-1.054 1.408-.235.611-.353 1.345-.353 2.201 0 .905.12 1.662.361 2.273.245.606.599 1.064 1.06 1.371.462.303 1.018.455 1.667.455.371 0 .703-.046.996-.137.294-.096.549-.233.765-.411.217-.178.392-.393.527-.643.14-.255.233-.54.281-.858l4.071.028a5.539 5.539 0 0 1-.527 1.913 6.22 6.22 0 0 1-1.292 1.79c-.553.543-1.239.98-2.057 1.313-.818.332-1.768.498-2.85.498-1.357 0-2.574-.291-3.652-.873-1.072-.583-1.922-1.439-2.547-2.57-.621-1.13-.931-2.513-.931-4.149 0-1.645.318-3.03.953-4.157.635-1.13 1.491-1.984 2.569-2.561 1.077-.582 2.28-.874 3.608-.874.933 0 1.792.128 2.576.383a6.202 6.202 0 0 1 2.064 1.118 5.524 5.524 0 0 1 1.429 1.797c.361.712.58 1.528.657 2.447Zm1.82 9.237v-14.78h4.012v5.976h.202l4.446-5.976h4.676l-4.994 6.582 5.109 8.198h-4.791l-3.32-5.543-1.328 1.732v3.81h-4.012Z" mask="url(#b)"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h320v240H0z"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/components/icons/check-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 22 22">
+  <path fill="#2E7D32" d="m15.207 6.948-6.04 6.041-3.291-3.282L4.583 11l4.583 4.583L16.5 8.25l-1.293-1.302ZM11 1.833C5.94 1.833 1.833 5.94 1.833 11S5.94 20.167 11 20.167 20.166 16.06 20.166 11 16.06 1.833 11 1.833Zm0 16.5A7.331 7.331 0 0 1 3.666 11 7.331 7.331 0 0 1 11 3.667 7.331 7.331 0 0 1 18.333 11 7.331 7.331 0 0 1 11 18.333Z"/>
+</svg>

package/src/components/icons/check-green.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#45CB71" fill-rule="evenodd" d="m20.888 7.333-5.432 5.437-5.432 5.436a.458.458 0 0 1-.272.106.458.458 0 0 1-.273-.106L3.112 11.83a.376.376 0 0 1 0-.536L4.477 9.88c.14-.14.395-.14.535 0l4.74 4.687 9.165-9.21a.392.392 0 0 1 .536 0l1.435 1.442c.15.14.15.395 0 .535Z" clip-rule="evenodd"/>
+</svg>

package/src/components/icons/check.svg

@@ -0,0 +1,10 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="60" cy="60" r="60" fill="#F7F1FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.7014 47.556L69.2159 62.0532L54.7304 76.5504C54.4962 76.7143 54.2854 76.8314 54.0044 76.8314C53.7233 76.8314 53.5126 76.7143 53.2784 76.5504L36.2986 59.5472C35.9005 59.1725 35.9005 58.4933 36.2986 58.1185L39.9375 54.3438C40.3122 53.969 40.9914 53.969 41.3661 54.3438L54.0044 66.8436L78.4464 42.281C78.8211 41.9063 79.5003 41.9063 79.875 42.281L83.7014 46.1273C84.0995 46.5021 84.0995 47.1812 83.7014 47.556Z" fill="url(#paint0_linear_158_26261)"/>
+<defs>
+<linearGradient id="paint0_linear_158_26261" x1="84" y1="45.3572" x2="13.7792" y2="119.057" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A363F4"/>
+<stop offset="1" stop-color="#FF6A8A"/>
+</linearGradient>
+</defs>
+</svg>