# 1. Quick Start
Ju.com Web3 Wallet is fully compatible with the Ethereum ecosystem and supports all standard Web3 APIs. If your DApp already supports MetaMask, you can support JuCoin Wallet with minimal modifications.
### Quick Experience
Create a simple HTML file to experience the basic functionality of JuCoin Wallet:
```html
JuCoin Quick Integration
JuCoin Wallet Quick Integration Example
```
### Complete DApp Integration with Ju.com Wallet in 5 Minutes
#### Three Steps to Complete Integration
**Step 1: Detect Wallet**
```javascript
// JuCoin Wallet injects jucoin and ethereum objects on the window object
const isJuCoinInstalled = () => {
// Prioritize checking for jucoin object
if (typeof window.jcWallet !== 'undefined') {
return true;
}
// Compatibility mode: check for isJuCoin identifier on ethereum object
if (typeof window.ethereum !== 'undefined') {
return true;
}
return false;
};
// Get provider object
const getProvider = () => {
if (window.jcWallet) return window.jcWallet.ethereum;
if (typeof window.ethereum !== 'undefined') return window.ethereum;
return null;
};
```
**Step 2: Connect Wallet**
```javascript
async function connectJuCoinWallet() {
const provider = getProvider();
if (!provider) {
console.log('JuCoin Wallet not installed');
// Guide user to install
window.open('https://www.jucoin.com/download', '_blank');
return null;
}
try {
// Request user authorization to connect wallet
const accounts = await provider.request({
method: 'eth_requestAccounts'
});
console.log('Connection successful! Account address:', accounts[0]);
// Get chain ID
const chainId = await provider.request({
method: 'eth_chainId'
});
console.log('Current chain ID:', chainId);
return {
account: accounts[0],
chainId: chainId,
provider: provider
};
} catch (error) {
if (error.code === 4001) {
// User rejected connection
console.log('User cancelled connection request');
} else {
console.error('Connection error:', error);
}
return null;
}
}
```
**Step 3: Send Transaction**
```javascript
async function sendTransaction() {
const provider = getProvider();
if (!provider) {
alert('Please install JuCoin Wallet first');
return;
}
try {
const accounts = await provider.request({
method: 'eth_accounts'
});
if (accounts.length === 0) {
alert('Please connect wallet first');
return;
}
// Build transaction parameters
const transactionParameters = {
from: accounts[0], // Sender address
to: '0x742d35Cc6634C0532925a3b844Bc9e7095f0e5E0', // Recipient address
value: '0x29a2241af62c0000', // Amount to send (3 ETH in wei)
gas: '0x5208', // Gas limit (21000)
};
// Send transaction
const txHash = await provider.request({
method: 'eth_sendTransaction',
params: [transactionParameters],
});
console.log('Transaction sent! Transaction hash:', txHash);
// View transaction on block explorer
console.log(`View transaction: https://etherscan.io/tx/${txHash}`);
return txHash;
} catch (error) {
if (error.code === 4001) {
console.log('User cancelled transaction');
} else {
console.error('Transaction failed:', error);
}
}
}
```
#### Complete Example: A Simple DApp
```javascript
// Complete wallet management class
class JuCoinWalletManager {
constructor() {
this.provider = null;
this.account = null;
this.chainId = null;
this.connected = false;
}
// Initialize
init() {
// Detect wallet
if (window.jcWallet) {
this.provider = window.jcWallet.ethereum;
} else if (window.ethereum) {
this.provider = window.ethereum;
}
if (this.provider) {
// Listen for account changes
this.provider.on('accountsChanged', (accounts) => {
this.handleAccountsChanged(accounts);
});
// Listen for chain changes
this.provider.on('chainChanged', (chainId) => {
this.handleChainChanged(chainId);
});
// Check if already connected
this.checkConnection();
}
return !!this.provider;
}
// Check connection status
async checkConnection() {
try {
const accounts = await this.provider.request({
method: 'eth_accounts'
});
if (accounts.length > 0) {
this.account = accounts[0];
this.chainId = await this.provider.request({
method: 'eth_chainId'
});
this.connected = true;
console.log('Wallet connected:', this.account);
}
} catch (error) {
console.error('Failed to check connection status:', error);
}
}
// Connect wallet
async connect() {
if (!this.provider) {
throw new Error('JuCoin Wallet not installed');
}
try {
const accounts = await this.provider.request({
method: 'eth_requestAccounts'
});
this.account = accounts[0];
this.chainId = await this.provider.request({
method: 'eth_chainId'
});
this.connected = true;
return {
account: this.account,
chainId: this.chainId
};
} catch (error) {
throw error;
}
}
// Get balance
async getBalance() {
if (!this.connected) {
throw new Error('Wallet not connected');
}
const balance = await this.provider.request({
method: 'eth_getBalance',
params: [this.account, 'latest']
});
// Convert wei to ETH
return parseInt(balance, 16) / 1e18;
}
// Send ETH
async sendETH(to, amount) {
if (!this.connected) {
throw new Error('Wallet not connected');
}
// Convert ETH to wei
const value = '0x' + Math.floor(amount * 1e18).toString(16);
const txHash = await this.provider.request({
method: 'eth_sendTransaction',
params: [{
from: this.account,
to: to,
value: value,
gas: '0x5208'
}]
});
return txHash;
}
// Handle account changes
handleAccountsChanged(accounts) {
if (accounts.length === 0) {
// User disconnected wallet
this.account = null;
this.connected = false;
console.log('Wallet disconnected');
} else {
this.account = accounts[0];
console.log('Account switched:', this.account);
}
}
// Handle chain changes
handleChainChanged(chainId) {
this.chainId = chainId;
console.log('Chain switched:', chainId);
// Recommend refreshing the page to ensure correct app state
window.location.reload();
}
}
// Usage example
const wallet = new JuCoinWalletManager();
// Initialize on page load
window.addEventListener('load', async () => {
if (wallet.init()) {
console.log('JuCoin Wallet detected');
} else {
console.log('Please install JuCoin Wallet');
}
});
```
### Environment Setup
#### Development Environment Requirements
**1. Supported Browsers**
Ju.com Wallet supports all modern browsers:
* Chrome 90+ (recommended)
* Firefox 88+
* Safari 14+
* Edge 90+
* Brave (latest version)
Mobile support:
* Ju.com App built-in browser
* Mobile browsers supporting WalletConnect protocol
**2. Node.js and Package Managers**
Ensure Node.js 14.0.0 or higher is installed:
```bash
# Check Node.js version
node --version
# Check npm version
npm --version
# Or use yarn
yarn --version
```
**3. Development Frameworks (Optional)**
Ju.com Wallet supports all major frontend frameworks:
```bash
# React
npx create-react-app my-jucoin-dapp
cd my-jucoin-dapp
# Vue
npm create vue@latest my-jucoin-dapp
cd my-jucoin-dapp
# Next.js
npx create-next-app@latest my-jucoin-dapp
cd my-jucoin-dapp
# Vanilla JavaScript (using Vite)
npm create vite@latest my-jucoin-dapp -- --template vanilla
cd my-jucoin-dapp
```
#### Web3 Library Installation
**Recommended: Ethers.js**
```bash
# Install ethers.js
npm install ethers
# Or use yarn
yarn add ethers
```
Usage example:
```javascript
import { ethers } from 'ethers';
// Create provider
const provider = new ethers.providers.Web3Provider(window.ethereum);
// Get signer
const signer = provider.getSigner();
// Get account address
const address = await signer.getAddress();
// Get balance
const balance = await signer.getBalance();
console.log('Balance:', ethers.utils.formatEther(balance), 'ETH');
```
**Alternative: Web3.js**
```bash
# Install web3.js
npm install web3
# Or use yarn
yarn add web3
```
Usage example:
```javascript
import Web3 from 'web3';
// Create web3 instance
const web3 = new Web3(window.ethereum);
// Get accounts
const accounts = await web3.eth.getAccounts();
// Get balance
const balance = await web3.eth.getBalance(accounts[0]);
console.log('Balance:', web3.utils.fromWei(balance, 'ether'), 'ETH');
```
#### Local Development Server
**HTTPS Configuration**
For security reasons, Ju.com Wallet only works in secure environments:
* HTTPS websites
*
*
Local development HTTPS configuration:
```bash
# Using Vite (built-in HTTPS support)
npm create vite@latest my-dapp
cd my-dapp
npm install
npm run dev -- --https
# Using mkcert to create local certificates
# macOS
brew install mkcert
mkcert -install
mkcert localhost
# Windows (using chocolatey)
choco install mkcert
mkcert -install
mkcert localhost
```
```javascript
// Using certificates in your project
// vite.config.js
import { defineConfig } from 'vite'
import fs from 'fs'
export default defineConfig({
server: {
https: {
key: fs.readFileSync('./localhost-key.pem'),
cert: fs.readFileSync('./localhost.pem'),
}
}
})
```
#### Test Network Configuration
**JuChain Testnet**
```javascript
const JUCHAIN_TESTNET = {
chainId: '0x89ab', // 35243 in decimal
chainName: 'JuChain Testnet',
nativeCurrency: {
name: 'Test JU',
symbol: 'tJU',
decimals: 18
},
rpcUrls: ['https://testnet-rpc.juchain.com'],
blockExplorerUrls: ['https://testnet-explorer.juchain.com']
};
// Add testnet to wallet
async function addJuChainTestnet() {
try {
await window.jucoin.request({
method: 'wallet_addEthereumChain',
params: [JUCHAIN_TESTNET]
});
console.log('JuChain testnet added successfully');
} catch (error) {
console.error('Failed to add network:', error);
}
}
```
**Get Test Tokens**
1. Visit JuChain Faucet
2. Connect your Ju.com Wallet
3. Enter verification code
4. Click "Claim Test Tokens"
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://jucoin-wallet.gitbook.io/jucoin-wallet-docs/developer-documentation-for-jucoin-wallet/developer-guide/1.-quick-start.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.