📘 Blockchain App: Web3 Integration

🎯 Introduction

Welcome to this exciting tutorial on building blockchain applications with Web3 integration in TypeScript! 🎉 In this guide, we’ll explore how to connect your TypeScript applications to the blockchain, interact with smart contracts, and build decentralized applications (dApps).

You’ll discover how Web3 and TypeScript work together to create powerful, type-safe blockchain applications. Whether you’re building DeFi platforms 💰, NFT marketplaces 🎨, or decentralized games 🎮, understanding Web3 integration is essential for modern blockchain development.

By the end of this tutorial, you’ll feel confident building your own blockchain applications with TypeScript! Let’s dive in! 🏊‍♂️

📚 Understanding Web3 and Blockchain

🤔 What is Web3?

Web3 is like the internet’s evolution 🌐 - instead of companies controlling your data, you control it! Think of it as moving from renting an apartment (Web2) to owning your own house (Web3) 🏠.

In TypeScript terms, Web3 provides libraries and tools to interact with blockchain networks like Ethereum. This means you can:

✨ Connect to blockchain networks
🚀 Interact with smart contracts
🛡️ Manage cryptocurrency wallets
📊 Read blockchain data

💡 Why Use TypeScript for Blockchain Development?

Here’s why developers love TypeScript for Web3:

Type Safety 🔒: Catch errors before deploying expensive transactions
Better IDE Support 💻: Autocomplete for contract methods
Code Documentation 📖: Types make contract interfaces clear
Refactoring Confidence 🔧: Change code without breaking integrations

Real-world example: Imagine building a decentralized exchange 💱. With TypeScript, you can ensure all token amounts, addresses, and transaction parameters are correctly typed before sending them to the blockchain!

🔧 Basic Syntax and Usage

📝 Setting Up Web3 with TypeScript

Let’s start with a friendly example:

// 👋 Hello, Web3!
import { ethers } from 'ethers';

// 🌐 Connect to Ethereum network
const provider = new ethers.JsonRpcProvider('https://eth-mainnet.g.alchemy.com/v2/your-api-key');

// 🎨 Define types for our blockchain data
interface TokenBalance {
  address: string;     // 📍 Wallet address
  balance: bigint;     // 💰 Token balance
  symbol: string;      // 🪙 Token symbol
  decimals: number;    // 🔢 Token decimals
}

// 🔍 Check ETH balance
async function getEthBalance(address: string): Promise<string> {
  const balance = await provider.getBalance(address);
  return ethers.formatEther(balance) + ' ETH 💎';
}

💡 Explanation: Notice how we use TypeScript interfaces to define our blockchain data structures. The bigint type is perfect for handling large cryptocurrency values!

🎯 Common Web3 Patterns

Here are patterns you’ll use daily:

// 🏗️ Pattern 1: Contract Interface
interface ERC20Contract {
  name(): Promise<string>;
  symbol(): Promise<string>;
  balanceOf(address: string): Promise<bigint>;
  transfer(to: string, amount: bigint): Promise<ethers.TransactionResponse>;
}

// 🎨 Pattern 2: Transaction Types
type TransactionStatus = "pending" | "confirmed" | "failed";
type NetworkType = "mainnet" | "testnet" | "localhost";

// 🔄 Pattern 3: Event Listening with Types
interface TransferEvent {
  from: string;
  to: string;
  value: bigint;
  blockNumber: number;
}

💡 Practical Examples

🛒 Example 1: NFT Marketplace

Let’s build something real:

// 🎨 Define our NFT types
interface NFTMetadata {
  id: string;
  name: string;
  description: string;
  image: string;
  price: bigint;
  owner: string;
  rarity: '⭐' | '💎' | '🌟' | '✨';
}

// 🏪 NFT Marketplace class
class NFTMarketplace {
  private provider: ethers.Provider;
  private contract: ethers.Contract;
  
  constructor(providerUrl: string, contractAddress: string) {
    this.provider = new ethers.JsonRpcProvider(providerUrl);
    this.contract = new ethers.Contract(contractAddress, NFT_ABI, this.provider);
  }
  
