From 91f5b89eb62abbff5d0654451db9ba998ad8fc09 Mon Sep 17 00:00:00 2001
From: Bill <bill@dydx.exchange>
Date: Mon, 29 Jan 2024 15:12:06 -0800
Subject: [PATCH] Coinbase Deposit (#251)

* Coinbase Deposit

* bump packages

* fix lock

* add testflag

* Address feedback

* fix chain select
---
 public/configs/exchanges.json                 |   8 ++
 public/exchanges/coinbase.png                 | Bin 0 -> 2922 bytes
 src/components/QrCode.tsx                     |   5 +-
 src/components/TimeoutButton.tsx              |   4 +
 src/hooks/useAccounts.tsx                     |   8 ++
 src/lib/testFlags.ts                          |   4 +
 .../AccountManagementForms/DepositForm.tsx    | 100 +++++++------
 ...ainSelectMenu.tsx => SourceSelectMenu.tsx} |  50 +++++--
 .../AccountManagementForms/WithdrawForm.tsx   |   6 +-
 src/views/forms/NobleDeposit.tsx              | 131 ++++++++++++++++++
 10 files changed, 262 insertions(+), 54 deletions(-)
 create mode 100644 public/configs/exchanges.json
 create mode 100644 public/exchanges/coinbase.png
 rename src/views/forms/AccountManagementForms/{ChainSelectMenu.tsx => SourceSelectMenu.tsx} (55%)
 create mode 100644 src/views/forms/NobleDeposit.tsx

