Add initial bridge draft

Author: vyorkin

.env.example

@@ -9,5 +9,6 @@ TEST_WALLET_ADDRESS=
 PROXY_URL=https://proxy.zerion.io/
 FEATURE_FOOTER_BUG_BUTTON=on
 FEATURE_SEND_FORM=
+FEATURE_BRIDGE_FORM=
 MIXPANEL_TOKEN_PUBLIC=
 FEATURE_LOYALTY_FLOW=off

src/shared/types/SignatureContextParams.ts

@@ -1,7 +1,13 @@
 import type { AnyAddressAction } from 'src/modules/ethereum/transactions/addressAction';
 import type { Quote } from './Quote';
 
-type ClientScope = string | 'Swap' | 'Send' | 'Zerion DNA' | 'External Dapp';
+type ClientScope =
+  | string
+  | 'Swap'
+  | 'Bridge'
+  | 'Send'
+  | 'Zerion DNA'
+  | 'External Dapp';
 
 export interface TransactionContextParams {
   chain: string; // Cannot use type {Chain} because it's not serializable and this object is being sent between Ports

src/ui/App/App.tsx

@@ -81,6 +81,7 @@ import { BackupPage } from '../pages/Backup/Backup';
 import { ProgrammaticNavigationHelper } from '../shared/routing/ProgrammaticNavigationHelper';
 import { Invite } from '../features/referral-program';
 import { XpDrop } from '../features/xp-drop';
+import { BridgeForm } from '../pages/BridgeForm';
 import { RouteRestoration, registerPersistentRoute } from './RouteRestoration';
 
 const isProd = process.env.NODE_ENV === 'production';
@@ -386,6 +387,14 @@ function Views({ initialRoute }: { initialRoute?: string }) {
               </RequireAuth>
             }
           />
+          <Route
+            path="/bridge-form/*"
+            element={
+              <RequireAuth>
+                <BridgeForm />
+              </RequireAuth>
+            }
+          />
           <Route
             path="/invite/*"
             element={
@@ -427,6 +436,7 @@ initializeApperance();
 dayjs.extend(relativeTime);
 registerPersistentRoute('/send-form');
 registerPersistentRoute('/swap-form');
+registerPersistentRoute('/bridge-form');
 
 function GlobalKeyboardShortcuts() {
   const isDialog = urlContext.windowType === 'dialog';

src/ui/components/FiatInputValue/FiatInputValue.tsx

@@ -0,0 +1,82 @@
+import BigNumber from 'bignumber.js';
+import React from 'react';
+import { formatCurrencyValue } from 'src/shared/units/formatCurrencyValue';
+import { formatPercent } from 'src/shared/units/formatPercent/formatPercent';
+import { UIText } from 'src/ui/ui-kit/UIText';
+import { isNumeric } from 'src/shared/isNumeric';
+import { useCurrency } from 'src/modules/currency/useCurrency';
+import { exceedsPriceImpactThreshold } from 'src/ui/pages/SwapForm/shared/price-impact';
+import type { Asset } from 'defi-sdk';
+
+export function FiatInputValue({
+  name,
+  primaryInput,
+  spendInput,
+  spendAsset,
+  receiveInput,
+  receiveAsset,
+}: {
+  name: 'spendInput' | 'receiveInput';
+  primaryInput: 'spend' | 'receive';
+  spendInput?: string;
+  spendAsset: Asset | null;
+  receiveInput?: string;
+  receiveAsset: Asset | null;
+}) {
+  const { currency } = useCurrency();
+
+  const asset = name === 'receiveInput' ? receiveAsset : spendAsset;
+  const oppositeAsset = asset === receiveAsset ? spendAsset : receiveAsset;
+  const inputValue = name === 'receiveInput' ? receiveInput : spendInput;
+  const oppositeInputValue =
+    name === 'receiveInput' ? spendInput : receiveInput;
+  const isPrimaryInput =
+    name === 'receiveInput'
+      ? primaryInput === 'receive'
+      : primaryInput === 'spend';
+
+  if (inputValue == null || !isNumeric(inputValue)) {
+    return null;
+  }
+
+  const fiatValue = new BigNumber(inputValue || 0).times(
+    asset?.price?.value || 0
+  );
+
+  let diff: BigNumber | null = null;
+  if (name === 'receiveInput') {
+    const oppositeFiatValue = new BigNumber(oppositeInputValue || 0).times(
+      oppositeAsset?.price?.value || 0
+    );
+    diff = oppositeFiatValue.isGreaterThan(0)
+      ? fiatValue.minus(oppositeFiatValue).div(oppositeFiatValue)
+      : null;
+  }
+
+  const formattedDiff = diff
+    ? `${diff.isLessThan(0) ? '' : '+'}${formatPercent(diff.times(100), 'en')}%`
+    : null;
+
+  const isPriceImpactWarning = diff
+    ? exceedsPriceImpactThreshold({ relativeChange: diff })
+    : false;
+
+  return (
+    <UIText
+      kind="small/regular"
+      color={
+        isPriceImpactWarning ? 'var(--negative-500)' : 'var(--neutral-600)'
+      }
+      style={isPriceImpactWarning ? { cursor: 'help' } : undefined}
+      title={
+        isPriceImpactWarning
+          ? 'The exchange rate is lower than the market rate. Lack of liquidity affects the exchange rate. Try a lower amount.'
+          : undefined
+      }
+    >
+      {isPrimaryInput ? null : '≈'}
+      {formatCurrencyValue(fiatValue, 'en', currency)}{' '}
+      {formattedDiff ? `(${formattedDiff})` : null}
+    </UIText>
+  );
+}

src/ui/components/FiatInputValue/index.ts

@@ -0,0 +1 @@
+export { FiatInputValue } from './FiatInputValue';