  // 🖼️ List NFT for sale
  async listNFT(nft: NFTMetadata, signer: ethers.Signer): Promise<void> {
    const contractWithSigner = this.contract.connect(signer);
    const tx = await contractWithSigner.listItem(nft.id, nft.price);
    
    console.log(`🎨 Listing ${nft.rarity} ${nft.name} for sale!`);
    await tx.wait();
    console.log(`✅ NFT listed successfully!`);
  }
  
  // 💰 Buy NFT
  async buyNFT(nftId: string, buyer: ethers.Signer): Promise<void> {
    const nft = await this.getNFTDetails(nftId);
    const contractWithSigner = this.contract.connect(buyer);
    
    console.log(`🛒 Purchasing ${nft.name}...`);
    const tx = await contractWithSigner.purchase(nftId, { value: nft.price });
    await tx.wait();
    console.log(`🎉 You now own ${nft.name}!`);
  }
  
  // 📋 Get NFT details
  async getNFTDetails(nftId: string): Promise<NFTMetadata> {
    const details = await this.contract.getNFT(nftId);
    return {
      id: nftId,
      name: details.name,
      description: details.description,
      image: details.image,
      price: details.price,
      owner: details.owner,
      rarity: this.calculateRarity(details.attributes)
    };
  }
  
  // ✨ Calculate rarity
  private calculateRarity(attributes: any[]): NFTMetadata['rarity'] {
    const score = attributes.reduce((sum, attr) => sum + attr.value, 0);
    if (score > 90) return '✨';
    if (score > 70) return '🌟';
    if (score > 50) return '💎';
    return '⭐';
  }
}

// 🎮 Let's use it!
const marketplace = new NFTMarketplace(
  'https://eth-mainnet.g.alchemy.com/v2/your-key',
  '0x123...'
);

🎯 Try it yourself: Add a searchNFTs method that filters by rarity and price range!

🎮 Example 2: DeFi Yield Tracker

Let’s make it fun:

// 💰 DeFi yield tracking system
interface YieldPool {
  name: string;
  address: string;
  apy: number;
  tvl: bigint;
  rewardToken: string;
  emoji: string;
}

interface UserPosition {
  pool: YieldPool;
  stakedAmount: bigint;
  pendingRewards: bigint;
  startTime: Date;
}

class DeFiYieldTracker {
  private positions: Map<string, UserPosition[]> = new Map();
  private provider: ethers.Provider;
  
  constructor(provider: ethers.Provider) {
    this.provider = provider;
  }
  
  // 🌾 Track new farming position
  async trackPosition(
    userAddress: string,
    pool: YieldPool,
    amount: bigint
  ): Promise<void> {
    const position: UserPosition = {
      pool,
      stakedAmount: amount,
      pendingRewards: 0n,
      startTime: new Date()
    };
    
    const userPositions = this.positions.get(userAddress) || [];
    userPositions.push(position);
    this.positions.set(userAddress, userPositions);
    
    console.log(`🌾 Started farming in ${pool.emoji} ${pool.name}!`);
    console.log(`💰 Staked: ${ethers.formatEther(amount)} tokens`);
    console.log(`📈 Current APY: ${pool.apy}%`);
  }
  
  // 💎 Calculate total yields
  async calculateTotalYield(userAddress: string): Promise<string> {
    const positions = this.positions.get(userAddress) || [];
    let totalYield = 0n;
    
    for (const position of positions) {
      const hoursStaked = (Date.now() - position.startTime.getTime()) / (1000 * 60 * 60);
      const hourlyRate = position.pool.apy / 365 / 24 / 100;
      const earned = position.stakedAmount * BigInt(Math.floor(hourlyRate * hoursStaked * 1e18)) / 1000000000000000000n;
      
      totalYield += earned;
      console.log(`${position.pool.emoji} ${position.pool.name}: +${ethers.formatEther(earned)} tokens`);
    }
    
    return ethers.formatEther(totalYield);
  }
  
  // 🏆 Get best performing pool
  getBestPool(pools: YieldPool[]): YieldPool {
    return pools.reduce((best, current) => 
      current.apy > best.apy ? current : best
    );
  }
  
