Wagmi Partner Integration

import { defineChain } from 'viem';
import { createConfig, http } from 'wagmi';

export const hyperEVM = defineChain({
  id: 999,
  name: 'HyperEVM',
  nativeCurrency: { name: 'HYPE', symbol: 'HYPE', decimals: 18 },
  rpcUrls: { default: { http: ['https://rpc.hyperliquid.xyz/evm'] } },
  blockExplorers: {
    default: { name: 'HyperEVM Scan', url: 'https://hyperevmscan.io' },
  },
});

export const config = createConfig({
  chains: [hyperEVM],
  transports: { [hyperEVM.id]: http() },
});

import { useState } from 'react';
import { formatUnits, parseUnits } from 'viem';
import { useAccount, useConnect } from 'wagmi';
import { injected } from 'wagmi/connectors';
import { useAkkaQuote } from './hooks/useAkkaQuote';
import { useAkkaSwap } from './hooks/useAkkaSwap';

const CHAIN_ID = 999;
const HYPE = '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee';
const UBTC = '0xB8CE59FC3717ada4C02eaDF9682A9e934F625ebb';

export function SwapPage() {
  const { address, isConnected } = useAccount();
  const { connect } = useConnect();
  const [input, setInput] = useState('');
  const amount = input ? parseUnits(input, 18).toString() : '0';

  const display = useAkkaQuote({
    chainId: CHAIN_ID,
    src: HYPE,
    dst: UBTC,
    amount,
    payer: address,
    slippage: 1,
  });
  const swap = useAkkaSwap({
    chainId: CHAIN_ID,
    src: HYPE,
    dst: UBTC,
    amount,
    slippage: 1,
  });

  if (!isConnected) {
    return (
      <button onClick={() => connect({ connector: injected() })}>
        Connect wallet
      </button>
    );
  }

  return (
    <div>
      <input
        type="number"
        value={input}
        placeholder="HYPE amount"
        onChange={(event) => setInput(event.target.value)}
      />
      {display.loading && <p>Finding route…</p>}
      {display.quote && (
        <p>
          Minimum received:{' '}
          {formatUnits(BigInt(display.quote.minAmountOut), 18)} UBTC
        </p>
      )}
      <button
        onClick={swap.execute}
        disabled={
          !display.quote ||
          ['quoting', 'approving', 'swapping', 'confirming'].includes(
            swap.status,
          )
        }
      >
        {swap.status === 'idle' ? 'Swap' : swap.status}
      </button>
      {swap.error && <p>{swap.error}</p>}
      {swap.txHash && (
        <a href={`https://hyperevmscan.io/tx/${swap.txHash}`}>
          View transaction
        </a>
      )}
    </div>
  );
}