@trustwallet/connect-react 0.0.0

package/src/ui/buttons/WalletButton/styles.module.css

@@ -0,0 +1,123 @@
+.walletButton {
+	background: var(--tcui-card);
+	border: 1px solid var(--tcui-border);
+	border-radius: var(--tcui-radius);
+	padding: 12px 14px;
+	min-height: 64px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	cursor: pointer;
+	transition: all 0.15s ease;
+	position: relative;
+}
+
+.walletButton:hover {
+	background: var(--tcui-card-hover);
+}
+
+.walletButton:active {
+	transform: scale(0.99);
+}
+
+.walletButton[data-active='true'] {
+	border: 1px solid var(--tcui-accent);
+	background: var(--tcui-card-hover);
+}
+
+[data-tcui-theme='light'] .walletButton[data-active='true'] {
+	border-color: var(--tcui-connect-text);
+}
+
+.walletButton[data-variant='walletconnect'] {
+	border-color: var(--tcui-border);
+	background: var(--tcui-card);
+}
+
+.walletButton[data-variant='walletconnect']:hover {
+	background: var(--tcui-card-hover);
+}
+
+.walletButton[data-disabled='true'] {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.walletButton[data-disabled='true']:hover {
+	background: var(--tcui-card);
+	transform: none;
+}
+
+.walletButton[data-disabled='true']:active {
+	transform: none;
+}
+
+.walletButton[data-disabled='true'] :global(.tcui-button) {
+	cursor: not-allowed;
+}
+
+.icon {
+	width: 40px;
+	height: 40px;
+	border-radius: 6px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	flex-shrink: 0;
+}
+
+.icon img {
+	width: 100%;
+	height: 100%;
+}
+
+.meta {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	flex: 1;
+	min-width: 0;
+}
+
+.name {
+	font-weight: 600;
+	font-size: 15px;
+	line-height: 1.4;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.namespaces {
+	display: flex;
+	align-items: center;
+	margin-top: 0.2px;
+}
+
+.namespaces img {
+	width: 15px;
+	height: 15px;
+	border-radius: 4px;
+	flex-shrink: 0;
+	margin-left: -3px;
+}
+
+.namespaces img:first-child {
+	margin-left: 0;
+}
+
+.error {
+	font-size: 12px;
+	color: var(--tcui-danger);
+	line-height: 1.4;
+	margin-top: 2px;
+}
+
+.walletButton:hover :global(.tcui-button-primary) {
+	background: var(--tcui-connect-hover);
+}
+
+.walletButton:hover :global(.tcui-button:not(.tcui-button-primary)) {
+	background: var(--tcui-disconnect-hover);
+}

package/src/ui/buttons/WalletConnectButton/components/WCGrid/index.tsx

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

package/src/ui/buttons/WalletConnectButton/components/WCGrid/styles.module.css

@@ -0,0 +1,5 @@
+.grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 8px;
+}

package/src/ui/buttons/WalletConnectButton/components/WCTitle/index.tsx

@@ -0,0 +1,5 @@
+import styles from './styles.module.css'
+
+export function WCTitle() {
+	return <p className={styles.wcTitle}>Scan QR with your wallet</p>
+}

package/src/ui/buttons/WalletConnectButton/components/WCTitle/styles.module.css

@@ -0,0 +1,8 @@
+.wcTitle {
+	margin-top: 24px;
+	font-size: 13px;
+	font-weight: 500;
+	color: var(--tcui-text-secondary);
+	margin-bottom: 0; /* force margin */
+	text-align: center;
+}

package/src/ui/buttons/WalletConnectButton/index.tsx

@@ -0,0 +1,16 @@
+import { WalletConnectButtonLogic } from '@trustwallet/connect-ui-logic/walletConnect'
+import { WalletButton } from '../WalletButton'
+import { WCTitle } from './components/WCTitle'
+import { WCGrid } from './components/WCGrid'
+
+export function WalletConnectButton() {
+	return (
+		<WalletConnectButtonLogic
+			components={{
+				title: WCTitle,
+				grid: WCGrid,
+				walletButton: WalletButton,
+			}}
+		/>
+	)
+}

package/src/ui/components/Footer/components/FooterDescription/index.tsx

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

package/src/ui/components/Footer/components/FooterDescription/styles.module.css

@@ -0,0 +1,6 @@
+.description {
+	color: var(--tcui-text-secondary);
+	font-size: 14px;
+	line-height: 1.5;
+	text-align: center;
+}

package/src/ui/components/Footer/components/FooterLink/index.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+import styles from './styles.module.css'
+
+interface FooterLinkProps {
+	onClick: () => void
+	children: ReactNode
+}
+
+export function FooterLink({ onClick, children }: FooterLinkProps) {
+	return (
+		<button className={styles.link} onClick={onClick}>
+			{children}
+		</button>
+	)
+}

package/src/ui/components/Footer/components/FooterLink/styles.module.css

@@ -0,0 +1,20 @@
+.link {
+	background: none;
+	border: none;
+	color: var(--tcui-accent);
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 1.5;
+	cursor: pointer;
+	padding: 0;
+	text-decoration: none;
+	transition: opacity 0.2s ease;
+}
+
+.link:hover {
+	opacity: 0.8;
+}
+
+.link:active {
+	opacity: 0.6;
+}

package/src/ui/components/Footer/components/FooterWrapper/index.tsx

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

package/src/ui/components/Footer/components/FooterWrapper/styles.module.css

@@ -0,0 +1,21 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4px;
+	padding-top: 14px;
+	margin-top: auto;
+	position: relative;
+	border-top: 1px solid var(--tcui-border);
+}
+
+.container::before {
+	content: '';
+	position: absolute;
+	top: -33px;
+	left: 0;
+	right: 0;
+	height: 32px;
+	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--tcui-bg));
+	pointer-events: none;
+}

