feat(subbridge): add base chain placeholder (#418)

apps/app/components/BasePool/ExtraProperties.tsx

@@ -4,7 +4,7 @@ import type {BasePoolCommonFragment} from '@/lib/subsquidQuery'
 import {Box, Stack, type SxProps} from '@mui/material'
 import {toCurrency, toPercentage} from '@phala/lib'
 import Decimal from 'decimal.js'
-import {type FC, type ReactNode, useMemo} from 'react'
+import {type FC, Fragment, type ReactNode, useMemo} from 'react'
 
 const ExtraProperties: FC<{basePool: BasePoolCommonFragment; sx?: SxProps}> = ({
   basePool,
@@ -28,13 +28,13 @@ const ExtraProperties: FC<{basePool: BasePoolCommonFragment; sx?: SxProps}> = ({
       ['Commission', toPercentage(basePool.commission), 'commission'],
       stakePool != null && [
         'Workers',
-        // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>
-        <>
+        // biome-ignore lint/correctness/useJsxKeyInIterable:
+        <Fragment>
           {`${stakePool.idleWorkerCount} Idle`}
           <Box component="span" color="text.secondary">
             {` / ${stakePool.workerCount}`}
           </Box>
-        </>,
+        </Fragment>,
       ],
       vault != null && ['StakePools', basePool.account.stakePoolNftCount],
       ['Delegators', basePool.delegatorCount],

apps/app/pages/_app.tsx

@@ -23,7 +23,9 @@ Decimal.set({toExpNeg: -9e15, toExpPos: 9e15, precision: 50})
 
 const queryClient = new QueryClient({})
 
-const JotaiDevTools = dynamic(() => import('@/components/JotaiDevTools'))
+const JotaiDevTools = dynamic(() =>
+  import('@phala/lib').then((lib) => lib.JotaiDevTools),
+)
 
 const App: FC<AppProps> = (props) => {
   const {Component, pageProps, router} = props

apps/subbridge/components/BridgeBody/Action/index.tsx

@@ -1,5 +1,6 @@
-import {fromChainAtom} from '@/store/bridge'
+import {bridgeInfoAtom, fromChainAtom} from '@/store/bridge'
 import {isWalletConnectAtom} from '@/store/common'
+import {Button} from '@mui/material'
 import {useAtom} from 'jotai'
 import dynamic from 'next/dynamic'
 import {type FC, useState} from 'react'
@@ -15,10 +16,26 @@ const BridgeConfirmationDialog = dynamic(
 const Action: FC = () => {
   const [open, setOpen] = useState(false)
   const [fromChain] = useAtom(fromChainAtom)
+  const [bridgeInfo] = useAtom(bridgeInfoAtom)
   const [isWalletConnected] = useAtom(isWalletConnectAtom)
   const onConfirm = (): void => {
     setOpen(true)
   }
+  if (bridgeInfo.kind === 'placeholder') {
+    // There is only one placeholder bridge
+    return (
+      <Button
+        size="large"
+        variant="contained"
+        fullWidth
+        href="https://portalbridge.com/advanced-tools/#/transfer?sourceChain=ethereum"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Transfer on Portal Bridge
+      </Button>
+    )
+  }
 
   return (
     <>

apps/subbridge/components/BridgeBody/AmountInput.tsx

@@ -2,6 +2,7 @@ import {useBalance} from '@/hooks/useBalance'
 import {
   amountAtom,
   assetAtom,
+  bridgeInfoAtom,
   decimalsAtom,
   fromChainAtom,
 } from '@/store/bridge'
@@ -36,6 +37,7 @@ const AmountInput: FC<BoxProps & Pick<InputProps, 'endAdornment'>> = ({
   const [decimals] = useAtom(decimalsAtom)
   const [isWalletConnected] = useAtom(isWalletConnectAtom)
   const [isNetworkWrong] = useAtom(isNetworkWrongAtom)
+  const [bridgeInfo] = useAtom(bridgeInfoAtom)
 
   const showMax =
     balance != null &&
@@ -48,6 +50,7 @@ const AmountInput: FC<BoxProps & Pick<InputProps, 'endAdornment'>> = ({
   return (
     <Box {...props}>
       <TextField
+        disabled={bridgeInfo.kind === 'placeholder'}
         spellCheck={false}
         label="Amount"
         fullWidth

apps/subbridge/components/BridgeBody/DestinationAccountInput.tsx

@@ -1,4 +1,5 @@
 import {
+  bridgeInfoAtom,
   destinationAccountAtom,
   fromChainAtom,
   toChainAtom,
@@ -26,6 +27,7 @@ const useIsomorphicLayoutEffect =
 const DestinationAccountInput: FC<BoxProps> = (props) => {
   const inputRef = useRef<HTMLInputElement>()
   const [manually, setManually] = useState(false)
+  const [bridgeInfo] = useAtom(bridgeInfoAtom)
   const [fromChain] = useAtom(fromChainAtom)
   const [toChain] = useAtom(toChainAtom)
   const [evmAccount] = useAtom(evmAccountAtom)
@@ -35,7 +37,9 @@ const DestinationAccountInput: FC<BoxProps> = (props) => {
   const [polkadotAccount] = useAtom(polkadotAccountAtom)
   const [isWalletConnected] = useAtom(isWalletConnectAtom)
   const useSameAccountAvailable =
-    isWalletConnected && fromChain.kind === toChain.kind
+    bridgeInfo.kind !== 'placeholder' &&
+    isWalletConnected &&
+    fromChain.kind === toChain.kind
   const useSameAccountEnabled = useSameAccountAvailable && !manually
 
   useIsomorphicLayoutEffect(() => {
@@ -89,7 +93,10 @@ const DestinationAccountInput: FC<BoxProps> = (props) => {
     <Box {...props}>
       <TextField
         placeholder={toChain.kind === 'evm' ? '0x' : ''}
-        disabled={useSameAccountEnabled && Boolean(destinationAccount)}
+        disabled={
+          bridgeInfo.kind === 'placeholder' ||
+          (useSameAccountEnabled && Boolean(destinationAccount))
+        }
         label="Destination Account"
         fullWidth
         spellCheck={false}

apps/subbridge/config/bridge.ts

@@ -7,6 +7,7 @@ export type BridgeKind =
   | 'phalaXTransfer'
   | 'phalaSygma'
   | 'evmSygma'
+  | 'placeholder' // use as a placeholder, bridge feature is not supported
 
 type AssetsConfig = Array<{
   assetId: AssetId
@@ -48,6 +49,10 @@ export const BRIDGES: Readonly<Bridge[]> = [
           },
         ],
       },
+      {
+        id: 'base',
+        assets: [{assetId: 'pha', estimatedTime: '', kind: 'placeholder'}],
+      },
     ],
   },
   {

apps/subbridge/config/chain.ts

@@ -1,5 +1,6 @@
 import acalaIcon from '@phala/ui/icons/chain/acala.png'
 import astarIcon from '@phala/ui/icons/chain/astar.png'
+import baseIcon from '@phala/ui/icons/chain/base.png'
 import basiliskIcon from '@phala/ui/icons/chain/basilisk.png'
 import bifrostIcon from '@phala/ui/icons/chain/bifrost.png'
 import calamariIcon from '@phala/ui/icons/chain/calamari.png'
@@ -13,7 +14,12 @@ import shidenIcon from '@phala/ui/icons/chain/shiden.png'
 import turingIcon from '@phala/ui/icons/chain/turing.png'
 import type {AssetId} from './asset'
 
-export type EvmChainId = 'ethereum' | 'moonbeam' | 'moonriver' | 'goerli'
+export type EvmChainId =
+  | 'ethereum'
+  | 'moonbeam'
+  | 'moonriver'
+  | 'goerli'
+  | 'base'
 export type SubstrateChainId =
   | 'phala'
   | 'khala'
@@ -154,6 +160,14 @@ export const CHAINS: Readonly<
     sygmaChainId: 1,
     sygmaHandler: '0xC832588193cd5ED2185daDA4A531e0B26eC5B830',
   },
+  base: {
+    id: 'base',
+    name: 'Base',
+    icon: baseIcon,
+    kind: 'evm',
+    evmChainId: 8453,
+    currencySymbol: 'ETH',
+  },
   goerli: {
     id: 'goerli',
     name: 'Goerli',

apps/subbridge/pages/_app.tsx

@@ -5,15 +5,19 @@ import {CssBaseline} from '@mui/material'
 import {AppCacheProvider} from '@mui/material-nextjs/v14-pagesRouter'
 import Decimal from 'decimal.js'
 import {Provider as JotaiProvider} from 'jotai'
-import {DevTools as JotaiDevTools} from 'jotai-devtools'
 import type {AppProps} from 'next/app'
+import dynamic from 'next/dynamic'
 import Head from 'next/head'
 import {SnackbarProvider} from 'notistack'
 import type {FC} from 'react'
 import {SWRConfig} from 'swr'
 
 Decimal.set({toExpNeg: -9e15, toExpPos: 9e15, precision: 50})
 
+const JotaiDevTools = dynamic(() =>
+  import('@phala/lib').then((lib) => lib.JotaiDevTools),
+)
+
 const MyApp: FC<AppProps> = (props) => {
   const {Component, pageProps} = props
 

lefthook.yml

@@ -2,4 +2,4 @@ pre-commit:
   commands:
     check:
       glob: '*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}'
-      run: bunx biome check --apply --no-errors-on-unmatched --files-ignore-unknown=true {staged_files} && git update-index --again
+      run: bunx biome check --write --no-errors-on-unmatched --files-ignore-unknown=true {staged_files} && git update-index --again

package.json

@@ -18,16 +18,17 @@
     "preinstall": "lefthook install"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.7.3",
+    "@biomejs/biome": "1.8.0",
     "@total-typescript/ts-reset": "^0.5.1",
-    "@types/node": "^20.12.12",
-    "lefthook": "^1.6.12",
-    "tsx": "^4.10.5",
-    "turbo": "^1.13.3",
+    "@types/node": "^20.14.2",
+    "lefthook": "^1.6.15",
+    "tsx": "^4.12.0",
+    "turbo": "^2.0.1",
     "typescript": "^5.4.5"
   },
   "dependencies": {
     "@json2csv/plainjs": "^7.0.6",
     "date-fns": "^3.6.0"
-  }
+  },
+  "packageManager": "[email protected]"
 }

packages/lib/src/index.ts

@@ -12,3 +12,4 @@ export {useConnectPolkadotWallet} from './useConnectPolkadotWallet'
 export {useInterval} from './useInterval'
 export * from './validateAddress'
 export * from './weightedAverage'
+export {default as JotaiDevTools} from './JotaiDevTools'

turbo.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "pipeline": {
+  "tasks": {
     "build": {
       "dependsOn": ["^build"],
       "outputs": [