Merge remote-tracking branch 'origin/master' into feat/upgrade-button

package.json

@@ -14,7 +14,7 @@
     "@popperjs/core": "^2.11.5",
     "@rainbow-me/rainbowkit": "1.0.11",
     "@react-spring/web": "^9.7.1",
-    "@reserve-protocol/token-zapper": "2.5.3",
+    "@reserve-protocol/token-zapper": "2.5.5",
     "@uiw/react-md-editor": "^3.20.5",
     "@uniswap/permit2-sdk": "^1.2.0",
     "@viem/anvil": "^0.0.6",
@@ -42,7 +42,7 @@
     "recharts": "^2.1.6",
     "swr": "^1.2.2",
     "theme-ui": "^0.15.4",
-    "viem": "1.15.0",
+    "viem": "1.15.4",
     "wagmi": "1.4.3"
   },
   "scripts": {

scripts/data/base-collaterals.json

@@ -8,7 +8,8 @@
     "USDbC": "0x6490D66B17A1E9a460Ab54131165C8F921aCcDeB",
     "cbETH": "0x5fE248625aC2AB0e17A115fef288f17AF1952402",
     "cUSDbCv3": "0xa372EC846131FBf9AE8b589efa3D041D9a94dF41",
-    "aBasUSDbC": "0x1DdB7dfdC5D26FE1f2aD02d9972f12481346Ae9b"
+    "aBasUSDbC": "0x1DdB7dfdC5D26FE1f2aD02d9972f12481346Ae9b",
+    "sgUSDC": "0x15395aCCbF8c6b28671fe41624D599624709a2D6"
   },
   "erc20s": {
     "COMP": "0x9e1028F5F1D5eDE59748FFceE5532509976840E0",
@@ -17,6 +18,7 @@
     "USDbC": "0xd9aAEc86B65D86f6A7B5B1b0c42FFA531710b6CA",
     "cbETH": "0x2ae3f1ec7f1f5012cfeab0185bfc7aa3cf0dec22",
     "cUSDbCv3": "0xbC0033679AEf41Fb9FeB553Fdf55a8Bb2fC5B29e",
-    "aBasUSDbC": "0x308447562442Cc43978f8274fA722C9C14BafF8b"
+    "aBasUSDbC": "0x308447562442Cc43978f8274fA722C9C14BafF8b",
+    "sgUSDC": "0x073F98792ef4c00bB5f11B1F64f13cB25Cde0d8D"
   }
 }

scripts/parseCollaterals.js

@@ -54,6 +54,10 @@ const protocols = {
     key: 'SDR',
     underlying: 'dai',
   },
