From 69e86b4c89274f21270b27835be3f6edd1ee14f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yasin=20=C3=87al=C4=B1=C5=9Fkan?= Date: Fri, 7 Jul 2023 14:45:12 +0300 Subject: [PATCH 1/2] feat: Implement compact mode --- README.md | 7 +- package.json | 4 +- src/PeraWalletConnect.ts | 17 ++- src/modal/PeraWalletConnectModal.ts | 10 +- src/modal/_pera-wallet-modal.scss | 14 +++ .../PeraWalletConnectModalDesktopMode.ts | 26 +++- ...era-wallet-connect-modal-desktop-mode.scss | 111 ++++++++++++++++++ .../accordion/_pera-wallet-accordion.scss | 10 +- src/modal/peraWalletConnectModalUtils.ts | 10 +- ...eraWalletConnectModalInformationSection.ts | 7 +- src/modal/sign-txn/PeraWalletSignTxnModal.ts | 10 +- .../sign-txn/_pera-wallet-sign-txn-modal.scss | 7 ++ src/util/connect/connectFlow.ts | 3 +- src/util/connect/connectFlowModels.ts | 1 + src/util/peraWalletUtils.ts | 4 +- src/util/sign/signTransactionFlow.ts | 12 +- src/util/sign/signTransactionFlowModels.ts | 1 + 17 files changed, 225 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index e3edb20..ec54e55 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,7 @@ try { | ------------------------ | ------- | ------------------------------------- | -------- | | `chainId` | `4160` | `416001`, `416002`, `416003` , `4160` | optional | | `shouldShowSignTxnToast` | `true` | `boolean` | optional | +| `compactMode` | `false` | `boolean` | optional | #### **`chainId`** @@ -109,7 +110,11 @@ Determines which Algorand network your dApp uses. Group 48096937 -It's enabled by default but in some cases, you may not need the toast message (e.g. you already have signing guidance for users). To disable it, use the shouldShowSignTxnToast option: +It's enabled by default but in some cases, you may not need the toast message (e.g. you already have signing guidance for users). To disable it, use the `shouldShowSignTxnToast` option. + +#### **`compactMode`** + +It offers a compact UI optimized for smaller screens, with a minimum resolution of 400x400 pixels. ## Methods diff --git a/package.json b/package.json index 669bdea..b397b63 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,9 @@ "dev": "./node_modules/.bin/rollup -c -w", "build": "npm run eslint && ./node_modules/.bin/rollup -c", "build:release": "./node_modules/.bin/rollup -c", - "eslint": "./node_modules/.bin/eslint --ext .jsx,.js,.tsx,.ts src/" + "eslint": "./node_modules/.bin/eslint --ext .jsx,.js,.tsx,.ts src/", + "prettify": "prettier --config ./.prettierrc.js --write \"src/**/*.{ts,tsx}\"", + "type-check:watch": "tsc --watch" }, "author": "Pera Wallet", "license": "ISC", diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index cfab518..a3c7d74 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -40,18 +40,21 @@ interface PeraWalletConnectOptions { bridge?: string; shouldShowSignTxnToast?: boolean; chainId?: AlgorandChainIDs; + compactMode?: boolean; } function generatePeraWalletConnectModalActions({ isWebWalletAvailable, shouldDisplayNewBadge, - shouldUseSound + shouldUseSound, + compactMode }: PeraWalletModalConfig) { return { open: openPeraWalletConnectModal({ isWebWalletAvailable, shouldDisplayNewBadge, - shouldUseSound + shouldUseSound, + compactMode }), close: () => removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID) }; @@ -62,6 +65,7 @@ class PeraWalletConnect { connector: WalletConnect | null; shouldShowSignTxnToast: boolean; chainId?: AlgorandChainIDs; + compactMode?: boolean; constructor(options?: PeraWalletConnectOptions) { this.bridge = options?.bridge || ""; @@ -73,6 +77,7 @@ class PeraWalletConnect { : options.shouldShowSignTxnToast; this.chainId = options?.chainId; + this.compactMode = options?.compactMode || false; } get platform() { @@ -114,7 +119,8 @@ class PeraWalletConnect { resolve, reject, webWalletURL, - chainId: this.chainId + chainId: this.chainId, + isCompactMode: this.compactMode }); if (isWebWalletAvailable) { @@ -128,7 +134,8 @@ class PeraWalletConnect { qrcodeModal: generatePeraWalletConnectModalActions({ isWebWalletAvailable, shouldDisplayNewBadge, - shouldUseSound + shouldUseSound, + compactMode: this.compactMode }) }); @@ -304,6 +311,7 @@ class PeraWalletConnect { signTxnRequestParams, webWalletURL, method: "SIGN_TXN", + isCompactMode: this.compactMode, resolve, reject }) @@ -383,6 +391,7 @@ class PeraWalletConnect { signer, chainId, webWalletURL, + isCompactMode: this.compactMode, resolve, reject }) diff --git a/src/modal/PeraWalletConnectModal.ts b/src/modal/PeraWalletConnectModal.ts index 3769aef..8b7f402 100644 --- a/src/modal/PeraWalletConnectModal.ts +++ b/src/modal/PeraWalletConnectModal.ts @@ -7,7 +7,7 @@ import { import styles from "./_pera-wallet-modal.scss"; const peraWalletConnectModal = document.createElement("template"); -const peraWalletConnectModalClassNames = isMobile() +let peraWalletConnectModalClassNames = isMobile() ? `${PERA_WALLET_MODAL_CLASSNAME} ${PERA_WALLET_MODAL_CLASSNAME}--mobile` : `${PERA_WALLET_MODAL_CLASSNAME} ${PERA_WALLET_MODAL_CLASSNAME}--desktop`; @@ -21,6 +21,12 @@ export class PeraWalletConnectModal extends HTMLElement { styleSheet.textContent = styles; + const isCompactMode = this.getAttribute("compact-mode") === "true"; + + if (isCompactMode) { + peraWalletConnectModalClassNames = `${peraWalletConnectModalClassNames} ${PERA_WALLET_MODAL_CLASSNAME}--compact`; + } + if (isSmallScreen() && isMobile()) { peraWalletConnectModal.innerHTML = `
@@ -52,6 +58,8 @@ export class PeraWalletConnectModal extends HTMLElement { "is-web-wallet-avaliable" )}" should-display-new-badge="${this.getAttribute( "should-display-new-badge" + )}" compact-mode="${this.getAttribute( + "compact-mode" )}">
diff --git a/src/modal/_pera-wallet-modal.scss b/src/modal/_pera-wallet-modal.scss index 274786c..de5b5e5 100644 --- a/src/modal/_pera-wallet-modal.scss +++ b/src/modal/_pera-wallet-modal.scss @@ -3,6 +3,11 @@ .pera-wallet-modal { --pera-wallet-modal-font-family: "Inter", sans-serif; + --pera-wallet-modal-compact-width: 380px; + --pera-wallet-modal-compact-height: 396px; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; position: fixed; top: 0; @@ -55,6 +60,15 @@ } } + &--compact:not(.pera-wallet-modal--mobile) { + .pera-wallet-modal__body { + width: var(--pera-wallet-modal-compact-width); + height: var(--pera-wallet-modal-compact-height); + + padding: 0; + } + } + * { box-sizing: border-box; diff --git a/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts b/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts index e753b25..ada1c82 100644 --- a/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts +++ b/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts @@ -92,7 +92,7 @@ const peraWalletConnectModalDesktopModeDefaultView = `
-
+

Don’t have Pera Wallet app? @@ -177,6 +177,18 @@ export class PeraWalletModalDesktopMode extends HTMLElement { this.shadowRoot.addEventListener("click", (event) => { this.handleAccordion(event as MouseEvent); }); + + const isCompactMode = this.getAttribute("compact-mode") === "true"; + + if (isCompactMode) { + const modalDesktopMode = this.shadowRoot.getElementById( + "pera-wallet-connect-modal-desktop-mode" + ); + + modalDesktopMode?.classList.add( + "pera-wallet-connect-modal-desktop-mode--compact" + ); + } } } @@ -272,9 +284,15 @@ export class PeraWalletModalDesktopMode extends HTMLElement { renderQRCode() { const URI = this.getAttribute("uri"); const isWebWalletAvailable = this.getAttribute("is-web-wallet-avaliable"); + const isCompactMode = this.getAttribute("compact-mode") === "true"; - // eslint-disable-next-line no-magic-numbers - const size = isWebWalletAvailable === "false" ? 250 : 205; + /* eslint-disable no-magic-numbers */ + let size = isWebWalletAvailable === "false" ? 250 : 205; + + if (isCompactMode) { + size = 190; + } + /* eslint-enable no-magic-numbers */ if (URI) { const qrCode = new QRCodeStyling({ @@ -289,7 +307,7 @@ export class PeraWalletModalDesktopMode extends HTMLElement { }, imageOptions: { crossOrigin: "anonymous", - margin: 10 + margin: 8 }, cornersSquareOptions: {type: "extra-rounded"}, cornersDotOptions: { diff --git a/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss b/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss index c4088d4..6e63b6a 100644 --- a/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss +++ b/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss @@ -9,6 +9,12 @@ .pera-wallet-connect-modal-desktop-mode__default-view { display: block; + .pera-wallet-accordion-item--active { + .pera-wallet-accordion-item__content { + height: 364px; + } + } + &--web-wallet-not-avaliable { .pera-wallet-accordion-item--web-wallet { display: none; @@ -65,6 +71,111 @@ } } + &--compact { + grid-template-columns: unset; + gap: unset; + + .pera-wallet-connect-modal-desktop-mode__web-wallet { + padding: 28px 40px; + + .pera-wallet-connect-modal-desktop-mode__web-wallet__logo-wrapper { + box-shadow: unset; + } + + .pera-wallet-connect-modal-desktop-mode__web-wallet__description { + margin-bottom: 16px; + } + + .pera-wallet-connect-modal-desktop-mode__web-wallet__launch-button { + width: 172px; + height: 40px; + + margin: 0 auto; + } + } + + .pera-wallet-connect-modal-desktop-mode__web-wallet-iframe { + height: 100%; + } + + .pera-wallet-connect-modal-desktop-mode__default-view { + overflow: hidden; + + border-radius: 24px; + + .pera-wallet-accordion-item { + margin-bottom: 0; + + border-radius: 0; + + &:not(:last-child) { + border-bottom: 1px solid #e6e8ee; + } + + #pera-wallet-iframe { + height: 100%; + } + } + + .pera-wallet-accordion-toggle { + padding: 20px; + + &__text, + &__content-with-label__text { + color: #626268; + font-size: 14px; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.09px; + } + } + + .pera-wallet-accordion-toggle__bold-color { + font-weight: 600; + + color: #1a1a1a; + } + + .pera-wallet-accordion-item--active { + .pera-wallet-accordion-item__content { + height: 265px; + } + } + + .pera-wallet-connect-modal-desktop-mode__download-pera-container { + display: flex; + justify-content: space-between; + + margin-top: 14px; + padding: 0 20px; + } + + .pera-wallet-connect-modal-desktop-mode__download-pera-description, + .pera-wallet-connect-modal-desktop-mode__download-pera-button { + margin: 0; + } + + .pera-wallet-connect-modal-desktop-mode__download-pera-button { + font-weight: 500; + } + + .pera-wallet-connect-qr-code-wrapper { + margin: 4px auto 0; + padding: 0; + + box-shadow: unset; + + svg { + padding: 8px; + + box-shadow: 0px 20px 60px rgba(26, 35, 91, 0.15), + 0px 4px 12px rgba(26, 35, 91, 0.05), 0px 1px 4px rgba(26, 35, 91, 0.06); + border-radius: 12px; + } + } + } + } + &--select-account { width: 100%; height: 100%; diff --git a/src/modal/mode/desktop/accordion/_pera-wallet-accordion.scss b/src/modal/mode/desktop/accordion/_pera-wallet-accordion.scss index 1b9c1fe..3b5a721 100644 --- a/src/modal/mode/desktop/accordion/_pera-wallet-accordion.scss +++ b/src/modal/mode/desktop/accordion/_pera-wallet-accordion.scss @@ -42,8 +42,6 @@ } .pera-wallet-accordion-item__content { - height: 364px; - border-radius: 0 0 24px 24px; transition: height ease-in 0.2s; @@ -83,7 +81,7 @@ &__text, &__content-with-label__text { - color: #6a6a81; + color: #626268; } } @@ -92,7 +90,7 @@ } .pera-wallet-accordion-toggle__bold-color { - color: #3c3c49; + color: #1A1A1A; font-weight: 600; } @@ -106,8 +104,8 @@ .pera-wallet-accordion-toggle__label { padding: 4px 9px; - color: #00b19e; - background: rgba(0, 177, 158, 0.08); + color: #1C786C; + background: #E0FAEE; border-radius: 12px; diff --git a/src/modal/peraWalletConnectModalUtils.ts b/src/modal/peraWalletConnectModalUtils.ts index ee912ce..985c74e 100644 --- a/src/modal/peraWalletConnectModalUtils.ts +++ b/src/modal/peraWalletConnectModalUtils.ts @@ -7,6 +7,7 @@ export interface PeraWalletModalConfig { isWebWalletAvailable: boolean; shouldDisplayNewBadge: boolean; shouldUseSound: boolean; + compactMode?: boolean; } // The ID of the wrapper element for PeraWalletConnectModal @@ -58,9 +59,10 @@ function openPeraWalletConnectModal(modalConfig: PeraWalletModalConfig) { if (!document.getElementById(PERA_WALLET_CONNECT_MODAL_ID)) { const root = createModalWrapperOnDOM(PERA_WALLET_CONNECT_MODAL_ID); const newURI = `${uri}&algorand=true`; - const {isWebWalletAvailable, shouldDisplayNewBadge, shouldUseSound} = modalConfig; + const {isWebWalletAvailable, shouldDisplayNewBadge, shouldUseSound, compactMode} = + modalConfig; - root.innerHTML = ``; + root.innerHTML = ``; } }; } @@ -110,10 +112,10 @@ function openPeraWalletRedirectModal() { * * @returns {Promise} */ -function openPeraWalletSignTxnModal() { +function openPeraWalletSignTxnModal({isCompactMode}: {isCompactMode?: boolean}) { const root = createModalWrapperOnDOM(PERA_WALLET_SIGN_TXN_MODAL_ID); - root.innerHTML = ""; + root.innerHTML = ``; const signTxnModal = root.querySelector("pera-wallet-sign-txn-modal"); diff --git a/src/modal/section/information/PeraWalletConnectModalInformationSection.ts b/src/modal/section/information/PeraWalletConnectModalInformationSection.ts index 94d1427..7ec32c9 100644 --- a/src/modal/section/information/PeraWalletConnectModalInformationSection.ts +++ b/src/modal/section/information/PeraWalletConnectModalInformationSection.ts @@ -79,7 +79,12 @@ export class PeraWalletConnectModalInformationSection extends HTMLElement { super(); this.attachShadow({mode: "open"}); - if (this.shadowRoot) { + const isCompactMode = + document + .querySelector("pera-wallet-connect-modal") + ?.getAttribute("compact-mode") === "true"; + + if (this.shadowRoot && ((!isCompactMode && !isMobile()) || isMobile())) { const styleSheet = document.createElement("style"); styleSheet.textContent = styles; diff --git a/src/modal/sign-txn/PeraWalletSignTxnModal.ts b/src/modal/sign-txn/PeraWalletSignTxnModal.ts index 895f463..0238498 100644 --- a/src/modal/sign-txn/PeraWalletSignTxnModal.ts +++ b/src/modal/sign-txn/PeraWalletSignTxnModal.ts @@ -7,7 +7,7 @@ import styles from "./_pera-wallet-sign-txn-modal.scss"; const peraWalletSignTxnModal = document.createElement("template"); peraWalletSignTxnModal.innerHTML = ` -

+
@@ -27,6 +27,14 @@ export class PeraWalletSignTxnModal extends HTMLElement { styleSheet.textContent = styles; this.shadowRoot.append(peraWalletSignTxnModal.content.cloneNode(true), styleSheet); + + const isCompactMode = this.getAttribute("compact-mode") === "true"; + + if (isCompactMode) { + const signTxnModal = this.shadowRoot.getElementById("pera-wallet-sign-txn-modal"); + + signTxnModal?.classList.add("pera-wallet-sign-txn-modal--compact"); + } } } } diff --git a/src/modal/sign-txn/_pera-wallet-sign-txn-modal.scss b/src/modal/sign-txn/_pera-wallet-sign-txn-modal.scss index 2ed1f63..d554b2f 100644 --- a/src/modal/sign-txn/_pera-wallet-sign-txn-modal.scss +++ b/src/modal/sign-txn/_pera-wallet-sign-txn-modal.scss @@ -27,3 +27,10 @@ } } } + +.pera-wallet-sign-txn-modal--compact.pera-wallet-modal { + .pera-wallet-modal__body { + width: var(--pera-wallet-modal-compact-width); + height: var(--pera-wallet-modal-compact-height); + } +} \ No newline at end of file diff --git a/src/util/connect/connectFlow.ts b/src/util/connect/connectFlow.ts index a34b637..13fa8de 100644 --- a/src/util/connect/connectFlow.ts +++ b/src/util/connect/connectFlow.ts @@ -24,6 +24,7 @@ import { function runWebConnectFlow({ webWalletURL, chainId, + isCompactMode, resolve, reject }: RunWebConnectFlowTypes) { @@ -42,7 +43,7 @@ function runWebConnectFlow({ peraWalletIframe.setAttribute("id", PERA_WALLET_IFRAME_ID); peraWalletIframe.setAttribute( "src", - generateEmbeddedWalletURL(webWalletURLs.CONNECT) + generateEmbeddedWalletURL(webWalletURLs.CONNECT, isCompactMode) ); peraWalletIframeWrapper.appendChild(peraWalletIframe); diff --git a/src/util/connect/connectFlowModels.ts b/src/util/connect/connectFlowModels.ts index 4cbc575..6e5bdae 100644 --- a/src/util/connect/connectFlowModels.ts +++ b/src/util/connect/connectFlowModels.ts @@ -10,6 +10,7 @@ interface ConnectFlowPromise { interface RunWebConnectFlowTypes extends ConnectFlowPromise { webWalletURL: string; chainId: AlgorandChainIDs | undefined; + isCompactMode?: boolean; } interface EmbeddedConnectFlowTellerReducerParams extends ConnectFlowPromise { diff --git a/src/util/peraWalletUtils.ts b/src/util/peraWalletUtils.ts index 086fb0b..cc22c04 100644 --- a/src/util/peraWalletUtils.ts +++ b/src/util/peraWalletUtils.ts @@ -12,11 +12,13 @@ function generatePeraWalletAppDeepLink(shouldAddBrowserName = true): string { return appDeepLink; } -function generateEmbeddedWalletURL(url: string) { +function generateEmbeddedWalletURL(url: string, isCompactMode?: boolean) { const newURL = new URL(url); newURL.searchParams.append("embedded", "true"); + if (isCompactMode) newURL.searchParams.append("compactMode", "true"); + return newURL.toString(); } diff --git a/src/util/sign/signTransactionFlow.ts b/src/util/sign/signTransactionFlow.ts index a973bf1..a7f73d6 100644 --- a/src/util/sign/signTransactionFlow.ts +++ b/src/util/sign/signTransactionFlow.ts @@ -28,6 +28,7 @@ function runWebSignTransactionFlow({ signer, chainId, webWalletURL, + isCompactMode, resolve, reject }: RunSignTransactionFlowParams) { @@ -48,12 +49,15 @@ function runWebSignTransactionFlow({ // =========== Embedded Sign Flow =========== async function runEmbeddedSignTransactionFlow() { - const modal = await openPeraWalletSignTxnModal(); - - const peraWalletSignTxnModalIFrameWrapper = modal; + const peraWalletSignTxnModalIFrameWrapper = await openPeraWalletSignTxnModal({ + isCompactMode + }); const peraWalletIframe = document.createElement("iframe"); - const peraWalletIframeSrc = generateEmbeddedWalletURL(webWalletURLs.TRANSACTION_SIGN); + const peraWalletIframeSrc = generateEmbeddedWalletURL( + webWalletURLs.TRANSACTION_SIGN, + isCompactMode + ); const peraWalletIframeAllow = `hid ${peraWalletIframeSrc}; bluetooth ${peraWalletIframeSrc}`; peraWalletIframe.setAttribute("id", PERA_WALLET_IFRAME_ID); diff --git a/src/util/sign/signTransactionFlowModels.ts b/src/util/sign/signTransactionFlowModels.ts index f50e136..7d32b54 100644 --- a/src/util/sign/signTransactionFlowModels.ts +++ b/src/util/sign/signTransactionFlowModels.ts @@ -18,6 +18,7 @@ interface RunSignTransactionFlowParams extends SignTransactionFlowPromise { method: SignTransactionFlowMethod; signTxnRequestParams: PeraWalletTransaction[] | PeraWalletArbitraryData[]; webWalletURL: string; + isCompactMode?: boolean; } interface EmbeddedSignTransactionFlowTellerReducerParams From 78234f740b55c3215fe08837f2ea395223caefe4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yasin=20=C3=87al=C4=B1=C5=9Fkan?= Date: Thu, 13 Jul 2023 13:17:51 +0300 Subject: [PATCH 2/2] build: Bump up package version -> v1.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b397b63..edf416e 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.2.4", + "version": "1.3.0", "name": "@perawallet/connect", "description": "JavaScript SDK for integrating Pera Wallet to web applications.", "main": "dist/index.js",