diff --git a/public/configs/exchanges.json b/public/configs/exchanges.json
new file mode 100644
index 0000000..5a2a824
--- /dev/null
+++ b/public/configs/exchanges.json
@@ -0,0 +1,8 @@
+[
+  {
+      "name": "coinbase",
+      "label": "Coinbase",
+      "icon": "/exchanges/coinbase.png",
+      "depositType": "noble"
+  }
+]
\ No newline at end of file
diff --git a/public/exchanges/coinbase.png b/public/exchanges/coinbase.png
new file mode 100644
index 0000000000000000000000000000000000000000..081a89e81749921aa7ee0ff0fc78e3db1e7bf96a
GIT binary patch
literal 2922
zcmchZ=|2>F7sh883}YK)$-X4S9g6HTqcCJIbw{%x;X#IIyD?+z5+jr%L-sXWWXVjC
zrA0ClSw_*FeGADlzsK`WJm>R0*L9uq^1M1p&W<)h0*3`45Qva1_KfR+Gym6c?gRDV
z$~8DJm@mcw1A)|~A@)3Z4rb_eR~t)6O~2gSK{jx<KW}xg1pk-f0KnmZl?||bz%Rg_
z1Cs~Lf{$$QaT4?&Faa1tfWZPC2MmJRKJcs$6fi*k0Udze0rENk?Kwzm1hfW_)&M9K
zfKm>~<$zKK$Yp>;2O)WYlm~(j^a=3H1jJ0>nE{9y!1F#J9EAJ8B?-7B0_Q~Fln5|U
z022w&kw7mD=v@c8*MVLr&<zDD{y_NvKcM6Xka&Q^0Z|-4UIwC<0rVVzx&nwRxDwTs
zb8tA7FjvQO5K$#vw39QQK)e=AB2!Y+XnFMfnr9u1{*M!r?4{)u&YZHjIRwIAY<mWC
z{?^weoQH>OA5tEtT?lU!)5kU?$cGp5HxN}uYB6{b<tsYIZTfieYOcCBqHi8^07{vD
zCBiM-iS4^x|1&+IAa(w{8=<02-o`XE&b4@QBrquG`5M<!b@hcxm+DLb<D+A}hqN|_
zt3T_0t-e#7?K1st(<WOyZN507DdqTZbFGqsf!(FLj@K82xO0yE*@$Dkw)3kl@{g*U
z?0)NaD!JU2FMygul?@FDszQ1QwSA&J3osx<?@FwT)FS_Wnt#b`SX25WSpiX5BK}j-
zQ1Ex2?Pj1CLbtTgPSzv3pq>`&8KC<u)>YOc_Quhf|EK^9BLTi=-4|WXNG3k5T&u*~
zsy(`XFSxOPa=pE;XC?mGwGZ*6aHPU^yW@aHVU{6%E#}zk=(Q=z-RM#W>j1OiglWxh
zJ=;cDj=Fn8*4{qJK331dQIcidAHUZYqnX~h%8XD_8$G@`O|}dR%*I5^cW_2CHB{^p
zd7Fv-Q9}P7*T}8QaCvopNAP(zU0Y4<iQ~oW0$Jp}7Z&==eCA>8l%%VI+!I<}a|HSw
z3zkdSL#Qfw9{gcXpK29vZ@1oc*xO5brR^>fdVY6bs!M5S=v&+|!;1V=GBr{9je(oB
zta~@z=A4)GP^^}|p$=;ibwrX>a#?u25w=66os?NEQE`Xtp7!Erl=0~MaFz+kfLji>
z)@%(J#bKAfB~~W?ei%<f04fV=BkerQ(HV2<4H!u+DWb%8nM`4=D_yxvj%Y&qOYn}C
z=<*S#@6Hie7iy1)ntaz(1;Q)nSPYjyi6&C%)KqW3&mxh+e^R9!>R94d2e&w?`Mt$i
zE(SS%mK7zY$p1o#UJW6}LW>n*grzew^{7?uKX0J3oAyZt=-ZBbMLPL$iTU>Dr^A@W
zeUPYcXU~Y}Ka9@iX?g1wd&q8N!)suH_pZcu)Z7;DborzaJ`{7Ql)GD*wwH%p`O(!Q
z*Ez2f<eeCT#o-WlLg~5NNhfli)?hYjb81yJvZVUO_=-g~v{mq=MNZVsnxk1!>9*H{
z<dM3|>jua~1b@X<LTt#T(*lnzrmxM6aB@fzki%MJ>-^$niUyNwByA`FlYxul0i7*r
zakabFEt2_iXEC_C6@YtD?BDimp8C=5Rmr@@tc+v=QOV5LAFknLskmbMJS#~LqCeMT
zcHUL+o3C_^FT}qL`^?L`a0m2GUDioK4b}hXG>v8^@CkfKG7Zi=Ipdm9Mxm+@q9K!!
zrS<5L9PC*;0fAaE;Xi<N)?KgWIC<C_0)H4I>n>{MTIQ7=nzr0;8fUgabLGL0hz-a&
z9f~iytE8b7%XB`S6XvT;$9`%T@^vc^3?Na^a%^U2L2CqjmPDZ-zMJbNd#o=c{o@WN
z*+6Se^b|kpd{hU0rg1}Ie^X46I%!z*o<1Eit+_)nK!y2|qemTd#&o3cw8G`y+Jr!*
zv1WBuN-3tfzrKtPzCcWH*ZX~GqONWsMo-3Gcv2B2_LXG~;lo*MqZJ~ROljHQwTbc?
z+^5Hs^QjILh_C0OFBL8R_eHX|X}sGM7tHATSBy2h(T9K0hf4X0mGVM~!)RvEJ=175
z{~lc&u5XDpxyLJGTX?gBHu0yR>xts~ptr)M$Mr3z`knmd2hZ8v^Y2AXb*^t$3fRws
z_qIwyr^<hhAM?NyZ7P}dcBJM9ZW5ABjY4IhsJ@m*TgUo=LD$PMfxmRPypsxigx0j+
z_;I&O_%A0PJ72~-MaIN<)Mp9_XX%uzgpGWBS?M_H#Wg7UyJ;-Wfe)=`7W^ABC<+W0
zqOJJQV^wcuC+3q98EqM@pI*wnu^=P5leD0mRN4INb=C{n)4^NW%kE;LL-A>ogbF@b
zH1pNH*|ZxlSku^y|2?*f&UL#t=qcLbI(FF*#*C6pf6#E^_O6xi93%efiJ{@}f=<+6
zwDzE)h~})q%S{g@5!+^5^5*Z;6RfIX|2kReD-pFiH!Pq=0*!ytnd>BM<K}jt$1Opf
zE%6Tze5dHROsJacC)J33dA;46FouW$`RAjh-%owFRnn82A~n87kyBo^Knf#q+9^`{
z^CYnM`erU#x&1x~X0<2i-1zPg|C7^esv14gxeig5xC8`TM*ZBZoSod!9O9irtVqEC
zM&U%nw%Yi`o7{~XFNhXavrDc<VK*FSgnv0O!#9sZGr1xx)%2E^ZkiAh{o7chsC0|u
zZSE<`E`gv0!zG6~6zR!}<V7(Uthq3gwl+4(%|vkLK_^srU|a2Ss*oqIfq^#rB&>C+
zS#U%Va5q%ys%Ctj!tKD+F<!zxxwa@<0vbg!VTK$wic#U>ff3$8*!>Th646lQw^nYS
z7n9(U113vU<5g;V)MKt4{_*jWNeSLoCc`m}=~2rlv}6!_d8Fu^oN@>eM}rC5vD%*g
zhgTuQ=Dm%H;m{Y<#wa=2N@d$H)tvU~*ZUFrt(!|)W|_@o7yRCd@q%#FTm?gY{QYY1
z*cM1W0&6Vm!K+K}y?ZDox?gYhPEcd(C?YZ3bH3PoKSg8f%XUpwct~ry+3q7Rrgwi^
zsir5fQo(t>w0Hl<MnH}?VhdmwLSC+r3hlf}8;Yzg_CQT9@}D7}nAU0|J=u=n&C57P
zkt>U+QyPV%PD6jy_E4P$XK*`{je0T@dvTKm$2gE^8}<_gnUL3k5`K;B5P>k>?JkP=
zwWuP%2>zk)ji?KcfBZyuH|vwlT{ZesP1OqzyU(b`-Fn?hu;(ZrR_7jPWx04ixHB|)
z#Je2s4K_@MJvoF&@{Q~Y^X{4YHlNHm33hJ1Eamf}?=ZJeooL#9yc=s(>5>@txO~4?
ziz0)5%V5e|=s4nE!~0|4A5|COwLl4V!?Z#n^I+2pNSl>xc*1sk=bfN5fqqtb&u7fQ
zQrguJuDeEg_jYhK-H}ey3;BJ~s~G!<)y*H;@qS%vfrhtbZWues=l8g?eLs8_{kJFM
z+6dXWHP`+s!e0Gh;luq^?96~rg@5GNu)kELJYs#P9{q^m9@SSg_|RS#_>Ld{W=Q<g
zh1~pOf6fid<2og19%1jjJ{P6Zn*Wtfz{uYYFz(?MbU`oN?vdO$hsJ-%`?I1sE9iUW
ztQjGTr>OGUzB11*sj;_0BK`x8pKL{1Ld7*n=(0=w#+s^xN!m1}{pykM1(d{W_h~&b
zc*}FI3ssEpGv!;NYqe;&c~w?}&t7R+&Cp|or>oguB4Ai6F6A)LtVI;tg})pPo8Xa(
lHTx2Dt?G-`5%Cfr@-<GZaWbR?cktdpY^@y6)L0U!{{;!h$aVk#

literal 0
HcmV?d00001

diff --git a/src/components/QrCode.tsx b/src/components/QrCode.tsx
index d5bc6a6..fb79383 100644
--- a/src/components/QrCode.tsx
+++ b/src/components/QrCode.tsx
@@ -11,6 +11,7 @@ type ElementProps = {
 };
 
 type StyleProps = {
+  className?: string;
   hasLogo?: boolean;
   size?: number;
 };
@@ -18,7 +19,7 @@ type StyleProps = {
 const DARK_LOGO_MARK_URL = '/logos/logo-mark-dark.svg';
 const LIGHT_LOGO_MARK_URL = '/logos/logo-mark-light.svg';
 
-export const QrCode = ({ value, hasLogo, size = 300 }: ElementProps & StyleProps) => {
+export const QrCode = ({ className, value, hasLogo, size = 300 }: ElementProps & StyleProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const appTheme: AppTheme = useSelector(getAppTheme);
 
@@ -74,7 +75,7 @@ export const QrCode = ({ value, hasLogo, size = 300 }: ElementProps & StyleProps
     }
   }, [appTheme, hasLogo]);
 
-  return <Styled.QrCode ref={ref} />;
+  return <Styled.QrCode className={className} ref={ref} />;
 };
 
 const Styled: Record<string, AnyStyledComponent> = {};
diff --git a/src/components/TimeoutButton.tsx b/src/components/TimeoutButton.tsx
index df0a7f7..4e0c4e6 100644
--- a/src/components/TimeoutButton.tsx
+++ b/src/components/TimeoutButton.tsx
@@ -8,6 +8,7 @@ import { Button, type ButtonStateConfig, type ButtonProps } from '@/components/B
 
 type ElementProps = {
   timeoutInSeconds: number;
+  slotFinal?: ReactNode;
 } & ButtonProps;
 
 export type TimeoutButtonProps = ElementProps;
@@ -15,6 +16,7 @@ export type TimeoutButtonProps = ElementProps;
 export const TimeoutButton = ({
   children,
   timeoutInSeconds,
+  slotFinal,
   ...otherProps
 }: TimeoutButtonProps) => {
   const [timeoutDeadline] = useState(Date.now() + timeoutInSeconds * 1000);
@@ -23,6 +25,8 @@ export const TimeoutButton = ({
 
   const secondsLeft = Math.max(0, (timeoutDeadline - now) / 1000);
 
+  if (slotFinal && secondsLeft <= 0) return slotFinal;
+
   return (
     <Button
       {...otherProps}
diff --git a/src/hooks/useAccounts.tsx b/src/hooks/useAccounts.tsx
index e4f091d..66a966e 100644
--- a/src/hooks/useAccounts.tsx
+++ b/src/hooks/useAccounts.tsx
@@ -161,6 +161,7 @@ const useAccountsContext = () => {
 
   // dYdX wallet / onboarding state
   const [localDydxWallet, setLocalDydxWallet] = useState<LocalWallet>();
+  const [localNobleWallet, setLocalNobleWallet] = useState<LocalWallet>();
   const [hdKey, setHdKey] = useState<PrivateInformation>();
 
   const dydxAccounts = useMemo(() => localDydxWallet?.accounts, [localDydxWallet]);
@@ -170,6 +171,11 @@ const useAccountsContext = () => {
     [localDydxWallet]
   );
 
+  const nobleAddress = useMemo(
+    () => localNobleWallet?.address,
+    [localNobleWallet]
+  );
+
   const setWalletFromEvmSignature = async (signature: string) => {
     const { wallet, mnemonic, privateKey, publicKey } = await getWalletFromEvmSignature({
       signature,
@@ -251,6 +257,7 @@ const useAccountsContext = () => {
       if (hdKey?.mnemonic) {
         const nobleWallet = await LocalWallet.fromMnemonic(hdKey.mnemonic, NOBLE_BECH32_PREFIX);
         abacusStateManager.setNobleWallet(nobleWallet);
+        setLocalNobleWallet(nobleWallet);
       }
     };
     setNobleWallet();
@@ -349,6 +356,7 @@ const useAccountsContext = () => {
     localDydxWallet,
     dydxAccounts,
     dydxAddress,
+    nobleAddress,
 
     // Onboarding state
     saveHasAcknowledgedTerms,
diff --git a/src/lib/testFlags.ts b/src/lib/testFlags.ts
index 66c4b59..0fc1faf 100644
--- a/src/lib/testFlags.ts
+++ b/src/lib/testFlags.ts
@@ -26,6 +26,10 @@ class TestFlags {
   get addressOverride():string {
     return this.queryParams.address;
   }
+
+  get showCEXDepositOption() {
+    return !!this.queryParams.cexdeposit;
+  }
 }
 
 export const testFlags = new TestFlags();
diff --git a/src/views/forms/AccountManagementForms/DepositForm.tsx b/src/views/forms/AccountManagementForms/DepositForm.tsx
index af2d74f..26bf651 100644
--- a/src/views/forms/AccountManagementForms/DepositForm.tsx
+++ b/src/views/forms/AccountManagementForms/DepositForm.tsx
@@ -17,7 +17,6 @@ import type { EvmAddress } from '@/constants/wallets';
 import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@/hooks';
 import { useAccountBalance, CHAIN_DEFAULT_TOKEN_ADDRESS } from '@/hooks/useAccountBalance';
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
-import { useWalletConnection } from '@/hooks/useWalletConnection';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { formMixins } from '@/styles/formMixins';
@@ -41,10 +40,11 @@ import { getNobleChainId, NATIVE_TOKEN_ADDRESS } from '@/lib/squid';
 import { log } from '@/lib/telemetry';
 import { parseWalletError } from '@/lib/wallet';
 
-import { ChainSelectMenu } from './ChainSelectMenu';
+import { SourceSelectMenu } from './SourceSelectMenu';
 import { TokenSelectMenu } from './TokenSelectMenu';
 
 import { DepositButtonAndReceipt } from './DepositForm/DepositButtonAndReceipt';
+import { NobleDeposit } from '../NobleDeposit';
 
 type DepositFormProps = {
   onDeposit?: () => void;
@@ -57,13 +57,14 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
   const [isLoading, setIsLoading] = useState(false);
   const { selectedNetwork } = useSelectedNetwork();
 
-  const { evmAddress, signerWagmi, publicClientWagmi } = useAccounts();
+  const { evmAddress, signerWagmi, publicClientWagmi, nobleAddress } = useAccounts();
 
   const { addTransferNotification } = useLocalNotifications();
 
   const {
     requestPayload,
     token,
+    exchange,
     chain: chainIdStr,
     resources,
     summary,
@@ -129,14 +130,21 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     if (error) onError?.();
   }, [error]);
 
-  const onSelectChain = useCallback((chain: string) => {
-    if (chain) {
+  const onSelectChain = useCallback((name: string, type: 'chain' | 'exchange') => {
+    if (name) {
       abacusStateManager.clearTransferInputValues();
-      abacusStateManager.setTransferValue({
-        field: TransferInputField.chain,
-        value: chain,
-      });
       setFromAmount('');
+      if (type === 'chain') {
+        abacusStateManager.setTransferValue({
+          field: TransferInputField.chain,
+          value: name,
+        });
+      } else {
+        abacusStateManager.setTransferValue({
+          field: TransferInputField.exchange,
+          value: name,
+        });
+      }
     }
   }, []);
 
@@ -369,39 +377,49 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
 
   return (
     <Styled.Form onSubmit={onSubmit}>
-      <ChainSelectMenu selectedChain={chainIdStr || undefined} onSelectChain={onSelectChain} />
-      <TokenSelectMenu selectedToken={sourceToken || undefined} onSelectToken={onSelectToken} />
-      <Styled.WithDetailsReceipt side="bottom" detailItems={amountInputReceipt}>
-        <FormInput
-          type={InputType.Number}
-          onChange={onChangeAmount}
-          label={stringGetter({ key: STRING_KEYS.AMOUNT })}
-          value={fromAmount}
-          slotRight={
-            <Styled.FormInputButton size={ButtonSize.XSmall} onClick={onClickMax}>
-              {stringGetter({ key: STRING_KEYS.MAX })}
-            </Styled.FormInputButton>
-          }
-        />
-      </Styled.WithDetailsReceipt>
-      {errorMessage && <AlertMessage type={AlertType.Error}>{errorMessage}</AlertMessage>}
-      {requireUserActionInWallet && (
-        <AlertMessage type={AlertType.Warning}>
-          {stringGetter({ key: STRING_KEYS.CHECK_WALLET_FOR_REQUEST })}
-        </AlertMessage>
+      <SourceSelectMenu
+        selectedChain={chainIdStr || undefined}
+        selectedExchange={exchange || undefined}
+        onSelect={onSelectChain}
+      />
+      {exchange && nobleAddress ? (
+        <NobleDeposit />
+      ) : (
+        <>
+          <TokenSelectMenu selectedToken={sourceToken || undefined} onSelectToken={onSelectToken} />
+          <Styled.WithDetailsReceipt side="bottom" detailItems={amountInputReceipt}>
+            <FormInput
+              type={InputType.Number}
+              onChange={onChangeAmount}
+              label={stringGetter({ key: STRING_KEYS.AMOUNT })}
+              value={fromAmount}
+              slotRight={
+                <Styled.FormInputButton size={ButtonSize.XSmall} onClick={onClickMax}>
+                  {stringGetter({ key: STRING_KEYS.MAX })}
+                </Styled.FormInputButton>
+              }
+            />
+          </Styled.WithDetailsReceipt>
+          {errorMessage && <AlertMessage type={AlertType.Error}>{errorMessage}</AlertMessage>}
+          {requireUserActionInWallet && (
+            <AlertMessage type={AlertType.Warning}>
+              {stringGetter({ key: STRING_KEYS.CHECK_WALLET_FOR_REQUEST })}
+            </AlertMessage>
+          )}
+          <Styled.Footer>
+            <DepositButtonAndReceipt
+              isDisabled={isDisabled}
+              isLoading={isLoading}
+              chainId={chainId || undefined}
+              setSlippage={onSetSlippage}
+              slippage={slippage}
+              sourceToken={sourceToken || undefined}
+              setRequireUserActionInWallet={setRequireUserActionInWallet}
+              setError={setError}
+            />
+          </Styled.Footer>
+        </>
       )}
-      <Styled.Footer>
-        <DepositButtonAndReceipt
-          isDisabled={isDisabled}
-          isLoading={isLoading}
-          chainId={chainId || undefined}
-          setSlippage={onSetSlippage}
-          slippage={slippage}
-          sourceToken={sourceToken || undefined}
-          setRequireUserActionInWallet={setRequireUserActionInWallet}
-          setError={setError}
-        />
-      </Styled.Footer>
     </Styled.Form>
   );
 };
diff --git a/src/views/forms/AccountManagementForms/ChainSelectMenu.tsx b/src/views/forms/AccountManagementForms/SourceSelectMenu.tsx
similarity index 55%
rename from src/views/forms/AccountManagementForms/ChainSelectMenu.tsx
rename to src/views/forms/AccountManagementForms/SourceSelectMenu.tsx
index f77fac0..9cda84b 100644
--- a/src/views/forms/AccountManagementForms/ChainSelectMenu.tsx
+++ b/src/views/forms/AccountManagementForms/SourceSelectMenu.tsx
@@ -3,6 +3,7 @@ import { shallowEqual, useSelector } from 'react-redux';
 
 import { TransferType } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
+
 import { useStringGetter } from '@/hooks';
 
 import { SearchSelectMenu } from '@/components/SearchSelectMenu';
@@ -12,45 +13,78 @@ import { popoverMixins } from '@/styles/popoverMixins';
 
 import { getTransferInputs } from '@/state/inputsSelectors';
 
+import { isTruthy } from '@/lib/isTruthy';
+import { testFlags } from '@/lib/testFlags';
+
 type ElementProps = {
   label?: string;
+  selectedExchange?: string;
   selectedChain?: string;
-  onSelectChain: (chain: string) => void;
+  onSelect: (name: string, type: 'chain' | 'exchange') => void;
 };
 
-export const ChainSelectMenu = ({ label, selectedChain, onSelectChain }: ElementProps) => {
+export const SourceSelectMenu = ({
+  label,
+  selectedExchange,
+  selectedChain,
+  onSelect,
+}: ElementProps) => {
   const stringGetter = useStringGetter();
   const { type, depositOptions, withdrawalOptions, resources } =
     useSelector(getTransferInputs, shallowEqual) || {};
   const chains =
     (type === TransferType.deposit ? depositOptions : withdrawalOptions)?.chains?.toArray() || [];
 
+  const exchanges =
+    (type === TransferType.deposit ? depositOptions : withdrawalOptions)?.exchanges?.toArray() ||
+    [];
+
   const chainItems = Object.values(chains).map((chain) => ({
     value: chain.type,
     label: chain.stringKey,
     onSelect: () => {
-      onSelectChain(chain.type);
+      onSelect(chain.type, 'chain');
     },
     slotBefore: <Styled.Img src={chain.iconUrl} alt="" />,
   }));
 
-  const selectedOption = chains.find((item) => item.type === selectedChain);
+  const exchangeItems = Object.values(exchanges).map((exchange) => ({
+    value: exchange.type,
+    label: exchange.string,
+    onSelect: () => {
+      onSelect(exchange.type, 'exchange');
+    },
+    slotBefore: <Styled.Img src={exchange.iconUrl} alt="" />,
+  }));
+
+  const selectedChainOption = chains.find((item) => item.type === selectedChain);
+  const selectedExchangeOption = exchanges.find((item) => item.type === selectedExchange);
 
   return (
     <SearchSelectMenu
       items={[
-        {
+        exchangeItems.length > 0 && testFlags.showCEXDepositOption && {
+          group: 'exchanges',
+          groupLabel: stringGetter({ key: STRING_KEYS.EXCHANGES }),
+          items: exchangeItems,
+        },
+        chainItems.length > 0 && {
           group: 'chains',
           groupLabel: stringGetter({ key: STRING_KEYS.CHAINS }),
           items: chainItems,
         },
-      ]}
+      ].filter(isTruthy)}
       label={label || (type === TransferType.deposit ? 'Source' : 'Destination')}
     >
       <Styled.ChainRow>
-        {selectedChain ? (
+        {selectedChainOption ? (
           <>
-            <Styled.Img src={selectedOption?.iconUrl} alt="" /> {selectedOption?.stringKey}
+            <Styled.Img src={selectedChainOption.iconUrl} alt="" /> {selectedChainOption.stringKey}
+          </>
+        ) : selectedExchangeOption ? (
+          <>
+            <Styled.Img src={selectedExchangeOption.iconUrl} alt="" />{' '}
+            {selectedExchangeOption.string}
           </>
         ) : (
           stringGetter({ key: STRING_KEYS.SELECT_CHAIN })
diff --git a/src/views/forms/AccountManagementForms/WithdrawForm.tsx b/src/views/forms/AccountManagementForms/WithdrawForm.tsx
index 933b6a7..8a9d413 100644
--- a/src/views/forms/AccountManagementForms/WithdrawForm.tsx
+++ b/src/views/forms/AccountManagementForms/WithdrawForm.tsx
@@ -38,7 +38,7 @@ import { Tag } from '@/components/Tag';
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 import { Icon, IconName } from '@/components/Icon';
 
-import { ChainSelectMenu } from '@/views/forms/AccountManagementForms/ChainSelectMenu';
+import { SourceSelectMenu } from '@/views/forms/AccountManagementForms/SourceSelectMenu';
 
 import { getSubaccount } from '@/state/accountSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';
@@ -374,10 +374,10 @@ export const WithdrawForm = () => {
             </span>
           }
         />
-        <ChainSelectMenu
+        <SourceSelectMenu
           label={stringGetter({ key: STRING_KEYS.NETWORK })}
           selectedChain={chainIdStr || undefined}
-          onSelectChain={onSelectChain}
+          onSelect={onSelectChain}
         />
       </Styled.DestinationRow>
       <TokenSelectMenu selectedToken={toToken || undefined} onSelectToken={onSelectToken} />
diff --git a/src/views/forms/NobleDeposit.tsx b/src/views/forms/NobleDeposit.tsx
new file mode 100644
index 0000000..a965c3c
--- /dev/null
+++ b/src/views/forms/NobleDeposit.tsx
@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import styled, { type AnyStyledComponent } from 'styled-components';
+
+import { OpacityToken } from '@/constants/styles/base';
+import { STRING_KEYS } from '@/constants/localization';
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { useAccounts, useStringGetter } from '@/hooks';
+
+import { CopyButton } from '@/components/CopyButton';
+import { QrCode } from '@/components/QrCode';
+import { Checkbox } from '@/components/Checkbox';
+import { Icon, IconName } from '@/components/Icon';
+import { TimeoutButton } from '@/components/TimeoutButton';
+import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
+import { WithReceipt } from '@/components/WithReceipt';
+
+import { generateFadedColorVariant } from '@/lib/styles';
+
+export const NobleDeposit = () => {
+  const [hasAcknowledged, setHasAcknowledged] = useState(false);
+  const stringGetter = useStringGetter();
+  const { nobleAddress } = useAccounts();
+
+  return (
+    <>
+      <WithDetailsReceipt
+        side="bottom"
+        detailItems={[
+          {
+            key: 'nobleAddress',
+            label: stringGetter({ key: STRING_KEYS.NOBLE_ADDRESS }),
+            value: nobleAddress,
+          },
+        ]}
+      >
+        <Styled.QrCodeContainer>
+          <Styled.QrCode size={432} value={nobleAddress || ''} />
+        </Styled.QrCodeContainer>
+      </WithDetailsReceipt>
+
+      <Styled.WaitingSpan>
+        <Styled.CautionIconContainer>
+          <Icon iconName={IconName.CautionCircleStroked} />
+        </Styled.CautionIconContainer>
+
+        <p>{stringGetter({ key: STRING_KEYS.NOBLE_WARNING })}</p>
+      </Styled.WaitingSpan>
+
+      <Styled.WithReceipt
+        slotReceipt={
+          <Styled.CheckboxContainer>
+            <Checkbox
+              checked={hasAcknowledged}
+              onCheckedChange={setHasAcknowledged}
+              id="acknowledge-secret-phase-risk"
+              label={stringGetter({
+                key: STRING_KEYS.NOBLE_ACKNOWLEDGEMENT,
+              })}
+            />
+          </Styled.CheckboxContainer>
+        }
+      >
+        <TimeoutButton
+          timeoutInSeconds={8}
+          slotFinal={<CopyButton state={{ isDisabled: !hasAcknowledged }} value={nobleAddress} />}
+        />
+      </Styled.WithReceipt>
+    </>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.WaitingSpan = styled.span`
+  ${layoutMixins.row}
+  gap: 1rem;
+  color: var(--color-text-1);
+`;
+
+Styled.WithReceipt = styled(WithReceipt)`
+  --withReceipt-backgroundColor: var(--color-layer-2);
+`;
+
+Styled.QrCodeContainer = styled.div`
+  display: flex;
+  justify-content: center;
+
+  padding: 0.5rem;
+
+  background-color: var(--color-layer-2);
+  border-radius: 0.5rem;
+`;
+
+Styled.QrCode = styled(QrCode)`
+  max-height: 20rem;
+  width: fit-content;
+
+  svg {
+    max-height: 20rem;
+  }
+`;
+
+Styled.CheckboxContainer = styled.div`
+  padding: 1rem;
+  color: var(--color-text-0);
+`;
+
+Styled.CautionIconContainer = styled.div`
+  ${layoutMixins.stack}
+  min-width: 2.5rem;
+  height: 2.5rem;
+  align-items: center;
+  border-radius: 50%;
+  overflow: hidden;
+  color: var(--color-warning);
+
+  svg {
+    width: 1.125em;
+    height: 1.125em;
+    justify-self: center;
+  }
+
+  &:before {
+    content: '';
+    width: 2.5rem;
+    height: 2.5rem;
+    background-color: ${({ theme }) =>
+      generateFadedColorVariant(theme.warning, OpacityToken.Opacity16)};
+  }
+`;