Add query param chat init (#84)

* Add query param chat init * Add qrcode button * Fix address retrieval * Add prefix * Push topic * Update flow to close w3m on invite * Fix accountIdx gen * Use once instead of on
2022-12-05 14:01:26 +03:00 · 2022-12-05 14:01:26 +03:00 · 907fecdd67
commit 907fecdd67
parent c24cf15468
5 changed files with 392 additions and 39 deletions
--- a/wallets/react-wallet-chat/package.json
+++ b/wallets/react-wallet-chat/package.json
@ -18,6 +18,9 @@
    "@walletconnect/chat-client": "^0.1.6",
    "@walletconnect/sign-client": "2.0.0-rc.4",
    "@walletconnect/utils": "2.0.0-rc.4",
+    "@web3modal/core": "^2.0.0-beta.7",
+    "@web3modal/standalone": "^2.0.0-beta.7",
+    "@web3modal/ui": "^2.0.0-beta.7",
    "bs58": "5.0.0",
    "cosmos-wallet": "1.2.0",
    "ethers": "5.6.6",
--- a/wallets/react-wallet-chat/src/hooks/useInitialization.ts
+++ b/wallets/react-wallet-chat/src/hooks/useInitialization.ts
@ -10,19 +10,26 @@ export default function useInitialization() {

  const onInitialize = useCallback(async () => {
    try {
+      const accountIndex = parseInt(
+        new URLSearchParams(window.location.search).get('accountIndex') ?? '0'
+      )
      const { eip155Addresses } = createOrRestoreEIP155Wallet()
      const { cosmosAddresses } = await createOrRestoreCosmosWallet()
      const { solanaAddresses } = await createOrRestoreSolanaWallet()

-      SettingsStore.setEIP155Address(eip155Addresses[0])
-      SettingsStore.setCosmosAddress(cosmosAddresses[0])
-      SettingsStore.setSolanaAddress(solanaAddresses[0])
+      SettingsStore.setAccount(accountIndex)
+      SettingsStore.setEIP155Address(eip155Addresses[accountIndex])
+      SettingsStore.setCosmosAddress(cosmosAddresses[accountIndex])
+      SettingsStore.setSolanaAddress(solanaAddresses[accountIndex])

      await createSignClient()

      await createChatClient()
-      await chatClient.register({ account: `eip155:1:${eip155Addresses[0]}` })
-      console.log('[Chat] registered address %s on keyserver', `eip155:1:${eip155Addresses[0]}`)
+      await chatClient.register({ account: `eip155:1:${eip155Addresses[accountIndex]}` })
+      console.log(
+        '[Chat] registered address %s on keyserver',
+        `eip155:1:${eip155Addresses[accountIndex]}`
+      )

      setInitialized(true)
    } catch (err: unknown) {
--- a/wallets/react-wallet-chat/src/pages/chats.tsx
+++ b/wallets/react-wallet-chat/src/pages/chats.tsx
@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState } from 'react'
+import { Fragment, useCallback, useEffect, useState } from 'react'
 import { Row, Text } from '@nextui-org/react'
 import { useRouter } from 'next/router'
 import { FiPlus } from 'react-icons/fi'
@ -10,6 +10,10 @@ import ChatRequestsButton from '@/components/ChatRequestsButton'
 import { chatClient } from '@/utils/WalletConnectUtil'
 import ChatPrimaryCTAButton from '@/components/ChatPrimaryCTAButton'
 import SettingsStore from '@/store/SettingsStore'
+import { Web3Modal } from '@web3modal/standalone'
+import { HiQrcode } from 'react-icons/hi'
+
+const web3modal = new Web3Modal({})

 export default function ChatsPage() {
  const router = useRouter()
@ -21,6 +25,13 @@ export default function ChatsPage() {

  const [chatInvites, setChatInvites] = useState<any[]>([])

+  const inviteQrCode = useCallback(async () => {
+    const idx = SettingsStore.state.account === 0 ? 1 : 0
+    const uri = `${window.location.origin}/newChat?accountIndex=${idx}&target=eip155:1:${SettingsStore.state.eip155Address}`
+
+    web3modal.openModal({ uri })
+  }, [])
+
  const initChatClient = async () => {
    console.log(chatClient)

@ -32,6 +43,7 @@ export default function ChatsPage() {

    chatClient.on('chat_invite', async args => {
      console.log('chat_invite:', args)
+      web3modal.closeModal()
      console.log(chatClient.chatInvites.getAll())
      setChatInvites(chatClient.chatInvites.getAll())
    })
@ -54,7 +66,10 @@ export default function ChatsPage() {
      <PageHeader
        title="Chat"
        ctaButton={
-          <ChatPrimaryCTAButton icon={<FiPlus />} onClick={() => router.push('/newChat')} />
+          <Row justify="space-evenly">
+            <ChatPrimaryCTAButton icon={<HiQrcode />} onClick={inviteQrCode} />
+            <ChatPrimaryCTAButton icon={<FiPlus />} onClick={() => router.push('/newChat')} />
+          </Row>
        }
      />

--- a/wallets/react-wallet-chat/src/pages/newChat.tsx
+++ b/wallets/react-wallet-chat/src/pages/newChat.tsx
@ -1,39 +1,62 @@
-import { Fragment, useEffect, useState } from 'react'
+import { Fragment, useCallback, useEffect, useState } from 'react'
 import { useSnapshot } from 'valtio'
 import { FiArrowRight } from 'react-icons/fi'
 import { Input, Row } from '@nextui-org/react'
-
 import PageHeader from '@/components/PageHeader'
 import { chatClient } from '@/utils/WalletConnectUtil'
 import { ChatClientTypes } from '@walletconnect/chat-client'
 import ChatPrimaryCTAButton from '@/components/ChatPrimaryCTAButton'
 import { demoContactsMap } from '@/config/chatConstants'
 import SettingsStore from '@/store/SettingsStore'
+import { useRouter } from 'next/router'

 export default function NewChatPage() {
  const [address, setAddress] = useState('')
+  const router = useRouter()
+
  const { eip155Address } = useSnapshot(SettingsStore.state)

-  const createInvite = async (targetAddress: string) => {
-    const invite: ChatClientTypes.PartialInvite = {
-      message: "hey let's chat",
-      account: `eip155:1:${eip155Address}`
-    }
-    const inviteId = await chatClient.invite({
-      account: targetAddress,
-      invite
+  useEffect(() => {
+    chatClient.once('chat_joined', args => {
+      const newChatTarget = new URLSearchParams(document.location.search).get('target')
+      router.push(`/chat?topic=${args.topic}&peerAccount=${newChatTarget}`)
    })
-  }
+  }, [router])

-  const onInvite = async () => {
-    if (demoContactsMap[address]) {
-      await createInvite(demoContactsMap[address])
-    } else {
-      console.log('onInvite: inviting address ', address)
-      await createInvite(address)
+  const createInvite = useCallback(
+    async (targetAddress: string) => {
+      const invite: ChatClientTypes.PartialInvite = {
+        message: "hey let's chat",
+        account: `eip155:1:${eip155Address}`
+      }
+      await chatClient.invite({
+        account: targetAddress,
+        invite
+      })
+    },
+    [eip155Address]
+  )
+
+  const onInvite = useCallback(
+    async (addressToInvite: string) => {
+      if (demoContactsMap[addressToInvite]) {
+        await createInvite(demoContactsMap[addressToInvite])
+      } else {
+        console.log('onInvite: inviting address ', addressToInvite)
+        await createInvite(addressToInvite)
+      }
+      setAddress('')
+    },
+    [setAddress, createInvite]
+  )
+
+  useEffect(() => {
+    const newChatTarget = new URLSearchParams(document.location.search).get('target')
+    if (newChatTarget) {
+      setAddress(newChatTarget)
+      onInvite(newChatTarget)
    }
-    setAddress('')
-  }
+  }, [onInvite, setAddress])

  return (
    <Fragment>
@ -41,7 +64,9 @@ export default function NewChatPage() {
        title="New Chat"
        withBackButton
        backButtonHref="/chats"
-        ctaButton={<ChatPrimaryCTAButton icon={<FiArrowRight />} onClick={onInvite} />}
+        ctaButton={
+          <ChatPrimaryCTAButton icon={<FiArrowRight />} onClick={() => onInvite(address)} />
+        }
      />

      <Row justify="center">
--- a/wallets/react-wallet-chat/yarn.lock
+++ b/wallets/react-wallet-chat/yarn.lock
@ -1008,6 +1008,80 @@
    "@json-rpc-tools/types" "^1.7.6"
    "@pedrouid/environment" "^1.0.1"

+"@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.4.0":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.4.2.tgz#65d659e89d1a7e2f4f2b547182aef0a224f4adb7"
+  integrity sha512-VMOxsWh/QDwrxPsgkSQnuZ+8mfNy1OTjzzUdLBvvZtpahwPTHTeVZ51RZRqO4xfKVrR+btIPA8D01IL3xeG66w==
+
+"@motionone/animation@^10.14.0":
+  version "10.14.0"
+  resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.14.0.tgz#2f2a3517183bb58d82e389aac777fe0850079de6"
+  integrity sha512-h+1sdyBP8vbxEBW5gPFDnj+m2DCqdlAuf2g6Iafb1lcMnqjsRXWlPw1AXgvUMXmreyhqmPbJqoNfIKdytampRQ==
+  dependencies:
+    "@motionone/easing" "^10.14.0"
+    "@motionone/types" "^10.14.0"
+    "@motionone/utils" "^10.14.0"
+    tslib "^2.3.1"
+
+"@motionone/dom@^10.14.3":
+  version "10.14.3"
+  resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.14.3.tgz#5b67d91debb6bdacf85664879d6125af06ceb7c8"
+  integrity sha512-tese0zSBsWwxCcs9qGNyynhnQ3/n43F6XI588AUKBIfE9D5ZelzQXOzr/T0+ErsVppXJtyGHviYEnv7KHc9x7Q==
+  dependencies:
+    "@motionone/animation" "^10.14.0"
+    "@motionone/generators" "^10.14.0"
+    "@motionone/types" "^10.14.0"
+    "@motionone/utils" "^10.14.0"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
+"@motionone/easing@^10.14.0":
+  version "10.14.0"
+  resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.14.0.tgz#d8154b7f71491414f3cdee23bd3838d763fffd00"
+  integrity sha512-2vUBdH9uWTlRbuErhcsMmt1jvMTTqvGmn9fHq8FleFDXBlHFs5jZzHJT9iw+4kR1h6a4SZQuCf72b9ji92qNYA==
+  dependencies:
+    "@motionone/utils" "^10.14.0"
+    tslib "^2.3.1"
+
+"@motionone/generators@^10.14.0":
+  version "10.14.0"
+  resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.14.0.tgz#e05d9dd56da78a4b92db99185848a0f3db62242d"
+  integrity sha512-6kRHezoFfIjFN7pPpaxmkdZXD36tQNcyJe3nwVqwJ+ZfC0e3rFmszR8kp9DEVFs9QL/akWjuGPSLBI1tvz+Vjg==
+  dependencies:
+    "@motionone/types" "^10.14.0"
+    "@motionone/utils" "^10.14.0"
+    tslib "^2.3.1"
+
+"@motionone/svelte@^10.14.3":
+  version "10.14.3"
+  resolved "https://registry.yarnpkg.com/@motionone/svelte/-/svelte-10.14.3.tgz#4e3011629344e6ddcf783a33fb2eea4258f15fef"
+  integrity sha512-fHyyyGJRkHsfE2IAg+6YU0BiMT/Jz5OAMpJvBZs3oGfwsgdqSms4YtLW22Ecs87e59hPZ26SqWCHad6enRfD9A==
+  dependencies:
+    "@motionone/dom" "^10.14.3"
+    tslib "^2.3.1"
+
+"@motionone/types@^10.14.0":
+  version "10.14.0"
+  resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.14.0.tgz#148c34f3270b175397e49c3058b33fab405c21e3"
+  integrity sha512-3bNWyYBHtVd27KncnJLhksMFQ5o2MSdk1cA/IZqsHtA9DnRM1SYgN01CTcJ8Iw8pCXF5Ocp34tyAjY7WRpOJJQ==
+
+"@motionone/utils@^10.14.0":
+  version "10.14.0"
+  resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.14.0.tgz#a19a3464ed35b08506747b062d035c7bc9bbe708"
+  integrity sha512-sLWBLPzRqkxmOTRzSaD3LFQXCPHvDzyHJ1a3VP9PRzBxyVd2pv51/gMOsdAcxQ9n+MIeGJnxzXBYplUHKj4jkw==
+  dependencies:
+    "@motionone/types" "^10.14.0"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
+"@motionone/vue@^10.14.3":
+  version "10.14.3"
+  resolved "https://registry.yarnpkg.com/@motionone/vue/-/vue-10.14.3.tgz#20ca718c898bcc19a0df771615e14e53ed65d451"
+  integrity sha512-FZ/vefJMDthnzlVQbL2I54WEvDyx720KClxWqmHZZ+wKic+i9XhNCU1qijGcvA3/1sFFp8u9fOqmejEWXSsHmw==
+  dependencies:
+    "@motionone/dom" "^10.14.3"
+    tslib "^2.3.1"
+
 "@next/env@12.1.5":
  version "12.1.5"
  resolved "https://registry.npmjs.org/@next/env/-/env-12.1.5.tgz"
@ -1920,6 +1994,11 @@
  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==

+"@types/trusted-types@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
+  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
+
 "@types/ws@^7.4.4":
  version "7.4.7"
  resolved "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz"
@ -2169,6 +2248,29 @@
  dependencies:
    "@walletconnect/window-getters" "^1.0.0"

+"@web3modal/core@2.0.0-beta.7", "@web3modal/core@^2.0.0-beta.7":
+  version "2.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/core/-/core-2.0.0-beta.7.tgz#cac643055722f01de9703ed50991559e6b9eb01b"
+  integrity sha512-ssUoBP1j8WFD7ZnwiPRdalQBrcHXrOCUz53ve0fltWEZfdExN+RVJY2lenDrtqvG6353FW09LlbCPbuoPy3k4g==
+  dependencies:
+    buffer "6.0.3"
+    valtio "1.7.6"
+
+"@web3modal/standalone@^2.0.0-beta.7":
+  version "2.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/standalone/-/standalone-2.0.0-beta.7.tgz#4e457cd505fc36e9e77976a7ee60cccbd4bba8a2"
+  integrity sha512-YHdXbb4XWZ+Aa29VI+WPGgSPWJ7BFI3ftYlirHWTgR/f8Vm6gXRNQ2clMyVCjTuYuxeLUb3gcc123Vth3Cq23A==
+
+"@web3modal/ui@^2.0.0-beta.7":
+  version "2.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/ui/-/ui-2.0.0-beta.7.tgz#c10455d0e72848eac7743b8309cda8e0038e032f"
+  integrity sha512-fRW8z0kCWMv1cltP+QKGMAWm+yu3XyHEfa0LcEdfo8a6lqWvlZhcEFTgkmUJ7tD6SBc3JnebNboAGBignDGMyA==
+  dependencies:
+    "@web3modal/core" "2.0.0-beta.7"
+    lit "2.4.1"
+    motion "10.14.3"
+    qrcode "1.5.1"
+
 JSONStream@^1.3.5:
  version "1.3.5"
  resolved "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz"
@ -2226,7 +2328,7 @@ ansi-styles@^3.2.1:
  dependencies:
    color-convert "^1.9.0"

-ansi-styles@^4.1.0:
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
  version "4.3.0"
  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
@ -2518,6 +2620,14 @@ buffer@6.0.1:
    base64-js "^1.3.1"
    ieee754 "^1.2.1"

+buffer@6.0.3, buffer@^6.0.3, buffer@~6.0.3:
+  version "6.0.3"
+  resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
 buffer@^5.5.0:
  version "5.7.1"
  resolved "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz"
@ -2526,14 +2636,6 @@ buffer@^5.5.0:
    base64-js "^1.3.1"
    ieee754 "^1.1.13"

-buffer@^6.0.3, buffer@~6.0.3:
-  version "6.0.3"
-  resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz"
-  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
-  dependencies:
-    base64-js "^1.3.1"
-    ieee754 "^1.2.1"
-
 bufferutil@^4.0.1:
  version "4.0.6"
  resolved "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.6.tgz"
@ -2564,6 +2666,11 @@ camelcase@5.0.0:
  resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.0.0.tgz"
  integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==

+camelcase@^5.0.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
 camelize@^1.0.0:
  version "1.0.0"
  resolved "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz"
@ -2628,6 +2735,15 @@ clipboard@^2.0.0:
    select "^1.1.2"
    tiny-emitter "^2.0.0"

+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
 clsx@^1.1.1:
  version "1.1.1"
  resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz"
@ -2804,6 +2920,11 @@ debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
  dependencies:
    ms "2.1.2"

+decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
+
 decode-uri-component@^0.2.0:
  version "0.2.0"
  resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz"
@ -2864,6 +2985,11 @@ detect-libc@^2.0.0:
  resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz"
  integrity sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==

+dijkstrajs@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.2.tgz#2e48c0d3b825462afe75ab4ad5e829c8ece36257"
+  integrity sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg==
+
 dir-glob@^3.0.1:
  version "3.0.1"
  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
@ -2916,6 +3042,11 @@ enc-utils@^3.0.0:
    is-typedarray "1.0.0"
    typedarray-to-buffer "3.1.5"

+encode-utf8@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/encode-utf8/-/encode-utf8-1.0.3.tgz#f30fdd31da07fb596f281beb2f6b027851994cda"
+  integrity sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==
+
 end-of-stream@^1.1.0, end-of-stream@^1.4.1:
  version "1.4.4"
  resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz"
@ -3350,6 +3481,14 @@ find-up@^2.1.0:
  dependencies:
    locate-path "^2.0.0"

+find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
 flat-cache@^3.0.4:
  version "3.0.4"
  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
@ -3456,6 +3595,11 @@ gauge@~2.7.3:
    strip-ansi "^3.0.1"
    wide-align "^1.1.0"

+get-caller-file@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
  version "1.1.1"
  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz"
@ -4010,6 +4154,30 @@ libsodium@^0.7.0:
  resolved "https://registry.npmjs.org/libsodium/-/libsodium-0.7.10.tgz"
  integrity sha512-eY+z7hDrDKxkAK+QKZVNv92A5KYkxfvIshtBJkmg5TSiCnYqZP3i9OO9whE79Pwgm4jGaoHgkM4ao/b9Cyu4zQ==

+lit-element@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.2.2.tgz#d148ab6bf4c53a33f707a5168e087725499e5f2b"
+  integrity sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==
+  dependencies:
+    "@lit/reactive-element" "^1.3.0"
+    lit-html "^2.2.0"
+
+lit-html@^2.2.0, lit-html@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.4.0.tgz#b510430f39a56ec959167ed1187241a4e3ab1574"
+  integrity sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+
+lit@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.4.1.tgz#21251ac14eb1ec8ca7cd15c9ac3564359809f7b5"
+  integrity sha512-qohSgLiyN1cFnJG26dIiY03S4F49857A0AHQfnS0zYtnUVnD2MFvx+UT52rtXsIuNFQrnUupX+zyGSATlk1f/A==
+  dependencies:
+    "@lit/reactive-element" "^1.4.0"
+    lit-element "^3.2.0"
+    lit-html "^2.4.0"
+
 loady@~0.0.5:
  version "0.0.5"
  resolved "https://registry.npmjs.org/loady/-/loady-0.0.5.tgz"
@ -4028,6 +4196,13 @@ locate-path@^2.0.0:
    p-locate "^2.0.0"
    path-exists "^3.0.0"

+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
 lodash.isequal@4.5.0:
  version "4.5.0"
  resolved "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz"
@ -4147,6 +4322,18 @@ mnemonic-keyring@1.4.0:
    bip39 "^3.0.3"
    keyvaluestorage "^0.7.1"

+motion@10.14.3:
+  version "10.14.3"
+  resolved "https://registry.yarnpkg.com/motion/-/motion-10.14.3.tgz#3150cd0c646f405e999aba7c96fe1e65f6ce184b"
+  integrity sha512-xBbgYho8nPiR2OZOrfJTbJpiiQl0F2PZF6H5ItAeIPJEfA/x0ZwxpFC/gbsKfUv3CFUVAoxCRkTDCJjiZ48dxw==
+  dependencies:
+    "@motionone/animation" "^10.14.0"
+    "@motionone/dom" "^10.14.3"
+    "@motionone/svelte" "^10.14.3"
+    "@motionone/types" "^10.14.0"
+    "@motionone/utils" "^10.14.0"
+    "@motionone/vue" "^10.14.3"
+
 mri@1.1.4:
  version "1.1.4"
  resolved "https://registry.npmjs.org/mri/-/mri-1.1.4.tgz"
@ -4345,6 +4532,13 @@ p-limit@^1.1.0:
  dependencies:
    p-try "^1.0.0"

+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
 p-locate@^2.0.0:
  version "2.0.0"
  resolved "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz"
@ -4352,11 +4546,23 @@ p-locate@^2.0.0:
  dependencies:
    p-limit "^1.1.0"

+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
 p-try@^1.0.0:
  version "1.0.0"
  resolved "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz"
  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=

+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
 parent-module@^1.0.0:
  version "1.0.1"
  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
@ -4381,6 +4587,11 @@ path-exists@^3.0.0:
  resolved "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz"
  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=

+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
 path-is-absolute@^1.0.0:
  version "1.0.1"
  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
@ -4504,6 +4715,11 @@ pino@^8.0.0:
    sonic-boom "^3.1.0"
    thread-stream "^2.0.0"

+pngjs@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
+  integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
+
 popmotion@11.0.3:
  version "11.0.3"
  resolved "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz"
@ -4648,6 +4864,11 @@ proxy-compare@2.1.0:
  resolved "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.1.0.tgz"
  integrity sha512-wapJ3h/w8fRSyPEG0y2WMV+tf9xwvj3nxM6aHVuPEOwKs/t5xLSKZb44ubNTiqq2T6lmEMHEWGMTaU2L6ddaFA==

+proxy-compare@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.3.0.tgz#ac9633ae52918ff9c9fcc54dfe6316c7a02d20ee"
+  integrity sha512-c3L2CcAi7f7pvlD0D7xsF+2CQIW8C3HaYx2Pfgq8eA4HAl3GAH6/dVYsyBbYF/0XJs2ziGLrzmz5fmzPm6A0pQ==
+
 pump@^3.0.0:
  version "3.0.0"
  resolved "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz"
@ -4661,6 +4882,16 @@ punycode@^2.1.0:
  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==

+qrcode@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.1.tgz#0103f97317409f7bc91772ef30793a54cd59f0cb"
+  integrity sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==
+  dependencies:
+    dijkstrajs "^1.0.1"
+    encode-utf8 "^1.0.3"
+    pngjs "^5.0.0"
+    yargs "^15.3.1"
+
 query-string@7.1.1:
  version "7.1.1"
  resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.1.tgz#754620669db978625a90f635f12617c271a088e1"
@ -4824,6 +5055,16 @@ regexpp@^3.2.0:
  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==

+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
 resolve-from@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
@ -4945,7 +5186,7 @@ semver@^7.3.5, semver@^7.3.7:
  dependencies:
    lru-cache "^6.0.0"

-set-blocking@~2.0.0:
+set-blocking@^2.0.0, set-blocking@~2.0.0:
  version "2.0.0"
  resolved "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
@ -5073,7 +5314,7 @@ string-width@^1.0.1:
    is-fullwidth-code-point "^1.0.0"
    strip-ansi "^3.0.0"

-"string-width@^1.0.2 || 2 || 3 || 4":
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0:
  version "4.2.3"
  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -5135,7 +5376,7 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
  dependencies:
    ansi-regex "^2.0.0"

-strip-ansi@^6.0.1:
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@ -5306,6 +5547,11 @@ tslib@^2.0.0, tslib@^2.1.0:
  resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==

+tslib@^2.3.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
+  integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
+
 tsutils@^3.21.0:
  version "3.21.0"
  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
@ -5390,6 +5636,11 @@ use-sync-external-store@1.0.0:
  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.0.0.tgz"
  integrity sha512-AFVsxg5GkFg8GDcxnl+Z0lMAz9rE8DGJCc28qnBuQF7lac57B5smLcT37aXpXIIPz75rW4g3eXHPjhHwdGskOw==

+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 utf-8-validate@^5.0.2:
  version "5.0.9"
  resolved "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.9.tgz"
@ -5420,6 +5671,14 @@ valtio@1.6.0:
    proxy-compare "2.1.0"
    use-sync-external-store "1.0.0"

+valtio@1.7.6:
+  version "1.7.6"
+  resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.7.6.tgz#d75d9041e4e089df2cb67f09bcb3ae1be442445c"
+  integrity sha512-zsGrCCYOIpy8egQxftduFyJusF/BMu3CganhHKUOE/I6t6V6yA1MDfZZkrYoWYCGkC3rSBYcIHEEsoYQM9lV2w==
+  dependencies:
+    proxy-compare "2.3.0"
+    use-sync-external-store "1.2.0"
+
 webidl-conversions@^3.0.0:
  version "3.0.1"
  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
@ -5444,6 +5703,11 @@ which-boxed-primitive@^1.0.2:
    is-string "^1.0.5"
    is-symbol "^1.0.3"

+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+  integrity sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==
+
 which@^2.0.1:
  version "2.0.2"
  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
@ -5470,6 +5734,15 @@ word-wrap@^1.2.3:
  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==

+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrappy@1:
  version "1.0.2"
  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
@ -5495,7 +5768,37 @@ xtend@^4.0.0:
  resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==

+y18n@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
+  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
+
 yallist@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yargs-parser@^18.1.2:
+  version "18.1.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs@^15.3.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
+  integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
+  dependencies:
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.2"