route transitions, safari adjustments

wallets/react-wallet-v2/package.json

@@ -17,6 +17,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-qr-reader-es6": "2.2.1-2",
+    "framer-motion": "6.2.4",
     "ethers": "5.5.4",
     "valtio": "1.2.12"
   },

wallets/react-wallet-v2/src/components/Layout.tsx

@@ -1,4 +1,5 @@
 import Navigation from '@/components/Navigation'
+import RouteTransition from '@/components/RouteTransition'
 import { Card, Container, Loading } from '@nextui-org/react'
 import { Fragment, ReactNode } from 'react'
 
@@ -35,6 +36,7 @@ export default function Layout({ children, initialized }: Props) {
           justifyContent: initialized ? 'normal' : 'center',
           alignItems: initialized ? 'normal' : 'center',
           borderRadius: 0,
+          outline: 'none',
           '@xs': {
             borderRadius: '$lg',
             height: '93vh',
@@ -44,16 +46,18 @@ export default function Layout({ children, initialized }: Props) {
       >
         {initialized ? (
           <Fragment>
-            <Card.Body
+            <RouteTransition>
-              css={{
+              <Card.Body
-                padding: 2,
+                css={{
-                '@xs': {
+                  padding: 2,
-                  padding: '20px'
+                  '@xs': {
-                }
+                    padding: '20px'
-              }}
+                  }
-            >
+                }}
-              {children}
+              >
-            </Card.Body>
+                {children}
+              </Card.Body>
+            </RouteTransition>
 
             <Card.Footer>
               <Navigation />

wallets/react-wallet-v2/src/components/QrReader.tsx

@@ -2,7 +2,6 @@ import { Button, Loading } from '@nextui-org/react'
 import dynamic from 'next/dynamic'
 import Image from 'next/image'
 import { Fragment, useState } from 'react'
-import s from './styles.module.css'
 
 /**
  * You can use normal import if you are not within next / ssr environment
@@ -41,11 +40,11 @@ export default function QrReader({ onConnect }: IProps) {
   }
 
   return (
-    <div className={s.container}>
+    <div className="container">
       {show ? (
         <Fragment>
           {loading && <Loading css={{ position: 'absolute' }} />}
-          <div className={s.mask}>
+          <div className="qrVideoMask">
             <ReactQrReader
               onLoad={() => setLoading(false)}
               showViewFinder={false}
@@ -56,13 +55,13 @@ export default function QrReader({ onConnect }: IProps) {
           </div>
         </Fragment>
       ) : (
-        <div className={`${s.container} ${s.placeholder}`}>
+        <div className="container qrPlaceholder">
           <Image
             src="/qr-icon.svg"
             width={100}
             height={100}
             alt="qr code icon"
-            className={s.icon}
+            className="qrIcon"
           />
           <Button
             color="gradient"

wallets/react-wallet-v2/src/components/RouteTransition.tsx

@@ -0,0 +1,32 @@
+import { AnimatePresence, motion } from 'framer-motion'
+import { useRouter } from 'next/router'
+import { ReactNode } from 'react'
+
+/**
+ * Types
+ */
+interface IProps {
+  children: ReactNode | ReactNode[]
+}
+
+/**
+ * Components
+ */
+export default function RouteTransition({ children }: IProps) {
+  const { pathname } = useRouter()
+
+  return (
+    <AnimatePresence exitBeforeEnter>
+      <motion.div
+        className="routeTransition"
+        key={pathname}
+        initial={{ opacity: 0, translateY: 10 }}
+        animate={{ opacity: 1, translateY: 0 }}
+        exit={{ opacity: 0, translateY: 10 }}
+        transition={{ duration: 0.15 }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  )
+}

wallets/react-wallet-v2/src/pages/_app.tsx

@@ -2,7 +2,8 @@ import Layout from '@/components/Layout'
 import Modal from '@/components/Modal'
 import useInitialization from '@/hooks/useInitialization'
 import useWalletConnectEventsManager from '@/hooks/useWalletConnectEventsManager'
-import { darkTheme, lightTheme } from '@/utils/ThemeUtil'
+import '@/styles/main.css'
+import { lightTheme } from '@/utils/ThemeUtil'
 import { NextUIProvider } from '@nextui-org/react'
 import { ThemeProvider } from 'next-themes'
 import { AppProps } from 'next/app'
@@ -20,7 +21,7 @@ export default function App({ Component, pageProps }: AppProps) {
       attribute="class"
       value={{
         light: lightTheme.className,
-        dark: darkTheme.className
+        dark: lightTheme.className
       }}
     >
       <NextUIProvider>

wallets/react-wallet-v2/src/styles/main.css

@@ -1,4 +1,13 @@
+.routeTransition {
+  width:  100%;
+  height: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
 .container {
+  width: 100%;
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -6,20 +15,20 @@
   align-items: center;
 }
 
-.mask {
+.qrVideoMask {
   width: 100%;
   border-radius: 15px;
-  overflow: hidden;
+  overflow: hidden !important;
   position: relative;
 }
 
-.placeholder {
+.qrPlaceholder {
   border: 2px rgba(139, 139, 139, 0.4) dashed;
   width: 100%;
   border-radius: 15px;
   padding: 50px;
 }
 
-.icon {
+.qrIcon {
   opacity: 0.3;
 }

wallets/react-wallet-v2/yarn.lock

@@ -24,6 +24,18 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@eslint/eslintrc@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.0.5.tgz#33f1b838dbf1f923bfa517e008362b78ddbbf318"
@@ -1602,6 +1614,26 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
+framer-motion@6.2.4:
+  version "6.2.4"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.2.4.tgz#3d9c61be3fb8381a770efccdb56cc421de662979"
+  integrity sha512-1UfnSG4c4CefKft6QMYGx8AWt3TtaFoR/Ax4dkuDDD5BDDeIuUm7gesmJrF8GzxeX/i6fMm8+MEdPngUyPVdLA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    popmotion "11.0.3"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
@@ -1762,6 +1794,11 @@ hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.7:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -2390,6 +2427,16 @@ pino@^6.7.0:
     quick-format-unescaped "^4.0.3"
     sonic-boom "^1.0.2"
 
+popmotion@11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+
 postcss@8.4.5:
   version "8.4.5"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
@@ -2829,6 +2876,14 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^2.1.0"
+
 styled-jsx@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0.tgz#816b4b92e07b1786c6b7111821750e0ba4d26e77"
@@ -2901,6 +2956,11 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"