@imtbl/sdk 1.2.0 → 1.4.0-alpha.2

package/dist/browser/checkout/BridgeWidget-fffec54f.js

@@ -0,0 +1 @@
+import{b9 as e,ba as t,av as s,bb as a,bc as n,r as o,u as r,bd as i,j as l,w as c,aw as d,be as u,I as x,as as p,W as E,bf as h,n as g,K as w,aL as T,bg as b,bh as m,a4 as f,aR as I,M as A,P as y,bi as S,bj as v,a as _,bk as k,U as C,bl as R,V as j,d as N,bm as D,p as L,aP as M,bn as B,ae as P,Y as W,E as O,t as G,T as F,q as V,bo as K,c as U,H as z,F as $,bp as H,bq as Z,L as J,x as q,l as Q,_ as Y,br as X,aO as ee,bs as te,aQ as se,y as ae,o as ne,A as oe,N as re,aM as ie,ad as le,aS as ce,aU as de,bt as ue,aZ as xe,S as pe,bu as Ee,aV as he,aX as ge,bv as we,bw as Te,a1 as be,a2 as me,bx as fe,e as Ie,D as Ae,a_ as ye,by as Se,v as ve,i as _e,bz as ke,b0 as Ce,bA as Re,f as je,h as Ne,a6 as De,bB as Le,bC as Me,bD as Be}from"./index-9a5fbaa1.js";import{C as Pe,a as We,b as Oe,T as Ge}from"./TopUpView-ff09517a.js";import{r as Fe,u as Ve}from"./retry-81ddd897.js";import{b as Ke,S as Ue,T as ze,F as $e,a as He,g as Ze,W as Je}from"./balance-e5a26a9d.js";const{Axios:qe,AxiosError:Qe,CanceledError:Ye,isCancel:Xe,CancelToken:et,VERSION:tt,all:st,Cancel:at,isAxiosError:nt,spread:ot,toFormData:rt,AxiosHeaders:it,HttpStatusCode:lt,formToJSON:ct,getAdapter:dt,mergeConfig:ut}=e;class xt{url;ttl;env;cacheMap;setCache(e,t){this.cacheMap[e]={data:t,ttl:(new Date).getTime()+1e3*this.ttl}}getCache(e){const t=this.cacheMap[e];return!t||t.ttl<=(new Date).getTime()?null:t.data}constructor(e){this.env=e.env,this.url=`${t[this.env]}/checkout`,this.cacheMap={},this.ttl=void 0!==e.ttl?e.ttl:60}static isHttpError=e=>"code"in e;async getTransactions(t){const{txType:s,fromAddress:a}=t;try{const t=`${this.url}/v1/transactions?from_address=${a}&tx_type=${s}`,n=this.getCache(t);if(n)return Promise.resolve(n);const o=await e.get(t);if(o.status>=400)return Promise.reject({code:o.status,message:o.statusText});const{data:r}=o;return this.setCache(t,r),Promise.resolve(r)}catch(t){let s=lt.InternalServerError,a="InternalServerError";return e.isAxiosError(t)&&(s=t.response?.status||s,a=t.message),Promise.reject({code:s,message:a})}}}var pt;!function(e){e.BRIDGE="bridge"}(pt||(pt={}));const Et={IN_PROGRESS:"in_progress",WITHDRAWAL_PENDING:"withdrawal_pending"};function ht(e){switch(e){case s.ETHEREUM:return a.ETHEREUM;case s.IMTBL_ZKEVM_TESTNET:return a.IMTBL_ZKEVM_TESTNET;case s.IMTBL_ZKEVM_MAINNET:return a.IMTBL_ZKEVM_MAINNET;case s.IMTBL_ZKEVM_DEVNET:return a.IMTBL_ZKEVM_DEVNET;case s.SEPOLIA:return a.SEPOLIA;default:return""}}function gt(e){switch(e){case s.ETHEREUM:return n.ETHEREUM;case s.IMTBL_ZKEVM_TESTNET:return n.IMTBL_ZKEVM_TESTNET;case s.IMTBL_ZKEVM_MAINNET:return n.IMTBL_ZKEVM_MAINNET;case s.IMTBL_ZKEVM_DEVNET:return n.IMTBL_ZKEVM_DEVNET;case s.SEPOLIA:return n.SEPOLIA;default:return""}}function wt(e){switch(e){case n.ETHEREUM:return s.ETHEREUM;case n.IMTBL_ZKEVM_TESTNET:return s.IMTBL_ZKEVM_TESTNET;case n.IMTBL_ZKEVM_MAINNET:return s.IMTBL_ZKEVM_MAINNET;case n.IMTBL_ZKEVM_DEVNET:return s.IMTBL_ZKEVM_DEVNET;case n.SEPOLIA:return s.SEPOLIA;default:return 0}}const Tt={web3Provider:null,walletProviderName:null,from:null,to:null,tokenBridge:null,tokenBalances:[],allowedTokens:[],token:null,amount:"0"};var bt;!function(e){e.SET_WALLETS_AND_NETWORKS="SET_WALLETS_AND_NETWORKS",e.SET_WALLET_PROVIDER_NAME="SET_WALLET_PROVIDER_NAME",e.SET_PROVIDER="SET_PROVIDER",e.SET_TOKEN_BRIDGE="SET_TOKEN_BRIDGE",e.SET_TOKEN_BALANCES="SET_TOKEN_BALANCES",e.SET_ALLOWED_TOKENS="SET_ALLOWED_TOKENS",e.SET_TOKEN_AND_AMOUNT="SET_TOKEN_AND_AMOUNT"}(bt||(bt={}));const mt=o.createContext({bridgeState:{...Tt,checkout:{}},bridgeDispatch:()=>{}});mt.displayName="BridgeContext";const ft=(e,t)=>{switch(t.payload.type){case bt.SET_WALLETS_AND_NETWORKS:return{...e,from:t.payload.from,to:t.payload.to};case bt.SET_WALLET_PROVIDER_NAME:return{...e,walletProviderName:t.payload.walletProviderName};case bt.SET_PROVIDER:return{...e,web3Provider:t.payload.web3Provider};case bt.SET_TOKEN_BRIDGE:return{...e,tokenBridge:t.payload.tokenBridge};case bt.SET_TOKEN_BALANCES:return{...e,tokenBalances:t.payload.tokenBalances};case bt.SET_ALLOWED_TOKENS:return{...e,allowedTokens:t.payload.allowedTokens};case bt.SET_TOKEN_AND_AMOUNT:return{...e,token:t.payload.token,amount:t.payload.amount};default:return e}};function It({testId:e,walletProviderName:t,onWalletClick:s,loading:a}){const{t:n}=r(),[d,u]=o.useState(!1),x={[i.PASSPORT]:"PassportSymbolOutlined",[i.METAMASK]:"MetaMaskSymbol"};return l.jsxs(c,{testId:`${e}-wallet-list-${t}`,size:"medium",emphasized:!0,onClick:async()=>{if(!a){u(!0);try{await s(t)}finally{u(!1)}}},children:[l.jsx(c.FramedLogo,{logo:x[t],sx:{backgroundColor:"base.color.translucent.standard.200"}}),l.jsx(c.Label,{size:"medium",children:n(`wallets.${t}.heading`)}),d&&l.jsx(c.StatefulButtCon,{state:"loading",icon:"Loading"})]})}const At={display:"flex",flexDirection:"column",gap:"base.spacing.x1"};function yt({testId:e,drawerText:t,walletOptions:s,showWalletSelectorTarget:a,showDrawer:n,setShowDrawer:r,onWalletItemClick:i}){const[c,x]=o.useState(!1),{heading:p,defaultText:E}=t,h=async e=>{x(!0);try{await i(e)}catch(e){console.error(e)}finally{x(!1)}};return l.jsxs(d,{headerBarTitle:p,size:"full",onCloseDrawer:()=>{c||r(!1)},visible:n,children:[a&&l.jsx(d.Target,{children:l.jsx(Ke,{testId:`${e}-wallet-form-control`,textAlign:"left",children:l.jsx(u,{testId:`${e}-wallet-select`,defaultLabel:E??"",size:"large",targetClickOveride:()=>r(!0)})})}),l.jsx(d.Content,{sx:At,children:s.map((t=>l.jsx(It,{testId:e,loading:c,walletProviderName:t,onWalletClick:h},t)))})]})}const St=(e,t)=>{const s=new CustomEvent(x.IMTBL_BRIDGE_WIDGET_EVENT,{detail:{type:p.TRANSACTION_SENT,data:{transactionHash:t}}});console.log("bridge success ",e,s),void 0!==e&&e.dispatchEvent(s)};function vt(e){const t=new CustomEvent(x.IMTBL_BRIDGE_WIDGET_EVENT,{detail:{type:p.CLOSE_WIDGET,data:{}}});console.log("bridge close ",e,t),void 0!==e&&e.dispatchEvent(t)}function _t(){return l.jsxs(E,{sx:{pt:"base.spacing.x5",px:"base.spacing.x4"},children:[l.jsx(h,{sx:{h:"base.spacing.x4",w:"base.spacing.x32",mb:"base.spacing.x2",mt:"base.spacing.x2"}}),l.jsx(E,{sx:{mb:"base.spacing.x5"},children:l.jsx(c,{shimmer:!0,emphasized:!0,size:"small"})}),l.jsx(E,{sx:{mb:"base.spacing.x5"},children:l.jsx(c,{shimmer:!0,emphasized:!0,size:"small"})}),l.jsx(E,{sx:{mb:"base.spacing.x5"},children:l.jsx(c,{shimmer:!0,emphasized:!0,size:"small"})})]})}const kt={px:"base.spacing.x4",display:"flex",flexDirection:"column",height:"100%"},Ct={flexGrow:"1",flexShrink:"0",flexBasis:"0"},Rt={flexGrow:"0",flexShrink:"1",mt:"base.spacing.x2"},jt={bg:"base.color.translucent.emphasis.100",borderRadius:"base.borderRadius.x4",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",height:"100%",px:"base.spacing.x5"};function Nt({openWalletDrawer:e}){const{t:t}=r();return l.jsxs(E,{sx:jt,children:[l.jsx(g,{sx:{mb:"base.spacing.x8"},children:t("views.TRANSACTIONS.status.emptyState.notConnected.body")}),l.jsx(w,{variant:"secondary",size:"medium",testId:"transactions-connect-wallet-button",onClick:e,children:t("views.TRANSACTIONS.status.emptyState.notConnected.buttonText")})]})}const Dt={backgroundColor:"base.color.neutral.800",px:"base.spacing.x4",p:"base.spacing.x5",borderRadius:"base.borderRadius.x6"},Lt={color:"base.color.text.secondary"};function Mt({checkout:e,isPassport:t}){const{support:{body1:s,body2:a,body3:n,supportLink:r,passport:i}}=T.views[b.TRANSACTIONS],[c,d]=o.useState("");return o.useEffect((()=>{e&&d(m[e.config.environment])}),[e]),l.jsx(E,{sx:Dt,children:l.jsxs(E,{sx:{display:"flex",flexDirection:"column"},children:[l.jsxs(E,{children:[l.jsx(g,{size:"small",children:s}),l.jsxs(g,{size:"small",sx:Lt,children:[a,l.jsx(f,{size:"small",rc:l.jsx("a",{target:"_blank",href:r,rel:"noreferrer"}),children:n})]})]}),t&&l.jsxs(g,{size:"small",sx:Lt,children:[i.body1," ",l.jsx(f,{size:"small",rc:l.jsx("a",{target:"_blank",href:c,rel:"noreferrer"}),children:i.body2})]})]})})}const Bt={display:"flex",flexDirection:"column",borderRadius:"base.borderRadius.x4",bg:"base.color.translucent.emphasis.100"},Pt={p:"base.spacing.x3",d:"flex",justifyContent:"space-between",position:"relative"},Wt={display:"flex",flexGrow:"1",alignItems:"center",gap:"base.spacing.x2"};function Ot({transaction:e}){const t=wt(e.details.from_chain),s=wt(e.details.to_chain);return l.jsxs(E,{sx:{display:"flex",px:"base.spacing.x4",gap:"base.spacing.x2"},children:[l.jsx(I,{icon:A[t],sx:{w:"base.icon.size.250",fill:y[t]},variant:"bold"}),l.jsxs(E,{sx:{display:"flex",flexDirection:"column",flexGrow:"1"},children:[l.jsx(g,{size:"xxSmall",sx:{color:"base.color.translucent.standard.900"},children:S[t]}),l.jsx(v,{size:"xxSmall",sx:{color:"base.color.translucent.standard.600"},text:e.details.from_address})]}),l.jsx(E,{sx:{flexGrow:"1"}}),l.jsx(I,{icon:"ArrowForward",sx:{w:"base.icon.size.250",fill:"base.color.brand.4"}}),l.jsx(E,{sx:{flexGrow:"1"}}),l.jsx(I,{icon:A[s],sx:{w:"base.icon.size.250",fill:y[s]},variant:"bold"}),l.jsxs(E,{sx:{display:"flex",flexDirection:"column",flexGrow:"1"},children:[l.jsx(g,{size:"xxSmall",sx:{color:"base.color.translucent.standard.900"},children:S[s]}),l.jsx(v,{size:"xxSmall",sx:{color:"base.color.translucent.standard.600"},text:e.details.to_address})]})]})}function Gt({label:e,details:t,transaction:s,fiatAmount:a,amount:n}){const{track:r}=_(),i=o.useMemo((()=>`${t.link}${t.hash}`),[t]);return l.jsx(E,{testId:`transaction-item-${s.blockchain_metadata.transaction_hash}`,sx:Bt,children:l.jsxs(k,{chevronSide:"right",sx:{button:{p:"base.spacing.x1"},article:{pr:"base.spacing.x10"}},onExpandChange:e=>e&&r({userJourney:C.BRIDGE,screen:"TransactionItem",control:"Accordion",controlType:"Button"}),children:[l.jsx(k.TargetLeftSlot,{sx:{pr:"base.spacing.x2"},children:l.jsxs(c,{size:"xSmall",children:[l.jsx(c.FramedIcon,{icon:"Coins",circularFrame:!0}),l.jsx(c.Label,{children:e}),l.jsx(c.Caption,{children:l.jsx(f,{size:"xSmall",rc:l.jsx("a",{target:"_blank",href:i,rel:"noreferrer",onClick:e=>{return s=t,e.stopPropagation(),void r({userJourney:C.BRIDGE,screen:"TransactionItem",control:"Details",controlType:"Link",extras:{linkDetail:s}});var s}}),children:t.text})}),l.jsx(c.PriceDisplay,{fiatAmount:a,price:n})]})}),l.jsxs(k.ExpandedContent,{sx:{pr:"0",pl:"0",mb:"base.spacing.x3",gap:"0"},children:[l.jsx(R,{size:"xSmall",sx:{px:"base.spacing.x2"}}),l.jsx(Ot,{transaction:s})]})]})})}const Ft=e=>{let t=440;return e&&(t-=20),{backgroundColor:"base.color.neutral.800",px:"base.spacing.x4",pt:"base.spacing.x5",pb:"base.spacing.x4",borderRadius:"base.borderRadius.x6",h:`${t}px`,w:"100%",overflowY:"scroll"}},Vt={borderRadius:"base.borderRadius.x4",display:"flex",flexDirection:"column",gap:"base.spacing.x5"};function Kt({label:e,transaction:t,fiatAmount:s,amount:a}){const{viewDispatch:n}=o.useContext(j),{track:i}=_(),d=r(),u=o.useMemo((()=>(new Date).getTime()),[]),x=o.useMemo((()=>t.details.current_status.withdrawal_ready_at?new Date(t.details.current_status.withdrawal_ready_at):void 0),[t]),p=t.details.current_status.status===Et.WITHDRAWAL_PENDING,h=new Intl.RelativeTimeFormat(d[1].language||"en",{numeric:"auto"}),T=o.useMemo((()=>{if(!p||void 0===x)return"";const e=(x.getTime()-u)/6e4;if(e<=1)return"in 1 minute";if(e<60)return h.format(Math.ceil(e),"minute");const t=e/60;if(e<1440)return h.format(Math.ceil(t),"hour");const s=t/24;return h.format(Math.ceil(s),"day")}),[u,d[1].language]),m=!!x&&x.getTime()<u,f=o.useMemo((()=>!0===m?d.t("views.TRANSACTIONS.status.withdrawalPending.withdrawalReadyText"):`${d.t("views.TRANSACTIONS.status.withdrawalPending.withdrawalDelayText")} ${T}`),[T,d[1].language]);return l.jsxs(E,{testId:`transaction-item-${t.blockchain_metadata.transaction_hash}`,sx:Bt,children:[p&&l.jsxs(l.Fragment,{children:[l.jsxs(E,{sx:Pt,children:[l.jsxs(E,{sx:Wt,children:[l.jsx(I,{icon:"Alert",variant:"bold",sx:{fill:m?"base.color.status.fatal.bright":"base.color.status.attention.bright",w:"base.icon.size.200"}}),l.jsx(g,{testId:`transaction-item-${t.blockchain_metadata.transaction_hash}-action-message`,size:"xSmall",sx:{color:"base.color.text.secondary"},children:f})]}),p&&m&&l.jsx(w,{testId:`transaction-item-${t.blockchain_metadata.transaction_hash}-action-button`,variant:"primary",size:"small",onClick:()=>{n({payload:{type:N.UPDATE_VIEW,view:{type:b.CLAIM_WITHDRAWAL,transaction:t}}})},children:d.t("views.TRANSACTIONS.status.withdrawalPending.actionButtonText")})]}),l.jsx(R,{size:"small",sx:{color:"base.color.translucent.emphasis.300",opacity:.1}})]}),l.jsxs(k,{chevronSide:"right",sx:{button:{p:"base.spacing.x1"},article:{pr:"base.spacing.x10"},borderTopRightRadius:"0",borderTopLeftRadius:"0"},onExpandChange:e=>e&&i({userJourney:C.BRIDGE,screen:"TransactionItem",control:"Accordion",controlType:"Button"}),children:[l.jsx(k.TargetLeftSlot,{sx:{pr:"base.spacing.x2"},children:l.jsxs(c,{size:"xSmall",children:[l.jsx(c.FramedIcon,{icon:"Coins",circularFrame:!0}),l.jsx(c.Label,{children:e}),l.jsx(c.Caption,{children:d.t("views.TRANSACTIONS.status.withdrawalPending.caption")}),l.jsx(c.PriceDisplay,{fiatAmount:s,price:a})]})}),l.jsxs(k.ExpandedContent,{sx:{pr:"0",pl:"0",mb:"base.spacing.x3",gap:"0"},children:[l.jsx(R,{size:"xSmall",sx:{px:"base.spacing.x2"}}),l.jsx(Ot,{transaction:t})]})]})]})}const Ut={display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",p:"base.spacing.x2",pb:"base.spacing.x4"};function zt({onChangeWalletClick:e}){const{t:t}=r(),{bridgeState:{from:s}}=o.useContext(mt),{track:a}=_(),n=s?.walletAddress||"",i=D(s?.web3Provider),c=L(s?.web3Provider);return l.jsxs(E,{sx:Ut,children:[l.jsxs(E,{sx:{display:"flex",alignItems:"center",gap:"base.spacing.x1"},children:[i&&!c&&l.jsx(M,{logo:"MetaMaskSymbol",sx:{width:"base.icon.size.400"}}),!i&&c&&l.jsx(M,{logo:"PassportSymbolOutlined",sx:{width:"base.icon.size.400",pr:"base.spacing.x1"}}),l.jsx(v,{leftSideLength:6,rightSideLength:4,text:n})]}),l.jsx(w,{size:"small",variant:"tertiary",onClick:()=>{a({userJourney:C.BRIDGE,screen:b.TRANSACTIONS,controlType:"Button",control:"Pressed"}),e()},children:t("views.TRANSACTIONS.changeWallet.buttonText")})]})}function $t({checkout:e,transactions:t,knownTokenMap:s,isPassport:a,changeWallet:n}){const{cryptoFiatState:i}=o.useContext(Pe),{t:c}=r(),{fiatPricePrefix:d}=T.views[b.TRANSACTIONS],[u,x]=o.useState("");o.useEffect((()=>{e&&x(B[e.config.environment])}),[e]);const p=o.useCallback(((e,t)=>e.details.current_status.status===Et.WITHDRAWAL_PENDING&&t.details.current_status.status!==Et.WITHDRAWAL_PENDING?-1:e.details.current_status.status===t.details.current_status.status?0:1),[]);return l.jsxs(E,{sx:Ft(a),children:[l.jsx(zt,{onChangeWalletClick:n}),l.jsx(E,{testId:"move-transaction-list",sx:Vt,children:t.sort(p).map((e=>{const t=e.blockchain_metadata.transaction_hash,a=s[e.details.from_chain][e.details.from_token_address.toLowerCase()],n=P.formatUnits(e.details.amount,a.decimals),o=W(n,a.symbol,i.conversions);return e.details.current_status.status===Et.WITHDRAWAL_PENDING?l.jsx(Kt,{label:a.name,transaction:e,fiatAmount:`${d}${o}`,amount:n},t):l.jsx(Gt,{label:a.name,details:{text:c("views.TRANSACTIONS.status.inProgress.stepInfo"),link:u,hash:t},transaction:e,fiatAmount:`${d}${o}`,amount:n},t)}))})]})}const Ht={backgroundColor:"base.color.neutral.800",px:"base.spacing.x4",pt:"base.spacing.x5",pb:"base.spacing.x4",borderRadius:"base.borderRadius.x6",h:"100%",w:"100%",display:"flex",flexDirection:"column"},Zt={display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",padding:"base.spacing.x5",flex:1},Jt={mb:"base.spacing.x8",color:"base.color.text.secondary"},qt={color:"base.color.text.secondary"};function Qt({checkout:e,isPassport:t,changeWallet:s}){const{page:a}=_(),{t:n}=r(),[i,c]=o.useState("");return o.useEffect((()=>{e&&c(m[e.config.environment])}),[e]),o.useEffect((()=>{a({userJourney:C.BRIDGE,screen:"NoTransactions"})}),[]),l.jsxs(E,{sx:Ht,children:[l.jsx(zt,{onChangeWalletClick:s}),l.jsxs(E,{sx:Zt,children:[l.jsx(g,{size:"small",sx:Jt,children:n("views.TRANSACTIONS.status.noTransactions.body")}),t&&l.jsxs(g,{size:"small",sx:qt,children:[n("views.TRANSACTIONS.status.noTransactions.passport.body")," ",l.jsx(f,{size:"small",rc:l.jsx("a",{target:"_blank",href:i,rel:"noreferrer"}),children:n("views.TRANSACTIONS.status.noTransactions.passport.link")})]})]})]})}function Yt({onBackButtonClick:e}){const{eventTargetState:{eventTarget:t}}=o.useContext(O),{cryptoFiatDispatch:s}=o.useContext(Pe),{bridgeDispatch:a,bridgeState:{checkout:n,from:c}}=o.useContext(mt),{page:d}=_(),{t:u}=r(),{track:x}=_(),[p,h]=o.useState(!0),[g,w]=o.useState(void 0),[T,b]=o.useState([]),[m,f]=o.useState(!1),I=L(c?.web3Provider),A=o.useCallback((async()=>{if(!n)return{};const e=G(n.config);try{return((await n.getTokenAllowList({type:F.BRIDGE,chainId:e})).tokens??[]).reduce(((e,t)=>(e[t.address.toLowerCase()]=t,e)),{})}catch(e){return console.error(e),[]}}),[n]),y=o.useCallback((async()=>{if(!c?.web3Provider)return{};if(!c?.walletAddress)return{};const e=V(n.config);try{return(await n.getAllBalances({provider:c?.web3Provider,walletAddress:c?.walletAddress,chainId:e})).balances.reduce(((e,t)=>(e[t.token.address.toLowerCase()]=t.token,e)),{})}catch(e){return console.error(e),[]}}),[n,c]),S=o.useCallback((async e=>{x({userJourney:C.BRIDGE,screen:"EmptyStateNotConnected",control:"WalletProvider",controlType:"Select",extras:{walletProviderName:e}});try{const t=await K(n,e,!0),s=await t.getNetwork(),o=await(t?.getSigner().getAddress())??"";b([]),a({payload:{type:bt.SET_WALLETS_AND_NETWORKS,from:{web3Provider:t,walletAddress:o.toLowerCase(),network:s.chainId},to:null}})}catch(e){console.error(e)}finally{f(!1)}}),[n,c]),v=async e=>{const t=gt(G(n.config)),a=gt(V(n.config)),[o,r]=await Promise.all([A(),y()]),i={};Object.entries(e).forEach((([s,n])=>{(e[s]===t&&!o[s]||e[s]===a&&!r[s])&&(i[s]=n)}));const l=new H(n.config.networkMap.get(G(n.config))?.rpcUrls[0]),c=new H(n.config.networkMap.get(V(n.config))?.rpcUrls[0]),d=[],u=[];Object.entries(i).forEach((([e,s])=>{s===t?d.push(n.getTokenInfo({provider:l,tokenAddress:e})):u.push(n.getTokenInfo({provider:c,tokenAddress:e}))}));const x=await Promise.allSettled(d),p=await Promise.allSettled(u);x.filter((e=>"fulfilled"===e.status)).forEach((e=>{const t=e;o[t.value.address.toLowerCase()]=t.value})),p.filter((e=>"fulfilled"===e.status)).forEach((e=>{const t=e;r[t.value.address.toLowerCase()]=t.value}));const E=[];return Object.values(o).forEach((e=>E.push(e.symbol.toLowerCase()))),Object.values(r).forEach((e=>E.push(e.symbol.toLowerCase()))),s({payload:{type:We.SET_TOKEN_SYMBOLS,tokenSymbols:E}}),{[t]:o,[a]:r}},k=o.useCallback((async(e,t)=>new xt({env:e}).getTransactions({txType:pt.BRIDGE,fromAddress:t})),[]),R=o.useCallback((async()=>{if(!c?.walletAddress)return;const e=await k(n.config.environment,c?.walletAddress),t={};return e.result.forEach((e=>{t[e.details.from_token_address]=e.details.from_chain})),{tokens:await v(t),transactions:e.result}}),[c,k]),j=o.useMemo((()=>{const e=[i.METAMASK];return n.passport&&e.push(i.PASSPORT),e}),[n]);return o.useEffect((()=>{(async()=>{h(!0);const e=await Fe(R,Z);if(!e)return void h(!1);const t=e.transactions.filter((t=>{const s=e.tokens[t.details.from_chain];if(!s)return!1;return!!s[t.details.from_token_address.toLowerCase()]}));w(e.tokens),b(t),h(!1)})()}),[c?.walletAddress,n]),o.useEffect((()=>{d({userJourney:C.BRIDGE,screen:"Transactions"})}),[]),l.jsx(U,{testId:"bridge-view",header:l.jsx(z,{showBack:!0,onBackButtonClick:e,title:u("views.TRANSACTIONS.layoutHeading"),onCloseButtonClick:()=>vt(t)}),footer:l.jsx($,{}),children:l.jsxs(E,{sx:kt,children:[l.jsxs(E,{sx:Ct,children:[!c?.web3Provider&&l.jsx(Nt,{openWalletDrawer:()=>f(!0)}),c?.web3Provider&&p&&l.jsx(_t,{}),c?.web3Provider&&!p&&T.length>0&&g&&l.jsx($t,{checkout:n,transactions:T,knownTokenMap:g,isPassport:I,changeWallet:()=>f(!0)}),c?.web3Provider&&!p&&0===T.length&&l.jsx(Qt,{checkout:n,isPassport:I,changeWallet:()=>f(!0)})]}),c?.web3Provider&&T.length>0&&l.jsx(E,{sx:Rt,children:l.jsx(Mt,{checkout:n,isPassport:I})}),l.jsx(yt,{testId:"select-wallet-drawer",drawerText:{heading:u("views.TRANSACTIONS.walletSelection.heading")},showWalletSelectorTarget:!1,walletOptions:j,showDrawer:m,setShowDrawer:e=>{f(e)},onWalletItemClick:S})]})})}function Xt({transactionResponse:e}){const{t:t}=r(),{viewDispatch:s}=o.useContext(j),{page:a}=_();return o.useEffect((()=>{a({userJourney:C.BRIDGE,screen:"ClaimWithdrawalInProgress"})}),[]),o.useEffect((()=>{e&&(async()=>{try{const t=await e.wait();if(1===t.status)return void s({payload:{type:N.UPDATE_VIEW,view:{type:b.CLAIM_WITHDRAWAL_SUCCESS,transactionHash:t.transactionHash}}});s({payload:{type:N.UPDATE_VIEW,view:{type:b.CLAIM_WITHDRAWAL_FAILURE,transactionHash:t.transactionHash,reason:"Transaction failed"}}})}catch(e){console.error(e),s({payload:{type:N.UPDATE_VIEW,view:{type:b.CLAIM_WITHDRAWAL_FAILURE,transactionHash:"",reason:"Transaction failed"}}})}})()}),[e]),l.jsx(J,{loadingText:t("views.CLAIM_WITHDRAWAL.IN_PROGRESS.loading.text"),showFooterLogo:!0})}function es(e){return e?e.substring(0,6).concat("...").concat(e.substring(e.length-4)):""}const ts={height:"100%",display:"flex",flexDirection:"column",paddingX:"base.spacing.x4"},ss={paddingTop:"base.spacing.x10",paddingBottom:"base.spacing.x4"},as={display:"flex",flexDirection:"column",paddingY:"base.spacing.x6"},ns={[s.IMTBL_ZKEVM_DEVNET]:"base.color.text.link.primary",[s.IMTBL_ZKEVM_TESTNET]:"base.color.text.link.primary",[s.IMTBL_ZKEVM_MAINNET]:"base.color.text.link.primary",[s.ETHEREUM]:"base.color.accent.5",[s.SEPOLIA]:"base.color.accent.5"},os=e=>({backgroundColor:ns[e],"& svg":{fill:"base.color.brand.2"}}),rs={[s.IMTBL_ZKEVM_DEVNET]:"Immutable",[s.IMTBL_ZKEVM_MAINNET]:"Immutable",[s.IMTBL_ZKEVM_TESTNET]:"Immutable",[s.ETHEREUM]:"EthToken",[s.SEPOLIA]:"EthToken"};function is({testId:e,chainId:t,chainName:s,onNetworkClick:a}){return l.jsxs(c,{testId:`${e}-network-list-${t}`,size:"medium",emphasized:!0,onClick:async()=>{await a(t)},sx:{marginBottom:"base.spacing.x1"},children:[l.jsx(c.FramedIcon,{icon:rs[t],circularFrame:!0,sx:os(t)}),l.jsx(c.Label,{size:"medium",children:s})]})}const ls={[s.IMTBL_ZKEVM_DEVNET]:"base.color.text.link.primary",[s.IMTBL_ZKEVM_TESTNET]:"base.color.text.link.primary",[s.IMTBL_ZKEVM_MAINNET]:"base.color.text.link.primary",[s.ETHEREUM]:"base.color.accent.5",[s.SEPOLIA]:"base.color.accent.5"},cs={width:"100%",backgroundColor:"base.color.translucent.emphasis.100",borderRadius:"base.borderRadius.x4",paddingX:"base.spacing.x3",paddingY:"base.spacing.x5",display:"flex",flexDirection:"row",gap:"base.spacing.x4",alignItems:"center","&:hover":{cursor:"pointer",backgroundColor:"base.color.translucent.emphasis.200"}},ds=e=>({width:"base.icon.size.500",padding:e===i.PASSPORT?"base.spacing.x1":"",backgroundColor:"base.color.translucent.standard.200",borderRadius:"base.borderRadius.x2"}),us={color:"base.color.text.secondary"},xs={paddingY:"base.spacing.x6",borderRadius:"base.borderRadius.x18"},ps=e=>({fill:"base.color.brand.2",width:"base.icon.size.300",backgroundColor:ls[e],borderRadius:"100%",padding:"base.spacing.x1"}),Es={[s.IMTBL_ZKEVM_DEVNET]:"Immutable",[s.IMTBL_ZKEVM_MAINNET]:"Immutable",[s.IMTBL_ZKEVM_TESTNET]:"Immutable",[s.ETHEREUM]:"EthToken",[s.SEPOLIA]:"EthToken"},hs={[i.PASSPORT]:"PassportSymbolOutlined",[i.METAMASK]:"MetaMaskSymbol"};function gs({testId:e,walletName:t,walletAddress:s,chainId:a,disableNetworkButton:n=!1,onWalletClick:o,onNetworkClick:r}){const c=ht(a),d=t===i.METAMASK?"Metamask":"Passport";return l.jsxs(E,{testId:`${e}-${t}-${a}-button-wrapper`,sx:cs,onClick:o,children:[l.jsx(M,{logo:hs[t],sx:ds(t)}),l.jsxs(E,{sx:{display:"flex",flexDirection:"column",flex:1},children:[l.jsx(q,{size:"xSmall",children:d}),l.jsx(g,{size:"xSmall",sx:us,children:s})]}),l.jsxs(w,{testId:`${e}-network-${a}-button`,size:"small",disabled:n,onClick:e=>{e.stopPropagation(),r(e)},variant:"tertiary",sx:xs,children:[l.jsx(w.Icon,{icon:Es[a],sx:ps(a)}),c]})]})}const ws="wallet-network-selector";function Ts(){const{t:e}=r(),{bridgeState:{checkout:t,from:s,to:a},bridgeDispatch:n}=o.useContext(mt),{viewDispatch:c}=o.useContext(j),{track:u}=_(),x=G(t.config),p=ht(x),h=V(t.config),g=ht(h),T=o.useRef(),[m,f]=o.useState(!1),[I,A]=o.useState(!1),[y,S]=o.useState(),[v,k]=o.useState(),[R,M]=o.useState(""),[B,P]=o.useState(!1),[W,O]=o.useState(),[F,U]=o.useState(),[z,$]=o.useState(""),H=y&&v,Z=W&&F,J=o.useMemo((()=>y?L(y)?i.PASSPORT:i.METAMASK:null),[y]),Q=o.useMemo((()=>y?L(W)?i.PASSPORT:i.METAMASK:null),[W]),Y=o.useMemo((()=>{const e=[i.METAMASK];return t.passport&&e.push(i.PASSPORT),e}),[t]),X=o.useMemo((()=>{const e=[i.METAMASK];return t.passport&&v===x&&J===i.METAMASK&&e.push(i.PASSPORT),e}),[t,v,J]);o.useEffect((()=>{s&&a&&(R!==s?.walletAddress&&u({userJourney:C.BRIDGE,screen:"WalletAndNetwork",control:"FromWallet",controlType:"Select",extras:{walletAddress:s?.walletAddress}}),v!==s?.network&&u({userJourney:C.BRIDGE,screen:"WalletAndNetwork",control:"FromNetwork",controlType:"Select",extras:{chainId:s?.network}}),z!==a?.walletAddress&&u({userJourney:C.BRIDGE,screen:"WalletAndNetwork",control:"ToWallet",controlType:"Select",extras:{walletAddress:a?.walletAddress}}),F!==a?.network&&u({userJourney:C.BRIDGE,screen:"WalletAndNetwork",control:"ToNetwork",controlType:"Select",extras:{chainId:a?.network}}),S(s.web3Provider),M(s.walletAddress.toLowerCase()),k(s.network),O(a.web3Provider),$(a.walletAddress.toLowerCase()),U(a.network),n({payload:{type:bt.SET_WALLETS_AND_NETWORKS,from:null,to:null}}))}),[s,a]);const ee=o.useCallback((async e=>{let s;try{return s=await K(t,e),e===i.PASSPORT&&(T.current=s),s}catch(e){throw console.error(e),e}}),[t]);function te(){O(null),U(null)}const se=o.useCallback((async e=>{let t;if(te(),e===i.PASSPORT&&T.current&&(t=T.current),!t)try{t=await ee(e)}catch(e){return}S(t);const s=await t.getSigner().getAddress();if(M(s.toLowerCase()),L(t))return k(h),void f(!1);k(null),f(!1),setTimeout((()=>A(!0)),500)}),[J,T.current]),ae=o.useCallback((async e=>{if(!y)return;if(te(),L(y))return A(!1),void k(e);const s=await(y?.getNetwork());if(s?.chainId===e)return A(!1),void k(e);let a;try{a=await t.switchNetwork({provider:y,chainId:e}),S(a.provider),A(!1),k(a.network.chainId)}catch(e){console.error(e)}}),[t,y,J,v]),ne=o.useCallback((async e=>{if(J===e){O(y);const e=await y.getSigner().getAddress();$(e.toLowerCase())}else{let t;if(e===i.PASSPORT&&T.current&&(t=T.current),!t)try{t=await ee(e)}catch(e){return}O(t);const s=await t.getSigner().getAddress();$(s.toLowerCase())}U(v===x?h:x),P(!1)}),[J,v,y,T.current]),oe=o.useCallback((()=>{y&&v&&W&&F&&(n({payload:{type:bt.SET_TOKEN_BALANCES,tokenBalances:[]}}),n({payload:{type:bt.SET_ALLOWED_TOKENS,allowedTokens:[]}}),n({payload:{type:bt.SET_WALLETS_AND_NETWORKS,from:{web3Provider:y,walletAddress:R.toLowerCase(),network:v},to:{web3Provider:W,walletAddress:z.toLowerCase(),network:F}}}),u({userJourney:C.BRIDGE,screen:"WalletAndNetwork",control:"Next",controlType:"Button",extras:{fromWalletAddress:R,fromNetwork:v,fromWallet:{address:R,isPassportWallet:L(y),isMetaMask:D(y)},toWalletAddress:z,toNetwork:F,toWallet:{address:z,isPassportWallet:L(W),isMetaMask:D(W)}}}),c({payload:{type:N.UPDATE_VIEW,view:{type:b.BRIDGE_FORM}}}))}),[y,v,R,W,F,z]);return l.jsxs(E,{testId:ws,sx:ts,children:[l.jsx(q,{testId:`${ws}-heading`,size:"small",weight:"regular",sx:ss,children:e("views.WALLET_NETWORK_SELECTION.heading")}),l.jsx(q,{size:"xSmall",sx:{paddingBottom:"base.spacing.x2"},children:e("views.WALLET_NETWORK_SELECTION.fromFormInput.heading")}),l.jsx(yt,{testId:`${ws}-from`,drawerText:{heading:e("views.WALLET_NETWORK_SELECTION.fromFormInput.walletSelectorHeading"),defaultText:e("views.WALLET_NETWORK_SELECTION.fromFormInput.selectDefaultText")},showWalletSelectorTarget:!H,walletOptions:Y,showDrawer:m,setShowDrawer:f,onWalletItemClick:se}),H&&J&&l.jsxs(E,{sx:{display:"flex",flexDirection:"column",gap:"base.spacing.x10"},children:[l.jsx(gs,{testId:ws,walletName:J,walletAddress:es(R),chainId:v,onWalletClick:()=>{f(!0)},onNetworkClick:()=>A(!0)}),l.jsxs(E,{children:[l.jsx(q,{size:"xSmall",sx:{paddingBottom:"base.spacing.x2"},children:e("views.WALLET_NETWORK_SELECTION.toFormInput.heading")}),l.jsx(yt,{testId:`${ws}-to`,drawerText:{heading:e("views.WALLET_NETWORK_SELECTION.toFormInput.walletSelectorHeading"),defaultText:e("views.WALLET_NETWORK_SELECTION.toFormInput.selectDefaultText")},showWalletSelectorTarget:!Z,walletOptions:X,showDrawer:B,setShowDrawer:P,onWalletItemClick:ne})]})]}),l.jsx(d,{headerBarTitle:e("views.WALLET_NETWORK_SELECTION.fromFormInput.networkSelectorHeading"),size:"full",onCloseDrawer:()=>{A(!1)},visible:I,children:l.jsxs(d.Content,{children:[l.jsx(is,{testId:ws,chainName:g,onNetworkClick:ae,chainId:h},g),J===i.METAMASK&&l.jsx(is,{testId:ws,chainName:p,onNetworkClick:ae,chainId:x},p)]})}),Z&&Q&&l.jsxs(E,{sx:{flex:1,display:"flex",flexDirection:"column",justifyContent:"space-between"},children:[l.jsx(gs,{testId:ws,walletName:Q,walletAddress:es(z),chainId:F,disableNetworkButton:!0,onWalletClick:()=>{P(!0)},onNetworkClick:()=>{}}),l.jsx(E,{sx:as,children:l.jsx(w,{testId:`${ws}-submit-button`,size:"large",onClick:oe,children:e("views.WALLET_NETWORK_SELECTION.submitButton.text")})})]})]})}function bs(){const{t:e}=r(),{viewDispatch:t}=o.useContext(j),{eventTargetState:{eventTarget:s}}=o.useContext(O),{page:a}=_();return o.useEffect((()=>{a({userJourney:C.BRIDGE,screen:"WalletNetworkSelection"})}),[]),l.jsx(U,{testId:"bridge-view",header:l.jsx(z,{title:e("views.WALLET_NETWORK_SELECTION.layoutHeading"),onCloseButtonClick:()=>vt(s),rightActions:l.jsx(Q,{icon:"Minting",sx:Y(),onClick:()=>{t({payload:{type:N.UPDATE_VIEW,view:{type:b.TRANSACTIONS}}})},testId:"move-transactions-button"})}),footer:l.jsx($,{}),children:l.jsx(Ts,{})})}function ms(e,t){const{validation:s}=T.views[b.BRIDGE_FORM];return e&&0!==parseFloat(e)?t&&Number(e)>Number(t)?s.insufficientBalance:"":s.noAmountInputted}const fs={height:"100%",display:"flex",flexDirection:"column",justifyContent:"space-between",paddingTop:"base.spacing.x10"},Is={paddingTop:"base.spacing.x4",display:"flex",gap:"base.spacing.x1"},As={display:"flex",flexDirection:"column",paddingY:"base.spacing.x6",paddingX:"base.spacing.x4"},ys={backgroundColor:"base.color.translucent.emphasis.100"},Ss={marginBottom:"base.spacing.x4",color:"base.color.text.secondary"},vs={width:"base.icon.size.400"},_s={display:"flex",flexDirection:"column",alignItems:"center",paddingTop:"base.spacing.x6",paddingBottom:"base.spacing.x1",height:"100%"},ks={color:"base.color.text.secondary",fontFamily:"base.font.family.heading.secondary",textAlign:"center",marginTop:"15px"},Cs={display:"flex",flexDirection:"column",justifyContent:"center",gap:"base.spacing.x2",height:"100%",width:"100%"},Rs={width:"100%",height:"base.spacing.x16"},js={display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",paddingTop:"base.spacing.x6"};function Ns({environment:e,onCloseDrawer:t,visible:s,showHeaderBar:a,walletAddress:n,showAdjustAmount:r,tokenSymbol:i,onAddCoinsClick:c}){const{content:u,buttons:x}=T.drawers.notEnoughGas,[p,h]=o.useState(!1),b=te(e),m=se(e),f=i===X?`${u.eth.heading}`:`${u.imx.heading}`,I=i===X?`${u.eth.body}`:`${u.imx.body}`,A=o.useCallback((()=>{n&&""!==n&&navigator.clipboard.writeText(n),h(!0),setTimeout((()=>{h(!1)}),3e3)}),[n]);return l.jsx(d,{headerBarTitle:void 0,size:"full",onCloseDrawer:t,visible:s,showHeaderBar:a,children:l.jsx(d.Content,{children:l.jsxs(E,{testId:"not-enough-gas-bottom-sheet",sx:_s,children:[l.jsx(ee,{imageUrl:i===X?b:m,sx:{w:"base.icon.size.600",h:"base.icon.size.600"}}),l.jsx(q,{size:"small",sx:ks,testId:"not-enough-gas-heading",children:f}),l.jsx(g,{sx:ks,children:I}),l.jsxs(E,{sx:Cs,children:[r&&l.jsx(w,{testId:"not-enough-gas-adjust-amount-button",sx:Rs,variant:"tertiary",onClick:t,children:x.adjustAmount}),i===X?l.jsxs(w,{testId:"not-enough-gas-copy-address-button",sx:Rs,variant:"tertiary",onClick:A,children:[x.copyAddress,l.jsx(w.Icon,{icon:p?"Tick":"CopyText"})]}):l.jsx(w,{testId:"not-enough-gas-add-imx-button",sx:Rs,variant:"tertiary",onClick:c,children:x.addMoreImx}),l.jsx(w,{sx:Rs,variant:"tertiary",onClick:t,testId:"not-enough-gas-cancel-button",children:x.cancel})]}),l.jsx(E,{sx:js,children:l.jsx(M,{testId:"footer-logo-image",logo:"ImmutableHorizontalLockup",sx:{width:"base.spacing.x25"}})})]})})})}function Ds({sx:e}){return l.jsxs(E,{sx:{...e,paddingTop:"0",marginTop:"base.spacing.x4"},rc:l.jsx("div",{}),children:[l.jsx(E,{sx:{display:"flex",backgroundColor:"#F3F3F30A",borderRadius:"8px"},children:l.jsx(E,{sx:{minw:"170px",height:"64px",WebkitMaskPosition:"left center",WebkitMaskRepeat:"no-repeat",WebkitMaskSize:"contain",WebkitMaskImage:'url(\'data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M154.75 39q1.65 0 2.85-1.15 1.15-1.15 1.15-2.85v-4q0-1.65-1.15-2.8-1.2-1.2-2.85-1.2h-93.6q-2.3 0-3.85 1.2-1.55 1.15-1.55 2.8v4q0 1.7 1.55 2.85Q58.85 39 61.15 39h93.6m-111.7-3.35q.2-1.3.2-2.65 0-1.35-.2-2.65-.75-4.9-4.5-8.65-4.7-4.7-11.3-4.7-6.65 0-11.3 4.7-4.7 4.7-4.7 11.3 0 6.65 4.7 11.3Q20.6 49 27.25 49q6.6 0 11.3-4.7 3.75-3.7 4.5-8.65Z" id="a"/></svg>\')'},rc:l.jsx("span",{}),children:l.jsx(h,{rc:l.jsx("span",{})})})}),l.jsx(E,{sx:{display:"flex",width:"100%",backgroundColor:"#F3F3F30A",borderRadius:"8px"},children:l.jsx(E,{sx:{width:"100%",height:"64px",WebkitMaskPosition:"right center",WebkitMaskRepeat:"no-repeat",WebkitMaskSize:"contain",WebkitMaskImage:'url(\'data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="196" height="96"><path d="M182.85 55.2Q181.65 54 180 54h-56q-1.7 0-2.85 1.2Q120 56.35 120 58v4q0 1.7 1.15 2.85Q122.3 66 124 66h56q1.65 0 2.85-1.15Q184 63.7 184 62v-4q0-1.65-1.15-2.8m0-22Q181.65 32 180 32H68q-1.7 0-2.85 1.2Q64 34.35 64 36v8q0 1.7 1.15 2.85Q66.3 48 68 48h112q1.65 0 2.85-1.15Q184 45.7 184 44v-8q0-1.65-1.15-2.8Z" id="a"/></svg>\')'},rc:l.jsx("span",{}),children:l.jsx(h,{rc:l.jsx("span",{})})})})]})}function Ls(e){const{t:t}=r(),{bridgeDispatch:s,bridgeState:{tokenBridge:a,tokenBalances:n,allowedTokens:i,checkout:c,from:d,to:u,amount:x,token:p}}=o.useContext(mt),{cryptoFiatState:h,cryptoFiatDispatch:m}=o.useContext(Pe),{viewDispatch:f}=o.useContext(j),{testId:I,defaultAmount:A,defaultTokenAddress:y,isTokenBalancesLoading:S}=e,{track:v}=_(),[R,D]=o.useState(A||""),[L,M]=o.useState(""),[B,P]=o.useState(),[O,F]=o.useState(""),[V,K]=o.useState(""),[U,z]=o.useState(!1),[$,H]=o.useState(!1),Z=o.useRef(!1),J=B?`${t("views.BRIDGE_FORM.content.availableBalancePrefix")} ${ae(B?.formattedBalance)}`:"",[Q,Y]=o.useState(!1),[ee,te]=o.useState(void 0),[se,we]=o.useState(""),[Te,be]=o.useState(""),[me,fe]=o.useState([]),[Ie,Ae]=o.useState(!1),[ye,Se]=o.useState(!1),[ve,_e]=o.useState(""),[ke,Ce]=o.useState(!1),Re=o.useCallback(((e,t)=>t?`${e.toLowerCase()}-${t.toLowerCase()}`:e.toLowerCase()),[]),je=`${t("views.BRIDGE_FORM.fees.fiatPricePrefix")} ${Te}`;o.useEffect((()=>{if(0===n.length)return;const e=n.filter((e=>e.balance.gt(0))).map((e=>({id:Re(e.token.symbol,e.token.address),name:e.token.name,symbol:e.token.symbol,icon:e.token.icon,balance:{formattedFiatAmount:0===h.conversions.size?ne(""):W(e.formattedBalance,e.token.symbol,h.conversions),formattedAmount:ae(e.formattedBalance)}})));fe(e),Z.current||(Z.current=!0,y&&P(n.find((e=>oe(e.token.address)&&y?.toLocaleUpperCase()===re||e.token.address?.toLowerCase()===y?.toLowerCase()))))}),[n,h.conversions,y,Z.current,Re,ne]),o.useEffect((()=>{if(x&&p){D(x);for(let e=0;e<n.length;e++){const t=n[e];if(t.token.address===p.address){P(t);break}}s({payload:{type:bt.SET_TOKEN_AND_AMOUNT,token:null,amount:""}})}}),[x,p,n]);const Ne=o.useMemo((()=>B&&B.token?Re(B.token.symbol,B.token.address):void 0),[B,n,h.conversions,Re]),De=async(e=!1)=>{if(Number.isNaN(parseFloat(R))||parseFloat(R)<=0||!B||Q||!d||!d.walletAddress||!u||!u.walletAddress)return;if(e||(H(!0),Y(!0)),e&&($||U)||!c)return;const t=oe(B?.token.address),s=t?ie(R):ie(R,B?.token.decimals),n=t?re.toUpperCase():B?.token.address,[o,r]=await Promise.all([a.getUnsignedApproveBridgeTx({senderAddress:d.walletAddress,token:n??re.toUpperCase(),amount:s,sourceChainId:d.network.toString(),destinationChainId:u.network.toString()}),a.getUnsignedBridgeTx({senderAddress:d.walletAddress,recipientAddress:u.walletAddress,token:n??re.toUpperCase(),amount:s,sourceChainId:d.network.toString(),destinationChainId:u.network.toString(),gasMultiplier:1.1})]),i=r.feeData,{totalFees:l,approvalFee:x}=i;let p=l;o.unsignedTx||(p=l.sub(x));const E={gasEstimateType:Ee.BRIDGE_TO_L2,fees:{totalFees:p},token:c.config.networkMap.get(d.network)?.nativeCurrency};te(E);const g=he(E?.fees?.totalFees||0,ge);we(g),be(W(g,E?.token?.symbol||"",h.conversions)),e||(H(!1),Y(!1))},Le=o.useMemo((()=>{const e=n.find((e=>oe(e.token.address)));if(!e)return!0;const t=oe(B?.token.address),s=ie(0!==se.length?se:"0"),a=t&&!Number.isNaN(parseFloat(R))?ie(R):le.from("0");return s.add(a).gt(e.balance)}),[se,n,B,R]);Ve((()=>De(!0)),ce),o.useEffect((()=>{U||(async()=>{await De()})()}),[R,B,U]);o.useEffect((()=>{m({payload:{type:We.SET_TOKEN_SYMBOLS,tokenSymbols:i.map((e=>e.symbol))}})}),[m,i]),o.useEffect((()=>{R&&B&&K(W(R,B.token.symbol,h.conversions))}),[R,B]),o.useEffect((()=>{(async()=>{if(!d?.web3Provider)return;const e=await d.web3Provider.getSigner().getAddress();_e((t=>(""!==t&&t!==e&&P(void 0),e)))})()}),[d?.web3Provider,n]);const Me=o.useCallback((()=>{const e=function(e){const{validation:t}=T.views[b.BRIDGE_FORM];return e?"":t.noTokenSelected}(B),t=ms(R,B?.formattedBalance);return e&&F(e),t&&M(t),!e&&!t}),[B,R,F,M]),Be=o.useCallback((async()=>{Me()&&c&&d?.web3Provider&&B&&(Le?Se(!0):(v({userJourney:C.BRIDGE,screen:"TokenAmount",control:"Review",controlType:"Button",extras:{tokenAddress:B.token.address,amount:R}}),s({payload:{type:bt.SET_TOKEN_AND_AMOUNT,token:B.token,amount:R}}),f({payload:{type:N.UPDATE_VIEW,view:{type:b.BRIDGE_REVIEW}}})))}),[c,d?.web3Provider,Me,Le,B]);return l.jsxs(E,{testId:I,sx:fs,children:[l.jsxs(E,{sx:{paddingX:"base.spacing.x4"},children:[l.jsx(q,{testId:`${I}-content-heading`,size:"small",weight:"regular",sx:{paddingBottom:"base.spacing.x4"},children:t("views.BRIDGE_FORM.content.title")}),(!y||!S)&&l.jsxs(E,{sx:Is,children:[l.jsx(Ue,{testId:"bridge-token",options:me,optionsLoading:S,coinSelectorHeading:t("views.BRIDGE_FORM.bridgeForm.from.selectorTitle"),selectedOption:Ne,subtext:J,textAlign:"left",errorMessage:O,onSelectChange:e=>(e=>{const t=n.find((t=>e===Re(t.token.symbol,t.token.address)));t&&(P(t),F(""))})(e),disabled:Q}),l.jsx(ze,{testId:"bridge-amount",value:R,placeholder:t("views.BRIDGE_FORM.bridgeForm.from.inputPlaceholder"),subtext:`${t("views.BRIDGE_FORM.content.fiatPricePrefix")} $${ne(V,!0)}`,validator:de,onTextInputFocus:()=>{z(!0)},onTextInputChange:e=>(e=>{if(D(e),L){const t=ms(e,B?.formattedBalance);M(t)}B&&K(W(e,B.token.symbol,h.conversions))})(e),onTextInputBlur:e=>(e=>{if(z(!1),D(e),L){const t=ms(e,B?.formattedBalance);M(t)}B&&K(W(e,B.token.symbol,h.conversions))})(e),textAlign:"right",errorMessage:L,disabled:Q})]}),y&&S&&l.jsx(Ds,{sx:Is}),se&&l.jsx(E,{sx:{paddingY:"base.spacing.x2"},children:l.jsxs(k,{targetClickOveride:()=>Ae(!0),sx:ys,children:[l.jsx(k.TargetLeftSlot,{children:l.jsx(g,{size:"medium",sx:Ss,children:t("views.BRIDGE_FORM.fees.title")})}),l.jsx(k.TargetRightSlot,{children:l.jsx(ue,{testId:"bridge-gas-fee__priceDisplay",fiatAmount:`${t("views.BRIDGE_FORM.fees.fiatPricePrefix")} ${Te}`,price:`${ee?.token?.symbol} ${ae(se)}`})})]})})]}),l.jsx($e,{totalFiatAmount:je,totalAmount:se,tokenSymbol:ee?.token?.symbol??"",fees:[{label:t("drawers.feesBreakdown.fees.gas.label"),fiatAmount:je,amount:se}],visible:Ie,onCloseDrawer:()=>Ae(!1)}),l.jsxs(E,{sx:As,children:[l.jsx(w,{testId:`${I}-button`,variant:"primary",onClick:Be,disabled:$,size:"large",children:$?l.jsx(w.Icon,{icon:"Loading",sx:vs}):t("views.BRIDGE_FORM.bridgeForm.buttonText")}),l.jsx(He,{visible:ke,showHeaderBar:!1,onCloseDrawer:()=>Ce(!1),onRetry:async()=>{Ce(!1),await Be()}}),l.jsx(Ns,{environment:c.config.environment,visible:ye,showHeaderBar:!1,onCloseDrawer:()=>Se(!1),walletAddress:ve,showAdjustAmount:oe(B?.token.address),tokenSymbol:d?.network===G(c?.config)?X:xe,onAddCoinsClick:()=>{f({payload:{type:N.UPDATE_VIEW,view:{type:pe.TOP_UP_VIEW}}})}})]})]})}const Ms=1e4;function Bs({amount:e,tokenAddress:t}){const{t:s}=r(),{bridgeState:a,bridgeDispatch:n}=o.useContext(mt),{checkout:i,from:c}=a,{eventTargetState:{eventTarget:d}}=o.useContext(O),[u,x]=o.useState(!1),{page:p}=_();o.useEffect((()=>{(e||t)&&p({userJourney:C.BRIDGE,screen:"TokenAmount",extras:{amount:e,tokenAddress:t}})}),[]);const E=o.useCallback((async()=>{if(i&&c?.web3Provider)try{const e=await Ze({checkout:i,provider:c.web3Provider,allowTokenListType:F.BRIDGE,retryPolicy:{retryIntervalMs:0,retries:0}});if(void 0===e)return;n({payload:{type:bt.SET_TOKEN_BALANCES,tokenBalances:e.allowedBalances}}),n({payload:{type:bt.SET_ALLOWED_TOKENS,allowedTokens:e.allowList.tokens}})}catch(e){console.debug(e)}}),[i,c?.web3Provider]);return Ve(E,Ms),o.useEffect((()=>{i&&c?.web3Provider&&(x(!0),E().finally((()=>x(!1))))}),[i,c?.web3Provider]),l.jsx(U,{testId:"bridge-view",header:l.jsx(z,{showBack:!0,title:s("views.BRIDGE_FORM.header.title"),onCloseButtonClick:()=>vt(d)}),footer:l.jsx($,{}),children:l.jsx(Ls,{testId:"bridge-form",defaultAmount:e,defaultTokenAddress:t,isTokenBalancesLoading:u})})}const Ps={borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginBottom:"2px"},Ws={borderTopLeftRadius:"0px",borderTopRightRadius:"0px",backgroundColor:"base.color.translucent.emphasis.100"},Os={height:"100%",display:"flex",flexDirection:"column",paddingX:"base.spacing.x4"},Gs={paddingTop:"base.spacing.x10",paddingBottom:"base.spacing.x4"},Fs={display:"flex",flexDirection:"column",alignItems:"center",paddingY:"base.spacing.x1"},Vs={width:"base.icon.size.300",transform:"rotate(270deg)"},Ks={marginBottom:"base.spacing.x4",color:"base.color.text.secondary"},Us={width:"base.icon.size.400"},zs={[s.IMTBL_ZKEVM_DEVNET]:"Immutable",[s.IMTBL_ZKEVM_MAINNET]:"Immutable",[s.IMTBL_ZKEVM_TESTNET]:"Immutable",[s.ETHEREUM]:"EthToken",[s.SEPOLIA]:"EthToken"},$s={[i.PASSPORT]:"PassportSymbolOutlined",[i.METAMASK]:"MetaMaskSymbol"},Hs="bridge-review-summary";function Zs(){const{t:e}=r(),{viewDispatch:t}=o.useContext(j),{bridgeState:{checkout:s,tokenBridge:a,from:n,to:d,token:u,amount:x}}=o.useContext(mt),{track:p}=_(),{cryptoFiatState:h}=o.useContext(Pe),[T,m]=o.useState(!1),[f,A]=o.useState(!1),[y,S]=o.useState(void 0),[v,R]=o.useState(""),[M,B]=o.useState(""),[P,O]=o.useState(void 0),[G,F]=o.useState(void 0),V=e=>L(e)?i.PASSPORT:i.METAMASK,K=o.useMemo((()=>u?.symbol?`${u?.symbol} ${x}`:`${x}`),[u,x]),U=o.useMemo((()=>x&&u?W(x,u.symbol,h.conversions):""),[u,x]),z=o.useMemo((()=>n?n.walletAddress:"-"),[n]),$=o.useMemo((()=>V(n?.web3Provider)),[n]),H=o.useMemo((()=>n&&n.network),[n]),Z=o.useMemo((()=>d?d.walletAddress:"-"),[d]),J=o.useMemo((()=>V(d?.web3Provider)),[d]),Q=o.useMemo((()=>d?.network),[d]),Y=o.useCallback((async()=>{if(!(a&&x&&n&&d&&u))return;const[e,t]=await Promise.all([a.getUnsignedApproveBridgeTx({senderAddress:z,token:u.address??re.toUpperCase(),amount:ie(x,u.decimals),sourceChainId:n?.network.toString(),destinationChainId:d?.network.toString()}),a.getUnsignedBridgeTx({senderAddress:z,recipientAddress:Z,token:u.address??re.toUpperCase(),amount:ie(x,u.decimals),sourceChainId:n?.network.toString(),destinationChainId:d?.network.toString(),gasMultiplier:1.1})]);O(e),F(t);const o=t.feeData,{totalFees:r,approvalFee:i}=o;let l=r;e.unsignedTx||(l=r.sub(i));const c={gasEstimateType:Ee.BRIDGE_TO_L2,fees:{totalFees:l},token:s.config.networkMap.get(n.network)?.nativeCurrency};S(c);const p=he(c?.fees.totalFees||0,ge);R(p),B(W(p,c?.token?.symbol||"",h.conversions))}),[s,a]);Ve((()=>Y()),ce),o.useEffect((()=>{(async()=>{A(!0),await Y(),A(!1)})()}),[]);const X=o.useCallback((async()=>{P&&G&&(p({userJourney:C.BRIDGE,screen:"Summary",control:"Submit",controlType:"Button",extras:{fromWalletAddress:z,fromNetwork:H,fromWallet:{address:z,isPassportWallet:L(n?.web3Provider),isMetaMask:D(n?.web3Provider)},toWalletAddress:Z,toNetwork:Q,toWallet:{address:Z,isPassportWallet:L(d?.web3Provider),isMetaMask:D(d?.web3Provider)},amount:x,fiatAmount:U,tokenAddress:u?.address}}),t({payload:{type:N.UPDATE_VIEW,view:{type:b.APPROVE_TRANSACTION,approveTransaction:P,transaction:G}}}))}),[t,P,G]);return l.jsxs(E,{testId:Hs,sx:Os,children:[l.jsx(q,{testId:`${Hs}-heading`,size:"small",weight:"regular",sx:Gs,children:e("views.BRIDGE_REVIEW.heading")}),l.jsxs(c,{testId:`${Hs}-from-amount`,size:"small",emphasized:!0,sx:Ps,children:[l.jsx(c.Label,{size:"small",sx:{marginBottom:"base.spacing.x4",fontWeight:"bold"},children:e("views.BRIDGE_REVIEW.fromLabel.amountHeading")}),l.jsx(c.Caption,{}),l.jsx(c.PriceDisplay,{use:l.jsx(q,{size:"xSmall",weight:"light"}),price:K??"-",fiatAmount:`${e("views.BRIDGE_REVIEW.fiatPricePrefix")}${U}`})]}),l.jsxs(c,{testId:`${Hs}-from-address`,size:"xSmall",emphasized:!0,sx:Ws,children:[$&&l.jsx(c.FramedLogo,{logo:$s[$],sx:{backgroundColor:"base.color.translucent.standard.200"}}),l.jsxs(c.Label,{children:[l.jsx("strong",{children:e("views.BRIDGE_REVIEW.fromLabel.heading")})," ",l.jsx(g,{size:"small",sx:{color:"base.color.text.secondary"},children:es(z??"")})]}),H&&l.jsx(c.IntentIcon,{icon:zs[H],sx:ps(H)})]}),l.jsx(E,{sx:Fs,children:l.jsx(I,{icon:"ArrowBackward",sx:Vs})}),l.jsxs(c,{testId:`${Hs}-to-address`,size:"xSmall",emphasized:!0,sx:Ps,children:[J&&l.jsx(c.FramedLogo,{logo:$s[J],sx:{backgroundColor:"base.color.translucent.standard.200"}}),l.jsxs(c.Label,{children:[l.jsx("strong",{children:e("views.BRIDGE_REVIEW.toLabel.heading")})," ",l.jsx(g,{size:"small",sx:{color:"base.color.text.secondary"},children:es(Z??"")})]}),Q&&l.jsx(c.IntentIcon,{icon:zs[Q],sx:ps(Q)})]}),v&&l.jsxs(k,{targetClickOveride:()=>m(!0),sx:Ws,children:[l.jsx(k.TargetLeftSlot,{children:l.jsx(g,{size:"medium",sx:Ks,children:e("views.BRIDGE_REVIEW.fees.heading")})}),l.jsx(k.TargetRightSlot,{children:l.jsx(ue,{testId:`${Hs}-gas-amount__priceDisplay`,fiatAmount:`${e("views.BRIDGE_REVIEW.fiatPricePrefix")}${M}`,price:`${y?.token?.symbol} ${ae(v)}`??"-"})})]}),l.jsx(E,{sx:{flex:1,display:"flex",flexDirection:"column",justifyContent:"flex-end",paddingY:"base.spacing.x6",width:"100%"},children:l.jsx(w,{size:"large",sx:{width:"100%"},onClick:X,disabled:f,testId:`${Hs}__submit-button`,children:f?l.jsx(w.Icon,{icon:"Loading",sx:Us}):e("views.BRIDGE_REVIEW.submitButton.buttonText")})}),l.jsx($e,{totalFiatAmount:`${e("views.BRIDGE_REVIEW.fiatPricePrefix")}${M}`,totalAmount:v,tokenSymbol:y?.token?.symbol||"",fees:[{label:e("drawers.feesBreakdown.fees.gas.label"),fiatAmount:`${e("views.BRIDGE_REVIEW.fiatPricePrefix")}${M}`,amount:v}],visible:T,onCloseDrawer:()=>m(!1)})]})}function Js(){const{t:e}=r(),{eventTargetState:{eventTarget:t}}=o.useContext(O),{page:s}=_();return o.useEffect((()=>{s({userJourney:C.BRIDGE,screen:"Review"})}),[]),l.jsx(U,{testId:"bridge-review",header:l.jsx(z,{showBack:!0,title:e("views.BRIDGE_REVIEW.layoutHeading"),onCloseButtonClick:()=>vt(t)}),footer:l.jsx($,{}),children:l.jsx(Zs,{})})}function qs({environment:e}){const{RiveComponent:t}=we.useRive({src:`${Te[e]}/v1/blob/img/rocket.riv`,autoplay:!0,layout:new we.Layout({fit:we.Fit.Cover}),stateMachines:"State Machine 1"});return l.jsx(E,{sx:{...be,background:"base.color.translucent.emphasis.100"},children:l.jsx(E,{sx:me,rc:l.jsx(t,{})})})}function Qs({transactionHash:e}){const{t:t}=r(),{eventTargetState:{eventTarget:s}}=o.useContext(O),{page:a}=_(),{cryptoFiatState:n}=o.useContext(Pe),{viewDispatch:i}=o.useContext(j),{bridgeState:{checkout:c,from:d,to:u,token:x,amount:p}}=o.useContext(mt);return o.useEffect((()=>{St(s,e);const t=W(p,x?.symbol??"",n.conversions);a({userJourney:C.BRIDGE,screen:"InProgress",extras:{fromWalletAddress:d?.walletAddress,toWalletAddress:u?.walletAddress,amount:p,fiatAmount:t,tokenAddress:x?.address}})}),[]),l.jsx(U,{testId:"move-in-progress-view",header:l.jsx(z,{transparent:!0,onCloseButtonClick:()=>vt(s),rightActions:l.jsxs(l.Fragment,{children:[l.jsx(Q,{icon:"Minting",sx:Y(),onClick:()=>{i({payload:{type:N.UPDATE_VIEW,view:{type:b.TRANSACTIONS}}})},testId:"settings-button"}),l.jsx(fe,{isAnimated:!0,variant:"guidance",sx:{position:"absolute",right:"base.spacing.x14",top:"base.spacing.x1"}})]})}),footer:l.jsx($,{}),heroContent:l.jsx(qs,{environment:c.config.environment}),floatHeader:!0,children:l.jsxs(Ie,{heading:t("views.IN_PROGRESS.heading"),children:[t("views.IN_PROGRESS.body1"),l.jsx("br",{}),l.jsx("br",{}),t("views.IN_PROGRESS.body2")]})})}function Ys({approveTransaction:e,transaction:t}){const{t:s}=r(),{bridgeState:a}=o.useContext(mt),{checkout:n,from:i}=a,{viewDispatch:c}=o.useContext(j),{eventTargetState:{eventTarget:d}}=o.useContext(O),{page:u}=_();o.useEffect((()=>{u({userJourney:C.BRIDGE,screen:"ApproveTransaction"})}),[]);const[x,p]=o.useState(!1),[h,g]=o.useState(!1),[w,T]=o.useState(!1),[m,f]=o.useState(!1),I=o.useCallback((()=>{c({payload:{type:N.UPDATE_VIEW,view:{type:pe.ERROR_VIEW,error:new Error("No checkout object or no provider object found")}}})}),[c]),A=o.useCallback((()=>{c({payload:{type:N.GO_BACK}})}),[c]),y=e=>{if(e.type!==Ae.UNPREDICTABLE_GAS_LIMIT){if(e.type===Ae.TRANSACTION_FAILED||e.type===Ae.INSUFFICIENT_FUNDS||e.receipt&&0===e.receipt.status){let t="Transaction failed";return e.type===Ae.INSUFFICIENT_FUNDS&&(t="Insufficient funds"),e.receipt&&0===e.receipt.status&&(t="Transaction failed to settle on chain"),void c({payload:{type:N.UPDATE_VIEW,view:{type:b.BRIDGE_FAILURE,reason:t}}})}c({payload:{type:N.UPDATE_VIEW,view:{type:pe.ERROR_VIEW,error:e}}})}else c({payload:{type:N.UPDATE_VIEW,view:{type:b.BRIDGE_FAILURE,reason:"Unpredictable gas limit"}}})},S=o.useCallback((async()=>{let s=!1;if(n&&i?.web3Provider&&t){if(!x){if(p(!0),e.unsignedTx)try{g(!0);const t=await n.sendTransaction({provider:i.web3Provider,transaction:e.unsignedTx});if(1!==(await t.transactionResponse.wait()).status)return void c({payload:{type:N.UPDATE_VIEW,view:{type:b.BRIDGE_FAILURE,reason:"Transaction failed to settle on chain"}}})}catch(e){g(!1),e.type===Ae.USER_REJECTED_REQUEST_ERROR?(f(!0),s=!0):y(e)}finally{p(!1)}try{if(s)return;g(!0);const e=await n.sendTransaction({provider:i.web3Provider,transaction:t.unsignedTx});T(!0);const a=await e.transactionResponse.wait();if(0===a.status)return void c({payload:{type:N.UPDATE_VIEW,view:{type:b.BRIDGE_FAILURE,reason:"Approval transaction failed to settle on chain"}}});c({payload:{type:N.UPDATE_VIEW,view:{type:b.IN_PROGRESS,transactionHash:a.transactionHash}}})}catch(e){e.type===Ae.USER_REJECTED_REQUEST_ERROR?f(!0):y(e)}finally{T(!1),g(!1),p(!1)}}}else I()}),[n,i,I,c,t,e,x]);return l.jsxs(l.Fragment,{children:[w&&l.jsx(J,{loadingText:s("views.APPROVE_TRANSACTION.loadingView.text"),showFooterLogo:!0}),!w&&l.jsx(U,{header:l.jsx(z,{transparent:!0,showBack:!0,onCloseButtonClick:()=>vt(d),onBackButtonClick:A}),floatHeader:!0,heroContent:l.jsx(Je,{}),footer:l.jsxs(E,{sx:{width:"100%",flexDirection:"column"},children:[l.jsx(ye,{loading:h,actionText:s("views.APPROVE_TRANSACTION."+(m?"footer.retryText":"footer.buttonText")),onActionClick:S}),l.jsx($,{})]}),children:l.jsx(Ie,{heading:s("views.APPROVE_TRANSACTION.content.heading"),children:l.jsx(E,{children:s("views.APPROVE_TRANSACTION.content.body")})})})]})}const Xs={display:"flex",flexDirection:"column",alignItems:"center",paddingTop:"base.spacing.x6",paddingBottom:"base.spacing.x1",height:"100%"},ea={color:"base.color.text.secondary",fontFamily:"base.font.family.heading.secondary",textAlign:"center",marginTop:"15px"},ta={display:"flex",flexDirection:"column",justifyContent:"center",gap:"base.spacing.x2",height:"100%",width:"100%"},sa={width:"100%",height:"base.spacing.x16"};function aa({visible:e,onClose:t,onChangeAccount:s}){const{t:a}=r(),{bridgeState:{checkout:n}}=o.useContext(mt),i=te(n.config.environment);return l.jsx(d,{headerBarTitle:void 0,size:"full",onCloseDrawer:t,visible:e,showHeaderBar:!1,children:l.jsx(d.Content,{children:l.jsxs(E,{testId:"not-enough-eth-drawer",sx:Xs,children:[l.jsx(ee,{imageUrl:i,sx:{w:"base.icon.size.600",h:"base.icon.size.600"}}),l.jsx(q,{size:"small",sx:ea,testId:"not-enough-gas-heading",children:`${a("drawers.notEnoughEthWithdrawal.content.heading1")} ${X} ${a("drawers.notEnoughEthWithdrawal.content.heading2")}`}),l.jsx(g,{sx:ea,children:`${a("drawers.notEnoughEthWithdrawal.content.body1")} ${X} ${a("drawers.notEnoughEthWithdrawal.content.body2")}`}),l.jsxs(E,{sx:ta,children:[l.jsx(w,{testId:"not-enough-eth-drawer-retry-button",sx:sa,variant:"tertiary",onClick:s,children:a("drawers.notEnoughEthWithdrawal.buttons.retry")}),l.jsx(w,{sx:sa,variant:"tertiary",onClick:t,testId:"not-enough-eth-drawer-dismiss-button",children:a("drawers.notEnoughEthWithdrawal.buttons.dismiss")})]})]})})})}function na({transaction:e}){const{t:t}=r(),{bridgeState:{checkout:s,tokenBridge:a,from:n}}=o.useContext(mt),{viewDispatch:c}=o.useContext(j),{eventTargetState:{eventTarget:d}}=o.useContext(O),{page:u}=_();o.useEffect((()=>{u({userJourney:C.BRIDGE,screen:"ClaimWithdrawal"})}),[]);const[x,p]=o.useState(!1),[h,g]=o.useState(!1),[T,m]=o.useState(!1),[f,I]=o.useState(),[A,y]=o.useState(!1),S=o.useCallback((()=>{c({payload:{type:N.GO_BACK}})}),[c]);o.useEffect((()=>{(async()=>{if(a&&e&&void 0!==e.details.current_status?.index){g(!0);try{const t=await(a?.getFlowRateWithdrawTx({recipient:e.details.to_address,index:e.details.current_status.index}));I(t)}catch(e){console.log(e)}finally{g(!1)}}})()}),[a,e]);const k=o.useCallback((async({forceChangeAccount:e})=>{if(!(s&&a&&n?.web3Provider&&f))return;if(!f.pendingWithdrawal.canWithdraw||!f.unsignedTx)return void console.log(`Unable to process withdrawal transaction as it is not ready yet. Delay timeout at ${f.pendingWithdrawal.timeoutEnd} `);let t=n?.web3Provider;const o=G(s.config);if(p(!0),L(n?.web3Provider)||e)try{const e=await s.createProvider({walletProviderName:i.METAMASK});t=(await s.connect({provider:e.provider,requestWalletPermissions:!0})).provider,y(!1)}catch(e){return console.log(e),m(!0),void p(!1)}let r,l=null;try{try{r=await t.estimateGas(f.unsignedTx)}catch(e){r=le.from(Se)}let e=null;try{e=await t.getFeeData()}catch(e){console.log(e)}let s=null;e&&e.lastBaseFeePerGas&&e.maxPriorityFeePerGas?s=e.lastBaseFeePerGas.add(e.maxPriorityFeePerGas):e&&e.gasPrice&&(s=e.gasPrice),s&&(l=r.mul(s))}catch(e){console.log(e)}try{const e=(await s.getAllBalances({provider:t,chainId:o})).balances.find((e=>oe(e.token.address)));if(!e||e.balance.lt(l))return y(!0),void p(!1)}catch(e){console.log(e)}if((await t.getNetwork()).chainId!==o)try{t=(await s.switchNetwork({provider:t,chainId:o})).provider}catch(e){return m(!0),g(!1),void console.log(e)}try{const e=await s.sendTransaction({provider:t,transaction:f.unsignedTx});c({payload:{type:N.UPDATE_VIEW,view:{type:b.CLAIM_WITHDRAWAL_IN_PROGRESS,transactionResponse:e.transactionResponse}}})}catch(e){console.log(e),m(!0),p(!1)}finally{p(!1)}}),[a,n,f]);return l.jsxs(U,{testId:"claim-withdrawal",header:l.jsx(z,{transparent:!0,showBack:!0,onCloseButtonClick:()=>vt(d),onBackButtonClick:S}),floatHeader:!0,heroContent:l.jsx(Je,{}),footer:l.jsxs(E,{sx:{width:"100%",display:"flex",flexDirection:"column"},children:[l.jsx(E,{sx:{pb:"base.spacing.x5",px:"base.spacing.x6",width:"100%",display:"flex",flexDirection:"column"},children:l.jsx(w,{testId:"claim-withdrawal-continue-button",size:"large",variant:"primary",disabled:h,onClick:()=>x||h?void 0:k({forceChangeAccount:!0}),children:h||x?l.jsx(w.Icon,{icon:"Loading",sx:{width:"base.icon.size.400"}}):t("views.CLAIM_WITHDRAWAL."+(T?"footer.retryText":"footer.buttonText"))})}),l.jsx($,{})]}),children:[l.jsxs(Ie,{heading:`${t("views.CLAIM_WITHDRAWAL.content.heading")} ${ht(G(s.config))}`,children:[l.jsx(E,{sx:{display:"flex",flexWrap:"wrap",pb:"base.spacing.x1"},children:t("views.CLAIM_WITHDRAWAL.content.body")}),l.jsxs(E,{children:[t("views.CLAIM_WITHDRAWAL.content.body2"),l.jsx(v,{text:e.details.to_address.toLowerCase()??""})]})]}),l.jsx(aa,{visible:A,onClose:()=>y(!1),onChangeAccount:()=>k({forceChangeAccount:!0})})]})}function oa({checkout:e,web3Provider:t,config:s,amount:a,tokenAddress:n}){const{t:i}=r(),{environment:c,isOnRampEnabled:d,isSwapEnabled:u,isBridgeEnabled:E}=s,{eventTargetState:{eventTarget:h}}=o.useContext(O),{page:g}=_(),[w,T]=o.useReducer(ve,{..._e,view:{type:b.WALLET_NETWORK_SELECTION},history:[{type:b.WALLET_NETWORK_SELECTION}]}),[m,f]=o.useReducer(ft,{...Tt,checkout:e,web3Provider:t??null,tokenBridge:(()=>{let t=Le;e.config.isDevelopment&&(t=Me),e.config.isProduction&&(t=Be);const s=new H(e.config.networkMap.get(G(e.config))?.rpcUrls[0]),a=new H(e.config.networkMap.get(V(e.config))?.rpcUrls[0]),n=new ke({baseConfig:new Ce({environment:e.config.environment}),bridgeInstance:t,rootProvider:s,childProvider:a});return new Re(n)})()}),I=o.useMemo((()=>({viewState:w,viewDispatch:T})),[w,T]),A=o.useMemo((()=>({bridgeState:m,bridgeDispatch:f})),[m,f]),y=o.useCallback((()=>{f({payload:{type:bt.SET_WALLETS_AND_NETWORKS,from:null,to:null}}),f({payload:{type:bt.SET_TOKEN_AND_AMOUNT,amount:"",token:null}}),T({payload:{type:N.GO_BACK_TO,view:{type:b.WALLET_NETWORK_SELECTION}}})}),[T]),S=o.useCallback((()=>{T({payload:{type:N.GO_BACK_TO,view:{type:b.WALLET_NETWORK_SELECTION}}})}),[T]),v=o.useCallback((()=>{T({payload:{type:N.UPDATE_VIEW,view:{type:b.TRANSACTIONS}}})}),[T]),k=o.useCallback((()=>{T({payload:{type:N.GO_BACK_TO,view:{type:b.BRIDGE_REVIEW}}})}),[T]);return o.useEffect((()=>{(async()=>{f({payload:{type:bt.SET_PROVIDER,web3Provider:t??null}})})()}),[t]),l.jsx(j.Provider,{value:I,children:l.jsx(mt.Provider,{value:A,children:l.jsxs(Oe,{environment:c,children:[w.view.type===b.WALLET_NETWORK_SELECTION&&l.jsx(bs,{}),w.view.type===b.BRIDGE_FORM&&l.jsx(Bs,{amount:a,tokenAddress:n}),w.view.type===b.BRIDGE_REVIEW&&l.jsx(Js,{}),w.view.type===b.IN_PROGRESS&&l.jsx(Qs,{transactionHash:w.view.transactionHash}),w.view.type===b.BRIDGE_FAILURE&&l.jsx(je,{testId:"bridge-fail",statusText:i("views.BRIDGE_FAILURE.bridgeFailureText.statusText"),actionText:i("views.BRIDGE_FAILURE.bridgeFailureText.actionText"),onActionClick:k,statusType:Ne.FAILURE,onRenderEvent:()=>{let e="";w.view.type===b.BRIDGE_FAILURE&&(e=w.view.reason),g({userJourney:C.BRIDGE,screen:"Failed",extras:{reason:e}}),((e,t)=>{const s=new CustomEvent(x.IMTBL_BRIDGE_WIDGET_EVENT,{detail:{type:p.FAILURE,data:{reason:t,timestamp:(new Date).getTime()}}});console.log("bridge failed ",e,s),void 0!==e&&e.dispatchEvent(s)})(h,e)}}),w.view.type===b.APPROVE_TRANSACTION&&l.jsx(Ys,{approveTransaction:w.view.approveTransaction,transaction:w.view.transaction}),w.view.type===b.TRANSACTIONS&&l.jsx(Yt,{onBackButtonClick:S}),w.view.type===b.CLAIM_WITHDRAWAL&&l.jsx(na,{transaction:w.view.transaction}),w.view.type===pe.ERROR_VIEW&&l.jsx(De,{actionText:i("views.ERROR_VIEW.actionText"),onActionClick:y,onCloseClick:()=>vt(h),errorEventAction:()=>{g({userJourney:C.BRIDGE,screen:"Error"})}}),w.view.type===pe.TOP_UP_VIEW&&l.jsx(Ge,{analytics:{userJourney:C.BRIDGE},widgetEvent:x.IMTBL_BRIDGE_WIDGET_EVENT,checkout:e,provider:t,showOnrampOption:d,showSwapOption:u,showBridgeOption:E,onCloseButtonClick:()=>vt(h)}),w.view.type===b.CLAIM_WITHDRAWAL_IN_PROGRESS&&l.jsx(Xt,{transactionResponse:w.view.transactionResponse}),w.view.type===b.CLAIM_WITHDRAWAL_SUCCESS&&l.jsx(je,{statusText:i("views.CLAIM_WITHDRAWAL.IN_PROGRESS.success.text"),actionText:i("views.CLAIM_WITHDRAWAL.IN_PROGRESS.success.actionText"),onRenderEvent:()=>{g({userJourney:C.BRIDGE,screen:"ClaimWithdrawalSuccess"}),((e,t)=>{const s=new CustomEvent(x.IMTBL_BRIDGE_WIDGET_EVENT,{detail:{type:p.CLAIM_WITHDRAWAL_SUCCESS,data:{transactionHash:t}}});console.log("bridge claim withdrawal success event:",e,s),void 0!==e&&e.dispatchEvent(s)})(h,w.view.transactionHash)},onActionClick:v,statusType:Ne.SUCCESS,testId:"claim-withdrawal-success-view"}),w.view.type===b.CLAIM_WITHDRAWAL_FAILURE&&l.jsx(je,{statusText:i("views.CLAIM_WITHDRAWAL.IN_PROGRESS.failure.text"),actionText:i("views.CLAIM_WITHDRAWAL.IN_PROGRESS.failure.actionText"),onRenderEvent:()=>{let e="";w.view.type===b.CLAIM_WITHDRAWAL_FAILURE&&(e=w.view.reason),g({userJourney:C.BRIDGE,screen:"ClaimWithdrawalFailure",extras:{reason:e}}),((e,t,s)=>{const a=new CustomEvent(x.IMTBL_BRIDGE_WIDGET_EVENT,{detail:{type:p.CLAIM_WITHDRAWAL_FAILURE,data:{transactionHash:t,reason:s,timestamp:(new Date).getTime()}}});console.log("bridge claim withdrawal failed event:",e,a),void 0!==e&&e.dispatchEvent(a)})(h,w.view.transactionHash,"Transaction failed")},onActionClick:v,statusType:Ne.FAILURE,onCloseClick:()=>vt(h),testId:"claim-withdrawal-fail-view"})]})})})}var ra=Object.freeze({__proto__:null,default:oa});export{oa as B,ra as a,ht as g};

