diff --git a/.changeset/perfect-suits-design.md b/.changeset/perfect-suits-design.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/perfect-suits-design.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/apps/docs/.vitepress/config.ts b/apps/docs/.vitepress/config.ts index a2242d060e4..561b97400bc 100644 --- a/apps/docs/.vitepress/config.ts +++ b/apps/docs/.vitepress/config.ts @@ -40,6 +40,10 @@ export default defineConfig({ text: 'Introduction', link: '/', items: [ + { + text: 'Getting Started', + link: '/getting-started', + }, { text: 'Glossary', link: '/glossary', diff --git a/apps/docs/src/getting-started.md b/apps/docs/src/getting-started.md new file mode 100644 index 00000000000..1c05a900ff4 --- /dev/null +++ b/apps/docs/src/getting-started.md @@ -0,0 +1,63 @@ +# Getting Started with Fuels-ts + +This guide will walk you through the process of setting up and using the Fuels-ts library in your front-end project. + +## Installing the Fuels-ts Library + +To begin, you need to add the `fuels` dependency to your project. You can do this using the following command: + +::: code-group + +```sh [npm] +npm install fuels --save +``` + +```sh [yarn] +yarn add fuels +``` + +```sh [pnpm] +pnpm add fuels +``` + +::: + +## Creating a React Component to Connect to the Blockchain + +With the Fuels dependency set up, you can now create a React component that will connect to the Fuel provider and retrieve the base asset balance for a given wallet address. Here's an example of how to do this: + + + +```tsx +import { BN, Provider, Wallet } from "fuels"; +import { useEffect, useState } from "react"; + +function App() { + const [balance, setBalance] = useState(0); + + const provider = new Provider("https://beta-3.fuel.network/graphql"); + const myWallet = Wallet.fromAddress("0x...", provider); + + useEffect(() => { + myWallet.getBalances().then((data) => { + setBalance(new BN(data[0].amount).toNumber()); + }); + }, []); + + return