  // 📊 Portfolio summary
  async getPortfolioSummary(userAddress: string): Promise<void> {
    const positions = this.positions.get(userAddress) || [];
    
    console.log(`\n📊 DeFi Portfolio Summary for ${userAddress.slice(0, 6)}...${userAddress.slice(-4)}`);
    console.log(`${'='.repeat(50)}`);
    
    let totalStaked = 0n;
    let totalPending = 0n;
    
    for (const position of positions) {
      totalStaked += position.stakedAmount;
      const yield_ = await this.calculateTotalYield(userAddress);
      
      console.log(`\n${position.pool.emoji} ${position.pool.name}`);
      console.log(`  💰 Staked: ${ethers.formatEther(position.stakedAmount)}`);
      console.log(`  🎁 Earned: ${yield_}`);
      console.log(`  📈 APY: ${position.pool.apy}%`);
    }
    
    console.log(`\n🎯 Total Portfolio Value: ${ethers.formatEther(totalStaked)} 🚀`);
  }
}

// 🎮 Example usage
const yieldTracker = new DeFiYieldTracker(provider);

const sushiPool: YieldPool = {
  name: "SUSHI-ETH LP",
  address: "0xabc...",
  apy: 45.5,
  tvl: ethers.parseEther("1000000"),
  rewardToken: "SUSHI",
  emoji: "🍣"
};

await yieldTracker.trackPosition(
  "0x123...",
  sushiPool,
  ethers.parseEther("100")
);

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Type-Safe Smart Contract Interactions

When you’re ready to level up, try this advanced pattern:

// 🎯 Advanced generic contract factory
type ContractMethod<T extends any[], R> = (...args: T) => Promise<R>;

interface TypedContract<T> {
  [K in keyof T]: T[K] extends (...args: infer A) => infer R
    ? ContractMethod<A, R>
    : never;
}

// 🪄 Create type-safe contract wrapper
function createTypedContract<T>(
  address: string,
  abi: any[],
  provider: ethers.Provider
): TypedContract<T> {
  const contract = new ethers.Contract(address, abi, provider);
  return new Proxy(contract, {
    get(target, prop) {
      if (typeof prop === 'string' && typeof target[prop] === 'function') {
        return async (...args: any[]) => {
          console.log(`✨ Calling ${prop} with args:`, args);
          return target[prop](...args);
        };
      }
      return target[prop];
    }
  }) as TypedContract<T>;
}

// 🎨 Usage with full type safety
interface MyDeFiProtocol {
  stake(amount: bigint): ethers.TransactionResponse;
  unstake(amount: bigint): ethers.TransactionResponse;
  getRewards(user: string): bigint;
  compound(): ethers.TransactionResponse;
}

const defiContract = createTypedContract<MyDeFiProtocol>(
  '0x123...',
  DEFI_ABI,
  provider
);

// ✨ Full IntelliSense and type checking!
const rewards = await defiContract.getRewards('0xuser...');

🏗️ Advanced Topic 2: Multi-Chain Support

For the brave developers:

// 🚀 Multi-chain configuration system
type ChainId = 1 | 56 | 137 | 43114; // ETH, BSC, Polygon, Avalanche
type ChainEmoji = "🔷" | "🟡" | "🟣" | "🔺";

interface ChainConfig {
  id: ChainId;
  name: string;
  rpcUrl: string;
  emoji: ChainEmoji;
  nativeCurrency: {
    name: string;
    symbol: string;
    decimals: number;
  };
}

