Merge pull request #286 from invariant-labs/staging

Update Prod

Author: p6te

src/components/Header/Header.stories.tsx

@@ -4,16 +4,20 @@ import Header from './Header'
 import { MemoryRouter } from 'react-router-dom'
 import { Network } from '@invariant-labs/a0-sdk'
 import { Chain } from '@store/consts/types'
+import { Provider } from 'react-redux'
+import { store } from '@store/index'
 
 const meta = {
   title: 'Layout/Header',
   component: Header,
   args: {},
   decorators: [
     Story => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
+      <Provider store={store}>
+        <MemoryRouter>
+          <Story />
+        </MemoryRouter>
+      </Provider>
     )
   ]
 } satisfies Meta<typeof Header>

src/components/Header/HeaderButton/ChangeWalletButton.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import ChangeWalletButton from './ChangeWalletButton'
+import { fn } from '@storybook/test'
+
+const meta = {
+  title: 'Buttons/ChangeWalletButton',
+  component: ChangeWalletButton
+} satisfies Meta<typeof ChangeWalletButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    name: 'Change Wallet',
+    onConnect: fn(),
+    connected: false,
+    onDisconnect: fn()
+  }
+}

src/components/Header/HeaderButton/HeaderButton.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import SelectChainButton from './SelectChainButton'
+import { fn } from '@storybook/test'
+import { Chain } from '@store/consts/types'
+
+const meta = {
+  title: 'Buttons/SelectChainButton',
+  component: SelectChainButton
+} satisfies Meta<typeof SelectChainButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    activeChain: {
+      name: Chain.AlephZero,
+      address: 'https://azero.invariant.app/swap'
+    },
+    chains: [
+      { name: Chain.AlephZero, address: 'https://azero.invariant.app/swap' },
+      { name: Chain.Eclipse, address: 'https://eclipse.invariant.app/swap' }
+    ],
+    onSelect: fn(),
+    disabled: false
+  }
+}

src/components/Header/HeaderButton/SelectChainButton.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import SelectNetworkButton from './SelectNetworkButton'
+import { Network } from '@invariant-labs/a0-sdk'
+import { RPC } from '@store/consts/static'
+import { action } from '@storybook/addon-actions'
+
+const meta = {
+  title: 'Buttons/SelectNetworkButton',
+  component: SelectNetworkButton
+} satisfies Meta<typeof SelectNetworkButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    name: Network.Testnet,
+    networks: [{ networkType: Network.Testnet, rpc: RPC.TEST }],
+    onSelect: (networkType, rpc) => action('chosen: ' + networkType + ' ' + rpc)()
+  }
+}

src/components/Header/HeaderButton/SelectNetworkButton.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import SelectRPCButton from './SelectRPCButton'
+import { Network } from '@invariant-labs/a0-sdk'
+import { RPC } from '@store/consts/static'
+import { action } from '@storybook/addon-actions'
+
+const meta = {
+  title: 'Buttons/SelectRPCButton',
+  component: SelectRPCButton
+} satisfies Meta<typeof SelectRPCButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    rpc: RPC.TEST,
+    networks: [
+      {
+        networkType: Network.Testnet,
+        rpc: RPC.TEST,
+        rpcName: 'Testnet'
+      }
+    ],
+    onSelect: (networkType, rpc) => action('chosen: ' + networkType + ' ' + rpc)()
+  }
+}

src/components/Header/HeaderButton/SelectRPCButton.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
-import RangeInput from './RangeInput'
+import RangeInput, { IRangeInput } from './RangeInput' // Assuming RangeInputProps is exported
 import { useState } from 'react'
 
 const meta = {
@@ -12,6 +12,37 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const RangeInputWrapper: React.FC<IRangeInput> = args => {
+  const [val, setVal] = useState('100')
+
+  return (
+    <div
+      style={{
+        backgroundColor: '#202946',
+        width: 400,
+        paddingBlock: 20
+      }}>
+      <RangeInput
+        {...args}
+        currentValue={val}
+        decreaseValue={() => {
+          setVal((+val - 0.01).toFixed(2).toString())
+        }}
+        increaseValue={() => {
+          setVal((+val + 0.01).toFixed(2).toString())
+        }}
+        setValue={value => {
+          setVal(value)
+        }}
+        onBlur={() => {
+          setVal((+val).toFixed(2).toString())
+        }}
+        style={{ width: 200, maxHeight: 300, margin: 'auto' }}
+      />
+    </div>
+  )
+}
+
 export const Primary: Story = {
   args: {
     currentValue: '10',
@@ -25,33 +56,5 @@ export const Primary: Story = {
     tokenFromSymbol: 'USDC',
     tokenToSymbol: 'USDT'
   },
-  render: args => {
-    const [val, setVal] = useState('100')
-    return (
-      <div
-        style={{
-          backgroundColor: '#202946',
-          width: 400,
-          paddingBlock: 20
-        }}>
-        <RangeInput
-          {...args}
-          currentValue={val}
-          decreaseValue={() => {
-            setVal((+val - 0.01).toFixed(2).toString())
-          }}
-          increaseValue={() => {
-            setVal((+val + 0.01).toFixed(2).toString())
-          }}
-          setValue={value => {
-            setVal(value)
-          }}
-          onBlur={() => {
-            setVal((+val).toFixed(2).toString())
-          }}
-          style={{ width: 200, maxHeight: 300, margin: 'auto' }}
-        />
-      </div>
-    )
-  }
+  render: args => <RangeInputWrapper {...args} />
 }

src/components/Inputs/RangeInput/RangeInput.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import useStyles from './style'
 import { Grid, Popover, Typography } from '@mui/material'
+import classNames from 'classnames'
 
 export interface IRoutesModal {
   routes: string[]
@@ -47,30 +48,34 @@ export const RoutesModal: React.FC<IRoutesModal> = ({
         horizontal: 'center'
       }}>
       <Grid className={classes.root} container alignContent='space-around' direction='column'>
+        <Typography className={classes.subtitle}>Navigation</Typography>
         {routes.map(route => (
           <Grid
             item
             key={`routes-${route}`}
-            className={classes.listItem}
+            className={classNames(
+              classes.listItem,
+              current === route ||
+                (typeof current !== 'undefined' &&
+                  !!otherRoutesToHighlight[route] &&
+                  otherRoutesToHighlight[route].some(pathRegex => pathRegex.test(current)))
+                ? classes.current
+                : null
+            )}
             onClick={() => {
               onSelect(route)
               handleClose()
             }}>
             <Link to={`/${route}`} className={classes.link}>
-              <Typography
-                className={
-                  current === route ||
-                  (typeof current !== 'undefined' &&
-                    !!otherRoutesToHighlight[route] &&
-                    otherRoutesToHighlight[route].some(pathRegex => pathRegex.test(current)))
-                    ? classes.current
-                    : classes.name
-                }>
-                {route}
-              </Typography>
+              <Typography className={classes.name}>{route}</Typography>
             </Link>
           </Grid>
         ))}
+        {(typeof onFaucet !== 'undefined' ||
+          typeof onRPC !== 'undefined' ||
+          typeof onChainSelect !== 'undefined') && (
+          <Typography className={classes.subtitle}>Wallet</Typography>
+        )}
         {typeof onFaucet !== 'undefined' ? (
           <Grid
             item