Fix/bridge page designing (#1062)

* adding bridging as separate ts component for redesign bridge

* partial bridgig done along with tooltip changes

* change:
 - Added bridge page
 - Added bridge type switcher
 - Added settings modal for bridge
 - Added Styles & Structure for bridge page

* change:
 - bridge chain selection inputs
 - bridge chain switcher with it's functions.
 - bridge chain picker modal
 - bridge token picker modal

* token picker modal

* change:
 - network switcher
 - trigger wrong network modal on changing the network from picker

* change:
 - added Component InputWithButton
 - added Bridge Alert component with it's state with redux
 - bridge to address component with input and paste button
 - Token Input which takes amount and the max button
 - Netowrk Picker fix with alignment change in chains
 -
 -

* prepare separate component for header

* change:
- move amount converter to util use it across app
- making input, max btn to disable when not token selected
- hide up and down arrow of input
- showing errors on input underzero and overmax.

* alert styling based on type

* cleaning up alerts & token on changing network, bridge type, disconnect

* change:
 - storing amount change to redux to use it on hook & confirmation modal
 - On clicking on bridge button show bridge confirm modal
 - Prepare the bridge confirm modal

* partial change for trigger deposits from modal

* change: note about refactoring

* change:
- hook for loading receivable amount
- hook for fetching amount for fast input.
- updated the bridgeInput with recievable amount.

* change:
 - fix: recievable amount Deposit [x]classic [x]fast / Exit  [x]classic [x]fast
 - fix: desitnation gas fee [x]classic [x]fast / Exit  [x]classic [x]fast
 - fix: bridge fee LP in case of fast briding in percentage else zero
 - fix: estimated time [x]classic [x]fast / Exit  [x]classic [x]fast
 - fix: calc max fee of token [x]classic [x]fast / Exit  [x]classic [x]fast

* change:
- fix: zero balance check to disable input & highlight with red border & text.
- fix: Added names on bridge confirm modal
- chore: removed query param based network selection.
- fix: updated names for selected network.
- fix: updated estimated time on bridge confirm dialog.

* fix time on dialog

* fix: enable bridge to address for L1 with classical bridge only

* change:
- fix: closing of settings once switch network
- removed todod
- closing settings modal from wrong network once switch n/w

* change:
- add: loading modal for bridge in progress
- add: modal for bridge success.
- add: Contract call invocation for deposit / exits.
- updated the useBridge hook with modal to show on loading.

* fix: success modal estimate time & network name

* change:
- showing noOfBlocksSinceDeposits/confirmationblocksets on loading modal
- cleaning update bridge state on closing loading modal.
- added function to fetch the latest number of blocks.

* change:
- added blockconfirm sets only for L1-> L2 bridging
- updated the content from please wait moment to your deposit will be ....
- fix: to fetch the block number of tx instead of feature before submitting tx from MM.
- chore: cleanup & refactoring.

* change:
- fix: disable bridge btn if has error, token not selected and amount empty
- fix: close loading modal once block diff is more than 64.

* fix: closing modal onceblock riches equal or more than 64

* change:
fix: moved bridge alerts to separate hooks

* fix: specs

* fix: alerts for OMG network

* change:
fix: style fixes for bridge page
chore: moved trigger bridgealert for value to hook

* fix: cleanup

* fix: checks for bridge alerts for  token withdrwal

* fix: added alerts for classic withdrwal.

* fix: bridge alerts for fast input / deposits

* change:
fix: added 3rd party bridges
fix: updated boba, ehereum icons for networks.

* added icons for 3rd party bridges

* fix: added estimated time stamp on loading screen in case of L1->L2

* change:
fix: light mode theme colors & icons

* change:
- fix: mobile view for header
- fix: mobile view for footer.
- fix: mobile view for bridging
- fix: mobile view for bridging modals

* spanshot fix and test cases update

packages/boba/gateway/src/actions/bridgeAction.js

@@ -13,6 +13,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. */
 
+import store from "store";
+
 export function setToken(token) {
   return function (dispatch) {
     return dispatch({ type: 'BRIDGE/TOKEN/SELECT', payload: token });
@@ -54,3 +56,44 @@ export function setMultiBridgeMode(mode) {
     return dispatch({ type: 'BRIDGE/MODE/CHANGE', payload: mode });
   }
 }
+
+export function setBridgeToAddress(payload) {
+  return function (dispatch) {
+    return dispatch({ type: 'BRIDGE/TOADDRESS/SET', payload });
+  }
+}
+
+export function setBridgeAlert(payload) {
+  return function (dispatch) {
+    return dispatch({ type: 'BRIDGE/ALERT/SET', payload });
+  }
+}
+
+export function clearBridgeAlert(payload) {
+  return function (dispatch) {
+    return dispatch({ type: 'BRIDGE/ALERT/CLEAR', payload });
+  }
+}
+
+export function purgeBridgeAlert(payload) {
+  return function (dispatch) {
+    return dispatch({ type: 'BRIDGE/ALERT/PURGE', payload });
+  }
+}
+
+export function setAmountToBridge(payload) {
+  return function (dispatch) {
+    return dispatch({ type: 'BRIDGE/AMOUNT/SET', payload });
+  }
+}
+
+export function resetBridgeAmount() {
+  return function (dispatch) {
+    return dispatch({ type: 'BRIDGE/AMOUNT/RESET'});
+  }
+}
+
+
+export function setFetchDepositTxBlock(payload) {
+  store.dispatch({ type: 'BRIDGE/DEPOSIT_TX/BLOCK', payload})
+}

packages/boba/gateway/src/actions/networkAction.js

@@ -233,6 +233,12 @@ export function fetchLookUpPrice(params) {
     networkService.fetchLookUpPrice(params))
 }
 
+export function clearLookupPrice() {
+  return function (dispatch) {
+    return dispatch({ type: 'LOOKUP/PRICE/CLEAR' })
+  }
+}
+
 export function enableBrowserWallet(network) {
   return createAction('ENABLE/BROWSER/WALLET', () => networkService.enableBrowserWallet(network))
 }
@@ -262,3 +268,9 @@ export function setActiveNetwork(payload) {
     return dispatch({ type: 'NETWORK/SET/ACTIVE' })
   }
 }
+
+export function setActiveNetworkType(payload) {
+  return function (dispatch) {
+    return dispatch({ type: 'NETWORK/SET_TYPE/ACTIVE', payload })
+  }
+}

packages/boba/gateway/src/actions/uiAction.js

@@ -19,9 +19,9 @@ export function setTheme (theme) {
   }
 }
 
-export function openModal (modal, token, fast, tokenIndex, lock, proposalId) {
+export function openModal (modal, token, fast, tokenIndex, lock, proposalId, selectionLayer) {
   return function (dispatch) {
-    return dispatch({ type: 'UI/MODAL/OPEN', payload: modal, token, fast, tokenIndex, lock, proposalId });
+    return dispatch({ type: 'UI/MODAL/OPEN', payload: modal, token, fast, tokenIndex, lock, proposalId, selectionLayer });
   }
 }