Skip to content

Commit 39c2ad2

Browse files
committed
VDX-298: Do not show deeplink button on desktop browser. Remove logo from narrow screens for now because it looked corrupted.
1 parent 1cf82c1 commit 39c2ad2

4 files changed

Lines changed: 19 additions & 47 deletions

File tree

packages/oid4vci-demo-frontend/src/components/AuthenticationQR/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ class AuthenticationQR extends Component<AuthenticationQRProps> {
111111
render() {
112112
// Show the loader until we have details on which parameters to load into the QR code
113113
return this.state.qrCode ? (
114-
<NonMobileOS><div>{this.state.qrCode}</div></NonMobileOS>
114+
<div>{this.state.qrCode}</div>
115115
) : (
116116
<BallTriangle color="#352575" height="100" width="100" />
117117
)

packages/oid4vci-demo-frontend/src/configs/account.banqup.json

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,6 @@
1414
"src": "banqup/logo.svg"
1515
},
1616
"mobile": {
17-
"logo": {
18-
"src": "banqup/logo.svg",
19-
"alt": "banqup",
20-
"width": 65,
21-
"height": 65
22-
},
2317
"backgroundColor": "#EFFFF5"
2418
}
2519
},
@@ -54,12 +48,6 @@
5448
"src": "banqup/logo.svg"
5549
},
5650
"mobile": {
57-
"logo": {
58-
"src": "banqup/logo.svg",
59-
"alt": "banqup",
60-
"width": 65,
61-
"height": 65
62-
},
6351
"backgroundColor": "#EFFFF5"
6452
},
6553
"rightPaneGrid": {
@@ -148,12 +136,6 @@
148136
"src": "bank/guest_credential.svg"
149137
},
150138
"mobile": {
151-
"logo": {
152-
"src": "bank/logo.svg",
153-
"alt": "bank",
154-
"width": 43,
155-
"height": 41
156-
}
157139
}
158140
},
159141
"infoRequest": {
@@ -167,12 +149,6 @@
167149
"src": "banqup/logo.svg"
168150
},
169151
"mobile": {
170-
"logo": {
171-
"src": "banqup/logo.svg",
172-
"alt": "banqup",
173-
"width": 65,
174-
"height": 65
175-
},
176152
"backgroundColor": "#EFFFF5"
177153
},
178154
"form": [
@@ -231,12 +207,6 @@
231207
"src": "banqup/logo.svg"
232208
},
233209
"mobile": {
234-
"logo": {
235-
"src": "banqup/logo.svg",
236-
"alt": "banqup",
237-
"width": 65,
238-
"height": 65
239-
}
240210
}
241211
},
242212
"verifyEmail": {

packages/oid4vci-demo-frontend/src/pages/SSICredentialIssueRequestPage/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,12 +153,12 @@ const SSICredentialIssueRequestPage: React.FC = () => {
153153
marginTop: isNarrowScreen ? 20 : '15%',
154154
alignItems: 'center'
155155
}}>
156-
<NonMobile>
156+
<NonMobileOS>
157157
<div style={{flexGrow: 1, marginBottom: 34}}>
158158
{qrCode}
159159
</div>
160-
</NonMobile>
161-
<Mobile>
160+
</NonMobileOS>
161+
<MobileOS>
162162
<div style={{
163163
gap: 24,
164164
display: 'flex',
@@ -171,7 +171,7 @@ const SSICredentialIssueRequestPage: React.FC = () => {
171171
}
172172
<DeepLink style={{flexGrow: 1, marginTop: '20px'}} link={state?.uri!}/>
173173
</div>
174-
</Mobile>
174+
</MobileOS>
175175
</div>
176176
<div style={{marginTop: "20px"}}>
177177
<NonMobileOS>

packages/oid4vci-demo-frontend/src/pages/SSICredentialVerifyRequestPage/index.tsx

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {AuthorizationResponsePayload} from "@sphereon/did-auth-siop"
77
import MemoizedAuthenticationQR from '../../components/AuthenticationQR'
88
import SSIPrimaryButton from "../../components/SSIPrimaryButton"
99
import {useMediaQuery} from "react-responsive"
10-
import {Mobile, MobileOS, NonMobile} from "../../index"
10+
import {Mobile, MobileOS, NonMobile, NonMobileOS} from "../../index"
1111
import {useFlowRouter} from "../../router/flow-router"
1212
import {useEcosystem} from "../../ecosystem/ecosystem"
1313
import {SSICredentialVerifyRequestPageConfig} from "../../ecosystem/ecosystem-config"
@@ -80,7 +80,7 @@ export default function SSICredentialVerifyRequestPage(): React.ReactElement | n
8080
...(isTabletOrMobile && { gap: 24, ...(pageConfig.mobile?.backgroundColor && { backgroundColor: pageConfig.mobile.backgroundColor }) }),
8181
...(!isTabletOrMobile && { justifyContent: 'center', backgroundColor: '#FFFFFF' }),
8282
}}>
83-
{(isTabletOrMobile && pageConfig?.logo) &&
83+
{(isTabletOrMobile && pageConfig?.mobile?.logo) &&
8484
<img
8585
src={`${pageConfig.mobile?.logo?.src}`}
8686
alt={`${pageConfig.mobile?.logo?.alt}`}
@@ -106,16 +106,18 @@ export default function SSICredentialVerifyRequestPage(): React.ReactElement | n
106106
marginTop: `${isTabletOrMobile ? 20 : pageConfig.rightPaneLeftPane?.qrCode?.marginTop ?? '25%'}`,
107107
alignItems: 'center'
108108
}}>
109-
<div style={{flexGrow: 1, display: 'flex', justifyContent: 'center', marginBottom: 0}}>
110-
{/*Whether the QR code is shown (mobile) is handled in the component itself */}
111-
{<MemoizedAuthenticationQR ecosystem={ecosystem}
112-
fgColor={'rgba(50, 57, 72, 1)'}
113-
width={pageConfig.rightPaneLeftPane?.qrCode?.width ?? 300}
114-
vpDefinitionId={flowRouter.getVpDefinitionId()}
115-
onAuthRequestRetrieved={console.log}
116-
onSignInComplete={onSignInComplete}
117-
setQrCodeData={setDeepLink}/>}
118-
</div>
109+
<NonMobileOS>
110+
<div style={{flexGrow: 1, display: 'flex', justifyContent: 'center', marginBottom: 0}}>
111+
{/*Whether the QR code is shown (mobile) is handled in the component itself */}
112+
{<MemoizedAuthenticationQR ecosystem={ecosystem}
113+
fgColor={'rgba(50, 57, 72, 1)'}
114+
width={pageConfig.rightPaneLeftPane?.qrCode?.width ?? 300}
115+
vpDefinitionId={flowRouter.getVpDefinitionId()}
116+
onAuthRequestRetrieved={console.log}
117+
onSignInComplete={onSignInComplete}
118+
setQrCodeData={setDeepLink}/>}
119+
</div>
120+
</NonMobileOS>
119121
<MobileOS>
120122
<div style={{gap: 24, display: 'flex', flexDirection: 'column', alignItems: 'center', overflow: 'hidden'}}>
121123
{ pageConfig.mobile?.image &&

0 commit comments

Comments
 (0)