Redesign (#385)

* Add some css variables

* Update config colors (#386)

* Add typography utilities

* Add gradients to tailwind theme

* Add new Button component (#387)

* Add new switch component (#389)

* Add switch

* Put pseudo classes up front so addon is working correctly

* Improve stories

* Auto accept changes for redesign feature branch

* Fix typo

* Do not display hover state when disabled

* Change storybook tsconfig alias (#392)

* Use different alias for storybook config

* Use better alias

* Add IconBox component (#390)

* Add stories ui helper

* Add IconBox component

* Simplify button stories

* Simplify component api

* Move story helper component

* Add .storybook folder to tailwind config content prop

* Add select component (#388)

* Add TopbarNavigation (#391)

* add topbar page icons

* add pages colors

* update SavingsAPYBadge

* add Topbar Button

* add TopbarNavigation

* add TopbarNavigation stories

* adjust DropdownMenu styles

* adjust icons whitespaces

* move into 'new' folder

* add opened dropdown stories

* Add new alert component (#394)

* Add alert component

* Prevent story from cutting out in chromatic

* Add New Tooltip (#393)

* add Tooltip

* add global min size decorator

* add rounded arrow

* adjust global decorator styles

* Add AssetInput component (#395)

* Refactor tailwind config colors (#396)

* Move border and background specific colors config to its own properties

* Fix switch colors regression

* Adjust classes after rebasing

* Update switch style (#397)

* Add new health factor indicator (#398)

* Add new ltv slider component (#401)

* Add transaction overview building blocks (#402)

Co-authored-by: Oskar <[email protected]>

* Remove postfix and prefix icons from button props (#400)

* Remove postfix and prefix icons from button props

* Add icon button stories

* Add margin to icon when only child

* Add IconButton

---------

Co-authored-by: Emil Małańczak <[email protected]>

* Redesign actions row and grid (#403)

* Extract actions grid component

* Rewrite action rows to use updated row components

* Improve action row components simplicity of use

* Improve styles and handle mobile

* Fix easy borrow page tests

* Add index and icon basic transitions

* PR comments

* Explicitly set variant and size for button

* Improve grid gap handling

* Update colors after rebasing

* Add remove button to input (#406)

* Add new panel component (#408)

* Restyle upgrade savings dai banner (#409)

* Update upgrade savings banner

* Add router decorator

* add TopbarWallet (#404)

* add useClipboard utility

* add CopyButton

* update primary button gradient

* update wallet icons

* add TopbarWalletDropdown

* add TopbarWallet

* remove unused code

* rename ConnectedButton

* update wallet icons

* add ButtonIcon className support

* change IconButton

* add DropdownMenuItemIcon

* adjust TopbarWallet implementation

* remove exit sandbox from dropdown

* remove read-only mode leftover

* remove ephemeral info from wallet dropdown

* add TopbarMenu (#410)

* add DropdownMenuContent variants

* add TopbarMenu

* add TopbarMenu stories

* pass build info as prop

* Update savings token card styles (#412)

* Update styles for savings token panels

* Add test id to savings token panel

* Support mobile view

* Redesign transaction overview (#411)

* Adjust old nav components (#413)

* add TopbarNetwork

* update chain icons

* fix topbar navigation dropdown chevron

* add brand logo icons

* adjust network button icon

* update old navbar components

* adjust topbar network component

* fix chromatic dropdown issues

* adjust storybook global styles

* assemble Topbar (#415)

* assemble topbar

* update airdrop button icon

* hide rewards and airdrop content on smaller screen

* Add savings opportunity connected and guest modes (#416)

* Add savings opportunity connected and guest modes

* Add savings opportunity panel test id

* Add test id to savings rate

* Display chain related tokens at opportunity panel

* Update stories

* Handle no cash case nicer

* Use new inputs in dialogs (#414)

* Update actions panel styles (#417)

* Update dialog switch panels (#418)

* Update dialog switch panels

* Use same bg for both switch panels

* Adjust dialog container style (#420)

* Adjust dialog styles wip

* Update dialog styles

* Use new alert component

* Add testids to alert and simplify

* Add fullscreen layout to actions stories

* Add testid to dialog close button

* Improve settings dialog styles

* Display settings drawer in dialog

* Fix action view stories

* Fix tests

* Add black bg to image so it doesn't flash significantly while loading

* update AppLayout (#419)

* update AppLayout

* update NotSupportedWarning

* add layout background

* disable migration banner feature flag

* change wrong topbar backdrop

* shrink layout max width

* update all pages layouts

* make topbar accessible on not supported view

* Update savings welcome dialog (#422)

* Add new welcome dialog

* Improve bg handling

* Add easy borrow form (#421)

* Replace buttons across the app (#427)

* Delete old button component

* Replace buttons across the app

* Update address input styles (#424)

* Update icon pack

* Update address input styles

* Use link button instead of link decorator

* Add router decorator to savings withdraw story

* Update link component (#425)

* Add glow to tooltip so its visible when on dark bg

* Update link style

* Exterminate sloppiness

* Update easy borrow side panel (#426)

* Redesign and refactor success views (#429)

* Redesign and refactor success views

* Adjust styles a bit

* Adjust tests

* Replace panels with new component (#430)

* Replace panels with new component

* Handle stablecoins in wallet case

* Improve market details typography

* Remove spacing from upgrade banner

* Use headers in places where panel titles were used

* Use section component for panel wrapping element

* Add Mobile Topbar UI (#431)

* add MenuItem

* adjust Dialog bottom variant

* update SelectNetworkDialog

* update SandboxDialog

* add mobile TopbarWallet

* add mobile TopbarMenu

* add mobile TopbarNavigation

* fix savings apy badge

* adjust layout padding

* fix stories

* fix stories

* small adjustments

* extract activePathGroup into hook

* cleanup navigation logic

* Add my wallet chart (#432)

* add new tabs (#434)

* add new tabs

* fix single chart panel

* remove compact layout (#435)

* update page meta images (#437)

* New connect wallet cta (#433)

* Add new wallet connect cta panel

* Fix market details tests

* Replace farms icon (#439)

* My portfolio layout (#436)

* add redesign top banner (#438)

* add redesign top banner

* fix naming

* fix close button active styles

* Adjust banner style

---------

Co-authored-by: oskarvu <[email protected]>

* Change markets summary icons (#442)

* Update style for market summary tiles

* Add backdrop blur to make text more readable

* Final ui updates (#440)

* update FarmsView

* update favicon

* adjust table styles

* update farms views

* lint fix

* adjust farms view headers

* update farms skeletons

* update skeletons

* Improve skeletons and other things

* Fix chart layout scaling bug

* Use proper favicon

---------

Co-authored-by: oskarvu <[email protected]>

* Add base network configuration (#441)

* Add staked in farm tx overview row (#443)

* Route min height

* Bring back ltv slider to mobile view

---------

Co-authored-by: Emil Małańczak <[email protected]>
Co-authored-by: oskarvu <[email protected]>
Co-authored-by: Oskar <[email protected]>
Co-authored-by: Emil Małańczak <[email protected]>

.github/workflows/ci.yml

@@ -93,7 +93,7 @@ jobs:
           workingDir: packages/app
           buildScriptName: storybook:build
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          autoAcceptChanges: main
+          autoAcceptChanges: redesign-october-2024
           onlyChanged: true
           externals: |
             public/**

packages/app/.env.development

@@ -8,6 +8,7 @@ VITE_FEATURE_SAVINGS_WELCOME_DIALOG=1
 VITE_FEATURE_TOP_BANNER=1
 VITE_FEATURE_RPC_INJECTION_VIA_URL=1
 VITE_FEATURE_CLEAR_STALE_SANDBOX=0
+VITE_FEATURE_BASE_SUPPORT=1
 
 VITE_DEV_STAKE_SAVINGS_TOKENS=1
 

packages/app/.env.example

@@ -17,6 +17,7 @@ VITE_FEATURE_SAVINGS_WELCOME_DIALOG=1 # show welcome dialog when user enters new
 VITE_FEATURE_TOP_BANNER=1 # enable top banner with information about beta version
 VITE_FEATURE_RPC_INJECTION_VIA_URL=0 # enable injecting RPC url and chain id via URL parameter
 VITE_FEATURE_CLEAR_STALE_SANDBOX=0 # clear sandbox on page reload if it's older than X hours
+VITE_FEATURE_BASE_SUPPORT=0 # support base chain
 
 VITE_DEV_DEBUG=0 # displays additional time releated debug information (blockchain time vs browser time vs pots rho)
 VITE_DEV_STAKE_SAVINGS_TOKENS=0

packages/app/.env.playwright

@@ -1,5 +1,7 @@
 VITE_PLAYWRIGHT=1
 
+VITE_FEATURE_BASE_SUPPORT=1
+
 VITE_DEV_STAKE_SAVINGS_TOKENS=1
 
 VITE_WALLET_CONNECT_ID='bd1843f2419f5d4c758366c55f9a556c'

packages/app/.env.production

@@ -8,6 +8,7 @@ VITE_FEATURE_SAVINGS_WELCOME_DIALOG=1
 VITE_FEATURE_TOP_BANNER=1
 VITE_FEATURE_RPC_INJECTION_VIA_URL=0
 VITE_FEATURE_CLEAR_STALE_SANDBOX=1
+VITE_FEATURE_BASE_SUPPORT=0
 
 VITE_DEV_STAKE_SAVINGS_TOKENS=1
 

packages/app/.env.staging

@@ -8,6 +8,7 @@ VITE_FEATURE_SAVINGS_WELCOME_DIALOG=1
 VITE_FEATURE_TOP_BANNER=1
 VITE_FEATURE_RPC_INJECTION_VIA_URL=1
 VITE_FEATURE_CLEAR_STALE_SANDBOX=0
+VITE_FEATURE_BASE_SUPPORT=1
 
 VITE_DEV_STAKE_SAVINGS_TOKENS=1
 

packages/app/.storybook/ErrorBoundary.tsx

@@ -1,9 +1,8 @@
+import { Button } from '@/ui/atoms/new/button/Button'
 /* eslint-disable react-refresh/only-export-components */
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import React from 'react'
-
 import { NotConnectedError } from '../src/domain/errors/not-connected'
-import { Button } from '../src/ui/atoms/button/Button'
 
 interface ErrorBoundaryProps {
   children: React.ReactNode

packages/app/.storybook/components/StoryGrid.tsx

@@ -0,0 +1,15 @@
+import { cn } from '@/ui/utils/style'
+
+export function StoryGrid({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={cn('grid w-fit items-center justify-items-center gap-x-12 gap-y-4 bg-white p-6', className)}>
+      {children}
+    </div>
+  )
+}
+
+function GridLabel({ children }: { children: React.ReactNode }) {
+  return <div className="typography-label-6 text-reskin-neutral-500">{children}</div>
+}
+
+StoryGrid.Label = GridLabel

packages/app/.storybook/decorators.tsx

@@ -27,8 +27,10 @@ export function WithTooltipProvider() {
 export function WithClassname(classname: string) {
   return function WithClassname(Story: StoryFn) {
     return (
-      <div className={classname}>
-        <Story />
+      <div data-sb="decorator">
+        <div className={classname}>
+          <Story />
+        </div>
       </div>
     )
   }

packages/app/.storybook/main.ts

@@ -14,6 +14,7 @@ const config: StorybookConfig = {
     '@storybook/addon-themes',
     'storybook-addon-remix-react-router',
     '@chromatic-com/storybook',
+    'storybook-addon-pseudo-states',
   ],
 
   framework: {
@@ -37,9 +38,3 @@ const config: StorybookConfig = {
     }),
 }
 export default config
-
-// This addon can cause random Chrome crashes ("Snap!" errors) but works well in production.
-// We need it to be able to force components into desired states for screenshots
-if (process.env.NODE_ENV === 'production') {
-  config.addons!.push('storybook-addon-pseudo-states')
-}

packages/app/.storybook/preview.ts

@@ -3,6 +3,7 @@ import { WithFixedDate, WithI18n, WithQueryClient } from './decorators'
 
 import '../src/css/fonts.css'
 import '../src/css/main.css'
+import './styles.css'
 import { Preview } from '@storybook/react'
 
 const preview: Preview = {

packages/app/.storybook/styles.css

@@ -0,0 +1,13 @@
+#storybook-root {
+  min-width: 375px;
+  min-height: 400px;
+}
+
+/*
+prevents reapplying same values when using WithClassname
+decorator in root of story file but doesnt apply to component itself
+*/
+#storybook-root > [data-sb="decorator"] {
+  min-width: 375px;
+  min-height: 400px;
+}

packages/app/index.html

@@ -2,17 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Spark</title>
     <meta name="description" content="Spark" />
     <meta property="og:title" content="Spark - Maker-Powered Lending Market" />
     <meta property="og:description" content="Spark" />
-    <meta property="og:image" content="/spark-meta-logo.jpg" />
-    <meta name="twitter:image" content="/spark-meta-logo.jpg" />
+    <meta property="og:image" content="/spark-meta-logo.png" />
+    <meta name="twitter:image" content="/spark-meta-logo.png" />
     <meta name="twitter:image:alt" content="spark logo" />
     <meta name="twitter:site" content="@sparkdotfi" />
     <meta property="twitter:card" content="summary_large_image" />

packages/app/package.json

@@ -71,7 +71,7 @@
     "deepmerge-ts": "^5.1.0",
     "fetch-retry": "^5.0.6",
     "jsbi": "^3.2.5",
-    "lucide-react": "^0.284.0",
+    "lucide-react": "^0.454.0",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",