MP-3357: created the Intro component (#427)

__tests__/utils/vaults.test.ts

@@ -30,4 +30,4 @@ describe('getVaultMetaData()', () => {
 
     expect(getVaultMetaData(testAddress)?.name).toBe(testVaultName)
   })
-})
+})

src/api/vaults/getDepositedVaults.ts

@@ -179,4 +179,4 @@ async function getDepositedVaults(accountId: string): Promise<DepositedVault[]>
   }
 }
 
-export default getDepositedVaults
+export default getDepositedVaults

src/components/Account/AccountBalancesTable.tsx

@@ -11,13 +11,14 @@ import React from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 import AccountFund from 'components/Account/AccountFund'
-import Button from 'components/Button'
+import ActionButton from 'components/Button/ActionButton'
 import DisplayCurrency from 'components/DisplayCurrency'
 import { FormattedNumber } from 'components/FormattedNumber'
 import { SortAsc, SortDesc, SortNone } from 'components/Icons'
 import Text from 'components/Text'
 import { ASSETS } from 'constants/assets'
 import { BN_ZERO } from 'constants/math'
+import { ORACLE_DENOM } from 'constants/oracle'
 import useCurrentAccount from 'hooks/useCurrentAccount'
 import usePrices from 'hooks/usePrices'
 import useStore from 'store'
@@ -29,8 +30,6 @@ import { BN } from 'utils/helpers'
 import { convertAprToApy } from 'utils/parsers'
 import { getPage, getRoute } from 'utils/route'
 
-import { ORACLE_DENOM } from '../../constants/oracle'
-
 interface Props {
   account: Account
   lendingData: LendingMarketTableData[]
@@ -210,7 +209,7 @@ export default function AccountBalancesTable(props: Props) {
   if (balanceData.length === 0)
     return (
       <div className='w-full p-4'>
-        <Button
+        <ActionButton
           className='w-full'
           text='Fund this Account'
           color='tertiary'

src/components/Account/AccountFund.tsx

@@ -191,4 +191,4 @@ export default function AccountFund() {
       </Card>
     </FullOverlayContent>
   )
-}
+}

src/components/Account/AccountMenuContent.tsx

@@ -164,4 +164,4 @@ export default function AccountMenuContent(props: Props) {
   )
 }
 
-export { ACCOUNT_MENU_BUTTON_ID }
+export { ACCOUNT_MENU_BUTTON_ID }

src/components/Borrow/BorrowIntro.tsx

@@ -0,0 +1,14 @@
+import Intro from 'components/Intro'
+
+export default function BorrowIntro() {
+  return (
+    <Intro
+      text={
+        <>
+          <span className='text-white'>Borrow</span> assets, against your collateral. But always
+          have an eye on your Account Health. Once it reaches zero, you&apos;ll be liquidated.
+        </>
+      }
+    ></Intro>
+  )
+}

src/components/Earn/Farm/FarmIntro.tsx

@@ -0,0 +1,36 @@
+import Button from 'components/Button'
+import { PlusSquared } from 'components/Icons'
+import Intro from 'components/Intro'
+import { DocURL } from 'types/enums/docURL'
+
+export default function FarmIntro() {
+  return (
+    <Intro
+      text={
+        <>
+          <span className='text-white'>Farm</span> the fields of Mars. Proceed with caution fellow
+          farmer. Riches and ruins lie ahead.
+        </>
+      }
+    >
+      <Button
+        text='Read more about Mars'
+        leftIcon={<PlusSquared />}
+        onClick={(e) => {
+          e.preventDefault()
+          window.open(DocURL.DOCS_URL, '_blank')
+        }}
+        color='secondary'
+      />
+      <Button
+        text='Learn how to Farm'
+        leftIcon={<PlusSquared />}
+        onClick={(e) => {
+          e.preventDefault()
+          window.open(DocURL.ROVER_INTRO_URL, '_blank')
+        }}
+        color='secondary'
+      />
+    </Intro>
+  )
+}

src/components/Earn/Farm/VaultTable.tsx

