@trustwallet/connect-react 0.0.0

package/src/ui/layout/ModalOverlay/index.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+import styles from './styles.module.css'
+
+interface ModalOverlayProps {
+	onClick: () => void
+	children: ReactNode
+}
+
+export function ModalOverlay({ onClick, children }: ModalOverlayProps) {
+	return (
+		<div className={styles.overlay} role="presentation" onClick={onClick}>
+			{children}
+		</div>
+	)
+}

package/src/ui/layout/ModalOverlay/styles.module.css

@@ -0,0 +1,33 @@
+.overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.25);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 999999;
+	padding: 16px;
+	animation: fadeIn 0.2s ease;
+	font-family: var(--tcui-font-family);
+}
+
+[data-tcui-theme='dark'] .overlay {
+	background: rgba(0, 0, 0, 0.6);
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+	.overlay {
+		padding: 0;
+		align-items: flex-end;
+	}
+}

package/src/ui/layout/ModalWrapper/index.tsx

@@ -0,0 +1,23 @@
+import { ReactNode, type MouseEvent as ReactMouseEvent, type RefObject } from 'react'
+import styles from './styles.module.css'
+
+interface ModalWrapperProps {
+	children: ReactNode
+	onClick: (event: ReactMouseEvent<HTMLDivElement>) => void
+	wrapperRef?: RefObject<HTMLDivElement | null>
+}
+
+export function ModalWrapper({ children, onClick, wrapperRef }: ModalWrapperProps) {
+	return (
+		<div
+			ref={wrapperRef}
+			className={styles.modal}
+			role="dialog"
+			aria-modal="true"
+			aria-label="TrustConnect modal"
+			onClick={onClick}
+		>
+			{children}
+		</div>
+	)
+}

package/src/ui/layout/ModalWrapper/styles.module.css

@@ -0,0 +1,26 @@
+.modal {
+	width: 100%;
+	max-width: 400px;
+	max-height: calc(100vh - 32px);
+	background: var(--tcui-bg);
+	border: 1px solid var(--tcui-border);
+	border-radius: var(--tcui-radius-lg);
+	box-shadow: var(--tcui-shadow-lg);
+	color: var(--tcui-text);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+	.modal {
+		max-width: 100%;
+		max-height: 90vh;
+		height: 80vh;
+		border-radius: 16px 16px 0 0;
+		border: none;
+		border-top: 1px solid var(--tcui-border);
+		animation: slideUpMobile 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+}

package/src/ui/views/MobileWalletsView/components/MobileEmptyState/index.tsx

@@ -0,0 +1,13 @@
+import styles from './styles.module.css'
+
+interface MobileEmptyStateProps {
+	searchQuery?: string
+}
+
+export function MobileEmptyState({ searchQuery }: MobileEmptyStateProps) {
+	if (searchQuery) {
+		return <div className={styles.empty}>No wallets found for "{searchQuery}"</div>
+	}
+
+	return <div className={styles.empty}>No wallets available</div>
+}

package/src/ui/views/MobileWalletsView/components/MobileEmptyState/styles.module.css

@@ -0,0 +1,9 @@
+.empty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 40px 20px;
+	text-align: center;
+	color: var(--tcui-text-secondary);
+	font-size: 14px;
+}

package/src/ui/views/MobileWalletsView/components/MobileLoading/index.tsx

@@ -0,0 +1,5 @@
+import styles from './styles.module.css'
+
+export function MobileLoading() {
+	return <div className={styles.loading}>Loading wallets...</div>
+}

package/src/ui/views/MobileWalletsView/components/MobileLoading/styles.module.css

@@ -0,0 +1,9 @@
+.loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 40px 20px;
+	text-align: center;
+	color: var(--tcui-text-secondary);
+	font-size: 14px;
+}

package/src/ui/views/MobileWalletsView/components/MobileSearch/index.tsx

@@ -0,0 +1,36 @@
+import { useCopyToClipboard } from '@trustwallet/connect-ui-logic'
+import { SearchBar } from '../../../../inputs/SearchBar'
+import styles from './styles.module.css'
+import { CheckIcon } from '../../../../icons/CheckIcon'
+import { CopyIcon } from '../../../../icons/CopyIcon'
+
+interface MobileSearchProps {
+	searchQuery: string
+	setSearchQuery: (query: string) => void
+	uri: string | undefined
+}
+
+export function MobileSearch({ searchQuery, setSearchQuery, uri }: MobileSearchProps) {
+	const { copied, copy } = useCopyToClipboard()
+
+	const handleCopyUri = async () => {
+		if (!uri) return
+		await copy(uri)
+	}
+
+	return (
+		<div className={styles.searchContainer}>
+			<SearchBar value={searchQuery} onChange={setSearchQuery} placeholder="Search wallets..." />
+			<button
+				type="button"
+				onClick={handleCopyUri}
+				className={styles.copyButton}
+				aria-label="Copy WalletConnect URI"
+				disabled={!uri}
+				data-copied={copied}
+			>
+				{copied ? <CheckIcon /> : <CopyIcon />}
+			</button>
+		</div>
+	)
+}

