@trustwallet/connect-react 0.0.0

package/dist/styles.module-YJSZIZTZ.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/dist/styles.module-ZISFY5AO.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/dist/styles.module-ZPYBUUD6.module.css

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

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@trustwallet/connect-react",
+  "version": "0.0.0",
+  "description": "React modal UI for TrustConnect SDK",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "bin": {
+    "connect-ui": "./cli.js"
+  },
+  "files": [
+    "dist",
+    "src",
+    "cli.js",
+    "README.md"
+  ],
+  "keywords": [
+    "trust",
+    "connect",
+    "sdk",
+    "react",
+    "modal"
+  ],
+  "author": "",
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "cuer": "0.0.3",
+    "@trustwallet/connect-ui-logic": "0.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tsup": "8.5.1"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist"
+  }
+}

package/src/context/index.tsx

@@ -0,0 +1,25 @@
+import {
+	TrustModalProvider,
+	type Theme,
+	TrustConnectProvider as _TrustConnectProvider,
+	TrustConnectOptions,
+} from '@trustwallet/connect-ui-logic'
+import { TrustModal } from '../ui/TrustModal'
+import { ReactNode } from 'react'
+
+export type TrustConnectProviderProps = {
+	children: ReactNode
+	config: TrustConnectOptions
+	theme?: Theme
+}
+
+export function TrustConnectProvider({ children, config, theme }: TrustConnectProviderProps) {
+	return (
+		<_TrustConnectProvider config={config}>
+			<TrustModalProvider theme={theme}>
+				{children}
+				<TrustModal />
+			</TrustModalProvider>
+		</_TrustConnectProvider>
+	)
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export {
+	useTrustModal,
+	useTheme,
+	useConnection,
+	useConnections,
+	useConnect,
+} from '@trustwallet/connect-ui-logic'
+export type { Theme, ResolvedTheme, NamespaceId, Connections, RpcUrls } from '@trustwallet/connect-ui-logic'
+export { TrustConnectProvider } from './context'

package/src/styles/global.css

@@ -0,0 +1,132 @@
+:root,
+[data-tcui-theme='light'] {
+	--tcui-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	--tcui-bg: #f9fafb;
+	--tcui-bg-secondary: #f3f4f6;
+	--tcui-card: #ffffff;
+	--tcui-card-hover: #f9fafb;
+	--tcui-text: #111827;
+	--tcui-text-secondary: #6b7280;
+	--tcui-accent: #0500FF;
+	--tcui-border: #e5e7eb;
+	--tcui-success: #22c55e;
+	--tcui-danger: #dc2626;
+	--tcui-connect-bg: #eef2ff;
+	--tcui-connect-text: #0500FF;
+	--tcui-connect-hover: #e0e7ff;
+	--tcui-disconnect-bg: #f3f4f6;
+	--tcui-disconnect-text: #6b7280;
+	--tcui-disconnect-hover: #e5e7eb;
+	--tcui-radius: 14px;
+	--tcui-radius-sm: 8px;
+	--tcui-radius-lg: 20px;
+	--tcui-radius-full: 999px;
+	--tcui-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
+	--tcui-primary: #0500FF;
+}
+
+[data-tcui-theme='dark'] {
+	--tcui-bg: #121213;
+	--tcui-bg-secondary: #18181a;
+	--tcui-card: #161618;
+	--tcui-card-hover: #1f1f23;
+	--tcui-text: #eef5ef;
+	--tcui-text-secondary: #b3c1b6;
+	--tcui-accent: #48ff91;
+	--tcui-border: #2a2a2e;
+	--tcui-success: #48ff91;
+	--tcui-danger: #ff7d7d;
+	--tcui-connect-bg: rgba(72, 255, 145, 0.12);
+	--tcui-connect-text: #48ff91;
+	--tcui-connect-hover: rgba(72, 255, 145, 0.18);
+	--tcui-disconnect-bg: #242427;
+	--tcui-disconnect-text: #9ca4a2;
+	--tcui-disconnect-hover: #2e2e33;
+	--tcui-radius: 14px;
+	--tcui-radius-sm: 8px;
+	--tcui-radius-lg: 20px;
+	--tcui-radius-full: 999px;
+	--tcui-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6);
+	--tcui-primary: #48ff91;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+/* Shared utility classes for components that still need them */
+.tcui-button {
+	border: none;
+	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;
+	min-width: fit-content;
+	background: var(--tcui-disconnect-bg);
+	color: var(--tcui-disconnect-text);
+}
+
+.tcui-button[data-loading='true'] {
+	min-width: 90px;
+	padding: 0;
+}
+
+.tcui-button:hover:not(:disabled) {
+	background: var(--tcui-disconnect-hover);
+}
+
+.tcui-button:active:not(:disabled) {
+	transform: scale(0.98);
+}
+
+.tcui-button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.tcui-button-primary {
+	background: var(--tcui-connect-bg);
+	color: var(--tcui-connect-text);
+}
+
+.tcui-button-primary:hover:not(:disabled) {
+	background: var(--tcui-connect-hover);
+}
+
+.tcui-check-icon {
+	width: 14px;
+	height: 14px;
+	color: var(--tcui-success);
+	flex-shrink: 0;
+}
+
+[data-tcui-theme='light'] .tcui-check-icon {
+	color: var(--tcui-connect-text);
+}
+
+.tcui-spinner {
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	border: 2px solid var(--tcui-border);
+	border-top-color: var(--tcui-accent);
+	animation: tcui-spin 0.7s linear infinite;
+}
+
+@keyframes tcui-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}

