Merge pull request #364 from z3us-dapps/feat/babylon-acc-export-v1

feat: babylon export ui

apps/extension/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "z3us-extension",
-	"version": "1.0.45",
+	"version": "1.0.46",
 	"scripts": {
 		"dev": "yarn start",
 		"start": "vite --mode development",

apps/extension/src/components/locked-panel/index.tsx

@@ -5,13 +5,15 @@ import React, { useEffect, useRef } from 'react'
 import { useImmer } from 'use-immer'
 import { useTimeout } from 'usehooks-ts'
 
+import AlertCard from 'ui/src/components/alert-card'
 import { Box, Flex, MotionBox, StyledLink, Text } from 'ui/src/components/atoms'
 import Button from 'ui/src/components/button'
 import Input from 'ui/src/components/input'
 import { Z3usText } from 'ui/src/components/z3us-text'
 
 import { WalletMenu } from '@src/components/wallet-menu'
 import { useColorMode } from '@src/hooks/use-color-mode'
+import { useIsBabylon } from '@src/hooks/use-is-babylon'
 import { useMessanger } from '@src/hooks/use-messanger'
 import { useSharedStore } from '@src/hooks/use-store'
 import { createLocalSigningKey } from '@src/services/signing-key'
@@ -31,6 +33,7 @@ interface IImmer {
 }
 
 export const LockedPanel: React.FC = () => {
+	const isBabylon = useIsBabylon()
 	const isDarkMode = useColorMode()
 	const panelControls = useAnimationControls()
 	const z3usLogoControls = useAnimationControls()
@@ -284,55 +287,78 @@ export const LockedPanel: React.FC = () => {
 					</Box>
 				</Flex>
 				<Flex align="center" justify="center" css={{ flex: '1', position: 'relative' }}>
-					<MotionBox
-						animate={imageControls}
-						css={{
-							pe: 'none',
-							opacity: '0',
-							position: 'absolute',
-							width: '204px',
-							height: '347px',
-							top: '-16px',
-							right: '0px',
-							backgroundImage: 'url("/images/locked-panel-right.webp")',
-							backgroundSize: '100%',
-						}}
-					/>
-					<MotionBox
-						animate={z3usLogoControls}
-						css={{
-							width: '232px',
-							height: '232px',
-							borderRadius: '50%',
-							position: 'absolute',
-							top: '40px',
-							left: '50%',
-							marginLeft: '-116px',
-							transition: '$default',
-							zIndex: '99',
-							boxShadow: logoShadow,
-							fill: logoFill,
-							backgroundColor: logoBackgroundStart,
-						}}
-					>
-						<MotionBox
-							animate={z3usLogoSpinnerControls}
-							css={{ width: '232px', height: '232px', position: 'absolute', top: '0', left: '0' }}
-						>
-							<Z3USLogoOuter />
-						</MotionBox>
-						<Box
-							css={{
-								width: '168px',
-								height: '168px',
-								position: 'absolute',
-								top: '32px',
-								left: '32px',
-							}}
-						>
-							<Z3USLogoInner />
+					{isBabylon ? (
+						<Box css={{ px: '$5' }}>
+							<AlertCard icon color="warning" css={{ py: '$4' }}>
+								<Box css={{ p: '$2' }}>
+									<Text size="3" css={{ display: 'inline', lineHeight: '16px' }}>
+										Babylon is live. Read
+										<StyledLink
+											underline
+											href="https://z3us.com/docs/migration/"
+											css={{ display: 'inline', px: '$1' }}
+											target="_blank"
+										>
+											here
+										</StyledLink>
+										on how to export your accounts.
+									</Text>
+								</Box>
+							</AlertCard>
 						</Box>
-					</MotionBox>
+					) : (
+						<>
+							<MotionBox
+								animate={imageControls}
+								css={{
+									pe: 'none',
+									opacity: '0',
+									position: 'absolute',
+									width: '204px',
+									height: '347px',
+									top: '-16px',
+									right: '0px',
+									backgroundImage: 'url("/images/locked-panel-right.webp")',
+									backgroundSize: '100%',
+								}}
+							/>
+							<MotionBox
+								animate={z3usLogoControls}
+								css={{
+									width: '232px',
+									height: '232px',
+									borderRadius: '50%',
+									position: 'absolute',
+									top: '40px',
+									left: '50%',
+									marginLeft: '-116px',
+									transition: '$default',
+									zIndex: '99',
+									boxShadow: logoShadow,
+									fill: logoFill,
+									backgroundColor: logoBackgroundStart,
+								}}
+							>
+								<MotionBox
+									animate={z3usLogoSpinnerControls}
+									css={{ width: '232px', height: '232px', position: 'absolute', top: '0', left: '0' }}
+								>
+									<Z3USLogoOuter />
+								</MotionBox>
+								<Box
+									css={{
+										width: '168px',
+										height: '168px',
+										position: 'absolute',
+										top: '32px',
+										left: '32px',
+									}}
+								>
+									<Z3USLogoInner />
+								</Box>
+							</MotionBox>
+						</>
+					)}
 				</Flex>
 
 				<form onSubmit={handleSubmitForm}>

apps/extension/src/components/locked-panel/wallet-selector/index.tsx

@@ -154,23 +154,25 @@ export const WalletSelector: React.FC<IProps> = () => {
 						</SelectItem>
 					))}
 
-					<SelectSeparator />
+					<>
+						<SelectSeparator />
 
-					<SelectItem
-						value={newWalletOptions}
-						css={{
-							'span:first-child': {
-								overflow: 'hidden',
-								textOverflow: 'ellipsis',
-								whiteSpace: 'nowrap',
-								maxWidth: `${triggerWidth - 25}px`,
-								minWidth: '100px',
-							},
-						}}
-					>
-						<SelectItemText>Add new wallet</SelectItemText>
-						<SelectItemIndicator />
-					</SelectItem>
+						<SelectItem
+							value={newWalletOptions}
+							css={{
+								'span:first-child': {
+									overflow: 'hidden',
+									textOverflow: 'ellipsis',
+									whiteSpace: 'nowrap',
+									maxWidth: `${triggerWidth - 25}px`,
+									minWidth: '100px',
+								},
+							}}
+						>
+							<SelectItemText>Add new wallet</SelectItemText>
+							<SelectItemIndicator />
+						</SelectItem>
+					</>
 				</SelectViewport>
 				<SelectScrollDownButton>
 					<ChevronDownIcon />

apps/extension/src/components/token-list-settings-modal/index.tsx

@@ -1,21 +1,24 @@
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment */
-import React, { useState, useEffect, useCallback } from 'react'
-import { useSharedStore, useNoneSharedStore } from '@src/hooks/use-store'
-import { useEventListener } from 'usehooks-ts'
-import { useTokenBalances } from '@src/hooks/react-query/queries/radix'
-import { useKnownTokens } from '@src/hooks/react-query/queries/radixscan'
-import { useImmer } from 'use-immer'
-import { SearchBox } from '@src/components/search-box'
+import { Side } from '@radix-ui/popper'
 import { Cross2Icon, ResetIcon } from '@radix-ui/react-icons'
-import Button from 'ui/src/components/button'
-import { Virtuoso } from 'react-virtuoso'
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipArrow } from 'ui/src/components/tool-tip'
-import { Dialog, DialogTrigger, DialogContent } from 'ui/src/components/dialog'
+import React, { useCallback, useEffect, useState } from 'react'
 import * as ReactBeautifulDnd from 'react-beautiful-dnd'
