chore: wup

shared/constants/bridge.ts

@@ -15,8 +15,9 @@ export const ALLOWED_BRIDGE_CHAIN_IDS = [
 
 const BRIDGE_DEV_API_BASE_URL = 'https://bridge.dev-api.cx.metamask.io';
 const BRIDGE_PROD_API_BASE_URL = 'https://bridge.api.cx.metamask.io';
-export const BRIDGE_API_BASE_URL = process.env.BRIDGE_USE_DEV_APIS
+export const BRIDGE_API_BASE_URL_ = process.env.BRIDGE_USE_DEV_APIS
   ? BRIDGE_DEV_API_BASE_URL
   : BRIDGE_PROD_API_BASE_URL;
 
 export const BRIDGE_CLIENT_ID = 'extension';
+export const BRIDGE_API_BASE_URL = 'http://localhost:4000';

ui/ducks/bridge/actions.ts

@@ -2,7 +2,7 @@ import { swapsSlice } from '../swaps/swaps';
 import { bridgeSlice } from './bridge';
 
 // Proxied swaps actions
-export const { setFromToken } = swapsSlice.actions;
+export const { setFromToken, setToToken } = swapsSlice.actions;
 
 // Bridge actions
 export const { setToChain } = bridgeSlice.actions;

ui/ducks/bridge/selectors.ts

@@ -1,9 +1,26 @@
 import { createSelector } from 'reselect';
 import { getProviderConfig } from '../metamask/metamask';
-import { getIsBridgeEnabled } from '../../selectors';
+import { getIsBridgeEnabled, getSwapsDefaultToken } from '../../selectors';
+import * as swapsSlice from '../swaps/swaps';
+import { ALLOWED_BRIDGE_CHAIN_IDS } from '../../../shared/constants/bridge';
 
 export const getFromChain = (state: any) => getProviderConfig(state);
 export const getToChain = (state: any) => state.bridge.toChain;
+// TODO read from feature flags
+export const getFromChains = (state: any) => ALLOWED_BRIDGE_CHAIN_IDS;
+// TODO read from feature flags
+export const getToChains = (state: any) => ALLOWED_BRIDGE_CHAIN_IDS;
+
+export const getFromToken = (state: any) => {
+  const swapsFromToken = swapsSlice.getFromToken(state);
+  if (!swapsFromToken?.symbol) {
+    return getSwapsDefaultToken(state);
+  }
+  return swapsFromToken;
+};
+export const getToToken = (state: any) => {
+  return swapsSlice.getToToken(state);
+};
 
 export const getIsBridgeTx = createSelector(
   getFromChain,

ui/pages/bridge/multichain-asset-picker/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Box } from '../../../components/component-library';
+
+const MultiChainAssetPicker = () => {
+  return (
+    <Box className="multichain-asset-picker">
+      <div className="multichain-asset-picker__asset"></div>
+      <div className="multichain-asset-picker__amount"></div>
+    </Box>
+  );
+};
+
+export default MultiChainAssetPicker;

ui/pages/bridge/prepare/prepare-bridge-page.tsx

@@ -1,38 +1,86 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { isEqual } from 'lodash';
-import { getSwapsDefaultToken } from '../../../selectors';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { AssetPicker } from '../../../components/multichain/asset-picker-amount/asset-picker';
-import { getFromToken } from '../../../ducks/swaps/swaps';
-import { setFromToken } from '../../../ducks/bridge/actions';
+import {
+  setFromToken,
+  setToChain,
+  setToToken,
+} from '../../../ducks/bridge/actions';
+import {
+  getFromChain,
+  getFromChains,
+  getFromToken,
+  getToChain,
+  getToChains,
+  getToToken,
+} from '../../../ducks/bridge/selectors';
+import { AssetPickerModal } from '../../../components/multichain/asset-picker-amount/asset-picker-modal';
+import {
+  AssetPickerAmount,
+  NetworkListMenu,
+} from '../../../components/multichain';
+import { Button } from '../../../components/component-library';
+import MultiChainAssetPicker from '../multichain-asset-picker';
 
 export const PrepareBridgePage = () => {
   const t = useI18nContext();
   const dispatch = useDispatch();
 
-  const fromToken = useSelector(getFromToken); // TODO use bridge selector
+  const fromToken = useSelector(getFromToken);
+  const toToken = useSelector(getToToken);
 
-  const defaultSwapsToken = useSelector(getSwapsDefaultToken, isEqual);
-  // TODO copy in effects from PrepareSwapPage as needed
-  // TODO implement new UI
+  const fromChains = useSelector(getFromChains);
+  const toChains = useSelector(getToChains);
+  const fromChain = useSelector(getFromChain);
+  const toChain = useSelector(getToChain);
 
-  // TODO move this to selector
-  useEffect(() => {
-    if (!fromToken?.symbol) {
-      dispatch(setFromToken(defaultSwapsToken));
-    }
-  }, [fromToken, defaultSwapsToken]);
+  const [fromTokenOpen, setFromTokenOpen] = useState(false);
+  const [toTokenOpen, setToTokenOpen] = useState(false);
 
   return (
     <div className="prepare-bridge-page">
       <div className="prepare-bridge-page__content">
-        <AssetPicker
+        {fromToken?.symbol} {toToken?.symbol}
+        {fromChain?.chainId} {toChain?.chainId}
+        <AssetPickerModal
+          isOpen={fromTokenOpen}
           asset={fromToken}
           onAssetChange={(a) => {
             dispatch(setFromToken(a));
           }}
+          onClose={() => setFromTokenOpen(false)}
         />
+        <Button onClick={() => setFromTokenOpen(true)}>Bridge from</Button>
+        {fromChains.map((chain) => (
+          <Button
+            onClick={() => {
+              console.log('TODO switch network');
+              // TODO refresh token list
+            }}
+          >
+            {chain}
+          </Button>
+        ))}
+        {/* <AssetPickerModal
+          isOpen={toTokenOpen}
+          asset={toToken}
+          onAssetChange={(a) => {
+            console.log('TODO set to token');
+            dispatch(setToToken(a));
+          }}
+          onClose={() => setToTokenOpen(false)}
+        />
+        <Button onClick={() => setToTokenOpen(true)}>Bridge to</Button>
+        {toChains.map((chain) => (
+          <Button
+            onClick={() => {
+              dispatch(setToChain(chain));
+            }}
+          >
+            {chain}
+          </Button>
+        ))} */}
       </div>
     </div>
   );