+  STARGATE: {
+    key: 'STARGATE',
+    underlying: 'underlying',
+  },
 }
 
 const wrappedTokenMap = {
@@ -88,6 +92,7 @@ const wrappedTokenMap = {
   cvxMIM3Pool: protocols.CONVEX,
   sDAI: protocols.SDR,
   aBasUSDbC: protocols.AAVEv3,
+  sgUSDC: protocols.STARGATE,
 }
 
 const chainsMap = [

src/components/chain-selector/ChainSelector.tsx

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled'
+import Button from 'components/button'
 import Base from 'components/icons/logos/Base'
 import Ethereum from 'components/icons/logos/Ethereum'
 import Popup from 'components/popup'
@@ -8,21 +8,11 @@ import { Check, ChevronDown, ChevronUp } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
 import { chainIdAtom } from 'state/atoms'
 import { publicClient, wagmiConfig } from 'state/chain'
-import { transition } from 'theme'
 import { Box, BoxProps, Flex, Text } from 'theme-ui'
 import { ChainId } from 'utils/chains'
+import { ROUTES } from 'utils/constants'
 import { useSwitchNetwork } from 'wagmi'
 
-const ActionItem = styled(Flex)`
-  transition: ${transition};
-  padding: 16px;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #6d3210;
-  }
-`
-
 export const chainIcons = {
   [ChainId.Mainnet]: Ethereum,
   [ChainId.Base]: Base,
@@ -40,32 +30,51 @@ if (import.meta.env.DEV) {
 
 const ChainList = ({ onSelect }: { onSelect(chain: number): void }) => {
   const selected = useAtomValue(chainIdAtom)
+  const navigate = useNavigate()
 
   return (
     <Box
       sx={{
         maxHeight: 320,
         overflow: 'auto',
-        backgroundColor: 'black',
+        backgroundColor: 'background',
         borderRadius: '13px',
-        color: 'white',
       }}
     >
       {CHAIN_LIST.map((chain) => {
         const Icon = chainIcons[chain.id]
 
         return (
-          <ActionItem onClick={() => onSelect(chain.id)} key={chain.id}>
-            <Box variant="layout.verticalAlign">
+          <Box
+            variant="layout.verticalAlign"
+            sx={{ cursor: 'pointer', position: 'relative' }}
+            onClick={() => onSelect(chain.id)}
+            key={chain.id}
+          >
+            <Box
+              sx={{
+                backgroundColor:
+                  selected === chain.id ? 'primary' : 'background',
+                width: '3px',
+                height: '20px',
+              }}
+            />
+            <Box variant="layout.verticalAlign" p={3}>
               <Icon fontSize={20} />
               <Text ml={3}>{chain.label}</Text>
-              {selected === chain.id && (
-                <Check size={18} style={{ marginLeft: 10 }} color="#11BB8D" />
-              )}
             </Box>
-          </ActionItem>
+          </Box>
         )
       })}
+      <Button
+        m={3}
+        variant="muted"
+        mt={0}
+        onClick={() => navigate(ROUTES.BRIDGE)}
+        small
+      >
+        Bridge assets
+      </Button>
     </Box>
   )
 }
@@ -97,6 +106,9 @@ const ChainSelector = (props: BoxProps) => {
       show={isVisible}
       onDismiss={() => setVisible(false)}
       content={<ChainList onSelect={handleSelect} />}
+      containerProps={{
+        sx: { border: '2px solid', borderColor: 'primary' },
+      }}
     >
       <Flex
         {...props}

src/components/expandable-content/index.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react'
+import { Minus, Plus } from 'react-feather'
+import { Box, BoxProps, Text } from 'theme-ui'
+
+export interface ExpandableContentProps extends BoxProps {
+  title: string
+  content: React.ReactNode
+  expanded?: boolean
+}
+
+const ExpandableContent = ({
+  title,
+  content,
+  expanded = false,
+  ...props
+}: ExpandableContentProps) => {
+  const [isOpen, setOpen] = useState(expanded)
+
+  return (
+    <Box {...props}>
+      <Box
+        py={2}
+        variant="layout.verticalAlign"
+        sx={{ cursor: 'pointer' }}
+        onClick={() => setOpen(!isOpen)}
+      >
+        <Text variant="strong" mr="auto">
+          {title}
+        </Text>
+        {isOpen ? <Minus size={18} /> : <Plus size={18} />}
+      </Box>
+      {isOpen && (
+        <Box py={2} sx={{ color: 'secondaryText' }}>
+          {content}
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default ExpandableContent

src/components/layout/header/AppHeader.tsx

@@ -3,14 +3,13 @@ import { Trans } from '@lingui/macro'
 import Account from 'components/account'
 import ChainSelector from 'components/chain-selector/ChainSelector'
 import ThemeColorMode from 'components/dark-mode-toggle/ThemeColorMode'
+import BridgeIcon from 'components/icons/BridgeIcon'
 import ExternalArrowIcon from 'components/icons/ExternalArrowIcon'
-import useIsDeployer from 'hooks/useIsDeployer'
+import { useLocation } from 'react-router-dom'
 import { Box, Flex, Text } from 'theme-ui'
+import { ROUTES } from 'utils/constants'
 import Brand from './Brand'
 import TokenToggle from './TokenToggle'
-import { useLocation } from 'react-router-dom'
-import { ROUTES } from 'utils/constants'
-import BridgeIcon from 'components/icons/BridgeIcon'
 
 const Container = styled(Flex)`
   align-items: center;
@@ -50,7 +49,7 @@ const HeaderAction = () => {
       <Box variant="layout.verticalAlign">
         <BridgeIcon />
         <Text ml={3} sx={{ fontSize: 2 }} variant="subtitle">
-          <Trans>L2 Bridge</Trans>
+          L2 Bridge
         </Text>
       </Box>
     )
@@ -95,7 +94,7 @@ const AppHeader = () => (
         <LanguageSelector />
       </Box> */}
     <Divider />
-    {/* <ChainSelector mr={3} /> */}
+    <ChainSelector mr={3} />
     <Account />
   </Container>
 )

src/components/popover/index.tsx

@@ -5,6 +5,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { usePopper } from 'react-popper'
 import useInterval from '../../hooks/useInterval'
 import { createPortal } from 'react-dom'
+import { StringMap } from 'types'
 
 const PopoverContainer = styled.div<{ show: boolean }>`
   z-index: 100010;
@@ -71,6 +72,7 @@ export interface PopoverProps {
   placement?: Placement
   arrow?: boolean
   onDismiss?: () => void
+  containerProps?: StringMap
 }
 
 export default function Popover({

src/components/popup/index.tsx

@@ -1,17 +1,27 @@
 import { Box } from 'theme-ui'
-import styled from '@emotion/styled'
 import Popover, { PopoverProps } from 'components/popover'
 
-const Container = styled(Box)`
-  background-color: ${({ theme }: { theme: any }) =>
-    theme.colors.contentBackground};
-  border: 1px solid var(--theme-ui-colors-invertedText);
-  border-radius: 14px;
-  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2);
-`
-
-const Popup = ({ content, ...props }: PopoverProps) => {
-  return <Popover {...props} content={<Container>{content}</Container>} />
+const Popup = ({ content, containerProps = {}, ...props }: PopoverProps) => {
+  return (
+    <Popover
+      {...props}
+      content={
+        <Box
+          {...containerProps}
+          sx={{
+            backgroundCcolor: 'contentBackground',
+            border: '1px solid',
+            borderColor: 'invertedText',
+            borderRadius: '14px',
+            boxShadow: '0px 10px 25px rgba(0, 0, 0, 0.2)',
+            ...(containerProps.sx || {}),
+          }}
+        >
+          {content}
+        </Box>
+      }
+    />
+  )
 }
 
 export default Popup

src/components/rtoken-selector/TokenList.tsx

@@ -7,6 +7,8 @@ import { transition } from 'theme'
 import { Box, Divider, Flex, Text } from 'theme-ui'
 import BackHomeIcon from '../icons/BackHomeIcon'
 import availableTokensAtom from './atoms'
+import { chainIdAtom } from 'state/atoms'
+import { useSwitchNetwork } from 'wagmi'
 
 const ActionItem = styled(Flex)`
   transition: ${transition};
@@ -29,6 +31,8 @@ const TokenList = memo(
     onSelect(address: string): void
     onHome(): void
   }) => {
+    const { switchNetwork } = useSwitchNetwork()
+    const currentChainId = useAtomValue(chainIdAtom)
     const tokens = useAtomValue(availableTokensAtom)
 
     return (
@@ -58,12 +62,19 @@ const TokenList = memo(
             my={0}
           />
         )}
-        {Object.values(tokens).map(({ address, logo, symbol }) => (
-          <ActionItem key={address} onClick={() => onSelect(address)}>
+        {Object.values(tokens).map(({ address, logo, symbol, chainId }) => (
+          <ActionItem key={address} onClick={async () => {
+
+            if (currentChainId !== chainId && switchNetwork) {
+              switchNetwork(chainId!)
+            }
+            onSelect(address)
+          }}>
             <TokenItem
               sx={{ color: 'invertedText' }}
               symbol={symbol}
               logo={logo}
+              chainId={chainId}
             />
           </ActionItem>
         ))}