package/src/ui/views/MobileWalletsView/components/MobileSearch/styles.module.css

@@ -0,0 +1,44 @@
+.searchContainer {
+	padding: 0 0 16px 0;
+	flex-shrink: 0;
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+
+.copyButton {
+	flex-shrink: 0;
+	width: 40px;
+	height: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--tcui-bg-secondary);
+	border: 1px solid var(--tcui-border);
+	border-radius: var(--tcui-radius-full);
+	color: var(--tcui-text-secondary);
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.copyButton:hover {
+	background: var(--tcui-card-hover);
+	color: var(--tcui-text);
+	border-color: var(--tcui-primary);
+}
+
+.copyButton:active {
+	transform: scale(0.95);
+}
+
+.copyButton:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+.copyButton[data-copied='true'] {
+	color: var(--tcui-accent);
+	border-color: var(--tcui-accent);
+	background: var(--tcui-connect-bg);
+}

package/src/ui/views/MobileWalletsView/components/MobileWalletsList/index.tsx

@@ -0,0 +1,46 @@
+import type { RefObject } from 'react'
+import styles from './styles.module.css'
+import { WalletButton } from '../../../../buttons/WalletButton'
+import { Spinner } from '../../../../icons/Spinner'
+import { ExplorerWallet } from '@trustwallet/connect-ui-logic/walletConnect'
+
+interface MobileWalletsListProps {
+	wallets: ExplorerWallet[]
+	connectingWalletId: string | null
+	connectionError: string | null
+	isLoadingMore: boolean
+	scrollRef: RefObject<HTMLDivElement | null>
+	onWalletClick: (wallet: ExplorerWallet) => void
+}
+
+export function MobileWalletsList({
+	wallets,
+	connectingWalletId,
+	connectionError,
+	isLoadingMore,
+	scrollRef,
+	onWalletClick,
+}: MobileWalletsListProps) {
+	return (
+		<div className={styles.grid} ref={scrollRef}>
+			{wallets.map((wallet) => (
+				<WalletButton
+					key={wallet.id}
+					name={wallet.name}
+					icon={wallet.iconUrl}
+					active={false}
+					variant="default"
+					actionLabel="Connect"
+					onClick={() => onWalletClick(wallet)}
+					loading={connectingWalletId === wallet.id}
+					error={connectionError ?? undefined}
+				/>
+			))}
+			{isLoadingMore && (
+				<div className={styles.loadingMore}>
+					<Spinner />
+				</div>
+			)}
+		</div>
+	)
+}

package/src/ui/views/MobileWalletsView/components/MobileWalletsList/styles.module.css

@@ -0,0 +1,35 @@
+.grid {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	overflow-y: auto;
+	flex: 1;
+	padding-right: 4px;
+}
+
+.grid::-webkit-scrollbar {
+	width: 6px;
+}
+
+.grid::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.grid::-webkit-scrollbar-thumb {
+	background: var(--tcui-border);
+	border-radius: 3px;
+}
+
+.grid::-webkit-scrollbar-thumb:hover {
+	background: var(--tcui-text-secondary);
+}
+
+.loadingMore {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 16px;
+	text-align: center;
+	color: var(--tcui-text-secondary);
+	font-size: 13px;
+}

package/src/ui/views/MobileWalletsView/components/MobileWrapper/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react'
+import styles from './styles.module.css'
+
+interface MobileWrapperProps {
+	children: ReactNode
+}
+
+export function MobileWrapper({ children }: MobileWrapperProps) {
+	return <div className={styles.container}>{children}</div>
+}

package/src/ui/views/MobileWalletsView/components/MobileWrapper/styles.module.css

@@ -0,0 +1,6 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	overflow: visible;
+}

package/src/ui/views/MobileWalletsView/index.tsx

@@ -0,0 +1,22 @@
+import { MobileWalletsViewLogic } from '@trustwallet/connect-ui-logic/walletConnect'
+import { MobileEmptyState } from './components/MobileEmptyState'
+import { MobileLoading } from './components/MobileLoading'
+import { MobileSearch } from './components/MobileSearch'
+import { MobileWalletsList } from './components/MobileWalletsList'
+import { MobileWrapper } from './components/MobileWrapper'
+import { Footer } from '../../components/Footer'
+
+export function MobileWalletsView() {
+	return (
+		<MobileWalletsViewLogic
+			components={{
+				wrapper: MobileWrapper,
+				search: MobileSearch,
+				loading: MobileLoading,
+				emptyState: MobileEmptyState,
+				walletsList: MobileWalletsList,
+				footer: Footer,
+			}}
+		/>
+	)
+}

