@@ -11,41 +11,6 @@ export interface RequestArguments {
1111 params ?: unknown [ ] | object
1212}
1313
14- // TODO - SK-47 - remove this
15- const overlayStyle = {
16- position : "fixed" ,
17- top : "0" ,
18- left : "0" ,
19- right : "0" ,
20- bottom : "0" ,
21- backgroundColor : "rgba(0,0,0,0.8)" ,
22- backdropFilter : "blur(10px)" ,
23- zIndex : "9999" ,
24- display : "flex" ,
25- alignItems : "center" ,
26- justifyContent : "center" ,
27- flexDirection : "column" ,
28- color : "white" ,
29- fontWeight : "500" ,
30- fontFamily : "'Barlow', sans-serif" ,
31- }
32-
33- // TODO - SK-47 - remove this
34- const iframeStyle = {
35- width : "840px" ,
36- height : "540px" ,
37- zIndex : "99999" ,
38- backgroundColor : "white" ,
39- border : "none" ,
40- outline : "none" ,
41- borderRadius : "40px" ,
42- boxShadow : "0px 4px 40px 0px rgb(0 0 0), 0px 4px 8px 0px rgb(0 0 0 / 25%)" ,
43- position : "fixed" ,
44- top : "50%" ,
45- left : "50%" ,
46- transform : "translate(-50%,-50%)" ,
47- }
48-
4914const iframeStyleOnlyQR = {
5015 width : "245px" ,
5116 height : "245px" ,
@@ -56,19 +21,6 @@ const iframeStyleOnlyQR = {
5621 outline : "none" ,
5722}
5823
59- // TODO - SK-47 - remove this
60- const overlayHtml = `
61- <div id="argent-mobile-modal-container" style="position: relative">
62- <iframe class="argent-iframe" allow="clipboard-write"></iframe>
63- <div class="argent-close-button" style="position: absolute; top: 24px; right: 24px; cursor: pointer;">
64- <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
65- <circle cx="16" cy="16" r="16" fill="#F5F3F0"/>
66- <path fill-rule="evenodd" clip-rule="evenodd" d="M22.2462 9.75382C22.7018 10.2094 22.7018 10.9481 22.2462 11.4037L17.6499 16L22.2462 20.5963C22.7018 21.0519 22.7018 21.7906 22.2462 22.2462C21.7905 22.7018 21.0519 22.7018 20.5962 22.2462L16 17.6499L11.4039 22.246C10.9482 22.7017 10.2096 22.7017 9.75394 22.246C9.29833 21.7904 9.29833 21.0517 9.75394 20.5961L14.3501 16L9.75394 11.4039C9.29833 10.9483 9.29833 10.2096 9.75394 9.75396C10.2096 9.29835 10.9482 9.29835 11.4039 9.75396L16 14.3501L20.5962 9.75382C21.0519 9.29821 21.7905 9.29821 22.2462 9.75382Z" fill="#333332"/>
67- </svg>
68- </div>
69- </div>
70- `
71-
7224const overlayHtmlOnlyQR = `
7325 <div id="argent-mobile-modal-container" style="position: relative; display: flex; justify-content: center; align-items: center">
7426 <iframe class="argent-iframe" allow="clipboard-write"></iframe>
@@ -148,59 +100,46 @@ class ArgentModal {
148100 }
149101 }
150102
151- // TODO - SK-47 - handle this
152103 public showApprovalModal ( _ : RequestArguments ) : void {
153104 if ( device === "desktop" ) {
154- this . showModalOld ( {
155- desktop : `${ this . bridgeUrl } ,
156- ios : "" ,
157- android : "" ,
158- } )
105+ this . getModal ( undefined , Layout . approval )
159106 return
160107 }
161108 const href = encodeURIComponent ( window . location . href )
162-
163- /*
109+ /*
164110 //https://docs.walletconnect.com/2.0/web3wallet/mobileLinking?platform=ios#ios-wallet-support
165- Additionally when there is a signing request triggered by the dapp it will hit the deep link with an incomplete URI,
111+ Additionally when there is a signing request triggered by the dapp it will hit the deep link with an incomplete URI,
166112 this should be ignored and not considered valid as it's only used for automatically redirecting the users to approve or reject a signing request.
167113 */
168- this . showModalOld ( {
169- desktop : `${ this . bridgeUrl } ${ href } ,
170- ios : `${ this . mobileUrl } ${ href } ,
171- android : `${ this . mobileUrl } ${ href } ,
172- } )
114+ this . showModal (
115+ {
116+ desktop : `${ this . bridgeUrl } ${ href } ,
117+ ios : `${ this . mobileUrl } ${ href } ,
118+ android : `${ this . mobileUrl } ${ href } ,
119+ } ,
120+ undefined ,
121+ )
173122 }
174123
175124 public closeModal ( success ?: boolean ) {
176125 const modal = this . standaloneConnectorModal
177126 if ( success ) {
178127 modal ?. $set ( { layout : Layout . success } )
179- setTimeout ( ( ) => modal ?. $destroy ( ) , 3000 )
128+ setTimeout ( ( ) => modal ?. $destroy ( ) , 500 )
180129 } else {
181130 modal ?. $set ( { layout : Layout . failure } )
182131 }
183132 }
184133
185- // TODO - SK-47 - remove this
186- public closeModalOld ( success ?: boolean ) {
187- if ( success ) {
188- this . overlay
189- ?. querySelector ( "iframe" )
190- ?. contentWindow ?. postMessage ( "argent-login.success" , "*" )
191- this . popupWindow ?. postMessage ( "argent-login.success" , "*" )
192- this . closingTimeout = setTimeout ( this . close , 3400 )
193- } else {
194- this . close ( )
195- }
196- }
197-
198- private showModal ( urls : Urls , modalWallet : ModalWalletExtended ) {
134+ private getModal (
135+ modalWallet ?: ModalWalletExtended ,
136+ modalLayout : Layout = Layout . qrCode ,
137+ ) {
199138 this . standaloneConnectorModal = new Modal ( {
200139 target : getModalTarget ( ) ,
201140 props : {
202- layout : Layout . qrCode ,
203- dappName : modalWallet . dappName ,
141+ layout : modalLayout ,
142+ dappName : modalWallet ? .dappName ,
204143 showBackButton : false ,
205144 selectedWallet : modalWallet ,
206145 callback : async ( wallet : ModalWallet | null ) => {
@@ -215,64 +154,12 @@ class ArgentModal {
215154 } ,
216155 } ,
217156 } )
218-
219- this . getQR ( urls )
220157 }
221158
222- // TODO - SK-47 - remove this
223- private showModalOld ( urls : Urls ) {
224- clearTimeout ( this . closingTimeout )
225- if ( this . overlay || this . popupWindow ) {
226- this . close ( )
227- }
228-
229- if ( device === "android" || device === "ios" ) {
230- const toMobileApp = document . createElement ( "button" )
231- toMobileApp . style . display = "none"
232- toMobileApp . addEventListener ( "click" , ( ) => {
233- window . location . href = urls [ device ]
234- } )
235- toMobileApp . click ( )
159+ private showModal ( urls : Urls , modalWallet ?: ModalWalletExtended ) {
160+ this . getModal ( modalWallet , Layout . qrCode )
236161
237- return
238- }
239- if ( this . type === "window" ) {
240- const features =
241- "menubar=no,location=no,resizable=no,scrollbars=no,status=no,width=840,height=540"
242- this . popupWindow =
243- window . open ( urls . desktop , "_blank" , features ) || undefined
244- return
245- }
246-
247- // type=overlay, device=desktop
248- const overlay = document . createElement ( "div" )
249- overlay . innerHTML = overlayHtml
250- overlay . id = "argent-mobile-modal-overlay"
251- for ( const [ key , value ] of Object . entries ( overlayStyle ) ) {
252- overlay . style [ key as any ] = value
253- }
254- document . body . appendChild ( overlay )
255- overlay . addEventListener ( "click" , ( ) => this . closeModal ( ) )
256- this . overlay = overlay
257-
258- const iframe = overlay . querySelector ( "iframe" ) as HTMLIFrameElement
259- iframe . setAttribute ( "src" , urls . desktop )
260- for ( const [ key , value ] of Object . entries ( iframeStyle ) ) {
261- iframe . style [ key as any ] = value
262- }
263-
264- const closeButton = overlay . querySelector (
265- ".argent-close-button" ,
266- ) as HTMLDivElement
267- closeButton . addEventListener ( "click" , ( ) => this . closeModal ( ) )
268- }
269-
270- // TODO - SK-47 - remove this
271- private close = ( ) => {
272- this . overlay ?. remove ( )
273- this . popupWindow ?. close ( )
274- this . overlay = undefined
275- this . popupWindow = undefined
162+ this . getQR ( urls )
276163 }
277164}
278165
0 commit comments