extension-koni-ui

​

Overview

​

Purpose and Responsibilities

• UI Components: Comprehensive component library for wallet functionality
• State Management: Redux integration with React hooks for global state
• Routing: React Router-based navigation for the extension popup
• View Rendering: Entry point creation for extension pages
• User Interactions: Forms, confirmations, and user input handling
• Multi-chain UI: Interface for interacting with Substrate, EVM, and other chains
• WalletConnect UI: User interface for WalletConnect sessions and requests

​

Key Exports

export { default as createView } from './createView';
export { default as Popup } from './Popup';

​

createView

function createView(Entry: React.ComponentType, rootId?: string): void

• React 18 root creation
• Suspense wrapping for lazy loading
• Preload style application
• Backup reminder initialization

​

Popup

​

Directory Structure

src/
├── Popup/                  # Main popup application
│   ├── Account/           # Account management screens
│   ├── BuyTokens.tsx      # Token purchase interface
│   ├── Confirmations/     # Transaction confirmation screens
│   ├── Home/              # Dashboard and home screens
│   ├── Keyring/           # Account creation/import flows
│   ├── Settings/          # Settings and preferences
│   ├── Transaction/       # Transaction screens
│   ├── WalletConnect/     # WalletConnect session management
│   ├── Root.tsx           # Root component with providers
│   └── router.tsx         # Application routing configuration
├── components/            # Reusable UI components (30+ subdirectories)
│   ├── Modal/
│   ├── Button/
│   ├── Input/
│   ├── Account/
│   └── ...
├── hooks/                 # Custom React hooks (25+ hooks)
│   ├── useBalance.ts
│   ├── useChain.ts
│   ├── useTransaction.ts
│   └── ...
├── messaging/             # Message passing with background script
├── stores/                # Redux stores and slices
│   ├── base/             # Base store configuration
│   ├── feature/          # Feature-specific slices
│   └── utils/            # Store utilities
├── contexts/              # React contexts
│   ├── DataContext.tsx
│   ├── ScreenContext.tsx
│   └── ThemeContext.tsx
├── utils/                 # UI utilities (23+ utility modules)
│   ├── transaction/
│   ├── validation/
│   ├── format/
│   └── ...
├── assets/                # Static assets
│   ├── images/
│   ├── icons/
│   └── logos/
├── constants/             # UI constants
├── i18n/                  # Internationalization
├── types/                 # TypeScript type definitions
└── themes.ts              # Theme configuration

​

Key Features

​

Multi-Page Structure

• Home: Dashboard showing balances, tokens, NFTs, and crowdloans
• Account: Account details, QR codes, and account management
• Transaction: Send tokens, transfer NFTs, cross-chain transfers
• Confirmations: Transaction signing and approval flows
• Settings: General settings, security, networks, and advanced options
• WalletConnect: Session management and dApp connection requests
• Keyring: Create account, import seed, attach accounts

​

Custom Hooks

• Balance queries (useBalance, useGetBalance)
• Chain information (useChainInfo, useGetChainAssets)
• Transaction operations (useTransaction, useHandleSubmitTransaction)
• Account management (useAccountInfo, useGetAccountByAddress)
• NFT data (useNft, useGetNftCollection)
• Staking (useYieldPosition, useGetStakingReward)

​

Component Library

• Account selectors and displays
• Token and NFT lists
• Transaction forms and confirmations
• Modal dialogs and alerts
• Loading states and skeletons
• Charts and data visualizations
• QR code generation and scanning

​

Dependencies

• React Ecosystem: react@18, react-dom@18, react-router-dom@6
• State Management: @reduxjs/toolkit, react-redux, redux-persist
• UI Library: @subwallet/react-ui, styled-components
• Icons: @fortawesome/react-fontawesome, phosphor-react
• Forms: rc-input, react-select, react-dropzone
• Utilities: classnames, copy-to-clipboard, file-saver
• QR Code: react-qr-code, react-qr-reader
• Markdown: react-markdown, rehype-raw
• Extension Packages: @subwallet/extension-base, @subwallet/extension-inject

​

Integration in Architecture

1. Communicates with background services via message passing (see messaging/ directory)
2. Consumes types and utilities from extension-base
3. Manages local UI state with Redux while syncing with background state
4. Renders in multiple contexts: popup, fullscreen tabs, and notification windows

​

Styling and Theming

// themes.ts exports theme configurations
import { ThemeProps } from '@subwallet/react-ui/styles/themes/types';

• Dark and light themes
• Responsive layouts
• Custom color schemes
• Typography system

​

Internationalization

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();

​

Usage Example

import { createView, Popup } from '@subwallet/extension-koni-ui';

// Create the popup view
createView(Popup);

​

Development Notes

• Built with TypeScript for type safety
• Uses React 18 features including Suspense and concurrent rendering
• Implements code splitting for performance
• Follows atomic design principles for component organization
• Uses React hooks exclusively (no class components)

​

Related Packages

• extension-base - Core services and business logic
• extension-inject - Injection types
• extension-dapp - dApp integration