@@ -36,8 +36,6 @@ type Props = {
 export const VaultTable = (props: Props) => {
   const [sorting, setSorting] = React.useState<SortingState>([{ id: 'name', desc: true }])
 
-  const baseCurrency = useStore((s) => s.baseCurrency)
-
   const columns = React.useMemo<ColumnDef<Vault | DepositedVault>[]>(() => {
     return [
       {
@@ -266,7 +264,7 @@ export const VaultTable = (props: Props) => {
                       'align-center',
                     )}
                   >
-                    <span className='h-6 w-6 text-white'>
+                    <span className='w-6 h-6 text-white'>
                       {header.column.getCanSort()
                         ? {
                             asc: <SortAsc />,
@@ -306,4 +304,4 @@ export const VaultTable = (props: Props) => {
       </tbody>
     </table>
   )
-}
+}

src/components/Earn/Lend/LendIntro.tsx

@@ -0,0 +1,27 @@
+import ActionButton from 'components/Button/ActionButton'
+import { ArrowUpLine } from 'components/Icons'
+import Intro from 'components/Intro'
+import useStore from 'store'
+
+export default function LendIntro() {
+  return (
+    <Intro
+      text={
+        <>
+          By <span className='text-white'>Lending</span> your assets, you&apos;ll earn attractive
+          interest (APY) without impacting your LTV. It&apos;s a win-win situation - don&apos;t miss
+          out on this easy opportunity to grow your holdings!
+        </>
+      }
+    >
+      <ActionButton
+        text='Deposit assets'
+        color='secondary'
+        leftIcon={<ArrowUpLine />}
+        onClick={() => {
+          useStore.setState({ fundAndWithdrawModal: 'fund' })
+        }}
+      />
+    </Intro>
+  )
+}

src/components/Earn/Lend/LendingMarketsTable.tsx

@@ -1,6 +1,7 @@
 import { ColumnDef, Row, Table } from '@tanstack/react-table'
 import { useCallback, useMemo } from 'react'
 
+import AmountAndValue from 'components/AmountAndValue'
 import AssetImage from 'components/AssetImage'
 import LendingActionButtons from 'components/Earn/Lend/LendingActionButtons'
 import { FormattedNumber } from 'components/FormattedNumber'
@@ -9,12 +10,10 @@ import AssetListTable from 'components/MarketAssetTable'
 import MarketAssetTableRow from 'components/MarketAssetTable/MarketAssetTableRow'
 import MarketDetails from 'components/MarketAssetTable/MarketDetails'
 import TitleAndSubCell from 'components/TitleAndSubCell'
+import { BN_ZERO } from 'constants/math'
 import { convertLiquidityRateToAPR, demagnify } from 'utils/formatters'
 import { BN } from 'utils/helpers'
 
-import { BN_ZERO } from '../../../constants/math'
-import AmountAndValue from '../../AmountAndValue'
-
 interface Props {
   title: string
   data: LendingMarketTableData[]

src/components/Icons/PlusSquared.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.5 5.33333V10.6667M5.83333 8H11.1667M5.7 14H11.3C12.4201 14 12.9802 14 13.408 13.782C13.7843 13.5903 14.0903 13.2843 14.282 12.908C14.5 12.4802 14.5 11.9201 14.5 10.8V5.2C14.5 4.0799 14.5 3.51984 14.282 3.09202C14.0903 2.71569 13.7843 2.40973 13.408 2.21799C12.9802 2 12.4201 2 11.3 2H5.7C4.5799 2 4.01984 2 3.59202 2.21799C3.21569 2.40973 2.90973 2.71569 2.71799 3.09202C2.5 3.51984 2.5 4.0799 2.5 5.2V10.8C2.5 11.9201 2.5 12.4802 2.71799 12.908C2.90973 13.2843 3.21569 13.5903 3.59202 13.782C4.01984 14 4.5799 14 5.7 14Z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

src/components/Icons/index.ts

@@ -35,6 +35,7 @@ export { default as Osmo } from 'components/Icons/Osmo.svg'
 export { default as OverlayMark } from 'components/Icons/OverlayMark.svg'
 export { default as Plus } from 'components/Icons/Plus.svg'
 export { default as PlusCircled } from 'components/Icons/PlusCircled.svg'
+export { default as PlusSquared } from 'components/Icons/PlusSquared.svg'
 export { default as Questionmark } from 'components/Icons/Questionmark.svg'
 export { default as ReceiptCheck } from 'components/Icons/ReceiptCheck.svg'
 export { default as Search } from 'components/Icons/Search.svg'

src/components/Intro.tsx

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react'
+
+import Card from 'components/Card'
+import Text from 'components/Text'
+import { Tooltip } from 'components/Tooltip'
+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
+import { TUTORIAL_KEY } from 'constants/localStore'
+import useLocalStorage from 'hooks/useLocalStorage'
+
+interface Props {
+  text: string | ReactNode
+  children?: ReactNode
+}
+
+export default function Intro(props: Props) {
+  const [tutorial] = useLocalStorage<boolean>(TUTORIAL_KEY, DEFAULT_SETTINGS.tutorial)
+
+  if (!tutorial) return null
+  return (
+    <Card
+      className='relative w-full p-8 mb-6 bg-cover bg-intro h-55'
+      contentClassName='flex rjustify-between w-full h-full flex-col justify-between'
+    >
+      <Tooltip
+        className='absolute top-4 right-4'
+        type='info'
+        content={
+          <Text size='xs'>
+            If you want to hide these info boxes. Set the <strong>Tutorial</strong> to OFF in the
+            Settings.
+          </Text>
+        }
+      />
+      <div className='flex w-full'>
+        <Text size='lg' className='max-w-full leading-7 w-140 text-white/60'>
+          {props.text}
+        </Text>
+      </div>
+      {props.children && <div className='flex w-full gap-4'>{props.children}</div>}
+    </Card>
+  )
+}

src/components/Modals/BorrowModal.tsx

@@ -251,4 +251,4 @@ function BorrowModal(props: Props) {
       </div>
     </Modal>
   )
-}
+}

src/components/Modals/FundWithdraw/FundAccount.tsx

@@ -184,4 +184,4 @@ export default function FundAccount(props: Props) {
       />
     </>
   )
-}
+}

src/components/Modals/Settings/index.tsx

@@ -108,7 +108,7 @@ export default function SettingsModal() {
       setAutoLendOnAllAccounts(value)
       setLendAssets(value)
     },
-    [setLendAssets],
+    [setLendAssets, setAutoLendOnAllAccounts],
   )
 
   const handleTutorial = useCallback(

src/components/Portfolio/PortfolioIntro.tsx

@@ -0,0 +1,14 @@
+import Intro from 'components/Intro'
+
+export default function PortfolioIntro() {
+  return (
+    <Intro
+      text={
+        <>
+          This is your <span className='text-white'>Portfolio</span>. Use it to get an overview
+          about all your Credit Accounts and their balances.
+        </>
+      }
+    ></Intro>
+  )
+}

src/components/RewardsCenter.tsx

@@ -20,8 +20,7 @@ import { BNCoin } from 'types/classes/BNCoin'
 import { byDenom } from 'utils/array'
 import { defaultFee } from 'utils/constants'
 import { formatAmountWithSymbol, getCoinValue } from 'utils/formatters'
-
-import { ORACLE_DENOM } from '../constants/oracle'
+import { ORACLE_DENOM } from 'constants/oracle'
 
 const renderIncentives = (unclaimedRewards: BNCoin[]) => {
   if (unclaimedRewards.length === 0)

src/components/Switch/SwitchAutoLend.tsx

@@ -32,4 +32,4 @@ export default function SwitchAutoLend(props: Props) {
       />
     </div>
   )
-}
+}

src/components/Switch/SwitchWithLabel.tsx

@@ -40,4 +40,4 @@ export default function SwitchWithLabel(props: Props) {
       />
     </div>
   )
-}
+}