-import { Box, Text, Flex } from 'ui/src/components/atoms'
-import { Side } from '@radix-ui/popper'
-import { TokenAmount, VisibleTokens, VisibleToken } from '@src/types'
+import { Virtuoso } from 'react-virtuoso'
+import { useImmer } from 'use-immer'
+import { useEventListener } from 'usehooks-ts'
+
+import { Box, Flex, Text } from 'ui/src/components/atoms'
+import Button from 'ui/src/components/button'
+import { Dialog, DialogContent, DialogTrigger } from 'ui/src/components/dialog'
+import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from 'ui/src/components/tool-tip'
+
+import { SearchBox } from '@src/components/search-box'
 import { OCI_TEST_RRI } from '@src/config'
+import { useTokenBalances } from '@src/hooks/react-query/queries/radix'
+import { useKnownTokens } from '@src/hooks/react-query/queries/radixscan'
+import { useNoneSharedStore, useSharedStore } from '@src/hooks/use-store'
+import { TokenAmount, VisibleToken, VisibleTokens } from '@src/types'
+
 import { Token } from './token'
 
 const VISIBLE = 'visible'

apps/extension/src/containers/hardware-wallet/steps/1-import-accounts/index.tsx

@@ -1,25 +1,27 @@
-import React from 'react'
-import { firstValueFrom } from 'rxjs'
 import TransportWebHID from '@ledgerhq/hw-transport-webhid'