package/src/types/css-modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+	const classes: { [key: string]: string }
+	export default classes
+}

package/src/ui/TrustModal.tsx

@@ -0,0 +1,31 @@
+import '../styles/global.css'
+import { TrustModalLogic } from '@trustwallet/connect-ui-logic'
+import { MobileWalletsView } from './views/MobileWalletsView'
+import { WalletsView } from './views/WalletsView'
+import { NamespaceView } from './views/NamespaceView'
+import { QRView } from './views/QRView'
+import { ModalOverlay } from './layout/ModalOverlay'
+import { ModalWrapper } from './layout/ModalWrapper'
+import { ModalHeader } from './layout/ModalHeader'
+import { ModalBody } from './layout/ModalBody'
+import { ModalError } from './layout/ModalError'
+
+export function TrustModal() {
+	return (
+		<TrustModalLogic
+			layout={{
+				overlay: ModalOverlay,
+				wrapper: ModalWrapper,
+				header: ModalHeader,
+				body: ModalBody,
+				error: ModalError,
+			}}
+			views={[
+				{ title: 'Connect a wallet', tag: 'wallets', node: WalletsView },
+				{ title: 'Select a network', tag: 'networks', node: NamespaceView },
+				{ title: 'Scan with mobile wallet', tag: 'qr', node: QRView },
+			]}
+			mobileViews={[{ title: 'Connect a wallet', tag: 'wallets', node: MobileWalletsView }]}
+		/>
+	)
+}

package/src/ui/buttons/GetTrustButton/components/GetTrustMessage/index.tsx

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

package/src/ui/buttons/GetTrustButton/components/GetTrustMessage/styles.module.css

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

package/src/ui/buttons/GetTrustButton/components/GetTrustWrapper/index.tsx

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

package/src/ui/buttons/GetTrustButton/components/GetTrustWrapper/styles.module.css

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

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

@@ -0,0 +1,21 @@
+import { GetTrustButtonLogic } from '@trustwallet/connect-ui-logic'
+import { GetTrustWrapper } from './components/GetTrustWrapper'
+import { GetTrustMessage } from './components/GetTrustMessage'
+import { WalletButton } from '../WalletButton'
+
+interface GetTrustButtonProps {
+	message?: string
+}
+
+export function GetTrustButton({ message }: GetTrustButtonProps) {
+	return (
+		<GetTrustButtonLogic
+			message={message}
+			components={{
+				wrapper: GetTrustWrapper,
+				message: GetTrustMessage,
+				walletButton: WalletButton,
+			}}
+		/>
+	)
+}

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