src/components/Tooltip/TooltipContent.tsx

@@ -16,19 +16,13 @@ export default function TooltipContent(props: Props) {
     <div>
       <div
         className={classNames(
-          'flex max-w-[320px] flex-1 gap-2 rounded-sm py-0.5 px-2 text-sm shadow-tooltip backdrop-blur-lg',
+          'flex max-w-[320px] flex-1 gap-2 rounded-sm py-1 px-2 text-sm shadow-tooltip backdrop-blur-lg',
           props.type === 'info' && 'bg-white/20',
           props.type === 'warning' && 'bg-warning',
           props.type === 'error' && 'bg-error',
         )}
       >
-        {typeof props.content === 'string' ? (
-          <Text size='sm' className='font-semibold'>
-            {props.content}
-          </Text>
-        ) : (
-          props.content
-        )}
+        {typeof props.content === 'string' ? <Text size='xs'>{props.content}</Text> : props.content}
       </div>
       {
         <div data-popper-arrow=''>

src/constants/assets.ts

@@ -155,4 +155,4 @@ export const ASSETS: Asset[] = [
     hasOraclePrice: true,
     forceFetchPrice: true,
   },
-]
+]

src/pages/BorrowPage.tsx

@@ -1,3 +1,4 @@
+import BorrowIntro from 'components/Borrow/BorrowIntro'
 import BorrowTable from 'components/Borrow/BorrowTable'
 import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
 
