diff --git a/package-lock.json b/package-lock.json index a55a680..2f68f2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@perawallet/connect", - "version": "0.1.0", + "version": "0.1.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@perawallet/connect", - "version": "0.1.0", + "version": "0.1.1", "license": "ISC", "dependencies": { "@json-rpc-tools/utils": "^1.7.6", diff --git a/package.json b/package.json index 40279c2..9de6698 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@perawallet/connect", - "version": "0.1.0", + "version": "0.1.1", "description": "JavaScript SDK for integrating Pera Wallet to web applications.", "main": "dist/index.js", "scripts": { diff --git a/src/asset/icon/PeraRedirectIcon.svg b/src/asset/icon/PeraRedirectIcon.svg new file mode 100644 index 0000000..cd170fe --- /dev/null +++ b/src/asset/icon/PeraRedirectIcon.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/modal/_pera-wallet-modal.scss b/src/modal/_pera-wallet-modal.scss index 716f722..fcd13a2 100644 --- a/src/modal/_pera-wallet-modal.scss +++ b/src/modal/_pera-wallet-modal.scss @@ -18,6 +18,12 @@ font-family: var(--pera-wallet-connect-modal-font-family); + // Although this is not a standard, Design team suggest that we use it so supported browsers will use it + // stylelint-disable-next-line property-no-unknown + font-smooth: antialiased; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + * { box-sizing: border-box; } @@ -86,6 +92,8 @@ border-radius: 24px; + animation: 0.3s PeraWalletConnectSlideIn ease-out; + transform: translate(-50%, -50%); &::before { @@ -143,6 +151,8 @@ border-radius: 20px 20px 0px 0px; + animation: 0.3s PeraWalletConnectMobileSlideIn ease-out; + transform: unset; &::before { @@ -170,3 +180,31 @@ box-shadow: unset; } } + +@keyframes PeraWalletConnectSlideIn { + 0% { + opacity: 0; + + transform: translate(-50%, calc(-50% + 24px)); + } + + 100% { + opacity: 1; + + transform: translate(-50%, -50%); + } +} + +@keyframes PeraWalletConnectMobileSlideIn { + 0% { + top: 30%; + + opacity: 0; + } + + 100% { + top: 40px; + + opacity: 1; + } +} diff --git a/src/modal/component/accordion/icon/AccordionIcon.tsx b/src/modal/component/accordion/icon/AccordionIcon.tsx index ac24598..b5e6bd9 100644 --- a/src/modal/component/accordion/icon/AccordionIcon.tsx +++ b/src/modal/component/accordion/icon/AccordionIcon.tsx @@ -1,5 +1,7 @@ import RightIcon from "../../../../asset/icon/Right.svg"; +import "./_accordion-icon.scss"; + import React from "react"; function AccordionIcon() { diff --git a/src/modal/component/accordion/icon/_accordion-icon.scss b/src/modal/component/accordion/icon/_accordion-icon.scss new file mode 100644 index 0000000..c4a0fa9 --- /dev/null +++ b/src/modal/component/accordion/icon/_accordion-icon.scss @@ -0,0 +1,3 @@ +.pera-wallet-accordion-icon { + transition: all ease-in 0.2s; +} diff --git a/src/modal/redirect/PeraWalletRedirectModal.tsx b/src/modal/redirect/PeraWalletRedirectModal.tsx index 7a79ee0..ccef912 100644 --- a/src/modal/redirect/PeraWalletRedirectModal.tsx +++ b/src/modal/redirect/PeraWalletRedirectModal.tsx @@ -1,4 +1,4 @@ -import CloseIcon from "../../asset/icon/Close.svg"; +import PeraRedirectIcon from "../../asset/icon/PeraRedirectIcon.svg"; import "../_pera-wallet-modal.scss"; import "./_pera-wallet-redirect-modal.scss"; @@ -9,13 +9,16 @@ import { generatePeraWalletAppDeepLink, getPeraWalletAppMeta } from "../../util/peraWalletUtils"; +import useSetDynamicVhValue from "../../util/screen/useSetDynamicVhValue"; interface PeraWalletRedirectModalProps { onClose: () => void; } function PeraWalletRedirectModal({onClose}: PeraWalletRedirectModalProps) { - const {logo, name, main_color} = getPeraWalletAppMeta(); + const {name, main_color} = getPeraWalletAppMeta(); + + useSetDynamicVhValue(); useEffect(() => { const peraWalletDeepLink = window.open(generatePeraWalletAppDeepLink()); @@ -32,28 +35,43 @@ function PeraWalletRedirectModal({onClose}: PeraWalletRedirectModalProps) { className={"pera-wallet-connect-modal"} style={{"--pera-wallet-main-color": main_color} as React.CSSProperties}>
-
-
- +
+
+ + +

+ {"Can't Launch Pera"} +

+ +

+ {"We couldn't redirect you to Pera Wallet automatically. Please try again."} +

+ +

+ {"Don't have Pera Wallet installed yet?"} + +
+ + + {"Tap here to install."} + +

- + + {`Launch ${name}`} +
- - - {`Launch ${name}`} -
); diff --git a/src/modal/redirect/_pera-wallet-redirect-modal.scss b/src/modal/redirect/_pera-wallet-redirect-modal.scss index 7631f3b..9e7af20 100644 --- a/src/modal/redirect/_pera-wallet-redirect-modal.scss +++ b/src/modal/redirect/_pera-wallet-redirect-modal.scss @@ -1,14 +1,74 @@ +.pera-wallet-wallet-redirect-modal { + display: grid; + grid-template-columns: 1fr; + gap: 56px; + grid-template-rows: auto 48px; + height: 100%; + + padding: 4px; + + padding-bottom: 70px; +} + +.pera-wallet-redirect-modal__content { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.pera-wallet-redirect-modal__content__title { + margin: 20px 0 8px; + + color: #2c3559; + + font-size: 18px; + font-weight: 600; + line-height: 22px; + letter-spacing: -0.26px; +} + +.pera-wallet-redirect-modal__content__description, +.pera-wallet-redirect-modal__content__install-pera-text { + color: #2c3559; + + max-width: 271px; + + font-size: 14px; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.09px; + text-align: center; +} + +.pera-wallet-redirect-modal__content__description { + margin-bottom: 24px; +} + +.pera-wallet-redirect-modal__content__install-pera-text__link { + color: #6b46fe; + + font-size: 14px; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.09px; + text-align: center; +} + .pera-wallet-redirect-modal__launch-pera-wallet-button { display: block; padding: 14px; - border-radius: 4px; - background-color: var(--pera-wallet-main-color); + color: #ffffff; + background-color: #6b46fe; - color: black; + border-radius: 12px; text-decoration: none; text-align: center; font-size: 14px; + line-height: 20px; + letter-spacing: -0.09px; + font-weight: 500; }