@@ -0,0 +1,62 @@
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react'
+import styles from './styles.module.css'
+import { Spinner } from '../../icons/Spinner'
+
+type NamespaceButtonProps = {
+	label: string
+	icon: string
+	onClick?: () => void
+	actionLabel?: string
+	loading?: boolean
+	disabled?: boolean
+	connectedWallet?: { id: string; name: string; icon: string } | null
+}
+
+export function NamespaceButton({
+	icon,
+	label,
+	onClick,
+	actionLabel,
+	loading,
+	disabled,
+	connectedWallet,
+}: NamespaceButtonProps) {
+	const handleClick = () => {
+		if (!disabled && !loading) {
+			onClick?.()
+		}
+	}
+
+	return (
+		<div
+			className={styles.namespaceButton}
+			role="button"
+			tabIndex={0}
+			onClick={handleClick}
+			onKeyDown={(event: ReactKeyboardEvent<HTMLDivElement>) => {
+				if (event.key === 'Enter' || event.key === ' ') {
+					event.preventDefault()
+					handleClick()
+				}
+			}}
+			data-disabled={disabled}
+			data-loading={loading}
+		>
+			<img width={28} src={icon} />
+			<span className={styles.meta}>
+				<span className={styles.name}>{label}</span>
+				{connectedWallet && (
+					<span className={styles.connectedWith}>
+						<img src={connectedWallet.icon} alt="" className={styles.connectedWalletIcon} />
+						{connectedWallet.name}
+					</span>
+				)}
+			</span>
+			{actionLabel && (
+				<span className="tcui-button tcui-button-primary" data-loading={loading}>
+					{loading ? <Spinner /> : actionLabel}
+				</span>
+			)}
+		</div>
+	)
+}

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

@@ -0,0 +1,72 @@
+.namespaceButton {
+	background: var(--tcui-card);
+	border: 1px solid var(--tcui-border);
+	border-radius: var(--tcui-radius);
+	padding: 12px 14px;
+	height: 64px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	cursor: pointer;
+	transition: all 0.15s ease;
+	position: relative;
+}
+
+.namespaceButton:hover {
+	background: var(--tcui-card-hover);
+}
+
+.namespaceButton:active {
+	transform: scale(0.99);
+}
+
+.icon {
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	background: var(--tcui-bg-secondary);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	flex-shrink: 0;
+	font-weight: 700;
+	font-size: 16px;
+	color: var(--tcui-accent);
+	text-transform: uppercase;
+}
+
+.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;
+}
+
+.connectedWith {
+	font-size: 12px;
+	color: var(--tcui-text-secondary);
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.connectedWalletIcon {
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+}
+
+.namespaceBar:hover :global(.tcui-button-primary) {
+	background: var(--tcui-connect-hover);
+}

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

@@ -0,0 +1,76 @@
+import { type KeyboardEvent as ReactKeyboardEvent } from 'react'
+import styles from './styles.module.css'
+import { CheckIcon } from '../../icons/CheckIcon'
+import { Spinner } from '../../icons/Spinner'
+
+type WalletButtonProps = {
+	name: string
+	icon: string
+	variant?: 'default' | 'walletconnect'
+	active?: boolean
+	actionLabel?: string
+	onClick?: () => void
+	disabled?: boolean
+	loading?: boolean
+	error?: string
+	supportedNamespaceIcons?: string[]
+}
+
+export function WalletButton({
+	name,
+	icon,
+	variant = 'default',
+	active = false,
+	actionLabel = 'Connect',
+	onClick,
+	disabled,
+	loading,
+	error,
+	supportedNamespaceIcons,
+}: WalletButtonProps) {
+	const handleClick = () => {
+		if (!disabled && !loading) {
+			onClick?.()
+		}
+	}
+
+	return (
+		<div
+			className={styles.walletButton}
+			data-variant={variant}
+			data-active={active}
+			data-disabled={disabled}
+			data-loading={loading}
+			role="button"
+			tabIndex={0}
+			onClick={handleClick}
+			onKeyDown={(event: ReactKeyboardEvent<HTMLDivElement>) => {
+				if (event.key === 'Enter' || event.key === ' ') {
+					event.preventDefault()
+					handleClick()
+				}
+			}}
+		>
+			<span className={styles.icon} aria-hidden>
+				<img src={icon} alt={name} />
+			</span>
+			<span className={styles.meta}>
+				<span className={styles.name}>
+					{name}
+					{active && <CheckIcon />}
+				</span>
+				{supportedNamespaceIcons && supportedNamespaceIcons.length > 0 && (
+					<span className={styles.namespaces}>
+						{supportedNamespaceIcons.map((nsIcon, i) => (
+							<img key={i} src={nsIcon} alt="" />
+						))}
+					</span>
+				)}
+				{error && <span className={styles.error}>{error}</span>}
+			</span>
+			<span className={`tcui-button ${active ? '' : 'tcui-button-primary'}`} data-loading={loading}>
+				{loading ? <Spinner /> : actionLabel}
+			</span>
+		</div>
+	)
+}