class MultiChainManager {
  private chains: Map<ChainId, ChainConfig> = new Map([
    [1, {
      id: 1,
      name: "Ethereum",
      rpcUrl: "https://eth-mainnet.g.alchemy.com/v2/",
      emoji: "🔷",
      nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 }
    }],
    [56, {
      id: 56,
      name: "BSC",
      rpcUrl: "https://bsc-dataseed.binance.org/",
      emoji: "🟡",
      nativeCurrency: { name: "BNB", symbol: "BNB", decimals: 18 }
    }]
  ]);
  
  // 🌐 Get provider for specific chain
  getProvider(chainId: ChainId): ethers.Provider {
    const config = this.chains.get(chainId);
    if (!config) throw new Error(`Chain ${chainId} not supported! 😢`);
    
    console.log(`${config.emoji} Connecting to ${config.name}...`);
    return new ethers.JsonRpcProvider(config.rpcUrl);
  }
  
  // 🔄 Bridge tokens between chains
  async bridgeTokens(
    from: ChainId,
    to: ChainId,
    amount: bigint,
    token: string
  ): Promise<void> {
    const fromChain = this.chains.get(from)!;
    const toChain = this.chains.get(to)!;
    
    console.log(`🌉 Bridging tokens:`);
    console.log(`  ${fromChain.emoji} From: ${fromChain.name}`);
    console.log(`  ${toChain.emoji} To: ${toChain.name}`);
    console.log(`  💰 Amount: ${ethers.formatEther(amount)}`);
    
    // Bridge implementation here...
  }
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Not Handling Gas Properly

// ❌ Wrong way - might fail with out of gas!
const tx = await contract.complexOperation(data);

// ✅ Correct way - estimate and add buffer!
const estimatedGas = await contract.complexOperation.estimateGas(data);
const gasLimit = estimatedGas * 120n / 100n; // Add 20% buffer

const tx = await contract.complexOperation(data, {
  gasLimit: gasLimit
});
console.log(`⛽ Using ${gasLimit} gas for safety!`);

🤯 Pitfall 2: Forgetting to Handle Reverts

// ❌ Dangerous - no error handling!
const result = await contract.riskyOperation();

// ✅ Safe - catch and handle reverts!
try {
  const result = await contract.riskyOperation();
  console.log(`✅ Operation successful!`);
} catch (error: any) {
  if (error.reason) {
    console.log(`⚠️ Contract reverted: ${error.reason}`);
  } else {
    console.log(`💥 Unexpected error: ${error.message}`);
  }
}

🛠️ Best Practices

🎯 Always Use Types: Define interfaces for all contract interactions
📝 Test on Testnet First: Never deploy directly to mainnet
🛡️ Validate Addresses: Use ethers.isAddress() before transactions
🎨 Handle BigNumbers Carefully: Use bigint for all token amounts
✨ Monitor Gas Prices: Implement gas price strategies

🧪 Hands-On Exercise

🎯 Challenge: Build a Token Swap DApp

Create a type-safe token swapping application:

📋 Requirements:

✅ Connect to user’s wallet (MetaMask)
🏷️ Display token balances with logos
👤 Implement token approval flow
📅 Add price impact warnings
🎨 Show transaction history with emojis!

🚀 Bonus Points:

Add slippage tolerance settings
Implement multi-hop swaps
Create a favorites list for token pairs

💡 Solution

🔍 Click to see solution

// 🎯 Our type-safe token swap system!
interface Token {
  address: string;
  symbol: string;
  name: string;
  decimals: number;
  logo: string;
  emoji: string;
}

interface SwapQuote {
  inputToken: Token;
  outputToken: Token;
  inputAmount: bigint;
  outputAmount: bigint;
  priceImpact: number;
  route: string[];
}

class TokenSwapDApp {
  private provider: ethers.Provider;
  private signer: ethers.Signer | null = null;
  private tokens: Map<string, Token> = new Map();
  
  constructor() {
    // 🌐 Connect to user's wallet
    if (typeof window !== 'undefined' && window.ethereum) {
      this.provider = new ethers.BrowserProvider(window.ethereum);
    } else {
      throw new Error('🚫 Please install MetaMask!');
    }
  }
  
  // 🔐 Connect wallet
  async connectWallet(): Promise<string> {
    const signer = await this.provider.getSigner();
    this.signer = signer;
    const address = await signer.getAddress();
    
    console.log(`🎉 Connected to ${address.slice(0, 6)}...${address.slice(-4)}`);
    return address;
  }
  
  // 💰 Get token balance
  async getTokenBalance(token: Token, address: string): Promise<string> {
    const contract = new ethers.Contract(
      token.address,
      ['function balanceOf(address) view returns (uint256)'],
      this.provider
    );
    
    const balance = await contract.balanceOf(address);
    const formatted = ethers.formatUnits(balance, token.decimals);
    
    return `${token.emoji} ${formatted} ${token.symbol}`;
  }
  
