From 89219b7afe6d8e8edbdd1a7d8c9af814d9c80daf Mon Sep 17 00:00:00 2001 From: Petromir Petrov Date: Wed, 7 Aug 2024 14:48:00 +0300 Subject: [PATCH 01/21] add: extension invite code modal and top bar invite code option --- .../ExtensionInviteCodeModal.js | 106 ++++++++ .../ExtensionInviteCodeModal.module.scss | 241 ++++++++++++++++++ src/components/Wallet/TopBar/Links/Links.js | 43 +++- .../Wallet/TopBar/Links/Links.module.scss | 9 +- .../Links/images/extension-invite-code.svg | 6 + .../TopBar/Links/images/help-center.svg | 25 +- .../Links/images/help-with-notification.svg | 8 + .../Wallet/TopBar/Links/images/help.svg | 16 +- src/components/Wallet/TopBar/TopBar.js | 6 +- src/components/Wallet/Wallet.js | 38 ++- src/resources/chrome-web-store.svg | 198 ++++++++++++++ src/resources/icons/copy-new.svg | 5 + src/resources/logo-new.svg | 72 ++++++ 13 files changed, 742 insertions(+), 31 deletions(-) create mode 100644 src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js create mode 100644 src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss create mode 100644 src/components/Wallet/TopBar/Links/images/extension-invite-code.svg create mode 100644 src/components/Wallet/TopBar/Links/images/help-with-notification.svg create mode 100644 src/resources/chrome-web-store.svg create mode 100644 src/resources/icons/copy-new.svg create mode 100644 src/resources/logo-new.svg diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js new file mode 100644 index 0000000000..c29bdc3b69 --- /dev/null +++ b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js @@ -0,0 +1,106 @@ +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 = 5000 + +const ExtensionInviteCodeModal = ({ + inviteCode, + setExtensionInviteCodeModalSeenBy, + accountId, + waitForClose = true +}) => { + const { onHideModal } = useModals() + const { addToast } = useToasts() + const [canClose, setCanClose] = useState(!waitForClose) + + const onCloseModal = useCallback(() => { + onHideModal() + setExtensionInviteCodeModalSeenBy((prev) => [...prev, accountId]) + }, [accountId, onHideModal, setExtensionInviteCodeModalSeenBy]) + + useEffect(() => { + const startingTime = Date.now() + + const timeout = setTimeout(() => { + if (Date.now() - startingTime < CAN_CLOSE_AFTER_MS) return + + setCanClose(true) + }, CAN_CLOSE_AFTER_MS) + + return () => { + clearTimeout(timeout) + } + }) + + 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 ( +
+
+
+
+ +

Easy and secure self-custody for the Ethereum ecosystem

+ +
+
+
+

Hey!

+

+ We are onboarding only selected Ambire Wallet users to our newest product - the Ambire + browser extension. +

+

+ Claim this exclusive invitation code to get early access and start collecting XP for our + launch campaign before everyone else 🤫 +

+
+
+ Invitation code + {inviteCode} + +
+
+

+ Go to Chrome Web Store, install the extension and use the invitation code to log in. +

+ + + +
+
+
+ ) +} + +export default ExtensionInviteCodeModal diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss new file mode 100644 index 0000000000..8c95a9ef25 --- /dev/null +++ b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss @@ -0,0 +1,241 @@ +@import 'variables.scss'; + +$max-modal-height: 55.375rem; +$min-modal-height: 34.375rem; + +.wrapper { + z-index: 52; + position: relative; + max-height: $max-modal-height; + min-height: $min-modal-height; + max-width: 37.75rem; + width: 100%; + border-radius: 1.125rem; + border: 1px #3e436b; + background: #24263d; +} + +// Reset +.wrapper p, +.wrapper span { + margin: 0; +} + +.header { + overflow: hidden; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem; + background: linear-gradient(82deg, #6000ff, #353d6e); + border-radius: 0.75rem 0.75rem 0 0; + + .headerPrimaryGradient { + position: absolute; + left: -20%; + top: -35%; + z-index: 2; + width: 20rem; + height: 13.75rem; + background-color: #8b3dff; + opacity: 0.66; + filter: blur(4.375rem); + } + + .headerSecondaryGradient { + position: absolute; + left: 60%; + bottom: 30%; + z-index: 2; + width: 26.25rem; + height: 18.5rem; + background-color: #56f6c1; + opacity: 0.48; + filter: blur(6.25rem); + } + + .closeIcon { + position: absolute; + right: 1rem; + top: 1rem; + z-index: 4; + cursor: pointer; + + :global(#background) { + display: none; + } + + &:not(.closeIconEnabled) { + opacity: .4; + cursor: not-allowed; + } + } + + .headerLogo { + position: relative; + z-index: 3; + margin-bottom: 1.5rem; + } + .headerText { + position: relative; + z-index: 3; + font-size: 1rem; + color: rgba(255, 255, 255, 0.6); + text-align: center; + } +} + +.content { + display: flex; + flex-direction: column; + padding: 2rem; + gap: 2.5rem; +} + +.textWrapper { + .text { + font-size: 1.125rem; + line-height: 1.7; + margin-bottom: 1rem; + } + .text:last-child { + margin-bottom: 0; + } +} + +.codeWrapper { + display: flex; + flex-direction: column; + align-items: center; + .codeTitle { + display: block; + color: #bbbde4; + font-size: 1rem; + margin-bottom: 1rem; + } + .code { + display: block; + margin-bottom: 2rem; + border: none; + width: 18ch; + background: repeating-linear-gradient( + 90deg, + #6770b3 0, + #6770b3 1ch, + transparent 0, + transparent 1.5ch + ) + 0 100%/98% 1px no-repeat; + color: #27e8a7; // font: 36px monospace; + font-size: 2.5rem; + font-family: monospace; + letter-spacing: 0.5ch; + } + .copyButton { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1.5rem; + background: rgba(235, 236, 255, 0.08); + border-radius: 1.5rem; + cursor: pointer; + + svg, + span { + color: #bbbde4; + transition: $basic-transition; + } + + svg { + width: 1.125rem; + height: 1.125rem; + } + + &:hover { + background: rgba(235, 236, 255, 0.15); + + svg, + span { + color: #fff; + } + } + } +} + +.storeWrapper { + .storeText { + font-size: 1.125rem; + margin-bottom: 2rem; + } + .storeLink { + display: flex; + justify-content: center; + align-items: center; + width: fit-content; + gap: 0.5rem; + padding: 1rem 3rem; + margin: 0 auto; + border-radius: 4rem; + border: 1px solid #6770b3; + background: rgba(0, 0, 0, 0.3); + cursor: pointer; + + svg { + width: 9.25rem; + height: 2rem; + } + + &:hover { + background-color: #0e0e0e; + } + } +} + +@mixin SmallScreen { + .header { + padding: 1.5rem; + + .headerLogo { + margin-bottom: 1rem; + } + + .headerText { + font-size: .75rem; + } + } + .content { + gap: 1.5rem; + } + .storeWrapper .storeText, .textWrapper .text { + font-size: 0.875rem; + } + .storeWrapper .storeText { + margin-bottom: 1rem; + } + .codeWrapper { + .codeTitle { + font-size: 0.875rem; + margin-bottom: .5rem; + } + .code { + margin-bottom: 1.5rem; + } + } +} + +@media screen and (max-height: calc(#{$max-modal-height} + 100px)) { + @include SmallScreen; +} + +@include sm-breakpoint { + @include SmallScreen; + .header, .content { + padding: 1.5rem; + } + .codeWrapper { + .code { + font-size: 2rem; + } + } +} diff --git a/src/components/Wallet/TopBar/Links/Links.js b/src/components/Wallet/TopBar/Links/Links.js index 6a9d36f81c..df186c5226 100644 --- a/src/components/Wallet/TopBar/Links/Links.js +++ b/src/components/Wallet/TopBar/Links/Links.js @@ -1,10 +1,14 @@ -import React from 'react' +import React, { useCallback } from 'react' import { DropDown } from 'components/common' import useLocalStorage from 'hooks/useLocalStorage' import DropDownItem from 'components/common/DropDown/DropDownItem/DropDownItem' -import { ReactComponent as QuestionMark } from 'resources/icons/question-mark.svg' +import { useModals } from 'hooks' +import ExtensionInviteCodeModal from 'components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal' import styles from './Links.module.scss' +import { ReactComponent as QuestionMark } from './images/help.svg' +import { ReactComponent as ExtensionInviteCode } from './images/extension-invite-code.svg' +import { ReactComponent as QuestionMarkWithNotification } from './images/help-with-notification.svg' import { ReactComponent as HelpCenter } from './images/help-center.svg' import { ReactComponent as Issue } from './images/issue.svg' import { ReactComponent as Discord } from './images/discord.svg' @@ -12,17 +16,46 @@ import { ReactComponent as Twitter } from './images/twitter.svg' import { ReactComponent as Telegram } from './images/telegram.svg' import { ReactComponent as Tos } from './images/tos.svg' -const Links = () => { +const Links = ({ extensionInviteCodeUsed, inviteCode, accountId }) => { + const { showModal } = useModals() + const [, setExtensionInviteCodeModalSeenBy] = useLocalStorage({ + key: 'extensionInviteCodeModalSeenBy', + defaultValue: [] + }) const [linksViewed, setLinksViewed] = useLocalStorage({ key: 'linksViewed', defaultValue: false }) - const onOpen = () => setLinksViewed(true) + const onOpen = useCallback(() => setLinksViewed(true), [setLinksViewed]) + + const openExtensionInviteCodeModal = useCallback(() => { + showModal( + + ) + }, [accountId, inviteCode, setExtensionInviteCodeModalSeenBy, showModal]) return ( } + title={ + extensionInviteCodeUsed ? ( + + ) : ( + + ) + } onOpen={onOpen} > + {!extensionInviteCodeUsed && ( + + + + )} + + + \ No newline at end of file diff --git a/src/components/Wallet/TopBar/Links/images/help-center.svg b/src/components/Wallet/TopBar/Links/images/help-center.svg index 9540489556..2d4534e40b 100644 --- a/src/components/Wallet/TopBar/Links/images/help-center.svg +++ b/src/components/Wallet/TopBar/Links/images/help-center.svg @@ -1,11 +1,14 @@ - - - - - - - - - - - + + + + + + \ No newline at end of file diff --git a/src/components/Wallet/TopBar/Links/images/help-with-notification.svg b/src/components/Wallet/TopBar/Links/images/help-with-notification.svg new file mode 100644 index 0000000000..98cccdbb3a --- /dev/null +++ b/src/components/Wallet/TopBar/Links/images/help-with-notification.svg @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/src/components/Wallet/TopBar/Links/images/help.svg b/src/components/Wallet/TopBar/Links/images/help.svg index bf4f72e6d6..02c20f4174 100644 --- a/src/components/Wallet/TopBar/Links/images/help.svg +++ b/src/components/Wallet/TopBar/Links/images/help.svg @@ -1,8 +1,8 @@ - - - - - - - - + + + + \ No newline at end of file diff --git a/src/components/Wallet/TopBar/TopBar.js b/src/components/Wallet/TopBar/TopBar.js index c2724a3dd6..8448a6302d 100644 --- a/src/components/Wallet/TopBar/TopBar.js +++ b/src/components/Wallet/TopBar/TopBar.js @@ -165,7 +165,11 @@ const TopBar = ({ dappsCatalog={dappsCatalog} dapModeTopBar={dappModeTopBar} /> - +
diff --git a/src/components/Wallet/Wallet.js b/src/components/Wallet/Wallet.js index 913c691db6..7ef7b2357c 100644 --- a/src/components/Wallet/Wallet.js +++ b/src/components/Wallet/Wallet.js @@ -10,6 +10,7 @@ import unsupportedDApps from 'ambire-common/src/constants/unsupportedDApps' import PermissionsModal from 'components/Modals/PermissionsModal/PermissionsModal' import UnsupportedDAppsModal from 'components/Modals/UnsupportedDAppsModal/UnsupportedDAppsModal' import { Loading } from 'components/common' +import ExtensionInviteCodeModal from 'components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal' import SideBar from './SideBar/SideBar' import TopBar from './TopBar/TopBar' import DappsCatalog from './DappsCatalog/DappsCatalog' @@ -42,6 +43,10 @@ export default function Wallet(props) { key: 'dAppsAdvancedMode', defaultValue: [] }) + const [extensionInviteCodeModalSeenBy, setExtensionInviteCodeModalSeenBy] = useLocalStorage({ + key: 'extensionInviteCodeModalSeenBy', + defaultValue: [] + }) const routes = [ { @@ -220,9 +225,9 @@ export default function Wallet(props) { const LoggedInGuard = () => (!isLoggedIn ? : null) - const handlePermissionsModal = useCallback(async () => { + const handleDisplayInitialModal = useCallback(async () => { const account = props.accounts.find(({ id }) => id === props.selectedAcc) - if (!account) return + if (!account || !arePermissionsLoaded) return const relayerIdentityURL = `${props.relayerURL}/identity/${account.id}` @@ -243,23 +248,46 @@ export default function Wallet(props) { /> ) - const isMobile = navigator.platform.includes('Android') || navigator.platform.includes('iOS') - if ((showCauseOfEmail || showCauseOfPermissions || showCauseOfBackupOptout) && !isMobile) + if (showCauseOfEmail || showCauseOfPermissions || showCauseOfBackupOptout) { + const isMobile = navigator.platform.includes('Android') || navigator.platform.includes('iOS') + if (isMobile) return + showModal(permissionsModal, { disableClose: true }) + return + } + const key = props.rewardsData?.rewards.extensionKey?.key + const used = props.rewardsData?.rewards.extensionKey?.used + + if (!key || used) return + const isSeen = extensionInviteCodeModalSeenBy.includes(account.id) + + if (isSeen) return + + showModal( + , + { disableClose: true } + ) }, [ props.accounts, props.relayerURL, props.onAddAccount, props.showThankYouPage, + props.rewardsData?.rewards.extensionKey?.key, + props.rewardsData?.rewards.extensionKey?.used, props.selectedAcc, arePermissionsLoaded, isClipboardGranted, isNoticationsGranted, modalHidden, + extensionInviteCodeModalSeenBy, showModal ]) - useEffect(() => handlePermissionsModal(), [handlePermissionsModal]) + useEffect(() => handleDisplayInitialModal(), [handleDisplayInitialModal]) // On pathname change (i.e. navigating to different page), always scroll to top useEffect(() => { diff --git a/src/resources/chrome-web-store.svg b/src/resources/chrome-web-store.svg new file mode 100644 index 0000000000..b21f08cad9 --- /dev/null +++ b/src/resources/chrome-web-store.svg @@ -0,0 +1,198 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/resources/icons/copy-new.svg b/src/resources/icons/copy-new.svg new file mode 100644 index 0000000000..d38fd6e698 --- /dev/null +++ b/src/resources/icons/copy-new.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/resources/logo-new.svg b/src/resources/logo-new.svg new file mode 100644 index 0000000000..8e43297111 --- /dev/null +++ b/src/resources/logo-new.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 3b925672d22b25cc48f4f02be46add060a488596 Mon Sep 17 00:00:00 2001 From: Petromir Petrov Date: Wed, 7 Aug 2024 15:00:57 +0300 Subject: [PATCH 02/21] fix: account added many times to extensionModalSeenBy --- .../ExtensionInviteCodeModal/ExtensionInviteCodeModal.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js index c29bdc3b69..1f7483979b 100644 --- a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js +++ b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js @@ -25,7 +25,11 @@ const ExtensionInviteCodeModal = ({ const onCloseModal = useCallback(() => { onHideModal() - setExtensionInviteCodeModalSeenBy((prev) => [...prev, accountId]) + setExtensionInviteCodeModalSeenBy((prev) => { + if (prev.includes(accountId)) return prev + + return [...prev, accountId] + }) }, [accountId, onHideModal, setExtensionInviteCodeModalSeenBy]) useEffect(() => { From ba332ab33cd2b1383be1fb2d722b94f45e162234 Mon Sep 17 00:00:00 2001 From: Petromir Petrov Date: Wed, 7 Aug 2024 15:01:09 +0300 Subject: [PATCH 03/21] update: extension invite code modal responsive design for mobile --- .../ExtensionInviteCodeModal.module.scss | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss index 8c95a9ef25..95ec258f77 100644 --- a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss +++ b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss @@ -233,9 +233,43 @@ $min-modal-height: 34.375rem; .header, .content { padding: 1.5rem; } + .codeWrapper { .code { font-size: 2rem; } } } + +@include xs-breakpoint { + .header, .content { + padding: 1rem; + } + + .header { + flex-direction: row; + align-items: center; + gap: 1rem; + + .headerLogo { + width: 3.75rem; + width: 4rem; + height: auto; + margin-bottom: 0; + } + .headerText { + text-align: left; + padding-right: 2rem; + } + .closeIcon { + top: .5rem; + right: .5rem; + } + } +} + +@media screen and (max-width: 350px) { + .codeWrapper .code { + font-size: 1.5rem; + } +} \ No newline at end of file From 74e0b466d3ed1e30015719bcdc5d3678e76f0a67 Mon Sep 17 00:00:00 2001 From: Petromir Petrov Date: Wed, 7 Aug 2024 15:03:54 +0300 Subject: [PATCH 04/21] update: headerText font weight on smaller screens --- .../ExtensionInviteCodeModal.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss index 95ec258f77..6ba4a435c6 100644 --- a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss +++ b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss @@ -82,6 +82,7 @@ $min-modal-height: 34.375rem; z-index: 3; font-size: 1rem; color: rgba(255, 255, 255, 0.6); + font-weight: 400; text-align: center; } } @@ -202,6 +203,7 @@ $min-modal-height: 34.375rem; .headerText { font-size: .75rem; + font-weight: 500; } } .content { From f53943ba358bbb8f0418b8b921a77586ce37476c Mon Sep 17 00:00:00 2001 From: Petromir Petrov Date: Wed, 7 Aug 2024 15:15:25 +0300 Subject: [PATCH 05/21] fix: extension invite code modal display for the prev account --- src/components/Wallet/Wallet.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Wallet/Wallet.js b/src/components/Wallet/Wallet.js index 7ef7b2357c..b3926a322f 100644 --- a/src/components/Wallet/Wallet.js +++ b/src/components/Wallet/Wallet.js @@ -257,8 +257,10 @@ export default function Wallet(props) { } const key = props.rewardsData?.rewards.extensionKey?.key const used = props.rewardsData?.rewards.extensionKey?.used + const rewardsAccountAddr = props.rewardsData?.rewards.accountAddr + + if (!key || used || rewardsAccountAddr !== account.id) return - if (!key || used) return const isSeen = extensionInviteCodeModalSeenBy.includes(account.id) if (isSeen) return From a8eb5588379b660b52c7c5d5b096bd8fdf6d6ac0 Mon Sep 17 00:00:00 2001 From: Petromir Petrov Date: Wed, 7 Aug 2024 15:26:38 +0300 Subject: [PATCH 06/21] fix: close modal --- .../ExtensionInviteCodeModal/ExtensionInviteCodeModal.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js index 1f7483979b..61662a4d95 100644 --- a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js +++ b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js @@ -23,14 +23,15 @@ const ExtensionInviteCodeModal = ({ const { addToast } = useToasts() const [canClose, setCanClose] = useState(!waitForClose) - const onCloseModal = useCallback(() => { + const handleCloseModal = useCallback(() => { + if (!canClose) return onHideModal() setExtensionInviteCodeModalSeenBy((prev) => { if (prev.includes(accountId)) return prev return [...prev, accountId] }) - }, [accountId, onHideModal, setExtensionInviteCodeModalSeenBy]) + }, [accountId, canClose, onHideModal, setExtensionInviteCodeModalSeenBy]) useEffect(() => { const startingTime = Date.now() @@ -66,7 +67,7 @@ const ExtensionInviteCodeModal = ({ className={cn(styles.closeIcon, { [styles.closeIconEnabled]: canClose })} - onClick={onCloseModal} + onClick={handleCloseModal} />
From c88ee791f8cb44118b2d517ce8557026abe838fa Mon Sep 17 00:00:00 2001 From: Petromir Petrov Date: Wed, 7 Aug 2024 15:27:15 +0300 Subject: [PATCH 07/21] change: unify notification color (svg icons) --- .../Wallet/TopBar/Links/images/extension-invite-code.svg | 2 +- .../Wallet/TopBar/Links/images/help-with-notification.svg | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Wallet/TopBar/Links/images/extension-invite-code.svg b/src/components/Wallet/TopBar/Links/images/extension-invite-code.svg index c495087947..4ce9b89240 100644 --- a/src/components/Wallet/TopBar/Links/images/extension-invite-code.svg +++ b/src/components/Wallet/TopBar/Links/images/extension-invite-code.svg @@ -2,5 +2,5 @@ - + \ No newline at end of file diff --git a/src/components/Wallet/TopBar/Links/images/help-with-notification.svg b/src/components/Wallet/TopBar/Links/images/help-with-notification.svg index 98cccdbb3a..8b34eb47ae 100644 --- a/src/components/Wallet/TopBar/Links/images/help-with-notification.svg +++ b/src/components/Wallet/TopBar/Links/images/help-with-notification.svg @@ -4,5 +4,5 @@ - + \ No newline at end of file From f5cdd4ae14097172928771f29f3e3b3a0e890482 Mon Sep 17 00:00:00 2001 From: Petromir Petrov Date: Wed, 7 Aug 2024 15:33:28 +0300 Subject: [PATCH 08/21] fix: hard to click topbar links --- src/components/Wallet/TopBar/Links/Links.module.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Wallet/TopBar/Links/Links.module.scss b/src/components/Wallet/TopBar/Links/Links.module.scss index a82255c932..756218a539 100644 --- a/src/components/Wallet/TopBar/Links/Links.module.scss +++ b/src/components/Wallet/TopBar/Links/Links.module.scss @@ -6,10 +6,11 @@ height: 2rem; } .item { + display: flex; + align-items: stretch; height: 3.125rem; - padding-left: 1rem; - padding-right: 1.375rem; background-color: $c-mirage; + padding: 0; button { outline: none; @@ -27,6 +28,9 @@ color: $c-titan-white; white-space: nowrap; font-weight: 400; + padding-left: 1rem; + padding-right: 1.375rem; + width: 100%; .itemIcon { width: 1.875rem; From efbd398c7717ab5e0222747211cc870d064be3ad Mon Sep 17 00:00:00 2001 From: Petromir Petrov Date: Wed, 7 Aug 2024 15:50:01 +0300 Subject: [PATCH 09/21] update: twitter logo and icon to X --- src/components/Wallet/TopBar/Links/Links.js | 2 +- src/components/Wallet/TopBar/Links/images/twitter.svg | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Wallet/TopBar/Links/Links.js b/src/components/Wallet/TopBar/Links/Links.js index df186c5226..c748da93e7 100644 --- a/src/components/Wallet/TopBar/Links/Links.js +++ b/src/components/Wallet/TopBar/Links/Links.js @@ -77,7 +77,7 @@ const Links = ({ extensionInviteCodeUsed, inviteCode, accountId }) => { - Twitter + X diff --git a/src/components/Wallet/TopBar/Links/images/twitter.svg b/src/components/Wallet/TopBar/Links/images/twitter.svg index 3993d58293..ab44b80483 100644 --- a/src/components/Wallet/TopBar/Links/images/twitter.svg +++ b/src/components/Wallet/TopBar/Links/images/twitter.svg @@ -1,6 +1,5 @@ - - - - - - + + + \ No newline at end of file From 584411a5eedebf191ff9af3928c290591ec60135 Mon Sep 17 00:00:00 2001 From: Petromir Petrov Date: Wed, 7 Aug 2024 15:57:10 +0300 Subject: [PATCH 10/21] update: delete header text, update content text --- .../ExtensionInviteCodeModal.js | 5 ++-- .../ExtensionInviteCodeModal.module.scss | 30 +------------------ 2 files changed, 3 insertions(+), 32 deletions(-) diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js index 61662a4d95..1d7fc64e53 100644 --- a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js +++ b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js @@ -62,7 +62,6 @@ const ExtensionInviteCodeModal = ({
-

Easy and secure self-custody for the Ethereum ecosystem

Hey!

- We are onboarding only selected Ambire Wallet users to our newest product - the Ambire - browser extension. + We are onboarding the existing Ambire community first to our newest product - the Ambire + browser extension.

Claim this exclusive invitation code to get early access and start collecting XP for our diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss index 6ba4a435c6..46ebfccaf6 100644 --- a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss +++ b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss @@ -25,8 +25,7 @@ $min-modal-height: 34.375rem; overflow: hidden; position: relative; display: flex; - flex-direction: column; - align-items: center; + justify-content: center; padding: 2rem; background: linear-gradient(82deg, #6000ff, #353d6e); border-radius: 0.75rem 0.75rem 0 0; @@ -75,15 +74,6 @@ $min-modal-height: 34.375rem; .headerLogo { position: relative; z-index: 3; - margin-bottom: 1.5rem; - } - .headerText { - position: relative; - z-index: 3; - font-size: 1rem; - color: rgba(255, 255, 255, 0.6); - font-weight: 400; - text-align: center; } } @@ -196,15 +186,6 @@ $min-modal-height: 34.375rem; @mixin SmallScreen { .header { padding: 1.5rem; - - .headerLogo { - margin-bottom: 1rem; - } - - .headerText { - font-size: .75rem; - font-weight: 500; - } } .content { gap: 1.5rem; @@ -249,19 +230,10 @@ $min-modal-height: 34.375rem; } .header { - flex-direction: row; - align-items: center; - gap: 1rem; - .headerLogo { width: 3.75rem; width: 4rem; height: auto; - margin-bottom: 0; - } - .headerText { - text-align: left; - padding-right: 2rem; } .closeIcon { top: .5rem; From faac3252db159b36d40b984b51b7632c8852292e Mon Sep 17 00:00:00 2001 From: Petromir Petrov Date: Wed, 7 Aug 2024 16:08:28 +0300 Subject: [PATCH 11/21] update: ambire logo in the sidebar --- public/resources/logo-v1.svg | 92 ++++++++++++++++++++++++ src/components/Wallet/SideBar/SideBar.js | 2 +- 2 files changed, 93 insertions(+), 1 deletion(-) create mode 100644 public/resources/logo-v1.svg diff --git a/public/resources/logo-v1.svg b/public/resources/logo-v1.svg new file mode 100644 index 0000000000..4e0db2cd24 --- /dev/null +++ b/public/resources/logo-v1.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Wallet/SideBar/SideBar.js b/src/components/Wallet/SideBar/SideBar.js index 8794ec0478..f5a5febcef 100644 --- a/src/components/Wallet/SideBar/SideBar.js +++ b/src/components/Wallet/SideBar/SideBar.js @@ -100,7 +100,7 @@ const SideBar = ({ {!dappModeSidebar && ( - ambire-logo + ambire-logo )}

From 86a0b43c1655c4861f9f0f2ea4c96cf0c3bc7cee Mon Sep 17 00:00:00 2001 From: Petromir Petrov Date: Wed, 7 Aug 2024 16:17:09 +0300 Subject: [PATCH 12/21] add: ambire v1 badge in top bar --- .../Wallet/TopBar/Accounts/Accounts.js | 5 +++- .../TopBar/Accounts/Accounts.module.scss | 30 +++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/src/components/Wallet/TopBar/Accounts/Accounts.js b/src/components/Wallet/TopBar/Accounts/Accounts.js index e9b5ee1efa..3468db7395 100644 --- a/src/components/Wallet/TopBar/Accounts/Accounts.js +++ b/src/components/Wallet/TopBar/Accounts/Accounts.js @@ -173,7 +173,10 @@ const Accounts = ({ )}
-
{id}
+
+
{id}
+
Ambire v1
+