package/dist/browser/checkout/OnRampWidget-04677711.js

@@ -0,0 +1,288 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext, useState, useRef, useMemo, useEffect, useReducer } from 'react';
+import { ExchangeType, IMTBLWidgetEvents } from '@imtbl/checkout-sdk';
+import { C as ConnectLoaderContext, E as EventTargetContext, V as ViewContext, S as SharedViews, u as useAnalytics, a as SimpleLayout, H as HeaderNavigation, s as sendOnRampWidgetCloseEvent, U as UserJourney, b as ViewActions, O as OnRampWidgetViews, F as FooterLogo, c as SimpleTextBody, v as viewReducer, i as initialViewState, N as NATIVE, L as LoadingView, d as StatusView, e as sendOnRampSuccessEvent, f as StatusType, g as sendOnRampFailedEvent } from './index-4511315b.js';
+import { useTranslation } from 'react-i18next';
+import { T as TopUpView } from './TopUpView-590c2c4c.js';
+import { Box } from '@biom3/react';
+import url__default from 'url';
+import { T as TRANSAK_ORIGIN } from './useTransakEvents-54a554e5.js';
+import { S as SpendingCapHero } from './SpendingCapHero-43c9cf8c.js';
+import '@biom3/design-tokens';
+import '@imtbl/react-analytics';
+import 'react-dom/client';
+import '@ethersproject/providers';
+import 'i18next';
+import '@imtbl/config';
+import 'ethers';
+import 'i18next-browser-languagedetector';
+import '@imtbl/cryptofiat';
+
+const containerStyle = (showIframe) => ({
+    position: 'relative',
+    maxWidth: '420px',
+    height: '565px',
+    borderRadius: 'base.borderRadius.x6',
+    overflow: 'hidden',
+    marginLeft: 'base.spacing.x2',
+    marginRight: 'base.spacing.x2',
+    marginBottom: 'base.spacing.x2',
+    display: showIframe ? 'block' : 'none',
+});
+const boxMainStyle = (showIframe) => ({
+    display: showIframe ? 'block' : 'none',
+});
+
+var TransakEvents;
+(function (TransakEvents) {
+    TransakEvents["TRANSAK_WIDGET_OPEN"] = "TRANSAK_WIDGET_OPEN";
+    TransakEvents["TRANSAK_ORDER_CREATED"] = "TRANSAK_ORDER_CREATED";
+    TransakEvents["TRANSAK_ORDER_SUCCESSFUL"] = "TRANSAK_ORDER_SUCCESSFUL";
+    TransakEvents["TRANSAK_ORDER_FAILED"] = "TRANSAK_ORDER_FAILED";
+})(TransakEvents || (TransakEvents = {}));
+var TransakStatuses;
+(function (TransakStatuses) {
+    TransakStatuses["PROCESSING"] = "PROCESSING";
+    TransakStatuses["COMPLETED"] = "COMPLETED";
+})(TransakStatuses || (TransakStatuses = {}));
+
+const transakIframeId = 'transak-iframe';
+const IN_PROGRESS_VIEW_DELAY_MS = 6000; // 6 second
+function OnRampMain({ passport, showIframe, tokenAmount, tokenAddress, }) {
+    const { connectLoaderState } = useContext(ConnectLoaderContext);
+    const { checkout, provider } = connectLoaderState;
+    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
+    const { t } = useTranslation();
+    const { viewState, viewDispatch } = useContext(ViewContext);
+    const [widgetUrl, setWidgetUrl] = useState('');
+    const eventTimer = useRef();
+    const isPassport = !!passport && provider?.provider?.isPassport;
+    const showBackButton = useMemo(() => viewState.history.length > 2
+        && viewState.history[viewState.history.length - 2].type === SharedViews.TOP_UP_VIEW, [viewState.history]);
+    const { track } = useAnalytics();
+    const trackSegmentEvents = async (event, walletAddress, email) => {
+        const miscProps = {
+            userId: walletAddress.toLowerCase(),
+            isPassportWallet: isPassport,
+            email,
+        };
+        switch (event.event_id) {
+            case TransakEvents.TRANSAK_WIDGET_OPEN:
+                track({
+                    userJourney: UserJourney.ON_RAMP,
+                    screen: 'InputScreen',
+                    control: 'TransakWidgetOpen',
+                    controlType: 'IframeEvent',
+                    ...miscProps,
+                }); // checkoutOnRampInputScreen_TransakWidgetOpenIframeEvent
+                break;
+            case TransakEvents.TRANSAK_ORDER_CREATED:
+                track({
+                    userJourney: UserJourney.ON_RAMP,
+                    screen: 'InputScreen',
+                    control: 'OrderCreated',
+                    controlType: 'IframeEvent',
+                    ...miscProps,
+                }); // checkoutOnRampInputScreen_OrderCreatedIframeEvent
+                break;
+            case TransakEvents.TRANSAK_ORDER_SUCCESSFUL:
+                if (event.data.status === TransakStatuses.PROCESSING) {
+                    // user paid
+                    track({
+                        userJourney: UserJourney.ON_RAMP,
+                        screen: 'OrderInProgress',
+                        control: 'PaymentProcessing',
+                        controlType: 'IframeEvent',
+                        ...miscProps,
+                    }); // checkoutOnRampOrderInProgress_PaymentProcessingIframeEvent
+                }
+                if (event.data.status === TransakStatuses.COMPLETED) {
+                    track({
+                        userJourney: UserJourney.ON_RAMP,
+                        screen: 'Success',
+                        control: 'PaymentCompleted',
+                        controlType: 'IframeEvent',
+                        ...miscProps,
+                    }); // checkoutOnRampSuccess_PaymentCompletedIframeEvent
+                }
+                break;
+            case TransakEvents.TRANSAK_ORDER_FAILED: // payment failed
+                track({
+                    userJourney: UserJourney.ON_RAMP,
+                    screen: 'Failure',
+                    control: 'PaymentFailed',
+                    controlType: 'IframeEvent',
+                    ...miscProps,
+                }); // checkoutOnRampFailure_PaymentFailedIframeEvent
+                break;
+        }
+    };
+    const transakEventHandler = (event) => {
+        if (eventTimer.current)
+            clearTimeout(eventTimer.current);
+        if (event.event_id === TransakEvents.TRANSAK_WIDGET_OPEN) {
+            viewDispatch({
+                payload: {
+                    type: ViewActions.UPDATE_VIEW,
+                    view: {
+                        type: OnRampWidgetViews.ONRAMP,
+                        data: {
+                            amount: viewState.view.data?.amount ?? tokenAmount,
+                            tokenAddress: viewState.view.data?.tokenAddress ?? tokenAddress,
+                        },
+                    },
+                },
+            });
+            return;
+        }
+        if (event.event_id === TransakEvents.TRANSAK_ORDER_SUCCESSFUL
+            && event.data.status === TransakStatuses.PROCESSING) {
+            // this handles 3DS -- once the user has completed the verification,
+            // kick off teh loading screen and then fake a IN_PROGRESS_VIEW_DELAY_MS
+            // delay before showing the IN_PROGRESS screen
+            viewDispatch({
+                payload: {
+                    type: ViewActions.UPDATE_VIEW,
+                    view: {
+                        type: OnRampWidgetViews.IN_PROGRESS_LOADING,
+                    },
+                },
+            });
+            eventTimer.current = window.setTimeout(() => {
+                viewDispatch({
+                    payload: {
+                        type: ViewActions.UPDATE_VIEW,
+                        view: {
+                            type: OnRampWidgetViews.IN_PROGRESS,
+                        },
+                    },
+                });
+            }, IN_PROGRESS_VIEW_DELAY_MS);
+            return;
+        }
+        if (event.event_id === TransakEvents.TRANSAK_ORDER_SUCCESSFUL
+            && event.data.status === TransakStatuses.COMPLETED) {
+            viewDispatch({
+                payload: {
+                    type: ViewActions.UPDATE_VIEW,
+                    view: {
+                        type: OnRampWidgetViews.SUCCESS,
+                        data: {
+                            transactionHash: event.data.transactionHash,
+                        },
+                    },
+                },
+            });
+            return;
+        }
+        if (event.event_id === TransakEvents.TRANSAK_ORDER_FAILED) {
+            viewDispatch({
+                payload: {
+                    type: ViewActions.UPDATE_VIEW,
+                    view: {
+                        type: OnRampWidgetViews.FAIL,
+                        data: {
+                            amount: tokenAmount,
+                            tokenAddress,
+                        },
+                        reason: `Transaction failed: ${event.data.statusReason}`,
+                    },
+                },
+            });
+        }
+    };
+    useEffect(() => {
+        if (!checkout || !provider)
+            return;
+        let userWalletAddress = '';
+        (async () => {
+            const params = {
+                exchangeType: ExchangeType.ONRAMP,
+                web3Provider: provider,
+                tokenAddress,
+                tokenAmount,
+                passport,
+            };
+            setWidgetUrl(await checkout.createFiatRampUrl(params));
+            userWalletAddress = await provider.getSigner().getAddress();
+        })();
+        let userEmail;
+        (async () => {
+            if (passport) {
+                const userProfile = await passport.getUserInfo();
+                userEmail = userProfile?.email;
+            }
+        })();
+        const domIframe = document.getElementById(transakIframeId);
+        if (!domIframe)
+            return;
+        const handleTransakEvents = (event) => {
+            if (!domIframe)
+                return;
+            const host = url__default.parse(event.origin)?.host?.toLowerCase();
+            if (event.source === domIframe.contentWindow
+                && host && TRANSAK_ORIGIN.includes(host)) {
+                trackSegmentEvents(event.data, userWalletAddress, userEmail);
+                transakEventHandler(event.data);
+            }
+        };
+        window.addEventListener('message', handleTransakEvents);
+    }, [checkout, provider, tokenAmount, tokenAddress, passport]);
+    return (jsx(Box, { sx: boxMainStyle(showIframe), children: jsx(SimpleLayout, { header: (jsx(HeaderNavigation, { showBack: showBackButton, title: t('views.ONRAMP.header.title'), onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget) })), footerBackgroundColor: "base.color.translucent.emphasis.200", children: jsx(Box, { sx: containerStyle(showIframe), children: jsx("iframe", { title: "Transak", id: transakIframeId, src: widgetUrl, allow: "camera;microphone;fullscreen;payment", style: {
+                        height: '100%', width: '100%', border: 'none', position: 'absolute',
+                    } }) }) }) }));
+}
+
+function OrderInProgress() {
+    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
+    const { t } = useTranslation();
+    return (jsx(SimpleLayout, { testId: "order-in-progress-view", header: (jsx(HeaderNavigation, { transparent: true, onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget) })), footer: (jsx(FooterLogo, {})), heroContent: jsx(SpendingCapHero, {}), floatHeader: true, children: jsxs(SimpleTextBody, { heading: t('views.ONRAMP.IN_PROGRESS.content.heading'), children: [t('views.ONRAMP.IN_PROGRESS.content.body1'), jsx("br", {}), jsx("br", {}), t('views.ONRAMP.IN_PROGRESS.content.body2')] }) }));
+}
+
+function OnRampWidget({ amount, tokenAddress, config, }) {
+    const { isOnRampEnabled, isSwapEnabled, isBridgeEnabled, } = config;
+    const [viewState, viewDispatch] = useReducer(viewReducer, {
+        ...initialViewState,
+        history: [],
+    });
+    const viewReducerValues = useMemo(() => ({ viewState, viewDispatch }), [viewState, viewReducer]);
+    const { connectLoaderState } = useContext(ConnectLoaderContext);
+    const { checkout, provider } = connectLoaderState;
+    const [tknAddr, setTknAddr] = useState(tokenAddress);
+    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
+    const { t } = useTranslation();
+    const showIframe = useMemo(() => viewState.view.type === OnRampWidgetViews.ONRAMP, [viewState.view.type]);
+    useEffect(() => {
+        if (!checkout || !provider)
+            return;
+        (async () => {
+            const network = await checkout.getNetworkInfo({
+                provider,
+            });
+            /* If the provider's network is not supported, return out of this and let the
+          connect loader handle the switch network functionality */
+            if (!network.isSupported) {
+                return;
+            }
+            const address = tknAddr?.toLocaleLowerCase() === NATIVE
+                ? NATIVE
+                : tokenAddress;
+            setTknAddr(address);
+        })();
+    }, [checkout, provider, viewDispatch]);
+    return (jsxs(ViewContext.Provider, { value: viewReducerValues, children: [viewState.view.type === SharedViews.LOADING_VIEW && (jsx(LoadingView, { loadingText: t('views.ONRAMP.initialLoadingText'), showFooterLogo: true })), viewState.view.type === OnRampWidgetViews.IN_PROGRESS_LOADING && (jsx(LoadingView, { loadingText: t('views.ONRAMP.IN_PROGRESS_LOADING.loading.text'), showFooterLogo: true })), viewState.view.type === OnRampWidgetViews.IN_PROGRESS && (jsx(OrderInProgress, {})), viewState.view.type === OnRampWidgetViews.SUCCESS && (jsx(StatusView, { statusText: t('views.ONRAMP.SUCCESS.text'), actionText: t('views.ONRAMP.SUCCESS.actionText'), onRenderEvent: () => sendOnRampSuccessEvent(eventTarget, viewState.view.data.transactionHash), onActionClick: () => sendOnRampWidgetCloseEvent(eventTarget), statusType: StatusType.SUCCESS, testId: "success-view" })), viewState.view.type === OnRampWidgetViews.FAIL && (jsx(StatusView, { statusText: t('views.ONRAMP.FAIL.text'), actionText: t('views.ONRAMP.FAIL.actionText'), onRenderEvent: () => sendOnRampFailedEvent(eventTarget, viewState.view.reason
+                    ?? 'Transaction failed'), onActionClick: () => {
+                    viewDispatch({
+                        payload: {
+                            type: ViewActions.UPDATE_VIEW,
+                            view: {
+                                type: OnRampWidgetViews.ONRAMP,
+                                data: viewState.view.data,
+                            },
+                        },
+                    });
+                }, statusType: StatusType.FAILURE, onCloseClick: () => sendOnRampWidgetCloseEvent(eventTarget), testId: "fail-view" })), (viewState.view.type !== OnRampWidgetViews.SUCCESS
+                && viewState.view.type !== OnRampWidgetViews.FAIL) && (jsx(OnRampMain, { passport: checkout?.passport, showIframe: showIframe, tokenAmount: viewState.view.data?.amount ?? amount, tokenAddress: viewState.view.data?.tokenAddress ?? tknAddr })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx(TopUpView, { analytics: { userJourney: UserJourney.ON_RAMP }, widgetEvent: IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT, checkout: checkout, provider: provider, showOnrampOption: isOnRampEnabled, showSwapOption: isSwapEnabled, showBridgeOption: isBridgeEnabled, onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget) }))] }));
+}
+
+export { OnRampWidget as default };

