Merge pull request #11 from perawallet/next-release

perawallet/[email protected]

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": {

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;
+  }
+}

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() {

src/modal/component/accordion/icon/_accordion-icon.scss

@@ -0,0 +1,3 @@
+.pera-wallet-accordion-icon {
+  transition: all ease-in 0.2s;
+}

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}>
       <div className={"pera-wallet-connect-modal__body"}>
-        <div className={"pera-wallet-connect-modal__body__header"}>
-          <div className={"pera-wallet-connect-modal__logo"}>
-            <img src={logo} />
+        <div className={"pera-wallet-wallet-redirect-modal"}>
+          <div className={"pera-wallet-redirect-modal__content"}>
+            <img src={PeraRedirectIcon} />
+
+            <h1 className={"pera-wallet-redirect-modal__content__title"}>
+              {"Can't Launch Pera"}
+            </h1>
+
+            <p className={"pera-wallet-redirect-modal__content__description"}>
+              {"We couldn't redirect you to Pera Wallet automatically. Please try again."}
+            </p>
+
+            <p className={"pera-wallet-redirect-modal__content__install-pera-text"}>
+              {"Don't have Pera Wallet installed yet?"}
+
+              <br />
+
+              <a
+                onClick={handleCloseRedirectModal}
+                className={"pera-wallet-redirect-modal__content__install-pera-text__link"}
+                href={"https://perawallet.app/download/"}
+                rel={"noopener noreferrer"}
+                target={"_blank"}>
+                {"Tap here to install."}
+              </a>
+            </p>
           </div>
 
-          <button
-            className={
-              "pera-wallet-connect-button pera-wallet-connect-modal__close-button"
-            }
-            onClick={onClose}>
-            <img src={CloseIcon} />
-          </button>
+          <a
+            onClick={handleCloseRedirectModal}
+            className={"pera-wallet-redirect-modal__launch-pera-wallet-button"}
+            href={generatePeraWalletAppDeepLink()}
+            rel={"noopener noreferrer"}
+            target={"_blank"}>
+            {`Launch ${name}`}
+          </a>
         </div>
-
-        <a
-          onClick={handleCloseRedirectModal}
-          className={"pera-wallet-redirect-modal__launch-pera-wallet-button"}
-          href={generatePeraWalletAppDeepLink()}
-          rel={"noopener noreferrer"}
-          target={"_blank"}>
-          {`Launch ${name}`}
-        </a>
       </div>
     </div>
   );

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;
 }