How to integrate browser wallet extension into react app

General
1

i am trying to integrate the browser wallet into a react front end (following the fuel wallet API docs - API | Fuel Wallet). The property ‘fuel’ can not be accessed with window.fuel.connect();

imports are

import Fuel from ‘@fuel-ts/wallet’;
import { Wallet } from “fuels”;

i have included the relevant fuel sdk imports in the tsconfig.json file and installed the relevant dependencies.

Any ideas?

8 Likes
2

I have some problem with you. No body know :slight_smile:

4 Likes
3

Hi,

To help us figure out and solve your problem could you tell us what version of the @fuel-ts/sdk you are using?

3 Likes
4

The window.fuel object can be undefined for a couple of milliseconds before it’s accessible. This happens because the fuel injection happens after the page scripts, like your react app, are loaded.

You can create a hook to wrap up this and solve the issue. You can find some examples here on how to create: fuels-wallet/useFuel.tsx at master · FuelLabs/fuels-wallet · GitHub

5 Likes
5

v0.29.1, sorry for the late response

6

it still is not accessible.

“Property ‘fuel’ does not exist on type ‘Window & typeof globalThis’.”

7

Sorry I asked for the version of the wrong dependency. What is your version of @fuel-wallet/sdk ? Also could you send your tsconfig just so we can double check it

8

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.