feat: first v1 standalone adjustments

package.json

@@ -1,6 +1,7 @@
 {
   "name": "mars-v2-frontend",
   "version": "2.2.4",
+  "v1version": "1.7.5",
   "homepage": "./",
   "private": false,
   "license": "SEE LICENSE IN LICENSE FILE",

public/images/bg-v1.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  x="0px"
+  y="0px"
+  opacity="0.05"
+  viewBox="0 0 1440 819.8"
+>
+  <path
+    stroke="#FFF"
+    d="M-41.5,81c20,17.3,62.5,51.4,71.8,49.5s27.7,13.3,35.6,21.1
+	c19.3,16.7,58.9,49.8,62.9,48.9c1.2-0.3,5.1-0.3,10.8-0.2c17.4,0.1,51.4,0.4,76.6-8.2c33.4-11.5,50.7-6.6,61.8,0s71.8,37.4,82.4,35
+	c3.5-0.8,14-0.1,26.7,0.7c25.2,1.7,59.4,3.9,66.8-3.7c11.1-11.5,204.9-19.3,223.3-9.7c14.7,7.7,34.1,7.8,42.7,7.8s28-0.1,42.7-7.8
+	c18.4-9.7,212.2-1.8,223.3,9.7c7.4,7.6,41.6,5.4,66.8,3.7c12.7-0.8,23.2-1.5,26.7-0.7c10.6,2.4,71.3-28.4,82.4-35
+	c11.1-6.6,28.4-11.5,61.8,0c25.2,8.6,59.3,8.4,76.6,8.2c5.7,0,9.6-0.1,10.8,0.2c4,1,43.6-32.2,62.9-48.9c8-7.8,26.3-23.1,35.6-21.1
+	c9.4,1.9,51.8-32.2,71.8-49.5"
+  />
+  <path
+    stroke="#FFF"
+    d="M-39.8,340.5c8.1,0.1,15.5,0.1,21.7,0.1
+	c18.9,0,60.1,10.9,95.2,30.4c2.9,0.7,5.7,1.4,8.3,2c17.6,4.3,28.9,7.1,50.7,7.1l152,3c2.6-0.4,8.9-2.6,13.4-7.9
+	c4.5-5.3,15.6-14.4,20.6-18.2c3.5-2.2,13.6-6.7,25.6-6.7c9.5,0,21.5,0.7,30.3,1.3c5.1,0.3,9.1,0.6,10.9,0.6c5,0,17.3-3,21.7-7.9
+	c3.6-3.9,39.4-47,56.8-68c6.1-6.9,22.4-19.3,38.4-14c20,6.7,75.2,6.7,84.1,0c8.9-6.7,29.5-18.2,49.6-14.6c2.2,0.4,4.8,0.9,7.8,1.4
+	c24.2,4.4,70.3,12.8,72.8,12.8s48.6-8.4,72.8-12.8c3-0.5,5.6-1,7.8-1.4c20-3.6,40.6,7.9,49.6,14.6c8.9,6.7,64,6.7,84.1,0
+	c16-5.3,32.3,7.1,38.4,14c17.4,21.1,53.2,64.1,56.8,68c4.5,4.9,16.7,7.9,21.7,7.9c1.8,0,5.8-0.2,10.9-0.6c8.8-0.5,20.8-1.3,30.3-1.3
+	c12,0,22.1,4.5,25.6,6.7c5,3.8,16.1,12.9,20.6,18.2c4.4,5.3,10.8,7.5,13.4,7.9l152-3c21.8,0,33.1-2.8,50.7-7.1
+	c2.6-0.6,5.4-1.3,8.3-2c35.1-19.4,76.3-30.4,95.2-30.4c6.2,0,13.6-0.1,21.7-0.1"
+  />
+  <path
+    stroke="#FFF"
+    d="M-56.4,455c79.7-9.9,188.1-23.3,214.2-34.7
+	c17-2.8,93.6,6,161.8,13.8c52.2,6,99.5,11.3,111.1,10.5c8.2-0.6,28.2-8.6,55.3-19.5C546.6,400.7,642.6,362,720,362
+	s173.4,38.7,234.1,63.1c27,10.9,47,19,55.3,19.5c11.6,0.8,58.8-4.6,111.1-10.5c68.1-7.8,144.8-16.5,161.8-13.8
+	c26.1,11.4,134.5,24.8,214.2,34.7"
+  />
+  <path
+    stroke="#FFF"
+    d="M-22.1,455.3c12.3,3,52.3,21.3,64,37.1
+	c11.7,15.8,33.3,14.7,35.1,12.8c1.7-1.8,16.7-13,24.5-18.2c4.6-2.4,16.8-5.8,28.4,0s79.4,39.7,111.9,55.9c4.3,2.4,13.1,7.3,14.5,7.3
+	c0.2,0,0.8,0.1,1.6,0.1c4.7,0.4,17.3,1.6,20.7-2.6c3.1-3.9,20.6-17.4,29-23.7c6.1-4,20.9-12.1,31.2-12.1s82.6,4,117.5,6.1
+	c20.2-0.4,61.8-1.3,66.3-1.8c3.3-0.4,34.5,1.6,60.7,3.3c17.8,1.1,33.4,2.1,36.2,2.1c3.4,0,13.7-7.1,26.7-16.3
+	c23.1-16.1,55-38.4,73.8-38.4s50.8,22.3,73.8,38.4c13.1,9.1,23.3,16.3,26.7,16.3c2.8,0,18.4-1,36.2-2.1c26.2-1.7,57.4-3.7,60.7-3.3
+	c4.5,0.5,46,1.4,66.3,1.8c34.9-2,107.2-6.1,117.5-6.1c10.2,0,25.1,8.1,31.2,12.1c8.3,6.3,25.8,19.8,29,23.7c3.3,4.1,16,3,20.7,2.6
+	c0.8-0.1,1.4-0.1,1.6-0.1c1.3,0,10.2-4.9,14.5-7.3c32.5-16.2,100.3-50.1,111.9-55.9c11.6-5.8,23.8-2.4,28.4,0
+	c7.8,5.3,22.8,16.4,24.5,18.2c1.8,1.9,23.4,3,35.1-12.8c11.7-15.8,51.8-34,64-37.1"
+  />
+  <path
+    stroke="#FFF"
+    d="M-48.7,749.9c4.2,0.6,7.8,1.2,10.5,1.2c3.3,0,5.6-2.4,8-5
+	c2.8-3,5.8-6.3,10.9-5.9c7.6,0.5,75.5,0.2,108.6,0l11.7,2.4l53.5,35.8l6.1,10.9l34.5,3l35.6,12.8c13,3.4,40.2,10.1,45.1,9.1
+	c3.1-0.6,12.4-7.5,21.6-14.4c9-6.7,17.9-13.3,21.2-14.2c6.7-1.8,27.3-11.5,30.6-14.6c0.3-0.3,0.7-0.7,1.3-1.2
+	c5.5-5.3,22.7-21.6,33.8-18.8c5.1,1.3,10,4.1,14.9,6.8c6.9,3.9,13.4,7.6,19.6,6.5c7.1-1.2,29.3-20.4,44.1-33.1
+	c7.3-6.3,12.8-11,13.8-11.2c2.2-0.5,38.4-39.1,56.2-58.3c5.9-6.3,23.6-14.8,42.3-6.1c18.7,8.7,46,9.1,57.9,9.1l67.9,6.1l18.7-0.1
+	l18.7,0.1l67.9-6.1c11.9,0,39.2-0.4,57.9-9.1c18.7-8.7,36.4-0.2,42.3,6.1c17.8,19.2,54,57.8,56.2,58.3c0.9,0.2,6.4,4.9,13.8,11.2
+	c14.8,12.7,37.1,31.9,44.1,33.1c6.2,1.1,12.8-2.7,19.6-6.5c4.8-2.7,9.8-5.6,14.9-6.8c11.1-2.8,28.2,13.6,33.8,18.8
+	c0.6,0.5,1,0.9,1.3,1.2c3.3,3,23.9,12.8,30.6,14.6c3.3,0.9,12.3,7.5,21.2,14.2c9.2,6.9,18.5,13.7,21.6,14.4c4.9,1,32.1-5.7,45.1-9.1
+	l35.6-12.8l34.5-3l6.1-10.9l53.5-35.8l11.7-2.4c33,0.2,101,0.5,108.6,0c5.1-0.3,8.1,2.9,10.9,5.9c2.4,2.6,4.7,5,8,5
+	c2.7,0,6.3-0.5,10.5-1.2"
+  />
+</svg>

src/components/Wallet/WalletFetchBalancesAndAccounts.tsx

@@ -29,7 +29,7 @@ function FetchLoading() {
 function Content() {
   const address = useStore((s) => s.address)
   const [searchParams] = useSearchParams()
-
+  const isV1 = useStore((s) => s.isV1)
   const { address: urlAddress } = useParams()
   const urlAccountId = useAccountId()
   const navigate = useNavigate()
@@ -62,7 +62,7 @@ function Content() {
     ) {
       const currentAccountIsHLS = urlAccountId && !accountIds.includes(urlAccountId)
       const currentAccount = currentAccountIsHLS || !urlAccountId ? accountIds[0] : urlAccountId
-      navigate(getRoute(page, searchParams, address, currentAccount))
+      navigate(getRoute(page, searchParams, address, isV1 ? undefined : currentAccount))
       useStore.setState({ balances: walletBalances, focusComponent: null })
     }
   }, [
@@ -79,7 +79,7 @@ function Content() {
 
   if (isLoadingAccounts || isLoadingBalances) return <FetchLoading />
   if (BN(baseBalance).isLessThan(defaultFee.amount[0].amount)) return <WalletBridges />
-  if (accountIds && accountIds.length === 0) return <AccountCreateFirst />
+  if (accountIds && accountIds.length === 0 && !isV1) return <AccountCreateFirst />
   return null
 }
 

src/components/common/Background.tsx

@@ -27,7 +27,7 @@ export default function Background() {
         return ['bg-orb-primary-hls', 'bg-orb-secondary-hls', 'bg-orb-tertiary-hls', 'bg-body-hls']
       }
       if (isV1) {
-        return ['bg-orb-primary-v1', 'bg-orb-secondary-v1', 'bg-orb-tertiary-v1', 'bg-body-v1']
+        return ['bg-transparent', 'bg-transparent', 'bg-transparent', 'bg-body bg-v1 blur-[2px]']
       }
 
       return ['bg-orb-primary', 'bg-orb-secondary', 'bg-orb-tertiary', 'bg-body']
@@ -38,7 +38,7 @@ export default function Background() {
       className={classNames(
         'fixed inset-0',
         'w-full h-full',
-        'overflow-hidden pointer-events-none background ',
+        'overflow-hidden pointer-events-none background',
         bodyClassName,
         !reduceMotion && 'transition-bg duration-1000 delay-300',
       )}

src/components/common/Button/ActionButton.tsx

@@ -13,6 +13,7 @@ export default function ActionButton(props: ButtonProps) {
   const { className, color, variant, size } = props
   const defaultProps = { className, color, variant, size }
   const address = useStore((s) => s.address)
+  const isV1 = useStore((s) => s.isV1)
 
   const { data: accountIds } = useAccountIds(address || '')
   const selectedAccountId = useAccountId()
@@ -34,7 +35,7 @@ export default function ActionButton(props: ButtonProps) {
     )
   }
 
-  if (!selectedAccountId) {
+  if (!selectedAccountId && !isV1) {
     return (
       <Button
         text='Select Account'

src/components/common/Footer.tsx

@@ -1,10 +1,12 @@
 import { TextLink } from 'components/common/TextLink'
 import { DocURL } from 'types/enums/docURL'
 
+import useStore from 'store'
 import packageInfo from '../../../package.json'
 
 export default function Footer() {
-  const version = `v${packageInfo.version}`
+  const isV1 = useStore((s) => s.isV1)
+  const version = isV1 ? `v${packageInfo.v1version}` : `v${packageInfo.version}`
   const flatVersion = packageInfo.version.split('.').join('')
   return (
     <footer className='flex items-center justify-center w-full h-6 -mt-6'>

src/components/common/MarketDetails.tsx

@@ -118,7 +118,7 @@ export default function MarketDetails({ row, type }: Props) {
             <TitleAndSubCell
               key={index}
               className='text-center'
-              containerClassName='m-5 ml-10 mr-10 space-y-1'
+              containerClassName='m-5 mx-auto space-y-1'
               title={
                 <FormattedNumber
                   className='text-xs text-center'

src/components/common/Table/Row.tsx

@@ -66,7 +66,7 @@ export default function Row<T>(props: Props<T>) {
                 spacingClassName ?? 'px-3 py-4',
                 type && type !== 'strategies' && isSymbolOrName && 'border-l',
                 type && type !== 'strategies' && getBorderColor(type, cell.row.original as any),
-                cell.column.columnDef.meta?.className ?? 'w-min',
+                cell.column.columnDef.meta?.className,
               )}
             >
               {flexRender(cell.column.columnDef.cell, cell.getContext())}

src/components/common/Table/index.tsx

@@ -76,7 +76,6 @@ export default function Table<T>(props: Props<T>) {
                       props.spacingClassName ?? 'px-4 py-3',
                       header.column.getCanSort() && 'hover:cursor-pointer',
                       header.id === 'symbol' || header.id === 'name' ? 'text-left' : 'text-right',
-                      'w-min',
                       header.column.columnDef.meta?.className,
                     )}
                   >

src/components/earn/lend/Table/Columns/Apy.tsx

@@ -1,7 +1,7 @@
 import AssetRate from 'components/common/assets/AssetRate'
 import Loading from 'components/common/Loading'
 
-export const APY_META = { accessorKey: 'apy.deposit', header: 'APY', meta: { className: 'w-40' } }
+export const APY_META = { accessorKey: 'apy.deposit', header: 'APY' }
 
 interface Props {
   apy: number

src/constants/pageMetadata.ts

@@ -47,6 +47,11 @@ const PAGE_METADATA = {
       'Stake MARS token to ascend to the Martian Council and help govern key changes to the protocol.',
     keywords: 'martian council, mars governance, cosmos governance, mars voting, mars staking',
   },
+  v1: {
+    title: 'Mars Protocol V1',
+    description: "Lend, borrow and earn on the galaxy's most powerful credit protocol.",
+    keywords: 'martian council, mars governance, cosmos governance, mars voting, mars staking',
+  },
 }
 
 export default PAGE_METADATA

src/pages/V1Page.tsx

@@ -12,8 +12,10 @@ export default function V1Page() {
       <MigrationBanner />
       <V1Intro />
       {address && <Summary accountId={address} v1 />}
+      <div className='grid w-full grid-cols-1 gap-6 lg:grid-cols-2'>
         <Deposits />
         <Borrowings />
       </div>
+    </div>
   )
 }

src/pages/_layout.tsx

@@ -26,6 +26,8 @@ interface Props {
 }
 
 function PageContainer(props: Props) {
+  const isV1 = useStore((s) => s.isV1)
+
   if (isMobile) return props.children
 
   if (!props.focusComponent)
@@ -33,7 +35,8 @@ function PageContainer(props: Props) {
       <div
         className={classNames(
           'mx-auto flex items-start w-full',
-          !props.fullWidth && 'max-w-content',
+          !props.fullWidth && !isV1 && 'max-w-content',
+          isV1 && 'max-w-v1',
         )}
       >
         {props.children}

tailwind.config.js

@@ -102,7 +102,6 @@ module.exports = {
         axlusdc: '#478edc',
         body: '#0D0012',
         'body-hls': '#090000',
-        'body-v1': '#10000a',
         'body-dark': '#141621',
         chart: '#220e1d',
         error: '#F04438',
@@ -124,13 +123,10 @@ module.exports = {
         osmo: '#9f1ab9',
         'orb-primary': '#b12f25',
         'orb-primary-hls': '#FF645F',
-        'orb-primary-v1': '#612e4d',
         'orb-secondary': '#530781',
         'orb-secondary-hls': '#a03b45',
-        'orb-secondary-v1': '#692f55',
         'orb-tertiary': '#ff00c7',
         'orb-tertiary-hls': '#FB9562',
-        'orb-tertiary-v1': '#993878',
         profit: '#4CA30D',
         primary: '#FF625E',
         secondary: '#FB9562',
@@ -244,6 +240,7 @@ module.exports = {
       },
       maxWidth: {
         content: '1024px',
+        v1: '1248px',
         modal: '895px',
         'modal-md': '556px',
         'modal-sm': '526px',
@@ -263,7 +260,7 @@ module.exports = {
       screens: {
         sm: '480px',
         md: '720px',
-        lg: '1024px',
+        lg: '1280px',
         xl: '1280px',
         '2xl': '1920px',
       },
@@ -508,6 +505,12 @@ module.exports = {
           textTransform: 'uppercase',
           letterSpacing: '9px',
         },
+        '.bg-v1': {
+          backgroundImage: 'url(/images/bg-v1.svg)',
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: '100% auto',
+          backgroundPosition: 'top',
+        },
       })
     }),
     plugin(({ matchUtilities, theme }) => {