deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

route transitions, safari adjustments

Browse Source
This commit is contained in:
Ilja 2022-02-09 15:05:11 +02:00
parent c0fe3a5b22
commit fb6f484159
7 changed files with 127 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
wallets/react-wallet-v2/package.json
View File

@ -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"
},

24
wallets/react-wallet-v2/src/components/Layout.tsx
View File

@ -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
css={{
padding: 2,
'@xs': {
padding: '20px'
}
}}
>
{children}
</Card.Body>
<RouteTransition>
<Card.Body
css={{
padding: 2,
'@xs': {
padding: '20px'
}
}}
>
{children}
</Card.Body>
</RouteTransition>
<Card.Footer>
<Navigation />

9
wallets/react-wallet-v2/src/components/QrReader/index.tsx → wallets/react-wallet-v2/src/components/QrReader.tsx
View File

@ -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"

32
wallets/react-wallet-v2/src/components/RouteTransition.tsx Normal file
View File

@ -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>
)
}

5
wallets/react-wallet-v2/src/pages/_app.tsx
View File

@ -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>

17
wallets/react-wallet-v2/src/components/QrReader/styles.module.css → wallets/react-wallet-v2/src/styles/main.css
View File

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

60
wallets/react-wallet-v2/yarn.lock
View File

@ -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"