-import AlertCard from 'ui/src/components/alert-card'
-import { HardwareWalletLedger } from '@radixdlt/hardware-ledger'
-import { useEventListener } from 'usehooks-ts'
+import { CopyIcon, ExclamationTriangleIcon, ReloadIcon } from '@radix-ui/react-icons'
 import { AccountAddress, SigningKey } from '@radixdlt/application'
 import { HDPathRadix } from '@radixdlt/crypto'
+import { HardwareWalletLedger } from '@radixdlt/hardware-ledger'
+import React from 'react'
+import { firstValueFrom } from 'rxjs'
 import { useImmer } from 'use-immer'
-import { useSharedStore, useNoneSharedStore } from '@src/hooks/use-store'
-import { CopyIcon, ReloadIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons'
-import { ScrollArea } from 'ui/src/components/scroll-area'
-import { copyTextToClipboard } from '@src/utils/copy-to-clipboard'
-import { Checkbox, CheckIcon } from 'ui/src/components/checkbox'
+import { useEventListener } from 'usehooks-ts'
+
+import AlertCard from 'ui/src/components/alert-card'
+import { Box, Flex, MotionBox, Text } from 'ui/src/components/atoms'
+import Button from 'ui/src/components/button'
 import ButtonTipFeedback from 'ui/src/components/button-tip-feedback'
-import { connectHardwareWalletSteps } from '@src/store/onboarding'
-import { getShortAddress } from '@src/utils/string-utils'
+import { CheckIcon, Checkbox } from 'ui/src/components/checkbox'
 import InputFeedBack from 'ui/src/components/input/input-feedback'
-import { PageWrapper, PageHeading, PageSubHeading } from '@src/components/layout'
-import { Flex, Text, Box, MotionBox } from 'ui/src/components/atoms'
-import Button from 'ui/src/components/button'
+import { ScrollArea } from 'ui/src/components/scroll-area'
+
+import { PageHeading, PageSubHeading, PageWrapper } from '@src/components/layout'
 import { useAPDU } from '@src/hooks/use-apdu'
+import { useNoneSharedStore, useSharedStore } from '@src/hooks/use-store'
+import { connectHardwareWalletSteps } from '@src/store/onboarding'
+import { copyTextToClipboard } from '@src/utils/copy-to-clipboard'
+import { getShortAddress } from '@src/utils/string-utils'
 
 const isHIDSupported = !!window?.navigator?.hid
 

apps/extension/src/containers/notification/index.tsx

@@ -1,9 +1,10 @@
-import React, { lazy, Suspense } from 'react'
-import { useHashLocation } from '@src/hooks/use-hash-location'
-import { RouterScope } from '@src/components/router-scope'
-import { Loader } from '@src/components/loader'
+import React, { Suspense, lazy } from 'react'
 import { Route } from 'wouter'
+
+import { Loader } from '@src/components/loader'
+import { RouterScope } from '@src/components/router-scope'
 import UnlockedPanel from '@src/components/unlocked-panel'
+import { useHashLocation } from '@src/hooks/use-hash-location'
 
 const Connect = lazy(() => import('./connect'))
 const Encrypt = lazy(() => import('./encrypt'))

apps/extension/src/containers/wallet-panel/accounts/account-switcher/index.tsx

@@ -1,39 +1,47 @@
-import React, { useRef, useState, useEffect } from 'react'
-import { useNoneSharedStore, useSharedStore } from '@src/hooks/use-store'
-import { PlusIcon } from 'ui/src/components/icons'
+import React, { useEffect, useRef, useState } from 'react'
 import { useEventListener } from 'usehooks-ts'
+
 import { Box, Flex, MotionBox, Text } from 'ui/src/components/atoms'
 import Button from 'ui/src/components/button'
+import { PlusIcon } from 'ui/src/components/icons'
+
 import { HardwareWalletReconnect } from '@src/components/hardware-wallet-reconnect'
-import { AccountSwitcherButtons } from './account-switcher-buttons'
+import { useIsBabylon } from '@src/hooks/use-is-babylon'
+import { useNoneSharedStore, useSharedStore } from '@src/hooks/use-store'
+
 import { AccountInfo } from './account-info'
+import { AccountSwitcherButtons } from './account-switcher-buttons'
 import { AccountsTotal } from './accounts-total'
 
 const SLIDER_WIDTH = 308
 const SLIDER_HEIGHT = 169
 const LEFT_OFFSET = 26 - SLIDER_WIDTH
 
 export const AccountSwitcher = (): JSX.Element => {
+	const isBabylon = useIsBabylon()
 	const { signingKey } = useSharedStore(state => ({
 		signingKey: state.signingKey,
 	}))
-	const { addresses, activeSlideIndex, selectAccount, setActiveSlide } = useNoneSharedStore(state => ({
+	const { addresses, slideIndex, selectAccount, setActiveSlide } = useNoneSharedStore(state => ({
 		addresses: Object.values(state.publicAddresses).map(({ address }) => address),
-		activeSlideIndex: state.activeSlideIndex,
+		slideIndex: state.activeSlideIndex,
 		selectAccount: state.selectAccountAction,
 		setActiveSlide: state.setActiveSlideIndexAction,
 	}))
 
+	const min = isBabylon ? 0 : -1
+	const activeSlideIndex = isBabylon ? Math.max(slideIndex, 0) : slideIndex
+
 	const [xVal, setXVal] = useState<number>(LEFT_OFFSET + activeSlideIndex * -SLIDER_WIDTH)
 	const [isAccountBtnsVisible, setIsAccountBtnsVisible] = useState<boolean>(
-		activeSlideIndex > -1 && activeSlideIndex < addresses.length,
+		!isBabylon && activeSlideIndex > min && activeSlideIndex < addresses.length,
 	)
 	const containerRef = useRef(null)
 	const containerWidth = containerRef.current?.offsetWidth
 
 	useEffect(() => {
 		setXVal(LEFT_OFFSET + activeSlideIndex * -SLIDER_WIDTH)
-		setIsAccountBtnsVisible(activeSlideIndex > -1 && activeSlideIndex < addresses.length)
+		setIsAccountBtnsVisible(activeSlideIndex > min && activeSlideIndex < addresses.length)
 	}, [activeSlideIndex, addresses])
 
 	const handleSlideClick = async (idx: number) => {
@@ -45,7 +53,7 @@ export const AccountSwitcher = (): JSX.Element => {
 	}
 
 	useEventListener('keydown', e => {
-		if (e.code === 'ArrowLeft' && activeSlideIndex > -1) {
+		if (e.code === 'ArrowLeft' && activeSlideIndex > min) {
 			// @TOOD: bring this back when we can disable globally
 			// we do not want the cards switching when users are are using left and right arrows when using the search token input
 			//handleSlideClick(activeSlideIndex - 1)
@@ -81,8 +89,14 @@ export const AccountSwitcher = (): JSX.Element => {
 							py: '0',
 							margin: 0,
 							border: 'none',
+							...(isBabylon
+								? {
+										opacity: 0,
+										pointerEvents: 'none',
+								  }
+								: {}),
 						}}
-						onClick={() => handleSlideClick(-1)}
+						onClick={() => !isBabylon && handleSlideClick(-1)}
 					>
 						<AccountsTotal />
 					</Box>
@@ -152,7 +166,7 @@ export const AccountSwitcher = (): JSX.Element => {
 					transition: '$default',
 				}}
 			>
-				<AccountSwitcherButtons />
+				{!isBabylon && <AccountSwitcherButtons />}
 			</Box>
 		</Flex>
 	)