package/src/ui/components/Footer/index.tsx

@@ -0,0 +1,16 @@
+import { FooterLogic } from '@trustwallet/connect-ui-logic'
+import { FooterWrapper } from './components/FooterWrapper'
+import { FooterDescription } from './components/FooterDescription'
+import { FooterLink } from './components/FooterLink'
+
+export function Footer() {
+	return (
+		<FooterLogic
+			components={{
+				wrapper: FooterWrapper,
+				description: FooterDescription,
+				link: FooterLink,
+			}}
+		/>
+	)
+}

package/src/ui/icons/BackIcon.tsx

@@ -0,0 +1,14 @@
+export function BackIcon() {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			width="20"
+			height="20"
+			stroke="currentColor"
+		>
+			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 18l-6-6 6-6" />
+		</svg>
+	)
+}

package/src/ui/icons/CheckIcon.tsx

@@ -0,0 +1,17 @@
+export function CheckIcon() {
+	return (
+		<svg
+			className="tcui-check-icon"
+			xmlns="http://www.w3.org/2000/svg"
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+		>
+			<path
+				d="M6.66667 0C2.98667 0 0 2.98667 0 6.66667C0 10.3467 2.98667 13.3333 6.66667 13.3333C10.3467 13.3333 13.3333 10.3467 13.3333 6.66667C13.3333 2.98667 10.3467 0 6.66667 0ZM9.8 5.05333L6.45333 9.12667C6.34 9.26667 6.16667 9.35333 5.98667 9.36667C5.96667 9.37333 5.95333 9.37333 5.94 9.37333C5.77333 9.37333 5.61333 9.30667 5.48667 9.19333L3.59333 7.44667C3.32667 7.2 3.30667 6.77333 3.56 6.50667C3.80667 6.23333 4.22667 6.22 4.5 6.46667L5.87333 7.73333L8.77333 4.20667C9.00667 3.92 9.42667 3.88 9.70667 4.11333C9.99333 4.34667 10.0333 4.76667 9.8 5.05333Z"
+				fill="currentColor"
+			/>
+		</svg>
+	)
+}

