diff --git a/docs/hooks/useDataTransaction.md b/docs/hooks/useDataTransaction.md index 424767b..e08b140 100644 --- a/docs/hooks/useDataTransaction.md +++ b/docs/hooks/useDataTransaction.md @@ -2,7 +2,6 @@ sidebar_position: 11 --- - # `useDataTransaction` Use this hook to fetch, process, and monitor blockchain transaction data from Starknet for a specific block number. It calculates various statistics such as transactions per second (TPS), gas prices, average transaction fees in USD, and many more. @@ -21,15 +20,14 @@ Use this hook to fetch, process, and monitor blockchain transaction data from St ## Usage -This example fetches and monitors data for the specified block, +This example fetches and monitors data for the specified block, allowing you to display metrics or manage the data fetching state dynamically. ```tsx import { useDataTransaction } from "~~/hooks/scaffold-stark/useDataTransaction"; const DataTransaction = ({ blockNumber }: { blockNumber: number }) => { - const { blockData, error, refetch, isEnabled, toggleFetching } = - useDataTransaction(blockNumber); + const { blockData, error, refetch, isEnabled, toggleFetching } = useDataTransaction(blockNumber); return (
@@ -42,14 +40,11 @@ const DataTransaction = ({ blockNumber }: { blockNumber: number }) => {

TPS: {blockData.tps}

Gas Price (ETH): {blockData.gasprice}

Average Fee (USD): {blockData.averageFeeUSD}

- ) : (

Loading block data...

)} - +
); @@ -70,6 +65,7 @@ const DataTransaction = ({ blockNumber }: { blockNumber: number }) => { The hook returns an object with the following properties: ### 1. `blockData: BlockData | null` + The processed data for the specified block, including: - **`transaction`**: Total number of transactions in the block. @@ -88,16 +84,19 @@ The processed data for the specified block, including: - **`averageFeeUSD`**: Average transaction fee in USD. ### 2. `error: string | null` + An error message if the data fetching fails. ### 3. `refetch: () => void` + A function to refetch the data. ### 4. `isEnabled: boolean` + Indicates whether the automatic fetching is enabled. ### 5. `toggleFetching: () => void` + A function to toggle the automatic fetching of data. --- - diff --git a/docs/recipes/AddControllerConnector.md b/docs/recipes/AddControllerConnector.md new file mode 100644 index 0000000..14e49ec --- /dev/null +++ b/docs/recipes/AddControllerConnector.md @@ -0,0 +1,173 @@ +--- +sidebar_position: 6 +title: Integrating Cartridge Controller +description: Comprehensive guide to integrating the Cartridge Controller in Scaffold-Stark +--- + +# Integrating the Cartridge Controller + +## Overview + +This guide provides a complete implementation for integrating the [Cartridge Controller](https://docs.cartridge.gg/controller/overview) into your Scaffold-Stark project, enabling advanced wallet connections. + +## Prerequisites and Deployment Considerations + +### Important Deployment Requirements + +⚠️ **Crucial Notes Before Implementation**: + +**Local Development Limitations** + +- The Cartridge Controller cannot be used in localhost environments without relying on ngrok or other alternatives. Additionally, developers must use Katana or [Slot](https://docs.cartridge.gg/slot/getting-started). +- This guide focuses only on Sepolia and Mainnet deployments and integration with Vercel. + +## Implementation Guide + +### Step 1: Add Controller Dependency + +Update your `packages/nextjs/package.json` to include the Cartridge dependency: + +
+Add dependencies controller + +```json title="nextjs/package.json" +{ + "dependencies": { + "@cartridge/connector": "^0.5.7" + } +} +``` + +
+ +### Step 2: Create Controller Configuration + +Create a new file `index.tsx` in `nextjs/services/web3/controller/index.tsx`. You can also review different configurations in the [Cartridge Controller documentation](https://docs.cartridge.gg/controller/overview) to understand how to integrate [policies or sessions](https://docs.cartridge.gg/controller/sessions) and other powerful features, especially for gaming or UX improvements. + +
+View full code + +```tsx title="utils/scaffold-stark/controller.tsx" +"use client"; + +import { Chain } from "@starknet-react/chains"; +import { jsonRpcProvider, publicProvider, starknetChainId, InjectedConnector } from "@starknet-react/core"; +import ControllerConnector from "@cartridge/connector/controller"; +import { constants } from "starknet"; +import scaffoldConfig from "~~/scaffold.config"; +import { SessionPolicies } from "@cartridge/controller"; + +// Standard contract addresses +export const ETH_CONTRACT_ADDRESS = "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7"; +export const STRK_CONTRACT_ADDRESS = "0x04718f5a0Fc34cC1AF16A1cdee98fFB20C31f5cD61D6Ab07201858f4287c938D"; + +// Function to check for devnet networks +const containsDevnet = (networks: readonly Chain[]) => { + return networks.some(it => it.network === "devnet"); +}; + +// Provider configuration based on Scaffold settings +export const getProvider = () => { + if (scaffoldConfig.rpcProviderUrl === "" || containsDevnet(scaffoldConfig.targetNetworks)) { + return publicProvider(); + } + + return jsonRpcProvider({ + rpc: () => ({ + nodeUrl: scaffoldConfig.rpcProviderUrl, + chainId: starknetChainId(scaffoldConfig.targetNetworks[0].id), + }), + }); +}; + +// Supported chains configuration +const chains = [ + { + id: constants.StarknetChainId.SN_SEPOLIA, + name: "Sepolia", + rpcUrl: process.env.NEXT_PUBLIC_RPC_SEPOLIA ?? "https://api.cartridge.gg/x/starknet/sepolia", + }, + { + id: constants.StarknetChainId.SN_MAIN, + name: "Mainnet", + rpcUrl: process.env.NEXT_PUBLIC_RPC_MAINNET ?? "https://api.cartridge.gg/x/starknet/mainnet", + }, +]; + +// Session policies for contracts +const policies: SessionPolicies = { + contracts: { + [ETH_CONTRACT_ADDRESS]: { + methods: [ + { name: "approve", entrypoint: "approve" }, + { name: "transfer", entrypoint: "transfer" }, + ], + }, + [STRK_CONTRACT_ADDRESS]: { + methods: [ + { name: "approve", entrypoint: "approve" }, + { name: "transfer", entrypoint: "transfer" }, + ], + }, + }, +}; + +// Create Cartridge Controller instance +export const controllerInstance = new ControllerConnector({ + policies, + defaultChainId: constants.StarknetChainId.SN_SEPOLIA, + chains: chains, + url: process.env.NEXT_PUBLIC_KEYCHAIN_DEPLOYMENT_URL, + profileUrl: process.env.NEXT_PUBLIC_PROFILE_DEPLOYMENT_URL, +}) as unknown as InjectedConnector; +``` + +
+ +### Step 3: Modify Connectors Configuration + +Update `services/web/connectors.tsx` to include the Cartridge Controller instance. + +
+View changes + +```tsx title="nextjs/services/web/connectors.tsx" +import { controllerInstance } from "~~/services/web3/controller/index"; + +// Add Cartridge Controller for non-devnet networks +if (!targetNetworks.some(network => (network.network as string) === "devnet")) { + connectors.push(controllerInstance as unknown as InjectedConnector); +} +``` + +
+ +### Step 4: Configure Deployment Settings + +#### Update Network Configuration + +Modify `scaffold.config.ts` to target `sepolia` or `mainnet`: + +```typescript title="scaffold.config.ts" +const scaffoldConfig = { + targetNetworks: [chains.sepolia], +}; +``` + +#### Prepare for Deployment + +To deploy your application, install Vercel and log in: + +```bash +yarn install -g vercel +vercel login +yarn vercel +``` + +If you want to deploy without pre-checks, use: + +```bash +yarn vercel:yolo +``` + +For more details, refer to the [Vercel deployment guide](https://docs.scaffoldstark.com/deploying/deploy-nextjs-app). If you need to disable type linting checks, see [Disabling Type Checks](https://docs.scaffoldstark.com/disable-type-linting-error-checks).