Mp 2821 unlocked positions (#284)

* feat: added unlock flow to the deposited farm row

* feat: added first itteration of unlocking/unlocked logic

* feat: introduce getVaultPositionStatus

* feat: added animated unlock label

* fix: size fix

* MP-2821: created the VaultUnlockBanner

* MP-2821: finished single vault withdraw

* MP-2821: finished vault unlock integration

* fix: implemented feedback

* tidy: refactor isWaiting > isConfirming

* fix: updated according to feedback

* fix: updated according to feedback

* fix: added useMemo for multiple values

* tidy: fixed some format issues

* tidy: updated svg icon implementation

* fix: fixed Bob’s glas-border issues

* fix: refactor modal max-widths

* MP-3031: moved deposit button into the table row
:

* fix: cleanup and adjustment to the button (according to layout)

* fix: added nested groups and finalized the label animation

* tidy: cleanup

src/components/Earn/vault/VaultExpanded.tsx

@@ -21,15 +21,6 @@ export default function VaultExpanded(props: Props) {
   const [isConfirming, setIsConfirming] = useState(false)
   const withdrawFromVaults = useStore((s) => s.withdrawFromVaults)
 
-  function enterVaultHandler() {
-    useStore.setState({
-      vaultModal: {
-        vault: props.row.original,
-        selectedBorrowDenoms: [props.row.original.denoms.secondary],
-      },
-    })
-  }
-
   function depositMoreHandler() {
     useStore.setState({
       vaultModal: {
@@ -59,14 +50,6 @@ export default function VaultExpanded(props: Props) {
 
   /* 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' />}>
@@ -128,8 +111,7 @@ export default function VaultExpanded(props: Props) {
     >
       <td colSpan={!status ? 5 : 6}>
         <div className='align-center flex justify-end gap-3 p-4'>
-          {!status && <DepositButton />}
+          {status && <DepositMoreButton />}
-          <DepositMoreButton />
           {status === VaultStatus.ACTIVE && <UnlockButton />}
           {status === VaultStatus.UNLOCKING && <UnlockingButton />}
           {status === VaultStatus.UNLOCKED && <UnlockedButton />}

src/components/Earn/vault/VaultRow.tsx

@@ -7,20 +7,24 @@ type AssetRowProps = {
 }
 
 export const VaultRow = (props: AssetRowProps) => {
+  const vault = props.row.original as DepositedVault
   return (
     <tr
       key={props.row.id}
       className={classNames(
-        'bg-white/3 cursor-pointer border-b border-t border-white/5 transition-colors hover:bg-white/5',
+        'bg-white/3 group/row border-b border-t border-white/5 transition-colors hover:bg-white/5',
+        vault.status && 'cursor-pointer',
+        props.row.getIsExpanded() && 'is-expanded',
       )}
       onClick={(e) => {
         e.preventDefault()
+        if (!vault.status) return
         const isExpanded = props.row.getIsExpanded()
         props.resetExpanded()
         !isExpanded && props.row.toggleExpanded()
       }}
     >
-      {props.row.getVisibleCells().map((cell, index) => {
+      {props.row.getVisibleCells().map((cell) => {
         return (
           <td key={cell.id} className={'p-4 text-right'}>
             {flexRender(cell.column.columnDef.cell, cell.getContext())}

src/components/Earn/vault/VaultTable.tsx

@@ -10,6 +10,7 @@ import {
 import classNames from 'classnames'
 import React from 'react'
 
+import Button from 'components/Button'
 import DisplayCurrency from 'components/DisplayCurrency'
 import VaultExpanded from 'components/Earn/vault/VaultExpanded'
 import VaultLogo from 'components/Earn/vault/VaultLogo'
@@ -61,20 +62,29 @@ export const VaultTable = (props: Props) => {
                 sub={vault.provider}
               />
               {status === VaultStatus.UNLOCKING && (
-                <div className='h-5 w-[84px] perspective'>
+                <Text
-                  <div className='delay-5000 relative h-full w-full animate-flip preserve-3d'>
+                  className='group/label relative h-5 w-[84px] rounded-sm bg-green text-center leading-5 text-white'
-                    <div className='absolute h-5 rounded-sm bg-green backface-hidden'>
+                  size='xs'
-                      <Text className='w-[84px] text-center leading-5 text-white' size='xs'>
+                >
-                        {produceCountdown(remainingTime)}
+                  <span
-                      </Text>
+                    className={classNames(
-                    </div>
+                      'absolute inset-0 text-center',
-                    <div className='absolute h-full w-full overflow-hidden rounded-sm bg-green flip-x-180 backface-hidden'>
+                      'opacity-100 transition-opacity duration-500',
-                      <Text className='w-[84px] text-center leading-5 text-white' size='xs'>
+                      'group-hover/label:opacity-0 group-[.is-expanded]/row:opacity-0',
-                        Unlocking
+                    )}
-                      </Text>
+                  >
-                    </div>
+                    Unlocking
-                  </div>
+                  </span>
-                </div>
+                  <span
+                    className={classNames(
+                      'absolute inset-0 text-center',
+                      'opacity-0 transition-opacity duration-500',
+                      'group-hover/label:opacity-100 group-[.is-expanded]/row:opacity-100',
+                    )}
+                  >
+                    {produceCountdown(remainingTime)}
+                  </span>
+                </Text>
               )}
               {status === VaultStatus.UNLOCKED && (
                 <Text
@@ -154,15 +164,35 @@ export const VaultTable = (props: Props) => {
       {
         accessorKey: 'details',
         enableSorting: false,
-        header: 'Details',
+        header: (data) => {
+          const tableData = data.table.options.data as DepositedVault[]
+          if (tableData.length && tableData[0].status) return 'Details'
+          return 'Deposit'
+        },
         cell: ({ row }) => {
+          function enterVaultHandler() {
+            useStore.setState({
+              vaultModal: {
+                vault: row.original,
+                selectedBorrowDenoms: [row.original.denoms.secondary],
+              },
+            })
+          }
+
           if (props.isLoading) return <Loading />
+          const vault = row.original as DepositedVault
 
           return (
             <div className='flex items-center justify-end'>
-              <div className={classNames('w-4', row.getIsExpanded() && 'rotate-180')}>
+              {vault.status ? (
-                <ChevronDown />
+                <div className={classNames('w-4', row.getIsExpanded() && 'rotate-180')}>
-              </div>
+                  <ChevronDown />
+                </div>
+              ) : (
+                <Button onClick={enterVaultHandler} color='tertiary'>
+                  Deposit
+                </Button>
+              )}
             </div>
           )
         },

tailwind.config.js

@@ -1,23 +1,6 @@
 /** @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: [
@@ -52,7 +35,6 @@ 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',
@@ -166,12 +148,6 @@ 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,
@@ -190,7 +166,7 @@ module.exports = {
         content: '1024px',
         modal: '895px',
         'modal-sm': '517px',
-        'modal-xs': '442px'
+        'modal-xs': '442px',
       },
       minWidth: {
         15: '60px',
@@ -232,7 +208,6 @@ module.exports = {
     },
   },
   plugins: [
-    flipClass,
     require('tailwind-scrollbar-hide'),
     plugin(function ({ addBase, addUtilities, theme }) {
       addBase({