Special pattern requirements in blockchain applications

Special Pattern Requirements in Blockchain Applications

Blockchain technology brings features such as decentralization, immutability, and consensus mechanisms, which impose unique design pattern requirements on frontend development. JavaScript, as the core language for frontend development, needs to combine traditional design patterns with blockchain characteristics to address challenges in scenarios like distributed ledgers, smart contract interactions, and data synchronization.

Observer Pattern and Event Listening

Changes in blockchain network states need to be reflected in the UI layer in real time. The observer pattern decouples event publishing and subscription, making it ideal for asynchronous scenarios like transaction confirmations and block generation:

class BlockchainEventEmitter {
  constructor() {
    this.listeners = {};
  }

  on(eventType, callback) {
    if (!this.listeners[eventType]) {
      this.listeners[eventType] = [];
    }
    this.listeners[eventType].push(callback);
  }

  emit(eventType, data) {
    const eventListeners = this.listeners[eventType];
    if (eventListeners) {
      eventListeners.forEach(callback => callback(data));
    }
  }
}

// Usage example
const emitter = new BlockchainEventEmitter();
emitter.on('newBlock', (block) => {
  updateDashboard(block);
});
emitter.on('pendingTx', (tx) => {
  addToMemPool(tx);
});

Proxy Pattern and Smart Contract Interaction

Directly calling smart contracts from the frontend poses security risks. The proxy pattern adds a control layer to handle logic like gas estimation and error retries:

class ContractProxy {
  constructor(contract, signer) {
    this.contract = contract;
    this.signer = signer;
  }

  async execute(method, ...args) {
    try {
      const estimatedGas = await this.contract.estimateGas[method](...args);
      const tx = await this.contract.connect(this.signer)[method](...args, {
        gasLimit: estimatedGas.mul(120).div(100) // Add 20% buffer
      });
      return await tx.wait();
    } catch (error) {
      if (error.code === 'SERVER_ERROR') {
        return this.execute(method, ...args); // Auto-retry
      }
      throw error;
    }
  }
}

// Usage example
const proxy = new ContractProxy(erc20Contract, wallet);
await proxy.transfer(toAddress, amount);

Strategy Pattern and Transaction Fee Optimization

Different blockchain networks require dynamic gas strategies. The strategy pattern allows runtime switching of algorithms:

const gasStrategies = {
  eth: {
    calculate: async (provider) => {
      const [fee, block] = await Promise.all([
        provider.send("eth_maxPriorityFeePerGas"),
        provider.getBlock("latest")
      ]);
      return {
        maxPriorityFeePerGas: fee,
        maxFeePerGas: fee.add(block.baseFeePerGas.mul(2))
      };
    }
  },
  polygon: {
    calculate: async () => {
      return { gasPrice: await fetchPolygonGasStation() };
    }
  }
};

class TransactionSender {
  constructor(strategyType) {
    this.strategy = gasStrategies[strategyType];
  }

  async sendTransaction(provider, txRequest) {
    const gasParams = await this.strategy.calculate(provider);
    return provider.sendTransaction({ ...txRequest, ...gasParams });
  }
}

Memento Pattern and Transaction History

The irreversible nature of blockchain transactions requires frontend state recovery mechanisms. The memento pattern saves critical operation states:

class TransactionHistory {
  constructor() {
    this.states = [];
    this.currentIndex = -1;
  }

  saveState(state) {
    this.states = this.states.slice(0, this.currentIndex + 1);
    this.states.push(JSON.stringify(state));
    this.currentIndex++;
  }

  undo() {
    if (this.currentIndex <= 0) return null;
    this.currentIndex--;
    return JSON.parse(this.states[this.currentIndex]);
  }

  redo() {
    if (this.currentIndex >= this.states.length - 1) return null;
    this.currentIndex++;
    return JSON.parse(this.states[this.currentIndex]);
  }
}

// Usage example
const history = new TransactionHistory();
history.saveState({ balance: 100, nonce: 5 });

Decorator Pattern and Wallet Functionality Extension

Wallet functionalities like multi-signature verification and hardware support can be dynamically added using the decorator pattern:

class BasicWallet {
  signTransaction(tx) {
    return this._sign(tx);
  }
}

function withLedgerSupport(wallet) {
  const proto = Object.getPrototypeOf(wallet);
  proto.signTransaction = async function(tx) {
    if (useLedger) {
      return await ledgerSign(tx);
    }
    return super.signTransaction(tx);
  };
  return wallet;
}

function withMultiSig(wallet, requiredSignatures) {
  const proto = Object.getPrototypeOf(wallet);
  const originalSign = proto.signTransaction;
  proto.signTransaction = async function(tx) {
    const signatures = [];
    for (let i = 0; i < requiredSignatures; i++) {
      signatures.push(await originalSign.call(this, tx));
    }
    return combineSignatures(signatures);
  };
  return wallet;
}

// Usage example
const wallet = new BasicWallet();
const enhancedWallet = withMultiSig(withLedgerSupport(wallet), 2);

State Pattern and Network Switching

