Merge pull request #1633 from AmbireTech/enhancement/extension-invite…

…-code-modal

Enhancement/ Extension invite code modal and top bar invite code option

package.json

@@ -26,7 +26,7 @@
  "@web3-react/abstract-connector": "^6.0.7",
  "@web3-react/types": "^6.0.7",
  "adex-protocol-eth": "git+https://[email protected]/AmbireTech/adex-protocol-eth.git#2606263234a7e01ece1af9826e6084fd800dae8f",
- "ambire-common": "npm:@ambire/[email protected].17",
+ "ambire-common": "npm:@ambire/[email protected].19",
  "bip44-constants": "^128.0.0",
  "blockies-ts": "^1.0.0",
  "chart.js": "^3.9.1",

src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useState } from 'react'
+import cn from 'classnames'
+
+import { useModals } from 'hooks'
+
+import { ReactComponent as AmbireLogo } from 'resources/logo-new.svg'
+import { ReactComponent as CopyIcon } from 'resources/icons/copy-new.svg'
+import { ReactComponent as CloseIcon } from 'resources/icons/close.svg'
+import { ReactComponent as ChromeWebStore } from 'resources/chrome-web-store.svg'
+
+import { useToasts } from 'hooks/toasts'
+import styles from './ExtensionInviteCodeModal.module.scss'
+
+const CAN_CLOSE_AFTER_MS = 5400
+
+const ExtensionInviteCodeModal = ({ inviteCode, waitForClose = true }) => {
+ const { hideModal } = useModals()
+ const { addToast } = useToasts()
+ const [remainingTime, setRemainingTime] = useState(CAN_CLOSE_AFTER_MS)
+ const [canClose, setCanClose] = useState(!waitForClose)
+
+ const handleCloseModal = useCallback(() => {
+ if (!canClose) return
+
+ hideModal()
+ }, [canClose, hideModal])
+
+ useEffect(() => {
+ const startingTime = Date.now()
+
+ const interval = setInterval(() => {
+ const elapsedTime = Date.now() - startingTime
+ const newRemainingTime = CAN_CLOSE_AFTER_MS - elapsedTime
+ setRemainingTime(newRemainingTime)
+
+ if (newRemainingTime <= 0) {
+ setCanClose(true)
+ clearInterval(interval)
+ }
+ }, 500)
+
+ return () => {
+ clearInterval(interval)
+ }
+ }, [])
+
+ const handleCopy = useCallback(async () => {
+ try {
+ await navigator.clipboard.writeText(inviteCode)
+ addToast('Invite code copied to clipboard')
+ } catch {
+ addToast('Failed to copy invite code to clipboard', { error: true })
+ }
+ }, [addToast, inviteCode])
+
+ return (
+ <div className={styles.wrapper}>
+ <div className={styles.header}>
+ <div className={styles.headerPrimaryGradient} />
+ <div className={styles.headerSecondaryGradient} />
+ <AmbireLogo className={styles.headerLogo} width={92} height={96} />
+ <div
+ className={cn(styles.closeWrapper, {
+ [styles.closeIconEnabled]: canClose
+ })}
+ >
+ {!canClose ? (
+ <span className={styles.remainingTime}>
+ {remainingTime > 500 ? Math.round(remainingTime / 1000) : 1}
+ </span>
+ ) : (
+ <CloseIcon className={styles.closeIcon} onClick={handleCloseModal} />
+ )}
+ </div>
+ </div>
+ <div className={styles.content}>
+ <div className={styles.textWrapper}>
+ <p className={styles.text}>Hey!</p>
+ <p className={styles.text}>
+ We are onboarding the existing Ambire community first to our newest product - the Ambire
+ <strong> browser extension</strong>.
+ </p>
+ <p className={styles.text}>
+ Claim this exclusive invitation code to get early access and start collecting XP for our
+ launch campaign before everyone else 🤫
+ </p>
+ </div>
+ <div className={styles.codeWrapper}>
+ <span className={styles.codeTitle}>Invitation code</span>
+ <span className={styles.code}>{inviteCode}</span>
+ <button className={styles.copyButton} type="button" onClick={handleCopy}>
+ <CopyIcon />
+ <span>Copy</span>
+ </button>
+ </div>
+ <div className={styles.storeWrapper}>
+ <p className={styles.storeText}>
+ Go to Chrome Web Store, install the extension and use the invitation code to log in.
+ </p>
+ <a
+ className={styles.storeLink}
+ href="https://chromewebstore.google.com/detail/ambire-wallet/ehgjhhccekdedpbkifaojjaefeohnoea"
+ target="_blank"
+ rel="noreferrer"
+ >
+ <ChromeWebStore />
+ </a>
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default ExtensionInviteCodeModal