Conversation
- Implemented ConcordiumIDAppPopup for handling popups related to WalletConnect and account creation. - Added session detection utilities for checking Concordium wallet connections. - Introduced WalletConnect initialization and configuration utilities. - Created Vue-specific entry point for Merchant SDK with configuration wrappers. - Configured Tailwind CSS for styling. - Established TypeScript configuration for building and type declaration generation. - Set up Vite configuration for library mode with proper asset handling and external dependencies.
| const sdk = new ConcordiumVerificationWebUI({ network: 'testnet' }); // Set Concordium network here | ||
|
|
||
| try { | ||
| await sdk.initWalletConnect( |
There was a problem hiding this comment.
Are we still using this function?
I thought we decided to take the the wallet connect params in the constructor like this?
const sdk = new ConcordiumVerificationWebUI({
network: "testnet", // Use "mainnet" for production
projectId: "YOUR_WALLETCONNECT_PROJECT_ID",
metadata: {
name: "Merchant App",
description: "Merchant connecting to Concordium IDApp",
url: window.location.origin,
icons: [`${window.location.origin}/favicon.ico`],
},
});
|
|
||
| --- | ||
|
|
||
| ## Complete Example (Vue 3) |
There was a problem hiding this comment.
Probably its not required to add this section in the readme since we already have /example folder in the project.
| { | ||
| image: slide1, | ||
| alt: 'locked-graphic', | ||
| title: 'Anonymous Verification that keeps your data safe', |
There was a problem hiding this comment.
Suggesting to keep all messages / titles / texts in one file in some constant and refer from there in the app.
This way, tomorrow if we have add language support we can keep different files (like, en.ts - for english) for different langauge and refer those depending on what user choose in the UI
| title: 'Common online verification exposes your data ', | ||
| reduceOpacity: true, | ||
| points: [ | ||
| { icon: 'exclamation', text: 'Personal data shared' }, |
There was a problem hiding this comment.
Suggesting to keep all messages / titles / texts in one file in some constant and refer from there in the app.
This way, tomorrow if we have add language support we can keep different files (like, en.ts - for english) for different langauge and refer those depending on what user choose in the UI
| <p class="font-normal text-[12px] leading-[19px] tracking-[0px] font-inter" style="color: #0D0F11;"> | ||
| ${ | ||
| state === 'loading' | ||
| ? 'Approve in your ConcordiumID App' |
There was a problem hiding this comment.
Same comment here:
Suggesting to keep all messages / titles / texts in one file in some constant and refer from there in the app.
This way, tomorrow if we have add language support we can keep different files (like, en.ts - for english) for different langauge and refer those depending on what user choose in the UI
Also imagine they decides to change the name of the app, for example from ConcordiumID to something else. then we need to change in all pages. but if we keep in one file we just need to update one.
| const walletConnectService = ServiceFactory.createWalletConnectService(); | ||
| await walletConnectService.initialize(); | ||
| const activeSessions = walletConnectService.getActiveSessions(); | ||
| const activeSessionData = activeSessions[0]; // Get first active session |
There was a problem hiding this comment.
would be nice to check the length of activeSessions array is > 0
| detail: { | ||
| type: 'active_session', | ||
| data: { | ||
| message: 'Active WalletConnect session detected', |
There was a problem hiding this comment.
Same comment here - please keep these texts in common file.
| // Helper function to create mobile steps | ||
| function createMobileStepHTML(): string { | ||
| const steps = [ | ||
| { count: '1', text: 'Open in your Concordium Wallet' }, |
There was a problem hiding this comment.
Same comment here - please keep these texts in common file.
| // Update button text for mobile | ||
| const walletBtnText = scanContainer.querySelector('#wallet-btn-text'); | ||
| if (walletBtnText) { | ||
| walletBtnText.textContent = `Verify with ${selected.text}`; |
There was a problem hiding this comment.
Same comment here - please keep these texts in common file.
| const footerTitle = scanContainer.querySelector('#footer-title'); | ||
| if (footerTitle) { | ||
| if (selected.value === WALLET_TYPES.CONCORDIUM_ID) { | ||
| footerTitle.textContent = 'Download Concordium ID'; |
There was a problem hiding this comment.
Same comment here - please keep these texts in common file.
| 'Active session detected, redirecting to returning user modal...' | ||
| ); | ||
|
|
||
| // // Extract session details |
There was a problem hiding this comment.
Suggest deleting all commented code which are not used or required.
| }; | ||
|
|
||
| window.dispatchEvent( | ||
| new CustomEvent('concordium-merchant-sdk-event', { |
There was a problem hiding this comment.
The dispatch event should be @concordium/verification-web-ui-event as mentioned in the readme
|
|
||
| // Emit error event | ||
| window.dispatchEvent( | ||
| new CustomEvent('concordium-merchant-sdk-event', { |
There was a problem hiding this comment.
The dispatch event should be @concordium/verification-web-ui-event as mentioned in the readme
| message: 'User disconnected', | ||
| }, | ||
|
|
||
| getDefaultMetadata: () => ({ |
There was a problem hiding this comment.
May I know the use of wallet connect metadata ? like arent' we supposed to take these wallet connect metadata from merchant or customer ?
|
|
||
| // Emit active_session event to merchant with session data | ||
| window.dispatchEvent( | ||
| new CustomEvent('concordium-merchant-sdk-event', { |
There was a problem hiding this comment.
We should use this event name @concordium/verification-web-ui-event ?
There was a problem hiding this comment.
We should use the prettier config at the repository root instead of this
| { | ||
| "name": "@concordium/verification-web-ui", | ||
| "private": false, | ||
| "version": "1.0.0", |
There was a problem hiding this comment.
I think we should do
| "version": "1.0.0", | |
| "version": "0.1.0", |
instead and wait with 1.0.0 until we've had a chance to properly review.
There was a problem hiding this comment.
These are not included in any build it seems? I think it would be good to:
- move this to be a separate project in the
examples/directory at the repository root. - Include build steps and ensure this runs as part of CI.
There was a problem hiding this comment.
| export interface PresentationRequest { | ||
| challenge: string; | ||
| credentialSubject?: any; | ||
| [key: string]: any; | ||
| } | ||
|
|
||
| export interface PresentationResponse { | ||
| verifiablePresentation: any; | ||
| presentationContext: any; | ||
| proof: any; | ||
| type: any; | ||
| verifiableCredential: any; | ||
| } |
There was a problem hiding this comment.
These types don't provide much value. I think we should consider integrating with the web-SDK as a peer dependency? Or is there any reason why we would not do this?
Also the types don't seem to align with actual the type definitions for the V1 verifiable presentations?
| "format": "prettier --write .", | ||
| "format:check": "prettier --check .", |
There was a problem hiding this comment.
| "format": "prettier --write .", | |
| "format:check": "prettier --check .", | |
| "fmt": "prettier --write .", | |
| "fmt-check": "prettier --check .", |
to include this in CI
| "link": "./setup-link.sh", | ||
| "preview": "vite preview", | ||
| "typecheck": "tsc --noEmit", | ||
| "lint": "tsc --noEmit", |
There was a problem hiding this comment.
We should align with linting done for the other projects, i.e.
| "lint": "tsc --noEmit", | |
| "lint": "eslint . --cache --ext ts,tsx --report-unused-disable-directives --max-warnings 0", |
Root repository has eslint setup to run for all projects, so that should be used for linting. See the web SDK project as a reference.
There was a problem hiding this comment.
Please make sure to run yarn at the repository root to update the yarn.lock file.
- Updated ConcordiumEventData interface to include 'repeat-verification' event. - Introduced showErrorState method in ConcordiumVerificationWebUI for handling verification errors. - Removed unnecessary console logs across various files to clean up the code. - Added new SVG assets for modal graphics and section separators. - Enhanced mobile deep link handling to include redirect to origin. - Updated Vite configuration to externalize additional dependencies. - Added new styles for landing and processing modals in desktop.css.
3 participants
Purpose
This pull request sets up the initial project structure and configuration for the
@concordium/verification-web-uipackage. It introduces essential environment variables, project metadata, formatting and build tools, a custom PostCSS plugin, and key source files including a landing modal UI and WalletConnect integration examples.Changes
Project Initialization and Configuration:
package.jsonwith project metadata, build scripts, dependencies (including WalletConnect, Tailwind CSS, and others), and export definitions for publishing as a UI library..envfor WalletConnect and Concordium network configuration..prettierrcand.prettierignoreto enforce consistent code formatting and ignore build artifacts.index.htmlas the app entry point._redirectsfile to support client-side routing.Build and Styling Tooling:
postcss-remove-empty-layers.js) to flatten Tailwind v4@layerdirectives, ensuring compatibility for consumers not using Tailwind.postcss.config.tsto use Tailwind, Autoprefixer, and the custom plugin for CSS processing.Source Code and Examples:
walletconnect-integration.ts) demonstrating SDK-managed and merchant-provided WalletConnect flows, event handling, and usage in React/Vue.landing.ts) with a carousel, animated transitions, and event-driven navigation for the verification flow.Checklist
hard-to-understand areas.
CLA acceptance
_Remove if not applicable.
By submitting the contribution I accept the terms and conditions of the
Contributor License Agreement v1.0
link: https://developers.concordium.com/CLAs/Contributor-License-Agreement-v1.0.pdf
I accept the above linked CLA.