When users switch blockchain networks, the state pattern manages network-specific behaviors:

class NetworkState {
  constructor() {
    this.currentState = new EthereumMainnetState();
  }

  async switchTo(network) {
    this.currentState = networkStates[network];
    await this.currentState.initialize();
  }

  getExplorerUrl(txHash) {
    return this.currentState.getExplorerUrl(txHash);
  }
}

class EthereumMainnetState {
  getExplorerUrl(txHash) {
    return `https://etherscan.io/tx/${txHash}`;
  }
}

class PolygonState {
  getExplorerUrl(txHash) {
    return `https://polygonscan.com/tx/${txHash}`;
  }
}

const networkStates = {
  'ethereum': new EthereumMainnetState(),
  'polygon': new PolygonState()
};

Composite Pattern and NFT Display

NFT assets often have hierarchical structures. The composite pattern uniformly handles individual NFTs and bundles:

class NFTComponent {
  constructor(id) {
    this.id = id;
  }

  render() {
    throw new Error("Abstract method");
  }
}

class SingleNFT extends NFTComponent {
  constructor(id, metadata) {
    super(id);
    this.metadata = metadata;
  }

  render() {
    return `<div class="nft">
      <img src="${this.metadata.image}"/>
    </div>`;
  }
}

class NFTBundle extends NFTComponent {
  constructor(id) {
    super(id);
    this.children = [];
  }

  add(component) {
    this.children.push(component);
  }

  render() {
    return `<div class="bundle">
      ${this.children.map(c => c.render()).join('')}
    </div>`;
  }
}

// Usage example
const bundle = new NFTBundle('bundle-1');
bundle.add(new SingleNFT('nft-1', { image: 'ipfs://Qm...' }));
bundle.add(new SingleNFT('nft-2', { image: 'ipfs://Qm...' }));
document.getElementById('gallery').innerHTML = bundle.render();

Flyweight Pattern and Token Data Management

DeFi applications require efficient management of large amounts of token data. The flyweight pattern shares intrinsic states:

class TokenFactory {
  constructor() {
    this.tokens = {};
  }

  getToken(symbol, address, decimals, logo) {
    const key = `${symbol}-${address}`;
    if (!this.tokens[key]) {
      this.tokens[key] = new TokenFlyweight(symbol, address, decimals, logo);
    }
    return this.tokens[key];
  }
}

class TokenFlyweight {
  constructor(symbol, address, decimals, logo) {
    this.symbol = symbol;
    this.address = address;
    this.decimals = decimals;
    this.logo = logo;
  }

  render(balance) {
    return `<div>
      <img src="${this.logo}"/>
      <span>${balance} ${this.symbol}</span>
    </div>`;
  }
}

// Usage example
const factory = new TokenFactory();
const usdc = factory.getToken('USDC', '0xA0b...', 6, 'usdc.png');
document.getElementById('balance').innerHTML = usdc.render('100.50');

Chain of Responsibility Pattern and Transaction Validation

Multi-step transaction validation processes are well-suited for the chain of responsibility pattern:

class Validator {
  constructor() {
    this.next = null;
  }

  setNext(validator) {
    this.next = validator;
    return validator;
  }

  async validate(tx) {
    if (this.next) {
      return this.next.validate(tx);
    }
    return true;
  }
}

class BalanceValidator extends Validator {
  async validate(tx) {
    const balance = await getBalance(tx.from);
    if (balance.lt(tx.value)) {
      throw new Error('Insufficient balance');
    }
    return super.validate(tx);
  }
}

class GasValidator extends Validator {
  async validate(tx) {
    const estimatedGas = await estimateGas(tx);
    if (tx.gasLimit.lt(estimatedGas)) {
      throw new Error('Gas too low');
    }
    return super.validate(tx);
  }
}

// Usage example
const validatorChain = new BalanceValidator()
  .setNext(new GasValidator());

try {
  await validatorChain.validate(tx);
  sendTransaction(tx);
} catch (error) {
  showError(error.message);
}

Command Pattern and Batch Transactions

Blockchain batch operations require atomic execution. The command pattern encapsulates operation details:

class BlockchainCommand {
  constructor(execute, undo) {
    this.execute = execute;
    this.undo = undo;
    this.executed = false;
  }
}

class BatchTransaction {
  constructor() {
    this.commands = [];
  }

  add(command) {
    this.commands.push(command);
  }

  async execute() {
    const executedCommands = [];
    try {
      for (const cmd of this.commands) {
        await cmd.execute();
        executedCommands.push(cmd);
        cmd.executed = true;
      }
    } catch (error) {
      for (const cmd of executedCommands.reverse()) {
        if (cmd.executed && cmd.undo) {
          await cmd.undo();
        }
      }
      throw error;
    }
  }
}

// Usage example
const batch = new BatchTransaction();
batch.add(new BlockchainCommand(
  () => contract.approve(spender, amount),
  () => contract.approve(spender, 0)
));
batch.add(new BlockchainCommand(
  () => contract.transferFrom(sender, recipient, amount)
));
await batch.execute();