import { http, createConfig, createStorage } from '@wagmi/vue';
import { baseSepolia } from '@wagmi/vue/chains';
import { coinbaseWallet, walletConnect } from '@wagmi/vue/connectors';
import { defineChain } from 'viem';

const LOCAL_RPC_URL = import.meta.env.VITE_LOCAL_RPC_URL ?? '/rpc/anvil';

const kraikenLocalFork = defineChain({
  id: 31337,
  name: 'Kraiken Local Fork',
  network: 'kraiken-local',
  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
  rpcUrls: {
    default: { http: [LOCAL_RPC_URL] },
    public: { http: [LOCAL_RPC_URL] },
  },
  blockExplorers: {
    default: { name: 'Local Explorer', url: '' },
  },
  testnet: true,
});

export const config = createConfig({
  chains: [kraikenLocalFork, baseSepolia],
  storage: createStorage({ storage: window.localStorage }),

  connectors: [
    walletConnect({
      projectId: 'd8e5ecb0353c02e21d4c0867d4473ac5',
      metadata: {
        name: 'Kraiken',
        description: 'Connect your wallet with Kraiken',
        url: 'https://kraiken.eth.limo',
        icons: [''],
      },
    }),
    coinbaseWallet({
      appName: 'Kraiken',
      darkMode: true,
      preference: {
        options: 'all',
        telemetry: false,
      },
    }),
  ],
  transports: {
    [kraikenLocalFork.id]: http(LOCAL_RPC_URL),
    [baseSepolia.id]: http(),
  },
});

if (typeof window !== 'undefined' && config.state.chainId !== kraikenLocalFork.id) {
  config.setState(state => ({ ...state, chainId: kraikenLocalFork.id }));
}