# Frontend Guide Draft ###### tags: `FuelJourney` ## Introduction This tutorial uses React, but the SDK works with any TypeScript application. ## Dev Setup Create a new react app with typescript Install the fuels sdk and wallet: ```bash npm install fuels @fuel-wallet/sdk ``` ## Contract typegen Make sure you do this in the same parent folder as your contract you can easily grab contract info for typegen. The command below assumes your contract is in a folder called `contract` and the contract has been built with `forc build`. ``` npx fuels typegen -i ../contract/out/debug/*-abi.json -o ./src/contracts ``` ## Wallet Hooks We plan on publishing official hooks for react so you can just import them, but for now you can copy them into your app. Create a new folder in your `src` folder called `hooks`. Create a new file in the `hooks` folder called `useFuel.tsx`, and add the code below: https://github.com/sarahschwartz/intro-to-sway/blob/main/frontend/src/hooks/useFuel.tsx Next, create a file called `useIsConnected.tsx`, and add the code below: https://github.com/sarahschwartz/intro-to-sway/blob/main/frontend/src/hooks/useIsConnected.tsx ## App setup Delete all of the code in `App.tsx` except for the main `App` function. Add the imports below https://github.com/sarahschwartz/intro-to-sway/blob/main/frontend/src/App.tsx#L1-L9 Add your contract id https://github.com/sarahschwartz/intro-to-sway/blob/main/frontend/src/App.tsx#L11 In the `App` function, add state variables for `accounts`, `provider`, and `active`: https://github.com/sarahschwartz/intro-to-sway/blob/main/frontend/src/App.tsx#L14-L16 Use the hooks you added earlier to define `isConnected` and `Fuel`. https://github.com/sarahschwartz/intro-to-sway/blob/main/frontend/src/App.tsx#L17-L18 Add `useEffect` to get the accounts and provider. https://github.com/sarahschwartz/intro-to-sway/blob/main/frontend/src/App.tsx#L20-L28 Add `useMemo` to get a contract instance with the user's wallet. https://github.com/sarahschwartz/intro-to-sway/blob/main/frontend/src/App.tsx#L30-L40 In the returned `div`, add a header for the site. https://github.com/sarahschwartz/intro-to-sway/blob/main/frontend/src/App.tsx#L44-L46 Add a nav: https://github.com/sarahschwartz/intro-to-sway/blob/main/frontend/src/App.tsx#L47-L52