Borrow functionality (#144)

* remove hard coded data

* add borrow message

* update deposit message

* update borrow and deposit

* ➕ add tailwind-elements

* 🍱 add plus, shield, arrowbullish

* configuration for tw-elements

* add accordion + account summary

* remove tw-elements and update accordion

* update borrowmodal

* fixed svgs

* re-add blur for modals

* fix build errors and warnings

src/components/Accordion.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+
+import { Text } from 'components/Text'
+
+import { Plus, Subtract } from './Icons'
+import Card from './Card'
+
+interface Props {
+  items: Item[]
+}
+
+interface Item {
+  title: string
+  content: React.ReactNode
+}
+
+export default function Accordion(props: Props) {
+  return (
+    <Card>
+      {props.items.map((item, index) => (
+        <details key={item.title} className='group border-b-white/10 [&:not(:last-child)]:border-b'>
+          <summary className='mb-0 flex cursor-pointer items-center justify-between border-t border-white/10 bg-white/10 p-4 text-white group-[&:first-child]:border-t-0 group-[[open]]:border-b [&::marker]:hidden [&::marker]:content-[""]'>
+            <Text size='base'>{item.title}</Text>
+            <div className='block h-[14px] w-[14px] group-[[open]]:hidden'>
+              <Plus />
+            </div>
+            <div className='hidden h-[1px] w-[14px] group-[[open]]:block'>
+              <Subtract />
+            </div>
+          </summary>
+          <div className='bg-white/5 p-4'>{item.content}</div>
+        </details>
+      ))}
+    </Card>
+  )
+}

src/components/Account/AccountMenu.tsx

@@ -30,6 +30,7 @@ export default function AccountMenu() {
   const deleteCreditAccount = useStore((s) => s.deleteCreditAccount)
   const creditAccounts = useStore((s) => s.creditAccounts)
   const address = useStore((s) => s.address)
+  const deposit = useStore((s) => s.deposit)
 
   const hasCreditAccounts = !!creditAccounts?.length
   const accountSelected = !!selectedAccount && !isNaN(Number(selectedAccount))
@@ -113,7 +114,11 @@ export default function AccountMenu() {
                     text='Fund'
                     leftIcon={<ArrowUpLine />}
                     onClick={() => {
-                      useStore.setState({ fundAccountModal: true })
+                      deposit({
+                        fee: hardcodedFee,
+                        accountId: params.account,
+                        coin: { denom: 'uosmo', amount: '10000000' },
+                      })
                       setShowMenu(false)
                     }}
                   />

src/components/Account/AccountSummary.tsx

@@ -1,12 +1,53 @@
+import Accordion from 'components/Accordion'
 import Card from 'components/Card'
+import { ArrowChartLineUp, Shield } from 'components/Icons'
+import { Text } from 'components/Text'
+import useParams from 'hooks/useParams'
 
 export default function AccountSummary() {
+  const params = useParams()
+
   return (
-    <Card className='min-w-fit bg-white/10' contentClassName='flex'>
-      <div className='border-r border-r-white/10 px-4 py-2'>Hello</div>
-      <div className='border-r border-r-white/10 px-4 py-2'>Hello</div>
-      <div className='border-r border-r-white/10 px-4 py-2'>Hello</div>
-      <div className='px-4 py-2'>Hello</div>
-    </Card>
+    <div className='flex min-w-[320px] flex-col'>
+      <Card className='mb-4 min-w-fit bg-white/10' contentClassName='flex'>
+        <Item>
+          <Text size='sm'>$90,000</Text>
+        </Item>
+        <Item>
+          <span className='flex h-4 w-4 items-center'>
+            <ArrowChartLineUp />
+          </span>
+          <Text size='sm'>4.5x</Text>
+        </Item>
+        <Item>
+          <span className='h-3 w-3'>
+            <Shield />
+          </span>
+        </Item>
+        <Item style={{ border: 'none' }}>
+          <span className='h-3 w-3'>
+            <Shield />
+          </span>
+        </Item>
+      </Card>
+      <Accordion
+        items={[
+          { title: `Subaccount ${params.account} Composition`, content: <p>My content</p> },
+          { title: 'Risk Score: 60/100', content: <p>My content</p> },
+          { title: 'Balances', content: <p>My content</p> },
+        ]}
+      />
+    </div>
+  )
+}
+
+function Item(props: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className='flex flex-1 items-center justify-center gap-1 border-r border-r-white/10 px-2 py-2'
+      {...props}
+    >
+      {props.children}
+    </div>
   )
 }

src/components/BorrowModal.tsx

@@ -14,33 +14,48 @@ import Divider from 'components/Divider'
 import TokenInput from 'components/TokenInput'
 import { Button } from 'components/Button'
 import { ArrowRight } from 'components/Icons'
+import useParams from 'hooks/useParams'
+import { hardcodedFee } from 'utils/contants'
 
 export default function BorrowModal() {
-  const modal = useStore((s) => s.borrowModal)
+  const params = useParams()
   const [percentage, setPercentage] = useState(0)
   const [value, setValue] = useState(0)
+  const [selectedAccount, setSelectedAccount] = useState(params.account)
+  const modal = useStore((s) => s.borrowModal)
+  const borrow = useStore((s) => s.borrow)
+  const creditAccounts = useStore((s) => s.creditAccounts)
 
-  const onSliderChange = useCallback(
-    (percentage: number) => onPercentageChange(percentage),
-    [onPercentageChange],
-  )
-  const onInputChange = useCallback((value: number) => onValueChange(value), [onValueChange])
+  function onAccountSelect(accountId: string) {
+    setSelectedAccount(accountId)
+  }
 
   function setOpen(isOpen: boolean) {
     useStore.setState({ borrowModal: null })
   }
 
-  function onBorrowClick() {}
+  function onBorrowClick() {
+    if (!modal?.asset) return
 
-  function onPercentageChange(percentage: number) {
-    setPercentage(percentage)
-    setValue(new BigNumber(percentage).div(100).times(liquidityAmount).toNumber())
+    const amount = new BigNumber(value).shiftedBy(modal.asset.decimals)
+
+    borrow({
+      fee: hardcodedFee,
+      accountId: selectedAccount,
+      coin: { denom: modal.asset.denom, amount: amount.toString() },
+    })
   }
 
-  function onValueChange(value: number) {
+  const onSliderChange = useCallback(
+    (percentage: number, liquidityAmount: number) =>
+      setValue(new BigNumber(percentage).div(100).times(liquidityAmount).toNumber()),
+    [],
+  )
+
+  const onInputChange = useCallback((value: number, liquidityAmount: number) => {
     setValue(value)
     setPercentage(new BigNumber(value).div(liquidityAmount).times(100).toNumber())
-  }
+  }, [])
 
   if (!modal) return null
 
@@ -82,16 +97,32 @@ export default function BorrowModal() {
           sub={'Liquidity available'}
         />
       </div>
-      <div className='flex items-start gap-6 p-6'>
-        <Card className='w-full bg-white/5 p-4' contentClassName='gap-6 flex flex-col'>
+      <div className='flex flex-grow items-start gap-6 p-6'>
+        <Card
+          className='w-full bg-white/5 p-4'
+          contentClassName='gap-6 flex flex-col justify-between h-full'
+        >
           <TokenInput
             asset={modal.asset}
-            onChange={onInputChange}
+            onChange={(value) => onInputChange(value, liquidityAmount)}
             value={value}
             max={liquidityAmount}
           />
-          <Slider value={percentage} onChange={onSliderChange} />
+          <Slider value={percentage} onChange={(value) => onSliderChange(value, liquidityAmount)} />
           <Divider />
+          <Text size='lg'>Borrow to</Text>
+          <select
+            name='creditAccount'
+            value={selectedAccount}
+            onChange={(e) => onAccountSelect(e.target.value)}
+            className='rounded-base border border-white/10 bg-white/5 p-4'
+          >
+            {creditAccounts?.map((account) => (
+              <option key={account} value={account}>
+                {account}
+              </option>
+            ))}
+          </select>
           <Button
             onClick={onBorrowClick}
             className='w-full'

src/components/Card.tsx

@@ -15,7 +15,7 @@ export default function Card(props: Props) {
     <section
       className={classNames(
         props.className,
-        'relative z-1 flex max-w-full flex-wrap items-start overflow-hidden rounded-base',
+        'relative z-1 max-w-full  overflow-hidden rounded-base',
         'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-base before:p-[1px] before:border-glas',
       )}
     >

src/components/Icons/ArrowChartLineUp.svg

@@ -0,0 +1,3 @@
+<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"/>
+</svg>

src/components/Icons/Plus.svg

@@ -0,0 +1,3 @@
+<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"/>
+</svg>

src/components/Icons/Shield.svg

@@ -0,0 +1,3 @@
+<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"/>
+</svg>

src/components/Icons/index.ts

@@ -2,15 +2,16 @@
 export { default as Account } from 'components/Icons/Account.svg'
 export { default as Add } from 'components/Icons/Add.svg'
 export { default as ArrowBack } from 'components/Icons/ArrowBack.svg'
+export { default as ArrowChartLineUp } from 'components/Icons/ArrowChartLineUp.svg'
 export { default as ArrowDown } from 'components/Icons/ArrowDown.svg'
 export { default as ArrowDownLine } from 'components/Icons/ArrowDownLine.svg'
 export { default as ArrowLeftLine } from 'components/Icons/ArrowLeftLine.svg'
 export { default as ArrowRight } from 'components/Icons/ArrowRight.svg'
 export { default as ArrowRightLine } from 'components/Icons/ArrowRightLine.svg'
-export { default as ArrowUp } from 'components/Icons/ArrowUp.svg'
-export { default as ArrowUpLine } from 'components/Icons/ArrowUpLine.svg'
 export { default as ArrowsLeftRight } from 'components/Icons/ArrowsLeftRight.svg'
 export { default as ArrowsUpDown } from 'components/Icons/ArrowsUpDown.svg'
+export { default as ArrowUp } from 'components/Icons/ArrowUp.svg'
+export { default as ArrowUpLine } from 'components/Icons/ArrowUpLine.svg'
 export { default as BurgerMenu } from 'components/Icons/BurgerMenu.svg'
 export { default as Check } from 'components/Icons/Check.svg'
 export { default as CheckCircled } from 'components/Icons/CheckCircled.svg'
@@ -35,10 +36,12 @@ export { default as Logo } from 'components/Icons/Logo.svg'
 export { default as MarsProtocol } from 'components/Icons/MarsProtocol.svg'
 export { default as Medium } from 'components/Icons/Medium.svg'
 export { default as Osmo } from 'components/Icons/Osmo.svg'
+export { default as Plus } from 'components/Icons/Plus.svg'
 export { default as Questionmark } from 'components/Icons/Questionmark.svg'
 export { default as Reddit } from 'components/Icons/Reddit.svg'
 export { default as Rubbish } from 'components/Icons/Rubbish.svg'
 export { default as Search } from 'components/Icons/Search.svg'
+export { default as Shield } from 'components/Icons/Shield.svg'
 export { default as SliderMark } from 'components/Icons/SliderMark.svg'
 export { default as SmallClose } from 'components/Icons/SmallClose.svg'
 export { default as SortAsc } from 'components/Icons/SortAsc.svg'

src/components/Modal.tsx

@@ -22,11 +22,11 @@ export const Modal = (props: Props) => {
   }
 
   return props.open ? (
-    <div className='fixed inset-0 z-40 h-screen w-screen '>
+    <div className='fixed inset-0 z-40 h-screen w-screen'>
       <div className='relative flex h-full w-full items-center justify-center'>
         <Card
           className={classNames(
-            'relative z-40 w-[790px] max-w-full bg-white/5 backdrop-blur-3xl',
+            'relative z-40 w-[895px] max-w-full bg-white/5 backdrop-blur-3xl',
             props.className,
           )}
         >
@@ -40,7 +40,7 @@ export const Modal = (props: Props) => {
               color='tertiary'
             />
           </div>
-          <div className={props.contentClassName}>
+          <div className={classNames(props.contentClassName, ' flex-grow')}>
             {props.children ? props.children : props.content}
           </div>
         </Card>

src/components/TokenInput.tsx

@@ -16,7 +16,7 @@ export default function TokenInput(props: Props) {
       <div className='box-content flex h-11 w-full rounded-sm border border-white/20 bg-white/5'>
         <div className='flex min-w-fit items-center gap-2 border-r border-white/20 bg-white/5 p-3'>
           <Image src={props.asset.logo} alt='token' width={20} height={20} />
-          <Text size='lg'>{props.asset.symbol}</Text>
+          <Text size='base'>{props.asset.symbol}</Text>
         </div>
         <NumberInput
           maxDecimals={props.asset.decimals}

src/pages/api/accounts/[id]/debts.ts

@@ -12,7 +12,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const account = await (await fetch(`${ENV.URL_API}/accounts/${accountId}${VERCEL_BYPASS}`)).json()
 
   if (account) {
-    return res.status(200).json([{ denom: 'uosmo', amount: '123876' }])
+    return res.status(200).json(account.debts)
   }
 
   return res.status(404)

src/store/slices/broadcast.ts

@@ -22,19 +22,42 @@ export interface BroadcastSlice {
     fee: StdFee
     funds?: Coin[]
   }) => Promise<BroadcastResult>
+  borrow: (options: { fee: StdFee; accountId: string; coin: Coin }) => Promise<void>
   createCreditAccount: (options: { fee: StdFee }) => Promise<string | null>
   deleteCreditAccount: (options: { fee: StdFee; accountId: string }) => Promise<boolean>
-  depositCreditAccount: (options: {
-    fee: StdFee
-    accountId: string
-    deposit: Coin
-  }) => Promise<boolean>
+  deposit: (options: { fee: StdFee; accountId: string; coin: Coin }) => Promise<boolean>
 }
 
 export function createBroadcastSlice(set: SetState<Store>, get: GetState<Store>): BroadcastSlice {
   const marketAssets = getMarketAssets()
   return {
     toast: null,
+    borrow: async (options: { fee: StdFee; accountId: string; coin: Coin }) => {
+      const msg = {
+        update_credit_account: {
+          account_id: options.accountId,
+          actions: [{ borrow: options.coin }],
+        },
+      }
+
+      const response = await get().executeMsg({ msg, fee: options.fee })
+
+      if (response.result?.response.code === 0) {
+        set({
+          toast: {
+            message: `Borrowed ${options.coin.amount} ${options.coin.denom} to Account ${options.accountId}`,
+          },
+        })
+      } else {
+        const error = response.error ? response.error : response.result?.rawLogs
+        set({
+          toast: {
+            message: `Transaction failed: ${error}`,
+            isError: true,
+          },
+        })
+      }
+    },
     createCreditAccount: async (options: { fee: StdFee }) => {
       const msg = {
         create_credit_account: {},
@@ -80,32 +103,23 @@ export function createBroadcastSlice(set: SetState<Store>, get: GetState<Store>)
       }
       return !!response.result
     },
-    depositCreditAccount: async (options: { fee: StdFee; accountId: string; deposit: Coin }) => {
-      const deposit = {
-        denom: options.deposit.denom,
-        amount: String(options.deposit.amount),
-      }
+    deposit: async (options: { fee: StdFee; accountId: string; coin: Coin }) => {
       const msg = {
         update_credit_account: {
           account_id: options.accountId,
           actions: [
             {
-              deposit: deposit,
+              deposit: options.coin,
             },
           ],
         },
       }
-      const funds = [deposit]
 
-      const response = await get().executeMsg({ msg, fee: options.fee, funds })
+      const response = await get().executeMsg({ msg, fee: options.fee, funds: [options.coin] })
       if (response.result) {
         set({
           toast: {
-            message: `Deposited ${convertFromGwei(
-              deposit.amount,
-              deposit.denom,
-              marketAssets,
-            )} ${getTokenSymbol(deposit.denom, marketAssets)} to Account ${options.accountId}`,
+            message: `Deposited ${options.coin} to Account ${options.accountId}`,
           },
         })
       } else {

src/utils/contants.ts

@@ -7,5 +7,5 @@ export const hardcodedFee = {
       amount: '100000',
     },
   ],
-  gas: '2000000',
+  gas: '5000000',
 }

yarn.lock

@@ -979,7 +979,7 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4":
   version "7.21.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz"
   integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
@@ -2338,123 +2338,6 @@
   resolved "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
-"@radix-ui/number@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.0.tgz"
-  integrity sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/primitive@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz"
-  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-collection@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.2.tgz#d50da00bfa2ac14585319efdbbb081d4c5a29a97"
-  integrity sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.2"
-    "@radix-ui/react-slot" "1.0.1"
-
-"@radix-ui/react-compose-refs@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz"
-  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-context@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz"
-  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-direction@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz"
-  integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-primitive@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz#54e22f49ca59ba88d8143090276d50b93f8a7053"
-  integrity sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-slot" "1.0.1"
-
-"@radix-ui/react-slider@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.1.1.tgz#5685f23b6244804a5b1f55cee2d321a2acd1878e"
-  integrity sha512-0aswLpUKZIraPEOcXfwW25N1KPfLA6Mvm1TxogUChGsbLbys2ihd7uk9XAKsol9ZQPucxh2/mybwdRtAKrs/MQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/number" "1.0.0"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-collection" "1.0.2"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-direction" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.2"
-    "@radix-ui/react-use-controllable-state" "1.0.0"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-    "@radix-ui/react-use-previous" "1.0.0"
-    "@radix-ui/react-use-size" "1.0.0"
-
-"@radix-ui/react-slot@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz"
-  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-
-"@radix-ui/react-use-callback-ref@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz"
-  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-use-controllable-state@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz"
-  integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
-
-"@radix-ui/react-use-layout-effect@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz"
-  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-use-previous@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz"
-  integrity sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-use-size@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz"
-  integrity sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-
 "@react-spring/animated@~9.7.1":
   version "9.7.1"
   resolved "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.1.tgz"
@@ -5337,7 +5220,7 @@ graphql-tag@^2.12.6:
   dependencies:
     tslib "^2.1.0"
 
-graphql@^16.3.0, graphql@^16.6.0:
+graphql@^16.3.0:
   version "16.6.0"
   resolved "https://registry.npmjs.org/graphql/-/graphql-16.6.0.tgz"
   integrity sha512-KPIBPDlW7NxrbT/eh4qPXz5FiFdL5UbaA0XUNz2Rp3Z3hqBSkbj0GVjwFDztsWVauZUWsbKHgMg++sk8UX0bkw==
@@ -6659,13 +6542,6 @@ react-modal@^3.16.1:
     react-lifecycles-compat "^3.0.0"
     warning "^4.0.3"
 
-react-number-format@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.npmjs.org/react-number-format/-/react-number-format-5.1.4.tgz"
-  integrity sha512-QV7QHzHrk9ZS9V0bWkIwu6ywiXJt0www4/cXWEVEgwaNqthmOZl/Cf5O0ukEPlGZJJr06Jh3+CM4rZsvXn8cOg==
-  dependencies:
-    prop-types "^15.7.2"
-
 react-qr-code@^2.0.11:
   version "2.0.11"
   resolved "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.11.tgz"