package/dist/browser/checkout/OnRampWidget-b1c1cc52.js

@@ -0,0 +1 @@
+import{r as e,C as t,E as s,u as a,V as o,S as n,a as r,b as i,j as d,W as c,c as E,H as R,s as p,U as S,d as u,O as A,F as l,e as v,v as T,i as w,N as O,L as _,f as y,g as N,h as P,k as I,I as C}from"./index-9a5fbaa1.js";import{T as m}from"./TopUpView-ff09517a.js";import{u as x,T as h}from"./useTransakEvents-8580b8ed.js";import{S as g}from"./SpendingCapHero-af71a6f5.js";const f=e=>({position:"relative",maxWidth:"420px",height:"565px",borderRadius:"base.borderRadius.x6",overflow:"hidden",marginLeft:"base.spacing.x2",marginRight:"base.spacing.x2",marginBottom:"base.spacing.x2",display:e?"block":"none"}),D=e=>({display:e?"block":"none"});var L,k;!function(e){e.TRANSAK_WIDGET_OPEN="TRANSAK_WIDGET_OPEN",e.TRANSAK_ORDER_CREATED="TRANSAK_ORDER_CREATED",e.TRANSAK_ORDER_SUCCESSFUL="TRANSAK_ORDER_SUCCESSFUL",e.TRANSAK_ORDER_FAILED="TRANSAK_ORDER_FAILED"}(L||(L={})),function(e){e.PROCESSING="PROCESSING",e.COMPLETED="COMPLETED"}(k||(k={}));const M="transak-iframe",U=6e3;function j({passport:l,showIframe:v,tokenAmount:T,tokenAddress:w}){const{connectLoaderState:O}=e.useContext(t),{checkout:_,provider:y}=O,{eventTargetState:{eventTarget:N}}=e.useContext(s),{t:P}=a(),{viewState:I,viewDispatch:C}=e.useContext(o),[m,g]=e.useState(""),j=e.useRef(),b=!!l&&y?.provider?.isPassport,F=e.useMemo((()=>I.history.length>2&&I.history[I.history.length-2].type===n.TOP_UP_VIEW),[I.history]),{track:G}=r();return e.useEffect((()=>{if(!_||!y)return;let e,t="";(async()=>{const e={exchangeType:i.ONRAMP,web3Provider:y,tokenAddress:w,tokenAmount:T,passport:l};g(await _.createFiatRampUrl(e)),t=await y.getSigner().getAddress()})(),(async()=>{if(l){const t=await l.getUserInfo();e=t?.email}})();const s=document.getElementById(M);if(!s)return;window.addEventListener("message",(a=>{if(!s)return;const o=x.parse(a.origin)?.host?.toLowerCase();a.source===s.contentWindow&&o&&h.includes(o)&&((async(e,t,s)=>{const a={userId:t.toLowerCase(),isPassportWallet:b,email:s};switch(e.event_id){case L.TRANSAK_WIDGET_OPEN:G({userJourney:S.ON_RAMP,screen:"InputScreen",control:"TransakWidgetOpen",controlType:"IframeEvent",...a});break;case L.TRANSAK_ORDER_CREATED:G({userJourney:S.ON_RAMP,screen:"InputScreen",control:"OrderCreated",controlType:"IframeEvent",...a});break;case L.TRANSAK_ORDER_SUCCESSFUL:e.data.status===k.PROCESSING&&G({userJourney:S.ON_RAMP,screen:"OrderInProgress",control:"PaymentProcessing",controlType:"IframeEvent",...a}),e.data.status===k.COMPLETED&&G({userJourney:S.ON_RAMP,screen:"Success",control:"PaymentCompleted",controlType:"IframeEvent",...a});break;case L.TRANSAK_ORDER_FAILED:G({userJourney:S.ON_RAMP,screen:"Failure",control:"PaymentFailed",controlType:"IframeEvent",...a})}})(a.data,t,e),(e=>{if(j.current&&clearTimeout(j.current),e.event_id!==L.TRANSAK_WIDGET_OPEN)return e.event_id===L.TRANSAK_ORDER_SUCCESSFUL&&e.data.status===k.PROCESSING?(C({payload:{type:u.UPDATE_VIEW,view:{type:A.IN_PROGRESS_LOADING}}}),void(j.current=window.setTimeout((()=>{C({payload:{type:u.UPDATE_VIEW,view:{type:A.IN_PROGRESS}}})}),U))):void(e.event_id!==L.TRANSAK_ORDER_SUCCESSFUL||e.data.status!==k.COMPLETED?e.event_id===L.TRANSAK_ORDER_FAILED&&C({payload:{type:u.UPDATE_VIEW,view:{type:A.FAIL,data:{amount:T,tokenAddress:w},reason:`Transaction failed: ${e.data.statusReason}`}}}):C({payload:{type:u.UPDATE_VIEW,view:{type:A.SUCCESS,data:{transactionHash:e.data.transactionHash}}}}));C({payload:{type:u.UPDATE_VIEW,view:{type:A.ONRAMP,data:{amount:I.view.data?.amount??T,tokenAddress:I.view.data?.tokenAddress??w}}}})})(a.data))}))}),[_,y,T,w,l]),d.jsx(c,{sx:D(v),children:d.jsx(E,{header:d.jsx(R,{showBack:F,title:P("views.ONRAMP.header.title"),onCloseButtonClick:()=>p(N)}),footerBackgroundColor:"base.color.translucent.emphasis.200",children:d.jsx(c,{sx:f(v),children:d.jsx("iframe",{title:"Transak",id:M,src:m,allow:"camera;microphone;fullscreen;payment",style:{height:"100%",width:"100%",border:"none",position:"absolute"}})})})})}function b(){const{eventTargetState:{eventTarget:t}}=e.useContext(s),{t:o}=a();return d.jsx(E,{testId:"order-in-progress-view",header:d.jsx(R,{transparent:!0,onCloseButtonClick:()=>p(t)}),footer:d.jsx(l,{}),heroContent:d.jsx(g,{}),floatHeader:!0,children:d.jsxs(v,{heading:o("views.ONRAMP.IN_PROGRESS.content.heading"),children:[o("views.ONRAMP.IN_PROGRESS.content.body1"),d.jsx("br",{}),d.jsx("br",{}),o("views.ONRAMP.IN_PROGRESS.content.body2")]})})}function F({amount:r,tokenAddress:i,config:c}){const{isOnRampEnabled:E,isSwapEnabled:R,isBridgeEnabled:l}=c,[v,x]=e.useReducer(T,{...w,history:[]}),h=e.useMemo((()=>({viewState:v,viewDispatch:x})),[v,T]),{connectLoaderState:g}=e.useContext(t),{checkout:f,provider:D}=g,[L,k]=e.useState(i),{eventTargetState:{eventTarget:M}}=e.useContext(s),{t:U}=a(),F=e.useMemo((()=>v.view.type===A.ONRAMP),[v.view.type]);return e.useEffect((()=>{f&&D&&(async()=>{if(!(await f.getNetworkInfo({provider:D})).isSupported)return;const e=L?.toLocaleLowerCase()===O?O:i;k(e)})()}),[f,D,x]),d.jsxs(o.Provider,{value:h,children:[v.view.type===n.LOADING_VIEW&&d.jsx(_,{loadingText:U("views.ONRAMP.initialLoadingText"),showFooterLogo:!0}),v.view.type===A.IN_PROGRESS_LOADING&&d.jsx(_,{loadingText:U("views.ONRAMP.IN_PROGRESS_LOADING.loading.text"),showFooterLogo:!0}),v.view.type===A.IN_PROGRESS&&d.jsx(b,{}),v.view.type===A.SUCCESS&&d.jsx(y,{statusText:U("views.ONRAMP.SUCCESS.text"),actionText:U("views.ONRAMP.SUCCESS.actionText"),onRenderEvent:()=>N(M,v.view.data.transactionHash),onActionClick:()=>p(M),statusType:P.SUCCESS,testId:"success-view"}),v.view.type===A.FAIL&&d.jsx(y,{statusText:U("views.ONRAMP.FAIL.text"),actionText:U("views.ONRAMP.FAIL.actionText"),onRenderEvent:()=>I(M,v.view.reason??"Transaction failed"),onActionClick:()=>{x({payload:{type:u.UPDATE_VIEW,view:{type:A.ONRAMP,data:v.view.data}}})},statusType:P.FAILURE,onCloseClick:()=>p(M),testId:"fail-view"}),v.view.type!==A.SUCCESS&&v.view.type!==A.FAIL&&d.jsx(j,{passport:f?.passport,showIframe:F,tokenAmount:v.view.data?.amount??r,tokenAddress:v.view.data?.tokenAddress??L}),v.view.type===n.TOP_UP_VIEW&&d.jsx(m,{analytics:{userJourney:S.ON_RAMP},widgetEvent:C.IMTBL_ONRAMP_WIDGET_EVENT,checkout:f,provider:D,showOnrampOption:E,showSwapOption:R,showBridgeOption:l,onCloseButtonClick:()=>p(M)})]})}export{F as default};