switch out protocols

index.tsx

import { useState, useCallback, useRef, useEffect } from "react";
import { useSubmit } from "@remix-run/react";

import { Select } from "~/components/SelectMenu";
import { LogoIcon } from "~/components/LogoIcon";
import type { Chain } from "~/types";
import { getChainClient } from "~/chain-clients";

const options = [
  { name: "-- Select Value Below --", value: "" },
  { name: "Flow", value: "flow" },
  { name: "osmosis", value: "osmosis" },
  { name: "EVM Chains", value: "evm" },
];

export default function Index() {
  const [protocol, setProtocol] = useState(options[0]);
  const [network, setNetwork] = useState("mainnet");
  const submit = useSubmit();
  const client = useRef(getChainClient(protocol.value as Chain));

  const handleProtocolChange = useCallback(
    async (value: string) => {
      if (value) {
        const user = await client.current.login();
        if (user.loggedIn) {
          submit(null, {
            method: "get",
            action: `/${value}/${network}/${user.address}`,
          });
        }
      }
    },
    [client, network, submit]
  );

  useEffect(() => {
    if (protocol.value) {
      client.current = getChainClient(protocol.value as Chain);
      handleProtocolChange(protocol.value);
    }
  }, [handleProtocolChange, protocol]);

  const handleNetworkChange = useCallback(
    async (value: string) => {
      const user = await client.current.getUser();
      if (user.loggedIn && network) {
        await client.current.logout();
      }
      setNetwork(value);
    },
    [client, network]
  );

  return (
    <main className="">
      <header className="relative px-8 sm:flex sm:items-center sm:justify-between sm:pb-4 sm:pt-10">
        <div className="self-center">
          <LogoIcon className="h-6 w-6 fill-gray-100" />
        </div>
        <div className="self-center uppercase text-blue-500 drop-shadow-md">
          <label className="text-black-500 relative block  inline-block text-left uppercase drop-shadow-md">
            <select onChange={(e) => handleNetworkChange(e.target.value)}>
              <option value="mainnet">Mainnet</option>
              <option value="testnet">Testnet</option>
            </select>
          </label>
        </div>
      </header>
      <section className="pt-10">
        <div className="relative">
          <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <h1 className="drop-shadow- text-center text-5xl font-normal drop-shadow-2xl sm:text-6xl">
              <span className="block uppercase">Flipside Payments</span>
            </h1>
          </div>
        </div>
        <div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
          <h4>Step 1 - Choose a protocol then a wallet</h4>
        </div>
        <div className="mx-auto my-10 w-[20%] text-black">
          <Select
            placeholder="Placeholder"
            name="small"
            size="sm"
            options={options}
            getOptionName={(o) => o?.name ?? ""}
            getOptionValue={(o) => o?.value ?? ""}
            onChange={(opt) => {
              setProtocol(opt);
            }}
            value={protocol}
          />
        </div>
      </section>
    </main>
  );
}