@@ -6,6 +7,7 @@ export default function BorrowPage() {
 
   return (
     <>
+      <BorrowIntro />
       <BorrowTable data={accountBorrowedAssets} title='Borrowed Assets' />
       <BorrowTable data={availableAssets} title='Available to borrow' />
     </>

src/pages/FarmPage.tsx

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

src/pages/LendPage.tsx

@@ -1,13 +1,14 @@
+import LendIntro from 'components/Earn/Lend/LendIntro'
 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'>
+    <div className='flex flex-wrap w-full gap-4'>
       <Tab />
+      <LendIntro />
       <LendingMarketsTable data={accountLentAssets} title='Lent Assets' />
       <LendingMarketsTable data={availableAssets} title='Available Markets' />
     </div>

src/pages/PortfolioPage.tsx

@@ -1,5 +1,11 @@
 import AccountOverview from 'components/Account/AccountOverview'
+import PortfolioIntro from 'components/Portfolio/PortfolioIntro'
 
 export default function PortfolioPage() {
-  return <AccountOverview />
+  return (
+    <>
+      <PortfolioIntro />
+      <AccountOverview />
+    </>
+  )
 }

src/store/slices/broadcast.ts

@@ -20,7 +20,6 @@ import { formatAmountWithSymbol } from 'utils/formatters'
 import getTokenOutFromSwapResponse from 'utils/getTokenOutFromSwapResponse'
 import { BN } from 'utils/helpers'
 
-
 function generateExecutionMessage(
   sender: string | undefined = '',
   contract: string,
@@ -527,4 +526,4 @@ export default function createBroadcastSlice(
       }
     },
   }
-}
+}

src/types/enums/docURL.ts

@@ -3,6 +3,7 @@ export enum DocURL {
   BORROW_LENDING_URL = 'https://docs.marsprotocol.io',
   COOKIE_POLICY_URL = 'https://docs.marsprotocol.io/mars-protocol/terms-of-service/mars-cookie-policy',
   CONCENTRATED_LIQUIDITY_URL = 'https://docs.marsprotocol.io',
+  DOCS_URL = 'https://docs.marsprotocol.io/',
   MANAGE_ACCOUNT_URL = 'https://docs.marsprotocol.io/docs/learn/workstation/rover/managing-credit-accounts',
   ROVER_INTRO_URL = 'https://docs.marsprotocol.io/docs/learn/workstation/rover/rover-intro',
   PRIVACY_POLICY_URL = 'https://docs.marsprotocol.io/mars-protocol/terms-of-service/mars-privacy-policy',

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

@@ -52,4 +52,4 @@ interface BroadcastSlice {
     borrow: BNCoin[]
     reclaims: ActionCoin[]
   }) => Promise<boolean>
-}
+}

src/utils/tokens.ts

@@ -19,4 +19,4 @@ export const getTokenInfo = (denom: string, marketAssets: Asset[]) =>
 export function getTokenPrice(denom: string, prices: BNCoin[]): BigNumber {
   const price = prices.find((price) => price.denom === denom)?.amount || '0'
   return BN(price)
-}
+}

src/utils/vaults.ts

@@ -177,4 +177,4 @@ function getSwapAction(denomIn: string, denomOut: string, amount: BigNumber, sli
       slippage: slippage.toString(),
     },
   }
-}
+}

tailwind.config.js

@@ -47,7 +47,7 @@ module.exports = {
         sticky: '50px',
       },
       backgroundImage: {
-        account: 'url(/images/account.webp), url(/images/account.png)',
+        intro: 'url(/images/intro.webp), url(/images/intro.png)',
       },
       backgroundSize: {
         desktop: '100% auto',
@@ -136,6 +136,7 @@ module.exports = {
       height: {
         4.5: '18px',
         15: '60px',
+        55: '220px',
       },
       hueRotate: {
         '-82': '-82deg',
@@ -217,6 +218,7 @@ module.exports = {
         92.5: '370px',
         100: '400px',
         120: '480px',
+        140: '560px',
       },
       zIndex: {
         1: '1',