  // 🔄 Get swap quote
  async getSwapQuote(
    inputToken: Token,
    outputToken: Token,
    inputAmount: bigint
  ): Promise<SwapQuote> {
    // Simulate getting quote from DEX
    const outputAmount = inputAmount * 95n / 100n; // 5% slippage for demo
    const priceImpact = 2.5; // 2.5% impact
    
    return {
      inputToken,
      outputToken,
      inputAmount,
      outputAmount,
      priceImpact,
      route: [inputToken.symbol, 'WETH', outputToken.symbol]
    };
  }
  
  // ✅ Approve token
  async approveToken(token: Token, spender: string, amount: bigint): Promise<void> {
    if (!this.signer) throw new Error('🚫 Wallet not connected!');
    
    const contract = new ethers.Contract(
      token.address,
      ['function approve(address, uint256) returns (bool)'],
      this.signer
    );
    
    console.log(`🔓 Approving ${token.emoji} ${token.symbol}...`);
    const tx = await contract.approve(spender, amount);
    await tx.wait();
    console.log(`✅ Approved!`);
  }
  
  // 🔄 Execute swap
  async executeSwap(quote: SwapQuote): Promise<void> {
    if (!this.signer) throw new Error('🚫 Wallet not connected!');
    
    // Check price impact
    if (quote.priceImpact > 5) {
      console.log(`⚠️ High price impact: ${quote.priceImpact}%`);
      const confirm = await this.confirmHighImpact();
      if (!confirm) return;
    }
    
    console.log(`🔄 Swapping ${quote.inputToken.emoji} → ${quote.outputToken.emoji}`);
    console.log(`📊 Route: ${quote.route.join(' → ')}`);
    
    // Execute swap transaction...
    console.log(`✅ Swap successful!`);
    console.log(`🎉 Received ${ethers.formatUnits(quote.outputAmount, quote.outputToken.decimals)} ${quote.outputToken.symbol}`);
  }
  
  // ⚠️ Confirm high impact
  private async confirmHighImpact(): Promise<boolean> {
    console.log(`🚨 Price impact is high! Continue anyway?`);
    return true; // In real app, show user confirmation dialog
  }
  
  // 📊 Get transaction history
  async getSwapHistory(address: string): Promise<void> {
    console.log(`📜 Recent swaps for ${address.slice(0, 6)}...`);
    console.log(`  🔄 ETH → USDC: 0.5 ETH for 950 USDC`);
    console.log(`  🔄 USDC → DAI: 500 USDC for 499.5 DAI`);
    console.log(`  🔄 DAI → ETH: 1000 DAI for 0.52 ETH`);
  }
}

// 🎮 Test it out!
const swapApp = new TokenSwapDApp();
const eth: Token = {
  address: '0x0',
  symbol: 'ETH',
  name: 'Ethereum',
  decimals: 18,
  logo: 'eth.png',
  emoji: '🔷'
};

const usdc: Token = {
  address: '0xa0b8....',
  symbol: 'USDC',
  name: 'USD Coin',
  decimals: 6,
  logo: 'usdc.png',
  emoji: '💵'
};

// Connect and swap!
await swapApp.connectWallet();
const quote = await swapApp.getSwapQuote(eth, usdc, ethers.parseEther('1'));
await swapApp.executeSwap(quote);

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

✅ Connect to blockchain networks with confidence 💪
✅ Interact with smart contracts type-safely 🛡️
✅ Build DeFi applications that handle real value 🎯
✅ Handle Web3 errors gracefully 🐛
✅ Create multi-chain dApps with TypeScript! 🚀

Remember: Building on the blockchain requires extra care - real money is at stake! Always test thoroughly and think about security. 🔒

🤝 Next Steps

Congratulations! 🎉 You’ve mastered Web3 integration with TypeScript!

Here’s what to do next:

💻 Build a simple dApp using the patterns above
🏗️ Deploy a smart contract and create TypeScript bindings
📚 Explore advanced topics like MEV protection
🌟 Join a Web3 hackathon and build something amazing!

Remember: The blockchain space is evolving rapidly. Keep learning, keep building, and most importantly, have fun! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn