Thirdweb and Anchor Initiate Solana Program

initsolanaprogram.tsx

/* Initiate Solana Program with React */

/* With Thirdweb */
const [program, setProgram] = useState<Program<Dungeon3>>();

// TypeError: Class extends value undefined is not a constructor or null with Vite. Requires Polyfills, check Metaplex examples.
const sdk = useMemo(() => {
  if (wallet.connected) {
    const sdk = ThirdwebSDK.fromNetwork("devnet");
    sdk.wallet.connect(wallet);
    return sdk;
  }
}, [wallet]);

useEffect(() => {
  load();

  async function load() {
    if (sdk) {
      const { program }: { program: Program<Dungeon3> } =
        (await sdk.getProgram(PROGRAM_ID.toBase58(), IDL)) as any;
	  setProgram(program);
    }
  }
}, [sdk]);

/* With Anchor */
const { connection } = useConnection();
const provider = useMemo(() => {
  const aWallet = wallet as any as Wallet;
  const provider = new AnchorProvider(connection, aWallet, {});
  return provider;
}, [wallet, connection]);

const program: Program<Dungeon3> | undefined = useMemo(
  () => new Program(IDL as Idl, PROGRAM_ID, provider) as any,
  [wallet, connection]
);