Add invite modal

2024-11-15 00:04:59 +08:00 · 2021-12-03 11:45:29 -08:00 · 2021-12-03 11:45:29 -08:00 · 8425a177e2
commit 8425a177e2
parent f09454ec09
14 changed files with 589 additions and 37 deletions
--- a/package.json
+++ b/package.json
@ -6,6 +6,12 @@
    "serve": "vite preview"
  },
  "dependencies": {
+    "@react-aria/button": "^3.3.4",
+    "@react-aria/dialog": "^3.1.4",
+    "@react-aria/focus": "^3.5.0",
+    "@react-aria/overlays": "^3.7.3",
+    "@react-aria/utils": "^3.10.0",
+    "@react-stately/overlays": "^3.1.3",
    "@sentry/react": "^6.13.3",
    "@sentry/tracing": "^6.13.3",
    "classnames": "^2.3.1",
@ -19,7 +25,8 @@
    "react-dom": "^17.0.0",
    "react-json-view": "^1.21.3",
    "react-router": "6",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^5.2.0",
+    "react-use-clipboard": "^1.0.7"
  },
  "devDependencies": {
    "sass": "^1.42.1",
--- a/src/App.jsx
+++ b/src/App.jsx
@ -22,6 +22,8 @@ import {
  Redirect,
  useLocation,
 } from "react-router-dom";
+import styles from "./App.module.css";
+import { OverlayProvider } from "@react-aria/overlays";
 import * as Sentry from "@sentry/react";
 import { useClient } from "./ConferenceCallManagerHooks";
 import { Home } from "./Home";
@ -48,34 +50,36 @@ export default function App() {
  } = useClient(homeserverUrl);

  return (
-    <Router>
-      <>
-        {loading ? (
-          <Center>
-            <p>Loading...</p>
-          </Center>
-        ) : (
-          <Switch>
-            <AuthenticatedRoute authenticated={authenticated} exact path="/">
-              <Home client={client} onLogout={logout} />
-            </AuthenticatedRoute>
-            <SentryRoute exact path="/login">
-              <LoginPage onLogin={login} />
-            </SentryRoute>
-            <SentryRoute exact path="/register">
-              <RegisterPage onRegister={register} />
-            </SentryRoute>
-            <SentryRoute path="/room/:roomId?">
-              {authenticated ? (
-                <Room client={client} onLogout={logout} />
-              ) : (
-                <GuestAuthPage onLoginAsGuest={registerGuest} />
-              )}
-            </SentryRoute>
-          </Switch>
-        )}
-      </>
-    </Router>
+    <OverlayProvider className={styles.overlayProvider}>
+      <Router>
+        <>
+          {loading ? (
+            <Center>
+              <p>Loading...</p>
+            </Center>
+          ) : (
+            <Switch>
+              <AuthenticatedRoute authenticated={authenticated} exact path="/">
+                <Home client={client} onLogout={logout} />
+              </AuthenticatedRoute>
+              <SentryRoute exact path="/login">
+                <LoginPage onLogin={login} />
+              </SentryRoute>
+              <SentryRoute exact path="/register">
+                <RegisterPage onRegister={register} />
+              </SentryRoute>
+              <SentryRoute path="/room/:roomId?">
+                {authenticated ? (
+                  <Room client={client} onLogout={logout} />
+                ) : (
+                  <GuestAuthPage onLoginAsGuest={registerGuest} />
+                )}
+              </SentryRoute>
+            </Switch>
+          )}
+        </>
+      </Router>
+    </OverlayProvider>
  );
 }

--- a/src/App.module.css
+++ b/src/App.module.css
@ -0,0 +1,5 @@
+.overlayProvider {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
--- a/src/CopyButton.jsx
+++ b/src/CopyButton.jsx
@ -0,0 +1,37 @@
+import React from "react";
+import { useButton } from "@react-aria/button";
+import useClipboard from "react-use-clipboard";
+import { ReactComponent as CheckIcon } from "./icons/Check.svg";
+import { ReactComponent as CopyIcon } from "./icons/Copy.svg";
+import classNames from "classnames";
+import styles from "./CopyButton.module.css";
+
+export function CopyButton({ value, className, ...rest }) {
+  const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 });
+  const { buttonProps } = useButton({
+    onPress: () => setCopied(),
+  });
+
+  return (
+    <button
+      {...buttonProps}
+      className={classNames(
+        styles.copyButton,
+        { [styles.copied]: isCopied },
+        className
+      )}
+    >
+      {isCopied ? (
+        <>
+          <span>Copied!</span>
+          <CheckIcon />
+        </>
+      ) : (
+        <>
+          <span>{value}</span>
+          <CopyIcon />
+        </>
+      )}
+    </button>
+  );
+}
--- a/src/CopyButton.module.css
+++ b/src/CopyButton.module.css
@ -0,0 +1,35 @@
+.copyButton {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+  border: 2px solid #0dbd8b;
+  border-radius: 8px;
+  color: #0dbd8b;
+  width: 100%;
+  transition: border-color 250ms, background-color 250ms;
+  height: 40px;
+}
+
+.copyButton span {
+  font-weight: 600;
+  font-size: 15px;
+  margin-right: 10px;
+}
+
+.copyButton:not(.copied) svg * {
+  fill: #0dbd8b;
+}
+
+.copyButton.copied {
+  border-color: transparent;
+  background-color: #0dbd8b;
+  color: white;
+}
+
+.copyButton.copied svg * {
+  stroke: white;
+}
--- a/src/InviteModal.jsx
+++ b/src/InviteModal.jsx
@ -0,0 +1,14 @@
+import React from "react";
+import { Modal, ModalContent } from "./Modal";
+import { CopyButton } from "./CopyButton";
+
+export function InviteModal({ roomUrl, ...rest }) {
+  return (
+    <Modal title="Invite People" isDismissable {...rest}>
+      <ModalContent>
+        <p>Copy and share this meeting link</p>
+        <CopyButton value={roomUrl} />
+      </ModalContent>
+    </Modal>
+  );
+}
--- a/src/Modal.jsx
+++ b/src/Modal.jsx
@ -0,0 +1,62 @@
+import React, { useRef } from "react";
+import {
+  useOverlay,
+  usePreventScroll,
+  useModal,
+  OverlayContainer,
+} from "@react-aria/overlays";
+import { useDialog } from "@react-aria/dialog";
+import { FocusScope } from "@react-aria/focus";
+import { useButton } from "@react-aria/button";
+import { ReactComponent as CloseIcon } from "./icons/Close.svg";
+import styles from "./Modal.module.css";
+import classNames from "classnames";
+
+export function Modal(props) {
+  const { title, children } = props;
+  const modalRef = useRef();
+  const { overlayProps, underlayProps } = useOverlay(props, modalRef);
+  usePreventScroll();
+  const { modalProps } = useModal();
+  const { dialogProps, titleProps } = useDialog(props, modalRef);
+  const closeButtonRef = useRef();
+  const { buttonProps: closeButtonProps } = useButton({
+    onPress: () => props.close(),
+  });
+
+  return (
+    <OverlayContainer>
+      <div className={styles.modalOverlay} {...underlayProps}>
+        <FocusScope contain restoreFocus autoFocus>
+          <div
+            {...overlayProps}
+            {...dialogProps}
+            {...modalProps}
+            ref={modalRef}
+            className={styles.modal}
+          >
+            <div className={styles.modalHeader}>
+              <h3 {...titleProps}>{title}</h3>
+              <button
+                {...closeButtonProps}
+                ref={closeButtonRef}
+                className={styles.closeButton}
+              >
+                <CloseIcon />
+              </button>
+            </div>
+            {children}
+          </div>
+        </FocusScope>
+      </div>
+    </OverlayContainer>
+  );
+}
+
+export function ModalContent({ children, className, ...rest }) {
+  return (
+    <div className={classNames(styles.content, className)} {...rest}>
+      {children}
+    </div>
+  );
+}
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@ -0,0 +1,49 @@
+.modalOverlay {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(23, 25, 28, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal {
+  background: #21262c;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  min-width: 420px;
+}
+
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  padding: 34px 34px 0 34px;
+}
+
+.modalHeader h3 {
+  font-size: 24px;
+  margin: 0;
+}
+
+.closeButton {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+.content {
+  padding: 24px 32px;
+}
+
+.content p {
+  margin-top: 0;
+}
--- a/src/Overlay.jsx
+++ b/src/Overlay.jsx
@ -0,0 +1,59 @@
+import React, { useRef } from "react";
+import { useOverlayTriggerState } from "@react-stately/overlays";
+import { useButton } from "@react-aria/button";
+
+export function useToggleOverlayButton(overlayState, ref) {
+  return useButton(
+    {
+      onPress: () => overlayState.toggle(),
+    },
+    ref
+  );
+}
+
+export function useOpenOverlayButton(overlayState, ref) {
+  return useButton(
+    {
+      onPress: () => overlayState.open(),
+    },
+    ref
+  );
+}
+
+export function useCloseOverlayButton(overlayState, ref) {
+  return useButton(
+    {
+      onPress: () => overlayState.close(),
+    },
+    ref
+  );
+}
+
+export function Overlay({ children }) {
+  const overlayState = useOverlayTriggerState({});
+  const buttonRef = useRef();
+  const { buttonProps } = useToggleOverlayButton(overlayState, buttonRef);
+
+  if (
+    !Array.isArray(children) ||
+    children.length > 2 ||
+    typeof children[1] !== "function"
+  ) {
+    throw new Error(
+      "Overlay trigger must have two props. The first being a button and the second being a render prop."
+    );
+  }
+
+  const [overlayTrigger, overlay] = children;
+
+  return (
+    <>
+      <overlayTrigger.type
+        {...overlayTrigger.props}
+        {...buttonProps}
+        ref={buttonRef}
+      />
+      {overlayState.isOpen && overlay({ ...overlayState })}
+    </>
+  );
+}
--- a/src/Room.jsx
+++ b/src/Room.jsx
@ -24,7 +24,7 @@ import {
  LayoutToggleButton,
  ScreenshareButton,
  DropdownButton,
-  SettingsButton,
+  InviteButton,
 } from "./RoomButton";
 import {
  Header,
@ -48,6 +48,8 @@ import { fetchGroupCall } from "./ConferenceCallManagerHooks";
 import { ErrorModal } from "./ErrorModal";
 import { GroupCallInspector } from "./GroupCallInspector";
 import * as Sentry from "@sentry/react";
+import { Overlay } from "./Overlay";
+import { InviteModal } from "./InviteModal";

 const canScreenshare = "getDisplayMedia" in navigator.mediaDevices;
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@ -505,11 +507,12 @@ function InRoomView({
          <RoomHeaderInfo roomName={roomName} />
        </LeftNav>
        <RightNav>
-          <SettingsButton
-            title={showInspector ? "Hide Inspector" : "Show Inspector"}
-            on={showInspector}
-            onClick={() => setShowInspector((prev) => !prev)}
-          />
+          <Overlay>
+            <InviteButton />
+            {(props) => (
+              <InviteModal roomUrl="https://example.com" {...props} />
+            )}
+          </Overlay>
          <LayoutToggleButton
            title={layout === "spotlight" ? "Spotlight" : "Freedom"}
            layout={layout}
--- a/src/RoomButton.jsx
+++ b/src/RoomButton.jsx
@ -12,6 +12,7 @@ import { ReactComponent as SpotlightIcon } from "./icons/Spotlight.svg";
 import { ReactComponent as ScreenshareIcon } from "./icons/Screenshare.svg";
 import { ReactComponent as ChevronIcon } from "./icons/Chevron.svg";
 import { ReactComponent as UserIcon } from "./icons/User.svg";
+import { ReactComponent as AddUserIcon } from "./icons/AddUser.svg";
 import { ReactComponent as CheckIcon } from "./icons/Check.svg";

 export function RoomButton({ on, className, children, ...rest }) {
@ -211,6 +212,15 @@ export function SettingsButton(props) {
  );
 }

+export function InviteButton(props) {
+  return (
+    <HeaderButton {...props}>
+      <ButtonTooltip>Add User</ButtonTooltip>
+      <AddUserIcon width={20} height={20} />
+    </HeaderButton>
+  );
+}
+
 export function LayoutToggleButton({ layout, setLayout, ...rest }) {
  return (
    <HeaderDropdownButton
--- a/src/icons/Close.svg
+++ b/src/icons/Close.svg
@ -0,0 +1,3 @@
+<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.2758 2.69628C20.8924 2.07969 20.8924 1.08 20.2758 0.463417C19.6592 -0.15317 18.6596 -0.15317 18.043 0.463417L10.8919 7.61447L3.74087 0.463417C3.12429 -0.15317 2.1246 -0.15317 1.50802 0.463417C0.891428 1.08 0.891428 2.07969 1.50802 2.69628L8.65907 9.84733L1.2017 17.3047C0.585111 17.9213 0.585111 18.921 1.2017 19.5376C1.81829 20.1541 2.81797 20.1541 3.43456 19.5376L10.8919 12.0802L18.3493 19.5375C18.9659 20.1541 19.9656 20.1541 20.5822 19.5375C21.1987 18.921 21.1987 17.9213 20.5822 17.3047L13.1248 9.84732L20.2758 2.69628Z" fill="#6F7882"/>
+</svg>
--- a/src/icons/Copy.svg
+++ b/src/icons/Copy.svg
@ -0,0 +1,3 @@
+<svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.03125 3C4.3744 3 3.03125 4.34315 3.03125 6V13C3.03125 14.6569 4.3744 16 6.03125 16H7.07407V18C7.07407 19.6569 8.41722 21 10.0741 21H14.9683C16.6251 21 17.9683 19.6569 17.9683 18V11C17.9683 9.34315 16.6251 8 14.9683 8H13.9255V6C13.9255 4.34315 12.5823 3 10.9255 3H6.03125ZM11.9255 8V6C11.9255 5.44772 11.4777 5 10.9255 5H6.03125C5.47897 5 5.03125 5.44772 5.03125 6V13C5.03125 13.5523 5.47897 14 6.03125 14H7.07407V11C7.07407 9.34315 8.41722 8 10.0741 8H11.9255ZM9.07407 11C9.07407 10.4477 9.52179 10 10.0741 10H14.9683C15.5206 10 15.9683 10.4477 15.9683 11V18C15.9683 18.5523 15.5206 19 14.9683 19H10.0741C9.52179 19 9.07407 18.5523 9.07407 18V11Z" fill="#0DBD8B"/>
+</svg>
--- a/yarn.lock
+++ b/yarn.lock
@ -176,7 +176,7 @@
  dependencies:
    regenerator-runtime "^0.13.4"

-"@babel/runtime@^7.7.6":
+"@babel/runtime@^7.6.2", "@babel/runtime@^7.7.6":
  version "7.16.3"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
  integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
@ -220,6 +220,166 @@
  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
  integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==

+"@formatjs/ecma402-abstract@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.0.tgz#7e91e6cc7cfebdc07171e00a3288719705e0108c"
+  integrity sha512-TOp5La9wmSh9G5bqFGN/ApmOXtJDzBGkYW+OTRd3ukY7J32RVGZPpN4O9BD651JUy66nj3g9CIENTNCgm4IRXQ==
+  dependencies:
+    "@formatjs/intl-localematcher" "0.2.21"
+    tslib "^2.1.0"
+
+"@formatjs/fast-memoize@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.0.tgz#1123bfcc5d21d761f15d8b1c32d10e1b6530355d"
+  integrity sha512-fObitP9Tlc31SKrPHgkPgQpGo4+4yXfQQITTCNH8AZdEqB7Mq4nPrjpUL/tNGN3lEeJcFxDbi0haX8HM7QvQ8w==
+  dependencies:
+    tslib "^2.1.0"
+
+"@formatjs/icu-messageformat-parser@2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.15.tgz#9e3ccadc582dbf076481bb95f98a689cfb10e7d5"
+  integrity sha512-nnRbkK+nz4ZL1l1lUbztL8qrEUGQKF/NU38itLnzLm8QLEacFS5qGOxxp/0DSIehhX99tNroNtudtjdOvzruAQ==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.0"
+    "@formatjs/icu-skeleton-parser" "1.3.2"
+    tslib "^2.1.0"
+
+"@formatjs/icu-skeleton-parser@1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.2.tgz#a8ab9c668ea7f044ceba2043ac1d872d71307e22"
+  integrity sha512-ChKmnVCE/LbJzedRgA/EeL5+tfjx/6ZWunqNiEC5BtqHnnwmLN/oPuCPb8b3NhuGiwTqp+LkaS70tga5kXRHxg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.0"
+    tslib "^2.1.0"
+
+"@formatjs/intl-localematcher@0.2.21":
+  version "0.2.21"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.21.tgz#39ef33d701fe8084f3d693cd3ff7cbe03cdd3a49"
+  integrity sha512-JTJeLiNwexN4Gy0cMxoUPvJbKhXdnSuo5jPrDafEZpnDWlJ5VDYta8zUVVozO/pwzEmFVHEUpgiEDj+39L4oMg==
+  dependencies:
+    tslib "^2.1.0"
+
+"@internationalized/date@3.0.0-alpha.1":
+  version "3.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.0.0-alpha.1.tgz#987a86a98b837f275bce084ef502421bc5cdb5f7"
+  integrity sha512-fxciU4AQ/4XBYfse/mT9h1nsyNkmQkxwQtTmQVu6b4Tp2u95Y3m5BNgWgV2m3vLiiKZ82NtHJXAIGoqiK53w4g==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
+"@internationalized/message@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.0.2.tgz#c3db2b6b7f75af815819f77da11f8424381416e3"
+  integrity sha512-ZZ8FQDCsri3vUB2mfDD76Vbf97DH361AiZUXKHV4BqwCtYyaNYiZqIr8KXrcMCxJvrIYVQLSn8+jeIQRO3bvtw==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    intl-messageformat "^9.6.12"
+
+"@internationalized/number@^3.0.2":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.0.3.tgz#d29003dffdff54ca6f2287ec0cb77ff3d045478f"
+  integrity sha512-ewFoVvsxSyd9QZnknvOWPjirYqdMQhXTeDhJg3hM6C/FeZt0banpGH1nZ0SGMZXHz8NK9uAa2KVIq+jqAIOg4w==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
+"@react-aria/button@^3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@react-aria/button/-/button-3.3.4.tgz#3af6eb4e0a479a76ba7386d541051d1273cd68fa"
+  integrity sha512-vebTcf9YpwaKCvsca2VWhn6eYPa15OJtMENwaGop72UrL35Oa7xDgU0RG22RAjRjt8HRVlAfLpHkJQW6GBGU3g==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.5.0"
+    "@react-aria/interactions" "^3.6.0"
+    "@react-aria/utils" "^3.9.0"
+    "@react-stately/toggle" "^3.2.3"
+    "@react-types/button" "^3.4.1"
+
+"@react-aria/dialog@^3.1.4":
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/@react-aria/dialog/-/dialog-3.1.4.tgz#7fe3f33e09b75dcdf598d0523e982262d6c89220"
+  integrity sha512-OtQGBol3CfcbBpjqXDqXzH5Ygny44PIuyAsZ1e3dfIdtaI+XHsoglyZnvDaVVealIgedHkMubreZnyNYnlzPLg==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.4.1"
+    "@react-aria/utils" "^3.8.2"
+    "@react-stately/overlays" "^3.1.3"
+    "@react-types/dialog" "^3.3.1"
+
+"@react-aria/focus@^3.4.1", "@react-aria/focus@^3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.5.0.tgz#02b85f97d6114af1eccc0902ce40723b626cb7f9"
+  integrity sha512-Eib75Q6QgQdn8VVVByg5Vipaaj/C//8Bs++sQY7nkomRx4sdArOnXbDppul3YHP6mRfU9VRLvAigEUlReQF/Xw==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/interactions" "^3.6.0"
+    "@react-aria/utils" "^3.9.0"
+    "@react-types/shared" "^3.9.0"
+    clsx "^1.1.1"
+
+"@react-aria/i18n@^3.3.3":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.3.4.tgz#172b8bcff0273410e67af31f7d84e49dd3ada463"
+  integrity sha512-1DV3I82UfL2dT8WBI/88TwtokO80B7ISSyuz6rO/6n7q76A/nC2AtVINbrGYrcKsCcxCEoEMxW5RVJ39fcLijA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@internationalized/date" "3.0.0-alpha.1"
+    "@internationalized/message" "^3.0.2"
+    "@internationalized/number" "^3.0.2"
+    "@react-aria/ssr" "^3.0.3"
+    "@react-aria/utils" "^3.10.0"
+    "@react-types/shared" "^3.10.0"
+
+"@react-aria/interactions@^3.5.1", "@react-aria/interactions@^3.6.0", "@react-aria/interactions@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.7.0.tgz#eb19c1068b557a6b6df1e1c4abef07de719e9f25"
+  integrity sha512-Xomchjb9bqvh3ocil+QCEYFSxsTy8PHEz43mNP6z2yuu3UqTpl2FsWfyKgF/Yy0WKVkyV2dO2uz758KJTCLZhw==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/utils" "^3.10.0"
+    "@react-types/shared" "^3.10.0"
+
+"@react-aria/overlays@^3.7.3":
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/@react-aria/overlays/-/overlays-3.7.3.tgz#b107b1d31c04c538355e566b1034d23e5696c18a"
+  integrity sha512-N5F/TVJ9KIYgGuOknVMrRnqqzkNKcFos4nxLHQz4TeFZTp4/P+NqEHd/VBmjsSTNEjEuNAivG+U2o4F1NWn/Pw==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/i18n" "^3.3.3"
+    "@react-aria/interactions" "^3.7.0"
+    "@react-aria/utils" "^3.10.0"
+    "@react-aria/visually-hidden" "^3.2.3"
+    "@react-stately/overlays" "^3.1.3"
+    "@react-types/button" "^3.4.1"
+    "@react-types/overlays" "^3.5.1"
+    dom-helpers "^3.3.1"
+
+"@react-aria/ssr@^3.0.3", "@react-aria/ssr@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.1.0.tgz#b7163e6224725c30121932a8d1422ef91d1fab22"
+  integrity sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
+"@react-aria/utils@^3.10.0", "@react-aria/utils@^3.8.2", "@react-aria/utils@^3.9.0":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.10.0.tgz#2f6f0b0ccede17241fca1cbd76978e1bf8f5a2b0"
+  integrity sha512-he/1pV8gsTVwmYqbKI6DPtRUkWjzz/4icgemVVNjWNsiKEJSBj8Cr4I+0i3vIgXEPLnn1t+/LUsJMGFbKnqc9w==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/ssr" "^3.1.0"
+    "@react-stately/utils" "^3.3.0"
+    "@react-types/shared" "^3.10.0"
+    clsx "^1.1.1"
+
+"@react-aria/visually-hidden@^3.2.3":
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.2.3.tgz#4779df0a468873550afb42a7f5fcb2411d82db8d"
+  integrity sha512-iAe5EFI7obEOwTnIdAwWrKq+CrIJFGTw85v8fXnQ7CIVGRDblX85GOUww9bzQNPDLLRYWS4VF702ii8kV4+JCw==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/interactions" "^3.5.1"
+    "@react-aria/utils" "^3.8.2"
+    clsx "^1.1.1"
+
 "@react-spring/animated@~9.2.0":
  version "9.2.4"
  resolved "https://registry.npmjs.org/@react-spring/animated/-/animated-9.2.4.tgz"
@ -265,6 +425,66 @@
    "@react-spring/shared" "~9.2.0"
    "@react-spring/types" "~9.2.0"

+"@react-stately/overlays@^3.1.3":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@react-stately/overlays/-/overlays-3.1.3.tgz#b0bb4061c1b20e712dfc32c933ae4bb23e5ccc0e"
+  integrity sha512-X8H/h9F8ZjevwJ7P8ak7v500qQd5x4Y76LsXUXrR6LtcO8FXfp2I+W8sGmBtLZwLQpTJiF1U0WMQqXLE1g6eLA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/utils" "^3.2.2"
+    "@react-types/overlays" "^3.5.1"
+
+"@react-stately/toggle@^3.2.3":
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/@react-stately/toggle/-/toggle-3.2.3.tgz#a4de6edc16982990492c6c557e5194f46dacc809"
+  integrity sha512-p5eVjXwNo4y4CeybxfjYmbTzNMNiI67uspbRAJnawWBVWw8X+yIvRfpjYAsqmvsJ+DsvwybSTlQDT6taGoWEsA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/utils" "^3.2.2"
+    "@react-types/checkbox" "^3.2.3"
+    "@react-types/shared" "^3.8.0"
+
+"@react-stately/utils@^3.2.2", "@react-stately/utils@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.3.0.tgz#99866c5788539268a06035acd5925b25bb4cedde"
+  integrity sha512-f//Y8q0+FFcS04xvCNvbba7WWRLHzj2AegLgdgwTxsnk9Gb+AyuasdRrRY7bGQhdHuEJ7OIiQZ9EQWndDbrTcg==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
+"@react-types/button@^3.4.1":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.4.1.tgz#715ac9d4997c79233be4d9020b58f85936b8252b"
+  integrity sha512-B54M84LxdEppwjXNlkBEJyMfe9fd+bvFV7R6+NJvupGrZm/LuFNYjFcHk7yjMKWTdWm6DbpIuQz54n5qTW7Vlg==
+  dependencies:
+    "@react-types/shared" "^3.8.0"
+
+"@react-types/checkbox@^3.2.3":
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/@react-types/checkbox/-/checkbox-3.2.3.tgz#2b9d529c55c9884519c7f626f0fe8be7d0f18be1"
+  integrity sha512-YqeAFyrpaxI/eW6zQ7tVkKIASgzpywRrc6C/rV6Mw0zzGGSSvmYvdOBx9yHOEvpts7dLgaGlmLK6CeG7s4yGKg==
+  dependencies:
+    "@react-types/shared" "^3.8.0"
+
+"@react-types/dialog@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@react-types/dialog/-/dialog-3.3.1.tgz#eb07e3d703643f7967243d56951d58a2cf77096f"
+  integrity sha512-1i6fVtixUNlftSNbVPFRieyEy3N/GNqcqpeOsJUB1jby28ppbM+JCp3Icb0ijaNC9Nl8c/oI8srtOWIQIKUJiQ==
+  dependencies:
+    "@react-types/overlays" "^3.5.1"
+    "@react-types/shared" "^3.8.0"
+
+"@react-types/overlays@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@react-types/overlays/-/overlays-3.5.1.tgz#35350dfca639d04a8fbd973de59b141450df1b46"
+  integrity sha512-T3o6wQ5NNm1rSniIa01bIa6fALC8jbwpYxFMaQRrdEpIvwktt0Fi5Xo6/97+oe4HvzzU0JMhtwWDTdRySvgeZw==
+  dependencies:
+    "@react-types/shared" "^3.8.0"
+
+"@react-types/shared@^3.10.0", "@react-types/shared@^3.8.0", "@react-types/shared@^3.9.0":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.10.0.tgz#bdafed2ebcd31149c178312252dda0babde316d0"
+  integrity sha512-B1gTRpE5qkSpfGxw8BHeOwvBPP3gnfKnzPHV0FJQHtgJ46oJS64WyloDAp1D9cLVsFHaI6s/HviXL51kVce2ww==
+
 "@sentry/browser@6.13.3":
  version "6.13.3"
  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.13.3.tgz#d4511791b1e484ad48785eba3bce291fdf115c1e"
@ -841,6 +1061,11 @@ cliui@^5.0.0:
    strip-ansi "^5.2.0"
    wrap-ansi "^5.1.0"

+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 color-convert@^1.9.0:
  version "1.9.3"
  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@ -892,6 +1117,13 @@ convert-source-map@^1.7.0:
  dependencies:
    safe-buffer "~5.1.1"

+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js@^1.0.0:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@ -1060,6 +1292,13 @@ dijkstrajs@^1.0.1:
  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.2.tgz#2e48c0d3b825462afe75ab4ad5e829c8ece36257"
  integrity sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg==

+dom-helpers@^3.3.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-helpers@^5.0.1:
  version "5.2.1"
  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
@ -1628,6 +1867,16 @@ indexof@0.0.1:
  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
  integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=

+intl-messageformat@^9.6.12:
+  version "9.10.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.10.0.tgz#f9864f6e15dde343851398082993911e57a6446e"
+  integrity sha512-OTOLlGPfwbrFyYD2iQuDbqEs8xccyLy+f1P3ZGJB2/EZo7Z9fVaaIWcM+JGvuWIFVRDnw4Um6z4t0mSSitUxGQ==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.0"
+    "@formatjs/fast-memoize" "1.2.0"
+    "@formatjs/icu-messageformat-parser" "2.0.15"
+    tslib "^2.1.0"
+
 ip-regex@^4.0.0:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-4.3.0.tgz#687275ab0f57fa76978ff8f4dddc8a23d5990db5"
@ -2706,6 +2955,13 @@ react-transition-group@^4.4.1:
    loose-envify "^1.4.0"
    prop-types "^15.6.2"

+react-use-clipboard@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/react-use-clipboard/-/react-use-clipboard-1.0.7.tgz#34cccdfb4f17f5e6522e38f2cee62d05f605597a"
+  integrity sha512-blIprqARyITp0uVw/2Rh87mcujqXdH6vZ5NrcuXEhI5EmjBGxcGnwt/79+vdN7rwM6OliGj481lOj6ZCcsiYEQ==
+  dependencies:
+    copy-to-clipboard "^3.3.1"
+
 react-use-gesture@^9.1.3:
  version "9.1.3"
  resolved "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.1.3.tgz"
@ -2983,6 +3239,11 @@ to-regex-range@^5.0.1:
  dependencies:
    is-number "^7.0.0"

+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 tough-cookie@~2.5.0:
  version "2.5.0"
  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@ -3001,7 +3262,7 @@ tslib@^1.9.3:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

-tslib@^2.0.3, tslib@^2.2.0:
+tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==