Compatible with TypeScript

[just-a-normal-human]

Hey man, Thanks for the guide!

I'm having some trouble integrating the code with TypeScript, hoping you could help.

In the return statement of MetaMaskProvider

return <MetaMaskContext.Provider value={values}>{children}</MetaMaskContext.Provider>

I get error saying

Type '{ isActive: boolean; account: string | null | undefined; isLoading: boolean; connect: () => Promise<void>; disconnect: () => Promise<void>; }' is not assignable to type 'null'.ts(2322)
index.d.ts(338, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<null>'
(JSX attribute) React.ProviderProps<null>.value: null

in my index.d.ts i have

    // Context via RenderProps
    interface ProviderProps<T> {
        value: T;
        children?: ReactNode | undefined;
    }

When I import useMetaMaskProvider

 const { connect, disconnect, isActive, account, shouldDisable } = useMetaMask()

I get error on all variables saying the same:

Property 'connect' does not exist on type 'null'.ts(2339)
const connect: any

Do you have any tips on how I could modify the code so its useable with TypeScript?

Thanks!

[just-a-normal-human]

I can remove the first error by changing

return <MetaMaskContext.Provider value={values}>{children}</MetaMaskContext.Provider>

to

return <MetaMaskContext.Provider {...values}>{children}</MetaMaskContext.Provider>

and commenting out the value in index.d.ts , (not sure if this is good idea though)

    // Context via RenderProps
    interface ProviderProps<T> {
        //value: T;
        children?: ReactNode | undefined;
    }

But in any case that doesn't solve the second error.

[blakewood84]

Sorry @just-a-normal-human I haven't done this yet in TypeScript but I am assuming that your second error is being produced because the connect function is not being passed correctly... Not too sure, but that seems to be what the second error is saying. You're getting a null value from this.