package/src/ui/icons/ClearIcon.tsx

@@ -0,0 +1,13 @@
+export function ClearIcon() {
+	return (
+		<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+			<path
+				d="M15 5L5 15M5 5L15 15"
+				stroke="currentColor"
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	)
+}

package/src/ui/icons/CloseIcon.tsx

@@ -0,0 +1,14 @@
+export function CloseIcon() {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			width="16"
+			height="16"
+			stroke="currentColor"
+		>
+			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 6l12 12M6 18L18 6" />
+		</svg>
+	)
+}

package/src/ui/icons/CopyIcon.tsx

@@ -0,0 +1,16 @@
+export function CopyIcon() {
+	return (
+		<svg
+			className="tcui-copy-icon"
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="2"
+		>
+			<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+			<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+		</svg>
+	)
+}

package/src/ui/icons/SearchIcon.tsx

@@ -0,0 +1,20 @@
+export function SearchIcon() {
+	return (
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+			<path
+				d="M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z"
+				stroke="currentColor"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M14 14L11.1 11.1"
+				stroke="currentColor"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	)
+}

package/src/ui/icons/Spinner.tsx

@@ -0,0 +1,7 @@
+/**
+ * Spinner component that adapts to dark/light mode via CSS variables
+ * Uses --tcui-border and --tcui-accent from the theme
+ */
+export function Spinner() {
+	return <span className="tcui-spinner" aria-hidden />
+}

package/src/ui/inputs/SearchBar/index.tsx

@@ -0,0 +1,44 @@
+import { useState, type ChangeEvent } from 'react'
+import styles from './styles.module.css'
+import { SearchIcon } from '../../icons/SearchIcon'
+import { CloseIcon } from '../../icons/CloseIcon'
+
+interface SearchBarProps {
+	value: string
+	onChange: (value: string) => void
+	placeholder?: string
+}
+
+export function SearchBar({ value, onChange, placeholder = 'Search...' }: SearchBarProps) {
+	const [isFocused, setIsFocused] = useState(false)
+
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		onChange(e.target.value)
+	}
+
+	const handleClear = () => {
+		onChange('')
+	}
+
+	return (
+		<div className={`${styles.searchBar} ${isFocused ? styles.focused : ''}`}>
+			<div className={styles.searchIcon}>
+				<SearchIcon />
+			</div>
+			<input
+				type="text"
+				value={value}
+				onChange={handleChange}
+				onFocus={() => setIsFocused(true)}
+				onBlur={() => setIsFocused(false)}
+				placeholder={placeholder}
+				className={styles.input}
+			/>
+			{value && (
+				<button type="button" onClick={handleClear} className={styles.clearButton} aria-label="Clear search">
+					<CloseIcon />
+				</button>
+			)}
+		</div>
+	)
+}

package/src/ui/inputs/SearchBar/styles.module.css

@@ -0,0 +1,62 @@
+.searchBar {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	background: var(--tcui-bg-secondary);
+	border: 1.4px solid var(--tcui-border);
+	border-radius: var(--tcui-radius-full);
+	padding: 0 12px;
+	height: 40px;
+	transition: all 0.2s ease;
+}
+
+.searchBar.focused {
+	border-color: var(--tcui-accent);
+	box-shadow: 0 0 0 3px rgba(72, 255, 145, 0.12), 0 0 3px rgba(72, 255, 145, 0.15);
+}
+
+[data-tcui-theme='light'] .searchBar.focused {
+	box-shadow: 0 0 0 3px rgba(5, 0, 255, 0.08), 0 0 3px rgba(5, 0, 255, 0.1);
+}
+
+.searchIcon {
+	flex-shrink: 0;
+	color: var(--tcui-text-secondary);
+	margin-right: 8px;
+}
+
+.input {
+	flex: 1;
+	border: none;
+	background: transparent;
+	outline: none;
+	font-size: 14px;
+	color: var(--tcui-text);
+	font-family: inherit;
+}
+
+.input::placeholder {
+	color: var(--tcui-text-secondary);
+}
+
+.clearButton {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 25px;
+	height: 25px;
+	border: none;
+	background: transparent;
+	color: var(--tcui-text-secondary);
+	cursor: pointer;
+	border-radius: var(--tcui-radius-sm);
+	transition: all 0.15s ease;
+	margin-left: 4px;
+}
+
+.clearButton:hover {
+	background: var(--tcui-bg-tertiary);
+	color: var(--tcui-text);
+}

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