package/src/ui/views/NamespaceView/components/NamespaceGrid/index.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react'
+import styles from './styles.module.css'
+
+interface NamespaceGridProps {
+	children: ReactNode
+}
+
+export function NamespaceGrid({ children }: NamespaceGridProps) {
+	return <div className={styles.grid}>{children}</div>
+}

package/src/ui/views/NamespaceView/components/NamespaceGrid/styles.module.css

@@ -0,0 +1,5 @@
+.grid {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}

package/src/ui/views/NamespaceView/components/NamespaceHeader/index.tsx

@@ -0,0 +1,20 @@
+import type { Wallet, CaipWallet } from '@trustwallet/connect-headless'
+import styles from './styles.module.css'
+
+interface NamespaceHeaderProps {
+	targetWallet?: Wallet | CaipWallet | null
+}
+
+export function NamespaceHeader({ targetWallet }: NamespaceHeaderProps) {
+	return (
+		<div className={styles.spacer}>
+			<h3 className={styles.sectionTitle}>Namespaces</h3>
+			{targetWallet && (
+				<span className={styles.badge}>
+					<img src={targetWallet.icon} alt={targetWallet.name} className={styles.badgeIcon} />
+					{targetWallet.name}
+				</span>
+			)}
+		</div>
+	)
+}

package/src/ui/views/NamespaceView/components/NamespaceHeader/styles.module.css

@@ -0,0 +1,34 @@
+.spacer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 12px;
+	margin-bottom: 8px;
+}
+
+.sectionTitle {
+	font-size: 14px;
+	font-weight: 500;
+	margin: 0;
+	color: var(--tcui-text-secondary);
+	letter-spacing: 0;
+}
+
+.badge {
+	background: var(--tcui-bg-secondary);
+	border: 1px solid var(--tcui-border);
+	border-radius: 6px;
+	padding: 4px 10px;
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--tcui-text-secondary);
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.badgeIcon {
+	width: 16px;
+	height: 16px;
+	border-radius: 4px;
+}

package/src/ui/views/NamespaceView/index.tsx

@@ -0,0 +1,16 @@
+import { NamespaceViewLogic } from '@trustwallet/connect-ui-logic'
+import { NamespaceButton } from '../../buttons/NamespaceButton'
+import { NamespaceHeader } from './components/NamespaceHeader'
+import { NamespaceGrid } from './components/NamespaceGrid'
+
+export function NamespaceView() {
+	return (
+		<NamespaceViewLogic
+			components={{
+				header: NamespaceHeader,
+				grid: NamespaceGrid,
+				namespaceButton: NamespaceButton,
+			}}
+		/>
+	)
+}

package/src/ui/views/QRView/components/QRActions/index.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+import styles from './styles.module.css'
+
+type QRActionsProps = {
+	children: ReactNode
+}
+
+/** Wraps the QRButton internally */
+export function QRActions({ children }: QRActionsProps) {
+	return <div className={styles.actions}>{children}</div>
+}

package/src/ui/views/QRView/components/QRActions/styles.module.css

@@ -0,0 +1,8 @@
+.actions {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+  align-items: center;
+	width: 100%;
+	gap: 12px;
+}

package/src/ui/views/QRView/components/QRButton/index.tsx

@@ -0,0 +1,15 @@
+import styles from './styles.module.css'
+
+type QRButtonProps = {
+	onClick: () => void
+	disabled?: boolean
+	children: string
+}
+
+export function QRButton({ onClick, disabled, children }: QRButtonProps) {
+	return (
+		<button className={styles.button} type="button" onClick={onClick} disabled={disabled}>
+			{children}
+		</button>
+	)
+}

package/src/ui/views/QRView/components/QRButton/styles.module.css

@@ -0,0 +1,32 @@
+.button {
+	border: none;
+	background: var(--tcui-connect-bg);
+	color: var(--tcui-connect-text);
+	border-radius: var(--tcui-radius-full);
+	padding: 0 16px;
+	height: 36px;
+	font-weight: 600;
+	font-size: 14px;
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	transition: all 0.15s ease;
+	white-space: nowrap;
+	font-family: inherit;
+	width: 85%;
+}
+
+.button:hover:not(:disabled) {
+	background: var(--tcui-connect-hover);
+}
+
+.button:active:not(:disabled) {
+	transform: scale(0.98);
+}
+
+.button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}

package/src/ui/views/QRView/components/QRError/index.tsx

