Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: upgrade Fuel frontend packages #2077

Merged
merged 15 commits into from
Apr 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion .changeset/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"demo-typegen",
"@fuel-ts/docs-snippets",
"template-nextjs",
"create-fuels-counter-guide"
"create-fuels-counter-guide",
"demo-wallet-sdk-react"
]
}
5 changes: 5 additions & 0 deletions .changeset/lemon-rules-chew.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"create-fuels": minor
---

chore: upgrade Fuel frontend packages
2 changes: 1 addition & 1 deletion .github/workflows/pr-release.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ jobs:
name: "Release PR to npm"
runs-on: ubuntu-latest
# comment out if:false to enable release PR to npm
if: false
# if: false
permissions: write-all
steps:
- name: Checkout
Expand Down
6 changes: 4 additions & 2 deletions apps/create-fuels-counter-guide/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@
"postbuild": "run-s fuels:build original:build"
},
"dependencies": {
"@fuel-wallet/react": "0.15.2",
"dotenv": "^16.4.5",
"@fuels/connectors": "^0.2.2",
"@fuels/react": "^0.18.1",
"fuels": "workspace:*",
"@tanstack/react-query": "^5.29.2",
"dotenv": "^16.4.5",
"next": "14.0.1",
"react": "^18.2",
"react-dom": "^18.2",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import toast, { Toaster } from "react-hot-toast";
import { Link } from "./Link";
import { Button } from "./Button";
import { NODE_URL } from "@/lib";
import { useConnectUI, useDisconnect } from "@fuel-wallet/react";
import { useConnectUI, useDisconnect } from "@fuels/react";
import { WalletDisplay } from "./WalletDisplay";
import { useBrowserWallet } from "@/hooks/useBrowserWallet";
import { useActiveWallet } from "@/hooks/useActiveWallet";
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { AppWallet } from "@/lib";
import { useIsConnected, useNetwork, useWallet } from "@fuel-wallet/react";
import { BN, WalletLocked } from "fuels";
import { useIsConnected, useNetwork, useWallet } from "@fuels/react";
import { Account, BN } from "fuels";
import { useCallback, useState } from "react";
import useAsync from "react-use/lib/useAsync";

Expand All @@ -10,7 +10,7 @@ interface BrowserWallet extends AppWallet {
}

export const useBrowserWallet: () => BrowserWallet = () => {
const { wallet }: { wallet: WalletLocked } = useWallet();
const { wallet } = useWallet();
const [browserWalletBalance, setBrowserWalletBalance] = useState<BN>();
const { isConnected } = useIsConnected();
const { network } = useNetwork();
Expand All @@ -29,7 +29,7 @@ export const useBrowserWallet: () => BrowserWallet = () => {
}, [wallet]);

return {
wallet,
wallet: wallet || undefined,
walletBalance: browserWalletBalance,
refreshWalletBalance: refreshBrowserWalletBalance,
isConnected,
Expand Down
10 changes: 8 additions & 2 deletions apps/create-fuels-counter-guide/src/lib.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import { BN, WalletLocked, WalletUnlocked } from 'fuels';
import { Account, BN } from 'fuels';

export const NODE_URL = `http://127.0.0.1:${
process.env.NEXT_PUBLIC_FUEL_NODE_PORT || 4000
}/graphql`;

/**
* Enable the Fuel dev connector.
* @see {@link https://docs.fuel.network/docs/wallet/dev/getting-started/#using-default-connectors}
*/
export const ENABLE_FUEL_DEV_CONNECTOR = process.env.NEXT_PUBLIC_ENABLE_FUEL_DEV_CONNECTOR === 'true';

export interface AppWallet {
wallet?: WalletLocked | WalletUnlocked;
wallet?: Account;
walletBalance?: BN;
refreshWalletBalance?: () => Promise<void>;
}
33 changes: 27 additions & 6 deletions apps/create-fuels-counter-guide/src/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,35 @@
import { Layout } from "@/components/Layout";
import "@/styles/globals.css";
import { FuelProvider } from "@fuel-wallet/react";
import { FuelProvider } from "@fuels/react";
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import type { FuelConfig } from "fuels";
import { defaultConnectors } from "@fuels/connectors";
import { ENABLE_FUEL_DEV_CONNECTOR } from "@/lib";
import React, { useEffect } from "react";

const queryClient: QueryClient = new QueryClient()

export default function App({ Component, pageProps }: AppProps) {
let fuelConfig: FuelConfig = {};

useEffect(() => {
fuelConfig = {
connectors: defaultConnectors({
devMode: ENABLE_FUEL_DEV_CONNECTOR
})
}
}, [])

return (
<FuelProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</FuelProvider>
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<FuelProvider fuelConfig={fuelConfig}>
<Layout>
<Component {...pageProps} />
</Layout>
</FuelProvider>
</QueryClientProvider>
</React.StrictMode>
);
}
4 changes: 3 additions & 1 deletion apps/demo-wallet-sdk-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
"lint": "next lint"
},
"dependencies": {
"@fuel-wallet/react": "0.15.2",
"@fuels/connectors": "^0.2.2",
"@fuels/react": "^0.18.1",
"@tanstack/react-query": "^5.29.2",
"fuels": "workspace:*",
"next": "14.1.0",
"react": "^18",
Expand Down
21 changes: 16 additions & 5 deletions apps/demo-wallet-sdk-react/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,24 @@
import "@/styles/globals.css";
import { FuelProvider } from "@fuel-wallet/react";
// #region wallet-sdk-react-provider
import { defaultConnectors } from '@fuels/connectors';
import { FuelProvider } from "@fuels/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { AppProps } from "next/app";
import React from "react";

const queryClient = new QueryClient();

// #region wallet-sdk-react-provider
export default function App({ Component, pageProps }: AppProps) {
return (
<FuelProvider>
<Component {...pageProps} />
</FuelProvider>
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<FuelProvider fuelConfig={{ connectors: defaultConnectors({ devMode: true }) }}>
<Component { ...pageProps } />
</FuelProvider>
</QueryClientProvider>
</React.StrictMode>
);
}
// #endregion wallet-sdk-react-provider


2 changes: 1 addition & 1 deletion apps/demo-wallet-sdk-react/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
useConnectors,
useDisconnect,
useIsConnected,
} from "@fuel-wallet/react";
} from "@fuels/react";
import { useState } from "react";

export default function Home() {
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/src/guide/cookbook/wallet-sdk-and-react-hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ Next, we will install the Fuel Wallet React SDK and the Fuel TypeScript SDK.
::: code-group

```sh [npm]
npm install @fuel-wallet/react fuels@0.73.0
npm install fuels @fuels/connectors @fuels/react @tanstack/react-query
```

```sh [pnpm]
pnpm add @fuel-wallet/react fuels@0.73.0
petertonysmith94 marked this conversation as resolved.
Show resolved Hide resolved
pnpm add fuels @fuels/connectors @fuels/react @tanstack/react-query
```

:::
Expand Down