@@ -0,0 +1,15 @@
+import { ReactNode, type RefObject } from 'react'
+import styles from './styles.module.css'
+
+interface ModalBodyProps {
+	children: ReactNode
+	bodyRef?: RefObject<HTMLDivElement | null>
+}
+
+export function ModalBody({ children, bodyRef }: ModalBodyProps) {
+	return (
+		<div ref={bodyRef} className={styles.body}>
+			{children}
+		</div>
+	)
+}

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

@@ -0,0 +1,15 @@
+.body {
+	padding: 20px;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+	.body {
+		padding: 20px;
+		flex: 1;
+	}
+}

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

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

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

@@ -0,0 +1,9 @@
+.error {
+	background: rgba(240, 61, 62, 0.1);
+	border: 1px solid rgba(240, 61, 62, 0.3);
+	color: var(--tcui-danger);
+	border-radius: var(--tcui-radius);
+	padding: 12px 14px;
+	font-size: 14px;
+	line-height: 1.5;
+}

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

@@ -0,0 +1,26 @@
+import { BackIcon } from '../../icons/BackIcon'
+import { CloseIcon } from '../../icons/CloseIcon'
+import styles from './styles.module.css'
+
+interface ModalHeaderProps {
+	title: string
+	showBack?: boolean
+	onBack?: () => void
+	onClose: () => void
+}
+
+export function ModalHeader({ title, showBack, onBack, onClose }: ModalHeaderProps) {
+	return (
+		<header className={styles.header}>
+			{showBack && onBack && (
+				<button type="button" className={styles.back} onClick={onBack} aria-label="Go back">
+					<BackIcon />
+				</button>
+			)}
+			<h2 className={styles.title}>{title}</h2>
+			<button type="button" className={styles.close} onClick={onClose} aria-label="Close modal">
+				<CloseIcon />
+			</button>
+		</header>
+	)
+}

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

@@ -0,0 +1,92 @@
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 20px;
+	gap: 12px;
+	border-bottom: 1px solid var(--tcui-border);
+	position: relative;
+}
+
+.title {
+	font-size: 18px;
+	font-weight: 600;
+	margin: 0;
+	letter-spacing: -0.01em;
+	line-height: 1.4;
+	text-align: center;
+}
+
+.close,
+.back {
+	background: transparent;
+	border: none;
+	color: #9ca3af;
+	width: 32px;
+	height: 32px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	border-radius: var(--tcui-radius-full);
+	transition: all 0.15s ease;
+	flex-shrink: 0;
+	padding: 0;
+	position: absolute;
+}
+
+.back {
+	left: 20px;
+}
+
+.close {
+	right: 20px;
+}
+
+[data-tcui-theme='light'] .close:hover,
+[data-tcui-theme='light'] .back:hover {
+	background: #e5e7eb;
+}
+
+[data-tcui-theme='dark'] .close:hover,
+[data-tcui-theme='dark'] .back:hover {
+	background: #1f2933;
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+	.header {
+		padding: 16px 20px;
+		border-bottom: 1px solid var(--tcui-border);
+	}
+
+	.header::before {
+		content: '';
+		position: absolute;
+		top: 8px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 32px;
+		height: 4px;
+		background: var(--tcui-border);
+		border-radius: 2px;
+	}
+
+	.title {
+		font-size: 16px;
+	}
+
+	.back,
+	.close {
+		width: 28px;
+		height: 28px;
+	}
+
+	.back {
+		left: 16px;
+	}
+
+	.close {
+		right: 16px;
+	}
+}