@@ -0,0 +1,9 @@
+import styles from './styles.module.css'
+
+type QRErrorProps = {
+	message: string
+}
+
+export function QRError({ message }: QRErrorProps) {
+	return <div className={styles.error}>{message}</div>
+}

package/src/ui/views/QRView/components/QRError/styles.module.css

@@ -0,0 +1,5 @@
+.error {
+	color: var(--tcui-danger);
+	font-size: 14px;
+	text-align: center;
+}

package/src/ui/views/QRView/components/QRPlaceholder/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react'
+import styles from './styles.module.css'
+
+type QRPlaceholderProps = {
+	children: ReactNode
+}
+
+export function QRPlaceholder({ children }: QRPlaceholderProps) {
+	return <div className={styles.placeholder}>{children}</div>
+}

package/src/ui/views/QRView/components/QRPlaceholder/styles.module.css

@@ -0,0 +1,7 @@
+.placeholder {
+	display: grid;
+	place-items: center;
+	width: 100%;
+	height: 100%;
+	color: var(--tcui-text-secondary);
+}

package/src/ui/views/QRView/components/QRWrapper/index.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+import styles from './styles.module.css'
+
+type QRWrapperProps = {
+	children: ReactNode
+}
+
+export function QRWrapper({ children }: QRWrapperProps) {
+	return (
+		<div className={styles.qr} role="region" aria-label="WalletConnect QR code">
+			{children}
+		</div>
+	)
+}

package/src/ui/views/QRView/components/QRWrapper/styles.module.css

@@ -0,0 +1,23 @@
+.qr {
+	background: var(--tcui-card);
+	border: 1px solid var(--tcui-border);
+	border-radius: var(--tcui-radius);
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+}
+
+.qr > :first-child {
+	width: 280px;
+	height: 280px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.qr canvas {
+	border-radius: var(--tcui-radius);
+	box-shadow: 0 0 0 1px var(--tcui-border);
+}

package/src/ui/views/QRView/index.tsx

@@ -0,0 +1,24 @@
+import { QRViewLogic } from '@trustwallet/connect-ui-logic/walletConnect'
+import { QRWrapper } from './components/QRWrapper'
+import { QRPlaceholder } from './components/QRPlaceholder'
+import { QRActions } from './components/QRActions'
+import { QRButton } from './components/QRButton'
+import { QRError } from './components/QRError'
+import { Cuer } from 'cuer'
+import { Spinner } from '../../icons/Spinner'
+
+export function QRView() {
+	return (
+		<QRViewLogic
+			components={{
+				wrapper: QRWrapper,
+				placeholder: QRPlaceholder,
+				qrCode: Cuer,
+				actions: QRActions,
+				button: QRButton,
+				error: QRError,
+				spinner: Spinner,
+			}}
+		/>
+	)
+}

package/src/ui/views/WalletsView/components/WalletsGrid/index.tsx

@@ -0,0 +1,10 @@
+import styles from './styles.module.css'
+import { ReactNode } from 'react'
+
+interface WalletsGridProps {
+	children: ReactNode
+}
+
+export function WalletsGrid({ children }: WalletsGridProps) {
+	return <div className={styles.grid}>{children}</div>
+}

package/src/ui/views/WalletsView/components/WalletsGrid/styles.module.css

@@ -0,0 +1,5 @@
+.grid {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}

package/src/ui/views/WalletsView/components/WalletsHeader/index.tsx

@@ -0,0 +1,9 @@
+import styles from './styles.module.css'
+
+interface WalletsHeaderProps {
+	namespaceName: string
+}
+
+export function WalletsHeader({ namespaceName }: WalletsHeaderProps) {
+	return <p className={styles.sectionSub}>Connect to {namespaceName}</p>
+}

package/src/ui/views/WalletsView/components/WalletsHeader/styles.module.css

@@ -0,0 +1,6 @@
+.sectionSub {
+	font-size: 13px;
+	color: var(--tcui-text-secondary);
+	margin: 4px 0 0;
+	line-height: 1.5;
+}

package/src/ui/views/WalletsView/index.tsx

@@ -0,0 +1,20 @@
+import { WalletsViewLogic } from '@trustwallet/connect-ui-logic'
+import { WalletButton } from '../../buttons/WalletButton'
+import { WalletConnectButton } from '../../buttons/WalletConnectButton'
+import { GetTrustButton } from '../../buttons/GetTrustButton'
+import { WalletsHeader } from './components/WalletsHeader'
+import { WalletsGrid } from './components/WalletsGrid'
+
+export function WalletsView() {
+	return (
+		<WalletsViewLogic
+			components={{
+				emptyState: GetTrustButton,
+				header: WalletsHeader,
+				grid: WalletsGrid,
+				walletButton: WalletButton,
+				walletConnectButton: WalletConnectButton,
+			}}
+		/>
+	)
+}