-
-
- Looking for a starter?
-
-
- Try our Next.js starter template with Flow React SDK
- pre-configured and ready to be used.
-
+
+
+
+
+
+ Looking for a starter?
+
+
+ Try our Next.js starter template with Flow React SDK
+ pre-configured and ready to be used.
+
+
+
+
+ View Starter
+
+
+
+
+
+
+
+
+ Building for mobile?
+
+
+ Try our Expo starter template with Flow React Native SDK
+ pre-configured and ready to be used.
+
+
-
- View Starter
-
-
+ View Starter
+
+
+
diff --git a/packages/fcl-react-native/src/client.ts b/packages/fcl-react-native/src/client.ts
index 6bb9382ad..f56d692ce 100644
--- a/packages/fcl-react-native/src/client.ts
+++ b/packages/fcl-react-native/src/client.ts
@@ -6,6 +6,7 @@ import {
import {getAsyncStorage} from "./utils/react-native/storage"
import {loadFclWc} from "./walletconnect/loader"
import {DISCOVERY_RN_METHOD} from "./utils/react-native/constants"
+import {disconnectWalletConnect} from "./walletconnect/client"
const PLATFORM = "react-native"
@@ -31,9 +32,9 @@ export interface FlowClientConfig
* Creates a Flow client instance with authentication, transaction, and query capabilities for React Native.
*
* @param params Configuration object for the Flow client
- * @returns A promise that resolves to a Flow client object with many methods for interacting with the Flow blockchain
+ * @returns A Flow client object with many methods for interacting with the Flow blockchain
*/
-export async function createFlowClient(params: FlowClientConfig) {
+export function createFlowClient(params: FlowClientConfig) {
// TODO: Load into the global plugin registry for now. This should be
// refactored to use a plugin registry bound to the client instance in the future.
// Auto-load WalletConnect plugin when projectId is provided
@@ -71,7 +72,14 @@ export async function createFlowClient(params: FlowClientConfig) {
serviceOpenIdScopes: params.serviceOpenIdScopes,
})
+ // Create unauthenticate that also disconnects WalletConnect sessions
+ const unauthenticate = async () => {
+ fclCore.unauthenticate()
+ await disconnectWalletConnect()
+ }
+
return {
...fclCore,
+ unauthenticate,
}
}
diff --git a/packages/fcl-react-native/src/fcl-react-native.ts b/packages/fcl-react-native/src/fcl-react-native.ts
index 551973ebb..cca5dc058 100644
--- a/packages/fcl-react-native/src/fcl-react-native.ts
+++ b/packages/fcl-react-native/src/fcl-react-native.ts
@@ -1,3 +1,7 @@
+// Polyfill must be imported first
+// This provides crypto.getRandomValues for WalletConnect
+import "react-native-get-random-values"
+
export {
VERSION,
query,
@@ -76,7 +80,7 @@ import {
setIsReactNative,
} from "@onflow/fcl-core"
-import {getClient} from "./walletconnect/client"
+import {disconnectWalletConnect} from "./walletconnect/client"
// Get AsyncStorage instance when module loads
// This ensures storage is ready before any component subscribes to currentUser
@@ -93,32 +97,8 @@ export const mutate = getMutate(currentUser)
export const authenticate = (opts = {}) => currentUser().authenticate(opts)
export const unauthenticate = async () => {
- // First unauthenticate from FCL
currentUser().unauthenticate()
-
- // Then disconnect WalletConnect (both sessions and pairings for complete cleanup)
- try {
- const client = await getClient()
- if (!client) return
-
- const sessions = client.session.getAll()
- const pairings = client.core.pairing.pairings.getAll()
-
- // Disconnect all in parallel
- await Promise.allSettled([
- ...sessions.map((session: any) =>
- client.disconnect({
- topic: session.topic,
- reason: {code: 6000, message: "User disconnected"},
- })
- ),
- ...pairings.map((pairing: any) =>
- client.core.pairing.disconnect({topic: pairing.topic})
- ),
- ])
- } catch {
- // WC client not initialized or disconnect failed (safe to ignore)
- }
+ await disconnectWalletConnect()
}
export const reauthenticate = async (opts = {}) => {
diff --git a/packages/fcl-react-native/src/walletconnect/client.ts b/packages/fcl-react-native/src/walletconnect/client.ts
index 60571ad75..1acbd6f2b 100644
--- a/packages/fcl-react-native/src/walletconnect/client.ts
+++ b/packages/fcl-react-native/src/walletconnect/client.ts
@@ -151,3 +151,28 @@ export async function getClient() {
return client
})
}
+
+export async function disconnectWalletConnect(): Promise
{
+ try {
+ const client = await getClient()
+ if (!client) return
+
+ const sessions = client.session.getAll()
+ const pairings = client.core.pairing.pairings.getAll()
+
+ // Disconnect all in parallel
+ await Promise.allSettled([
+ ...sessions.map((session: any) =>
+ client.disconnect({
+ topic: session.topic,
+ reason: {code: 6000, message: "User disconnected"},
+ })
+ ),
+ ...pairings.map((pairing: any) =>
+ client.core.pairing.disconnect({topic: pairing.topic})
+ ),
+ ])
+ } catch {
+ // WC client not initialized or disconnect failed (safe to ignore)
+ }
+}
diff --git a/packages/fcl-react-native/src/walletconnect/service.ts b/packages/fcl-react-native/src/walletconnect/service.ts
index df187f515..5abb1c249 100644
--- a/packages/fcl-react-native/src/walletconnect/service.ts
+++ b/packages/fcl-react-native/src/walletconnect/service.ts
@@ -92,11 +92,18 @@ function determineWalletAppLink(
service: any,
storedWalletAppLink: string | null
): string {
- if (method === FLOW_METHODS.FLOW_AUTHN) {
- // For initial authn request, use service.uid
- return service.uid
+ const uid =
+ method === FLOW_METHODS.FLOW_AUTHN
+ ? service.uid
+ : storedWalletAppLink || service.uid
+
+ // Transform uid format (e.g., "frw#authz") to deeplink URL (e.g., "frw://authz")
+ // Service UIDs use # as separator but mobile deeplinks need ://
+ if (uid && uid.includes("#") && !uid.includes("://")) {
+ return uid.replace("#", "://")
}
- return storedWalletAppLink || service.uid
+
+ return uid
}
function injectSessionIntoPreAuthz(
diff --git a/packages/react-core/src/provider/FlowQueryClient.ts b/packages/react-core/src/provider/FlowQueryClient.tsx
similarity index 57%
rename from packages/react-core/src/provider/FlowQueryClient.ts
rename to packages/react-core/src/provider/FlowQueryClient.tsx
index 7059a9ade..34905a340 100644
--- a/packages/react-core/src/provider/FlowQueryClient.ts
+++ b/packages/react-core/src/provider/FlowQueryClient.tsx
@@ -1,4 +1,4 @@
-import {createContext, useContext} from "react"
+import React, {createContext, useContext, PropsWithChildren} from "react"
import {QueryClient} from "@tanstack/react-query"
export const FlowQueryClientContext = createContext(
@@ -14,3 +14,12 @@ export function useFlowQueryClient() {
}
return queryClient
}
+
+export function FlowQueryClientProvider({
+ queryClient,
+ children,
+}: PropsWithChildren<{queryClient: QueryClient}>) {
+ return (
+
+ )
+}
diff --git a/packages/react-sdk/src/provider/GlobalTransactionProvider.tsx b/packages/react-core/src/provider/GlobalTransactionProvider.tsx
similarity index 51%
rename from packages/react-sdk/src/provider/GlobalTransactionProvider.tsx
rename to packages/react-core/src/provider/GlobalTransactionProvider.tsx
index 9ebde4557..3de711146 100644
--- a/packages/react-sdk/src/provider/GlobalTransactionProvider.tsx
+++ b/packages/react-core/src/provider/GlobalTransactionProvider.tsx
@@ -1,23 +1,39 @@
-import {TransactionExecutionStatus} from "@onflow/typedefs"
import React, {createContext, useContext, useState, useEffect} from "react"
-import {useFlowClient} from "@onflow/react-core"
+import {TransactionExecutionStatus} from "@onflow/typedefs"
+import {useFlowClient} from "../hooks/useFlowClient"
interface GlobalTransactionContextValue {
- /** Check if a global transaction is currently running */
+ /** Current global transaction ID, or null if none */
globalTxId: string | null
- /** Set the global transaction running state */
+ /** Set the global transaction ID */
setGlobalTxId: (txId: string | null) => void
}
const GlobalTransactionContext =
createContext(null)
-export const useGlobalTransaction = (): GlobalTransactionContextValue => {
+/**
+ * Hook to access and manage the global transaction state.
+ *
+ * @throws Error if used outside of FlowProvider
+ *
+ * @example
+ * ```tsx
+ * const {globalTxId, setGlobalTxId} = useGlobalTransaction()
+ *
+ * // Start tracking a transaction
+ * setGlobalTxId(txId)
+ *
+ * // Check if a transaction is in progress
+ * if (globalTxId) {
+ * console.log("Transaction in progress:", globalTxId)
+ * }
+ * ```
+ */
+export function useGlobalTransaction(): GlobalTransactionContextValue {
const context = useContext(GlobalTransactionContext)
if (!context) {
- throw new Error(
- "useGlobalTransaction must be used within a GlobalTransactionProvider"
- )
+ throw new Error("useGlobalTransaction must be used within a FlowProvider")
}
return context
}
@@ -26,27 +42,27 @@ interface GlobalTransactionProviderProps {
children: React.ReactNode
}
-export const GlobalTransactionProvider: React.FC<
- GlobalTransactionProviderProps
-> = ({children}) => {
+/**
+ * Provider that tracks a single global transaction.
+ * Automatically clears the transaction ID when the transaction is executed.
+ */
+export function GlobalTransactionProvider({
+ children,
+}: GlobalTransactionProviderProps) {
const [txId, setTxId] = useState(null)
const fcl = useFlowClient()
useEffect(() => {
if (!txId) return
- // Subscribe to transaction updates
const unsub = fcl.tx(txId).subscribe(
- txStatus => {
+ (txStatus: {status: number}) => {
if (txStatus.status >= TransactionExecutionStatus.EXECUTED) {
- // Transaction has been executed, reset the global transaction ID
setTxId(null)
}
},
- error => {
- // Handle subscription errors
+ (error: Error) => {
console.error("Transaction status subscription error:", error)
- // Clear the transaction ID to prevent button from staying in processing state
setTxId(null)
}
)
@@ -56,7 +72,7 @@ export const GlobalTransactionProvider: React.FC<
}
}, [txId])
- const globalTransactionValue: GlobalTransactionContextValue = {
+ const value: GlobalTransactionContextValue = {
globalTxId: txId,
setGlobalTxId: (newTxId: string | null) => {
if (newTxId !== txId) {
@@ -66,7 +82,7 @@ export const GlobalTransactionProvider: React.FC<
}
return (
-
+
{children}
)
diff --git a/packages/react-core/src/provider/index.ts b/packages/react-core/src/provider/index.ts
index 8416d7434..0dabce0a4 100644
--- a/packages/react-core/src/provider/index.ts
+++ b/packages/react-core/src/provider/index.ts
@@ -1 +1,9 @@
-export {useFlowQueryClient, FlowQueryClientContext} from "./FlowQueryClient"
+export {
+ useFlowQueryClient,
+ FlowQueryClientContext,
+ FlowQueryClientProvider,
+} from "./FlowQueryClient"
+export {
+ useGlobalTransaction,
+ GlobalTransactionProvider,
+} from "./GlobalTransactionProvider"
diff --git a/packages/react-core/src/utils/address.ts b/packages/react-core/src/utils/address.ts
new file mode 100644
index 000000000..7c72af36c
--- /dev/null
+++ b/packages/react-core/src/utils/address.ts
@@ -0,0 +1,4 @@
+export const truncateAddress = (address: string): string => {
+ if (!address) return ""
+ return `${address.slice(0, 6)}...${address.slice(-4)}`
+}
diff --git a/packages/react-core/src/utils/index.ts b/packages/react-core/src/utils/index.ts
index b5a7897ed..d6066eac3 100644
--- a/packages/react-core/src/utils/index.ts
+++ b/packages/react-core/src/utils/index.ts
@@ -1,2 +1,3 @@
+export * from "./address"
export * from "./deepEqual"
export * from "./flowscan"
diff --git a/packages/react-native-sdk/.babelrc b/packages/react-native-sdk/.babelrc
new file mode 100644
index 000000000..f723d8bb9
--- /dev/null
+++ b/packages/react-native-sdk/.babelrc
@@ -0,0 +1,7 @@
+{
+ "presets": [
+ "@babel/preset-typescript",
+ "@babel/preset-env",
+ ["@babel/preset-react", {"runtime": "automatic"}]
+ ]
+}
diff --git a/packages/react-native-sdk/README.md b/packages/react-native-sdk/README.md
new file mode 100644
index 000000000..77c3397a8
--- /dev/null
+++ b/packages/react-native-sdk/README.md
@@ -0,0 +1,63 @@
+# @onflow/react-native-sdk
+
+A React Native library that provides hooks for interacting with the Flow blockchain. It helps you authenticate users, run Cadence scripts and transactions, listen to events, and manage network configuration directly from your components. Fully compatible with Expo.
+
+This package provides a comparable API to [@onflow/react-sdk](https://www.npmjs.com/package/@onflow/react-sdk) for React Native applications. See the hooks in action in the [React SDK Playground](https://react.flow.com).
+
+## 🔧 Installation
+
+```bash
+npm install @onflow/react-native-sdk
+```
+
+## 🧩 Quick Setup
+
+Before using any hooks, wrap your app in the `FlowProvider`:
+
+```tsx
+import {FlowProvider} from "@onflow/react-native-sdk"
+import flowJson from "../flow.json"
+
+
+
+
+```
+
+## 🪝 Available Hooks
+
+Here's a look at some of the hooks available. For a full list, see the [official documentation](https://developers.flow.com/tools/react-native-sdk/hooks).
+
+- `useFlowCurrentUser`
+- `useFlowAccount`
+- `useFlowBlock`
+- `useFlowConfig`
+- `useFlowEvents`
+- `useFlowQuery`
+- `useFlowRevertibleRandom`
+- `useFlowMutate`
+- `useFlowTransaction`
+- `useFlowTransactionStatus`
+- `useCrossVmTokenBalance`
+- `useCrossVmBatchTransaction`
+
+## 🧱 Available Components
+
+- `` - Wallet connection button with built-in profile modal
+- `` - Displays connected wallet information with disconnect option
+
+## 📚 Full Documentation
+
+Looking for full API docs, examples, and usage tips?
+
+👉 [Explore the official docs →](https://developers.flow.com/tools/react-sdk)
diff --git a/packages/react-native-sdk/jest.config.js b/packages/react-native-sdk/jest.config.js
new file mode 100644
index 000000000..c57014804
--- /dev/null
+++ b/packages/react-native-sdk/jest.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+ preset: "react-native",
+ passWithNoTests: true,
+ moduleNameMapper: {
+ "^@walletconnect": "/src/__mocks__/noop.ts",
+ },
+ transformIgnorePatterns: [
+ "node_modules/(?!(react-native|@react-native|@onflow)/)",
+ ],
+ workerThreads: true,
+}
diff --git a/packages/react-native-sdk/package.json b/packages/react-native-sdk/package.json
new file mode 100644
index 000000000..e4fb1850b
--- /dev/null
+++ b/packages/react-native-sdk/package.json
@@ -0,0 +1,65 @@
+{
+ "name": "@onflow/react-native-sdk",
+ "version": "0.1.0",
+ "description": "React Native library for interacting with the Flow blockchain",
+ "license": "Apache-2.0",
+ "author": "Flow Foundation",
+ "homepage": "https://www.flow.com",
+ "repository": {
+ "type": "git",
+ "url": "git+ssh://git@github.com/onflow/fcl-js.git"
+ },
+ "bugs": {
+ "url": "https://github.com/onflow/fcl-js/issues"
+ },
+ "sideEffects": false,
+ "main": "dist/index.js",
+ "module": "dist/index.module.js",
+ "types": "types/index.d.ts",
+ "source": "src/index.ts",
+ "files": [
+ "dist",
+ "types",
+ "README.md"
+ ],
+ "scripts": {
+ "prepublishOnly": "npm test && npm run build",
+ "test": "jest",
+ "build": "fcl-bundle",
+ "build:types": "tsc",
+ "start": "fcl-bundle --watch"
+ },
+ "dependencies": {
+ "@onflow/react-core": "0.8.1",
+ "@babel/runtime": "^7.25.7",
+ "expo-clipboard": "^7.0.0",
+ "@tanstack/react-query": "^5.67.3",
+ "react-native-svg": "^15.8.0"
+ },
+ "peerDependencies": {
+ "@onflow/fcl-react-native": ">=1.20.1",
+ "react": "^18.0.0 || ^19.0.0",
+ "react-native": ">=0.70.0",
+ "viem": "^2.29.2"
+ },
+ "devDependencies": {
+ "@babel/preset-env": "^7.26.9",
+ "@babel/preset-react": "^7.26.3",
+ "@babel/preset-typescript": "^7.25.7",
+ "@onflow/fcl-bundle": "1.7.1",
+ "@onflow/typedefs": "^1.8.0",
+ "@tanstack/react-query": "^5.67.3",
+ "@testing-library/react-native": "^12.4.3",
+ "@types/jest": "^29.5.13",
+ "@types/react": "^18.2.6",
+ "@typescript-eslint/eslint-plugin": "^6.21.0",
+ "@typescript-eslint/parser": "^6.21.0",
+ "eslint": "^8.57.1",
+ "jest": "^29.7.0",
+ "react": "^18.3.1",
+ "react-native": "^0.76.0",
+ "react-test-renderer": "^18.3.1",
+ "typescript": "^5.9.2",
+ "viem": "^2.29.2"
+ }
+}
diff --git a/packages/react-native-sdk/src/__mocks__/noop.ts b/packages/react-native-sdk/src/__mocks__/noop.ts
new file mode 100644
index 000000000..b1c6ea436
--- /dev/null
+++ b/packages/react-native-sdk/src/__mocks__/noop.ts
@@ -0,0 +1 @@
+export default {}
diff --git a/packages/react-native-sdk/src/components/Connect.tsx b/packages/react-native-sdk/src/components/Connect.tsx
new file mode 100644
index 000000000..83f1806d1
--- /dev/null
+++ b/packages/react-native-sdk/src/components/Connect.tsx
@@ -0,0 +1,226 @@
+import {useFlowCurrentUser, truncateAddress} from "@onflow/react-core"
+import {UseCrossVmTokenBalanceData} from "@onflow/react-core"
+import React, {useCallback, useMemo, useState} from "react"
+import {
+ Modal,
+ Pressable,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+} from "react-native"
+import {
+ colors,
+ spacing,
+ radius,
+ borderWidths,
+ sizes,
+ fontSizes,
+ fontWeights,
+} from "../styles"
+import {Profile} from "./Profile"
+
+type BalanceType = keyof UseCrossVmTokenBalanceData
+
+export type TokenConfig = {
+ symbol: string
+ name: string
+} & (
+ | {vaultIdentifier: string; erc20Address?: never}
+ | {vaultIdentifier?: never; erc20Address: string}
+)
+
+export interface ConnectProps {
+ /** Callback after successful connection */
+ onConnect?: () => void
+ /** Callback after disconnection */
+ onDisconnect?: () => void
+ /** Balance type to display in profile (cadence, evm, or combined) */
+ balanceType?: BalanceType
+ /** Custom tokens to display balance for in profile */
+ balanceTokens?: TokenConfig[]
+ /** Whether to show profile modal when connected (default: true) */
+ modalEnabled?: boolean
+}
+
+/**
+ * Connect - Wallet connection button for React Native
+ *
+ * Displays a button to connect/disconnect wallet. When connected,
+ * shows the truncated address and opens a profile modal on tap.
+ *
+ * @example
+ * ```tsx
+ * console.log("Connected!")}
+ * onDisconnect={() => console.log("Disconnected!")}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With balance display
+ *
+ * ```
+ */
+export function Connect({
+ onConnect,
+ onDisconnect,
+ balanceType = "cadence",
+ balanceTokens,
+ modalEnabled = true,
+}: ConnectProps) {
+ const {user, authenticate, unauthenticate} = useFlowCurrentUser()
+ const [modalVisible, setModalVisible] = useState(false)
+
+ const isLoggedIn = user?.loggedIn ?? false
+
+ const displayAddress = useMemo(() => {
+ if (!user?.addr) return ""
+ return truncateAddress(user.addr)
+ }, [user?.addr])
+
+ const handleDisconnect = useCallback(() => {
+ unauthenticate()
+ setModalVisible(false)
+ onDisconnect?.()
+ }, [unauthenticate, onDisconnect])
+
+ const handlePress = useCallback(async () => {
+ if (isLoggedIn) {
+ if (modalEnabled) {
+ setModalVisible(true)
+ } else {
+ handleDisconnect()
+ }
+ } else {
+ try {
+ await authenticate()
+ onConnect?.()
+ } catch {
+ // Authentication was cancelled or failed - no action needed
+ }
+ }
+ }, [isLoggedIn, modalEnabled, authenticate, onConnect, handleDisconnect])
+
+ const buttonText = useMemo(() => {
+ if (isLoggedIn) return displayAddress
+ return "Connect Wallet"
+ }, [isLoggedIn, displayAddress])
+
+ const accessibilityLabel = useMemo(() => {
+ if (isLoggedIn) return `Connected: ${displayAddress}`
+ return "Connect wallet"
+ }, [isLoggedIn, displayAddress])
+
+ return (
+ <>
+
+
+ {buttonText}
+
+
+
+ {isLoggedIn && modalEnabled && (
+ setModalVisible(false)}
+ accessible
+ accessibilityViewIsModal
+ >
+ setModalVisible(false)}
+ accessible
+ accessibilityRole="button"
+ accessibilityLabel="Close profile"
+ >
+ e.stopPropagation()}
+ >
+
+
+
+
+ )}
+
+ )
+}
+
+const styles = StyleSheet.create({
+ button: {
+ flexDirection: "row",
+ alignItems: "center",
+ justifyContent: "center",
+ paddingVertical: spacing.sm,
+ paddingHorizontal: spacing.xl,
+ borderRadius: radius.sm,
+ minHeight: sizes.buttonMinHeight,
+ },
+ disconnectedButton: {
+ backgroundColor: colors.slate900,
+ },
+ connectedButton: {
+ backgroundColor: colors.transparent,
+ borderWidth: borderWidths.default,
+ borderColor: colors.slate200,
+ },
+ buttonText: {
+ fontSize: fontSizes.md,
+ fontWeight: fontWeights.semibold,
+ },
+ disconnectedButtonText: {
+ color: colors.white,
+ },
+ connectedButtonText: {
+ color: colors.slate900,
+ },
+ modalOverlay: {
+ flex: 1,
+ backgroundColor: colors.overlay,
+ justifyContent: "center",
+ alignItems: "center",
+ padding: spacing.lg,
+ },
+ modalContent: {
+ backgroundColor: colors.white,
+ borderRadius: radius.lg,
+ width: "100%",
+ maxWidth: sizes.modalMaxWidth,
+ shadowColor: colors.slate900,
+ shadowOffset: {width: 0, height: 4},
+ shadowOpacity: 0.15,
+ shadowRadius: radius.md,
+ elevation: 8,
+ },
+})
diff --git a/packages/react-native-sdk/src/components/Profile.tsx b/packages/react-native-sdk/src/components/Profile.tsx
new file mode 100644
index 000000000..aec37fc61
--- /dev/null
+++ b/packages/react-native-sdk/src/components/Profile.tsx
@@ -0,0 +1,436 @@
+import React, {useCallback, useMemo, useState, useEffect} from "react"
+import {View, Text, TouchableOpacity, StyleSheet, Linking} from "react-native"
+import * as Clipboard from "expo-clipboard"
+import {sansPrefix} from "@onflow/fcl-react-native"
+import {
+ useFlowCurrentUser,
+ useCrossVmTokenBalance,
+ UseCrossVmTokenBalanceData,
+ useFlowChainId,
+ getFlowscanAccountUrl,
+ CONTRACT_ADDRESSES,
+ truncateAddress,
+} from "@onflow/react-core"
+import type {TokenConfig} from "./Connect"
+import {
+ UserIcon,
+ CopyIcon,
+ CheckIcon,
+ LogOutIcon,
+ ExternalLinkIcon,
+} from "../icons"
+import {
+ colors,
+ spacing,
+ radius,
+ borderWidths,
+ sizes,
+ fontSizes,
+ fontWeights,
+} from "../styles"
+
+type BalanceType = keyof UseCrossVmTokenBalanceData
+
+export interface ProfileProps {
+ /** Callback when user disconnects */
+ onDisconnect?: () => void
+ /** Balance type to display (cadence, evm, or combined) */
+ balanceType?: BalanceType
+ /** Custom tokens to display balance for */
+ balanceTokens?: TokenConfig[]
+}
+
+/**
+ * Profile - Displays user wallet information with balance
+ *
+ * Shows the connected wallet address and token balance.
+ * Provides disconnect functionality and links to Flowscan.
+ *
+ * @example
+ * ```tsx
+ * console.log("Disconnected")}
+ * balanceType="cadence"
+ * />
+ * ```
+ */
+export const Profile: React.FC = ({
+ onDisconnect,
+ balanceType = "cadence",
+ balanceTokens,
+}) => {
+ const {user, unauthenticate} = useFlowCurrentUser()
+ const {data: chainId} = useFlowChainId()
+ const [copied, setCopied] = useState(false)
+
+ // Default token configuration for FlowToken
+ const defaultTokens: TokenConfig[] = useMemo(() => {
+ if (!chainId) return []
+
+ const getFlowTokenAddress = () => {
+ if (chainId === "emulator" || chainId === "local")
+ return CONTRACT_ADDRESSES.local.FlowToken
+ return chainId === "testnet"
+ ? CONTRACT_ADDRESSES.testnet.FlowToken
+ : CONTRACT_ADDRESSES.mainnet.FlowToken
+ }
+
+ const address = sansPrefix(getFlowTokenAddress())
+ return [
+ {
+ symbol: "FLOW",
+ name: "Flow Token",
+ vaultIdentifier: `A.${address}.FlowToken.Vault`,
+ },
+ ]
+ }, [chainId])
+
+ // Use provided tokens or default to FLOW
+ const availableTokens = useMemo(
+ () =>
+ balanceTokens && balanceTokens.length > 0 ? balanceTokens : defaultTokens,
+ [balanceTokens, defaultTokens]
+ )
+
+ const [selectedToken, setSelectedToken] = useState(
+ availableTokens[0]
+ )
+
+ // Update selectedToken when availableTokens changes
+ useEffect(() => {
+ if (!availableTokens || availableTokens.length === 0) {
+ setSelectedToken(undefined)
+ return
+ }
+
+ setSelectedToken(prev => {
+ if (!prev) return availableTokens[0]
+
+ const updatedToken = availableTokens.find(t => t.symbol === prev.symbol)
+ if (!updatedToken) return availableTokens[0]
+
+ if (
+ (!prev.vaultIdentifier && updatedToken.vaultIdentifier) ||
+ (!prev.erc20Address && updatedToken.erc20Address)
+ ) {
+ return updatedToken
+ }
+
+ return prev
+ })
+ }, [availableTokens])
+
+ const {data: balanceData} = useCrossVmTokenBalance({
+ owner: user?.addr,
+ vaultIdentifier: selectedToken?.vaultIdentifier,
+ erc20Address: selectedToken?.erc20Address,
+ query: {
+ enabled:
+ !!user?.addr &&
+ !!chainId &&
+ !!selectedToken &&
+ (!!selectedToken?.vaultIdentifier || !!selectedToken?.erc20Address),
+ },
+ })
+
+ const displayAddress = useMemo(() => {
+ if (!user?.addr) return ""
+ return truncateAddress(user.addr)
+ }, [user?.addr])
+
+ const flowscanUrl = useMemo(
+ () => getFlowscanAccountUrl(user?.addr || "", chainId),
+ [user?.addr, chainId]
+ )
+
+ const displayBalance = useMemo(() => {
+ if (
+ !balanceData ||
+ typeof balanceData === "string" ||
+ !balanceData[balanceType]?.formatted
+ ) {
+ return "0"
+ }
+ return Number(balanceData[balanceType].formatted).toLocaleString(
+ undefined,
+ {
+ maximumFractionDigits: 4,
+ minimumFractionDigits: 0,
+ }
+ )
+ }, [balanceData, balanceType])
+
+ const handleCopy = useCallback(async () => {
+ if (user?.addr) {
+ try {
+ await Clipboard.setStringAsync(user.addr)
+ setCopied(true)
+ setTimeout(() => setCopied(false), 1500)
+ } catch {
+ // Silently fail - clipboard may not be available in all environments
+ }
+ }
+ }, [user?.addr])
+
+ const handleOpenFlowscan = useCallback(async () => {
+ if (flowscanUrl) {
+ try {
+ await Linking.openURL(flowscanUrl)
+ } catch {
+ // Silently fail - URL may not be supported
+ }
+ }
+ }, [flowscanUrl])
+
+ const handleDisconnect = useCallback(() => {
+ unauthenticate()
+ onDisconnect?.()
+ }, [unauthenticate, onDisconnect])
+
+ const handleSelectToken = useCallback((token: TokenConfig) => {
+ setSelectedToken(token)
+ }, [])
+
+ // Not connected state
+ if (!user?.loggedIn) {
+ return (
+
+
+
+
+ No connected wallet
+
+ )
+ }
+
+ // Connected state
+ return (
+
+
+
+
+
+
+ {displayAddress}
+ {flowscanUrl && (
+
+
+
+ )}
+
+
+
+ {availableTokens.length > 1 && (
+
+ Token
+
+ {availableTokens.map(token => (
+ handleSelectToken(token)}
+ accessible
+ accessibilityRole="radio"
+ accessibilityState={{
+ selected: selectedToken?.symbol === token.symbol,
+ }}
+ >
+
+ {token.symbol}
+
+
+ ))}
+
+
+ )}
+
+
+ Balance
+
+ {displayBalance}
+
+ {selectedToken?.symbol || "FLOW"}
+
+
+
+
+
+
+ {copied ? (
+
+ ) : (
+
+ )}
+
+ {copied ? "Copied!" : "Copy Address"}
+
+
+
+
+
+ Disconnect
+
+
+
+ )
+}
+
+const styles = StyleSheet.create({
+ container: {
+ padding: spacing.lg,
+ },
+ centerContent: {
+ alignItems: "center",
+ justifyContent: "center",
+ paddingVertical: spacing.xxl,
+ },
+
+ avatarPlaceholder: {
+ width: sizes.avatar,
+ height: sizes.avatar,
+ borderRadius: radius.full,
+ backgroundColor: colors.slate100,
+ justifyContent: "center",
+ alignItems: "center",
+ marginBottom: spacing.sm,
+ },
+ notConnectedText: {
+ fontSize: fontSizes.sm,
+ fontWeight: fontWeights.medium,
+ color: colors.slate500,
+ },
+
+ header: {
+ alignItems: "center",
+ marginBottom: spacing.lg,
+ },
+ avatar: {
+ width: sizes.avatar,
+ height: sizes.avatar,
+ borderRadius: radius.full,
+ backgroundColor: colors.slate100,
+ justifyContent: "center",
+ alignItems: "center",
+ marginBottom: spacing.sm,
+ },
+ addressRow: {
+ flexDirection: "row",
+ alignItems: "center",
+ gap: spacing.xs,
+ },
+ address: {
+ fontSize: fontSizes.md,
+ fontWeight: fontWeights.semibold,
+ color: colors.slate900,
+ },
+
+ tokenSelector: {
+ marginBottom: spacing.md,
+ },
+ sectionLabel: {
+ fontSize: fontSizes.xs,
+ fontWeight: fontWeights.semibold,
+ color: colors.slate500,
+ marginBottom: spacing.xs,
+ },
+ tokenList: {
+ flexDirection: "row",
+ flexWrap: "wrap",
+ gap: spacing.xs,
+ },
+ tokenOption: {
+ paddingHorizontal: spacing.md,
+ paddingVertical: spacing.xs,
+ borderRadius: radius.sm,
+ borderWidth: borderWidths.default,
+ borderColor: colors.slate200,
+ backgroundColor: colors.white,
+ },
+ tokenOptionSelected: {
+ borderColor: colors.primary,
+ backgroundColor: colors.primaryLight,
+ },
+ tokenSymbol: {
+ fontSize: fontSizes.sm,
+ fontWeight: fontWeights.semibold,
+ color: colors.slate500,
+ },
+ tokenSymbolSelected: {
+ color: colors.primary,
+ },
+
+ balanceCard: {
+ backgroundColor: colors.slate50,
+ borderRadius: radius.md,
+ borderWidth: borderWidths.default,
+ borderColor: colors.slate200,
+ padding: spacing.md,
+ marginBottom: spacing.md,
+ },
+ balanceRow: {
+ flexDirection: "row",
+ alignItems: "baseline",
+ },
+ balanceAmount: {
+ fontSize: fontSizes.lg,
+ fontWeight: fontWeights.bold,
+ color: colors.slate900,
+ },
+ balanceSymbol: {
+ fontSize: fontSizes.sm,
+ fontWeight: fontWeights.medium,
+ color: colors.slate500,
+ marginLeft: spacing.xs,
+ },
+
+ actions: {
+ flexDirection: "row",
+ gap: spacing.sm,
+ },
+ actionButton: {
+ flex: 1,
+ flexDirection: "row",
+ alignItems: "center",
+ justifyContent: "center",
+ paddingVertical: spacing.sm,
+ paddingHorizontal: spacing.md,
+ borderRadius: radius.sm,
+ borderWidth: borderWidths.default,
+ borderColor: colors.slate200,
+ backgroundColor: colors.white,
+ gap: spacing.xs,
+ },
+ actionText: {
+ fontSize: fontSizes.sm,
+ fontWeight: fontWeights.medium,
+ color: colors.slate900,
+ },
+})
diff --git a/packages/react-native-sdk/src/components/index.ts b/packages/react-native-sdk/src/components/index.ts
new file mode 100644
index 000000000..922f30930
--- /dev/null
+++ b/packages/react-native-sdk/src/components/index.ts
@@ -0,0 +1,4 @@
+export {Connect} from "./Connect"
+export type {ConnectProps, TokenConfig} from "./Connect"
+export {Profile} from "./Profile"
+export type {ProfileProps} from "./Profile"
diff --git a/packages/react-native-sdk/src/icons/CheckIcon.tsx b/packages/react-native-sdk/src/icons/CheckIcon.tsx
new file mode 100644
index 000000000..adb0648de
--- /dev/null
+++ b/packages/react-native-sdk/src/icons/CheckIcon.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+import {Svg, Path} from "react-native-svg"
+
+interface IconProps {
+ size?: number
+ color?: string
+}
+
+export const CheckIcon: React.FC = ({
+ size = 24,
+ color = "#0F172A",
+}) => (
+
+)
diff --git a/packages/react-native-sdk/src/icons/CopyIcon.tsx b/packages/react-native-sdk/src/icons/CopyIcon.tsx
new file mode 100644
index 000000000..c1be5eeeb
--- /dev/null
+++ b/packages/react-native-sdk/src/icons/CopyIcon.tsx
@@ -0,0 +1,26 @@
+import React from "react"
+import {Svg, Path, Rect} from "react-native-svg"
+
+interface IconProps {
+ size?: number
+ color?: string
+}
+
+export const CopyIcon: React.FC = ({
+ size = 24,
+ color = "#0F172A",
+}) => (
+
+)
diff --git a/packages/react-native-sdk/src/icons/ExternalLinkIcon.tsx b/packages/react-native-sdk/src/icons/ExternalLinkIcon.tsx
new file mode 100644
index 000000000..0832de76a
--- /dev/null
+++ b/packages/react-native-sdk/src/icons/ExternalLinkIcon.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+import {Svg, Path} from "react-native-svg"
+
+interface IconProps {
+ size?: number
+ color?: string
+}
+
+export const ExternalLinkIcon: React.FC = ({
+ size = 16,
+ color = "#64748B",
+}) => (
+
+)
diff --git a/packages/react-native-sdk/src/icons/LogOutIcon.tsx b/packages/react-native-sdk/src/icons/LogOutIcon.tsx
new file mode 100644
index 000000000..503bb94ab
--- /dev/null
+++ b/packages/react-native-sdk/src/icons/LogOutIcon.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+import {Svg, Path} from "react-native-svg"
+
+interface IconProps {
+ size?: number
+ color?: string
+}
+
+export const LogOutIcon: React.FC = ({
+ size = 24,
+ color = "#0F172A",
+}) => (
+
+)
diff --git a/packages/react-native-sdk/src/icons/UserIcon.tsx b/packages/react-native-sdk/src/icons/UserIcon.tsx
new file mode 100644
index 000000000..1f9ee5e44
--- /dev/null
+++ b/packages/react-native-sdk/src/icons/UserIcon.tsx
@@ -0,0 +1,26 @@
+import React from "react"
+import {Svg, Path, Circle} from "react-native-svg"
+
+interface IconProps {
+ size?: number
+ color?: string
+}
+
+export const UserIcon: React.FC = ({
+ size = 24,
+ color = "#64748B",
+}) => (
+
+)
diff --git a/packages/react-native-sdk/src/icons/index.ts b/packages/react-native-sdk/src/icons/index.ts
new file mode 100644
index 000000000..6249653a2
--- /dev/null
+++ b/packages/react-native-sdk/src/icons/index.ts
@@ -0,0 +1,5 @@
+export {UserIcon} from "./UserIcon"
+export {CopyIcon} from "./CopyIcon"
+export {CheckIcon} from "./CheckIcon"
+export {LogOutIcon} from "./LogOutIcon"
+export {ExternalLinkIcon} from "./ExternalLinkIcon"
diff --git a/packages/react-native-sdk/src/index.ts b/packages/react-native-sdk/src/index.ts
new file mode 100644
index 000000000..a6c2e583c
--- /dev/null
+++ b/packages/react-native-sdk/src/index.ts
@@ -0,0 +1,51 @@
+// Re-export types from react-core
+export type {FlowNetwork, FlowConfig} from "@onflow/react-core"
+
+// Re-export hooks from react-core
+export {
+ useFlowCurrentUser,
+ useFlowAuthz,
+ useFlowAccount,
+ useFlowBlock,
+ useFlowChainId,
+ useFlowClient,
+ useFlowConfig,
+ useFlowEvents,
+ useFlowMutate,
+ useFlowQuery,
+ useFlowQueryRaw,
+ useFlowRevertibleRandom,
+ useCrossVmBatchTransaction,
+ useCrossVmTokenBalance,
+ useFlowTransaction,
+ useFlowTransactionStatus,
+ useCrossVmSpendNft,
+ useCrossVmSpendToken,
+ useCrossVmBridgeNftFromEvm,
+ useCrossVmBridgeNftToEvm,
+ useCrossVmBridgeTokenFromEvm,
+ useCrossVmBridgeTokenToEvm,
+ useCrossVmTransactionStatus,
+ useFlowNftMetadata,
+ useFlowScheduledTransactionList,
+ useFlowScheduledTransaction,
+ useFlowScheduledTransactionSetup,
+ useFlowScheduledTransactionCancel,
+ ScheduledTransactionPriority,
+ ScheduledTransactionStatus,
+} from "@onflow/react-core"
+
+// Re-export utilities from react-core
+export {
+ CONTRACT_ADDRESSES,
+ getFlowscanAccountUrl,
+ getFlowscanTxUrl,
+ getFlowscanScheduledTxUrl,
+} from "@onflow/react-core"
+
+// Re-export types from hooks
+export type {NftViewResult, ScheduledTransaction} from "@onflow/react-core"
+
+// React Native specific components and providers
+export * from "./components"
+export * from "./provider"
diff --git a/packages/react-native-sdk/src/provider/FlowProvider.tsx b/packages/react-native-sdk/src/provider/FlowProvider.tsx
new file mode 100644
index 000000000..8d02776c9
--- /dev/null
+++ b/packages/react-native-sdk/src/provider/FlowProvider.tsx
@@ -0,0 +1,89 @@
+import React, {useState, PropsWithChildren, useMemo, useEffect} from "react"
+import {
+ FlowConfig,
+ FlowConfigContext,
+ FlowClientContext,
+ FlowQueryClientProvider,
+ GlobalTransactionProvider,
+} from "@onflow/react-core"
+import {DefaultOptions, QueryClient} from "@tanstack/react-query"
+import {
+ createFlowClient,
+ ConnectModalProvider,
+ config,
+} from "@onflow/fcl-react-native"
+
+export interface FlowProviderProps {
+ config?: FlowConfig
+ queryClient?: QueryClient
+ flowClient?: ReturnType
+ flowJson?: Record
+}
+
+const defaultQueryOptions: DefaultOptions = {
+ queries: {
+ retry: false,
+ staleTime: 0,
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ refetchIntervalInBackground: false,
+ },
+}
+
+export function FlowProvider({
+ config: initialConfig = {},
+ queryClient: _queryClient,
+ flowClient: _flowClient,
+ flowJson,
+ children,
+}: PropsWithChildren) {
+ const [queryClient] = useState(
+ () => _queryClient ?? new QueryClient({defaultOptions: defaultQueryOptions})
+ )
+
+ const flowClient = useMemo(() => {
+ if (_flowClient) return _flowClient
+ return createFlowClient({
+ accessNodeUrl: initialConfig.accessNodeUrl!,
+ discoveryWallet: initialConfig.discoveryWallet,
+ discoveryWalletMethod: initialConfig.discoveryWalletMethod,
+ discoveryAuthnEndpoint: initialConfig.discoveryAuthnEndpoint,
+ discoveryAuthnInclude: initialConfig.discoveryAuthnInclude,
+ discoveryAuthnExclude: initialConfig.discoveryAuthnExclude,
+ flowJson,
+ flowNetwork: initialConfig.flowNetwork,
+ computeLimit: initialConfig.computeLimit,
+ walletconnectProjectId: initialConfig.walletconnectProjectId,
+ walletconnectDisableNotifications:
+ initialConfig.walletconnectDisableNotifications,
+ appDetailTitle: initialConfig.appDetailTitle,
+ appDetailIcon: initialConfig.appDetailIcon,
+ appDetailDescription: initialConfig.appDetailDescription,
+ appDetailUrl: initialConfig.appDetailUrl,
+ serviceOpenIdScopes: initialConfig.serviceOpenIdScopes,
+ })
+ }, [_flowClient, initialConfig, flowJson])
+
+ // Set discovery.authn.endpoint in global FCL config for ServiceDiscovery
+ // This is needed for the ConnectModal to work correctly and retrieve the endpoint to load wallets
+ useEffect(() => {
+ if (initialConfig.discoveryAuthnEndpoint) {
+ config().put(
+ "discovery.authn.endpoint",
+ initialConfig.discoveryAuthnEndpoint
+ )
+ }
+ }, [initialConfig.discoveryAuthnEndpoint])
+
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
diff --git a/packages/react-native-sdk/src/provider/index.ts b/packages/react-native-sdk/src/provider/index.ts
new file mode 100644
index 000000000..9f2c6ea02
--- /dev/null
+++ b/packages/react-native-sdk/src/provider/index.ts
@@ -0,0 +1,3 @@
+export {FlowProvider} from "./FlowProvider"
+export type {FlowProviderProps} from "./FlowProvider"
+export {useFlowQueryClient} from "@onflow/react-core"
diff --git a/packages/react-native-sdk/src/styles/colors.ts b/packages/react-native-sdk/src/styles/colors.ts
new file mode 100644
index 000000000..ac2b5f7ab
--- /dev/null
+++ b/packages/react-native-sdk/src/styles/colors.ts
@@ -0,0 +1,20 @@
+export const colors = {
+ // Slate palette
+ slate900: "#0F172A", // Primary dark (text, buttons)
+ slate500: "#64748B", // Secondary text, icons
+ slate200: "#E2E8F0", // Borders
+ slate100: "#F1F5F9", // Avatar backgrounds
+ slate50: "#F8FAFC", // Card backgrounds
+
+ // Core
+ white: "#FFFFFF",
+ transparent: "transparent",
+
+ // Semantic
+ success: "#16A34A", // Green for success/check
+ primary: "#2563EB", // Blue for selected state
+ primaryLight: "#EFF6FF", // Blue-50 for selected bg
+
+ // Overlay
+ overlay: "rgba(0, 0, 0, 0.5)",
+}
diff --git a/packages/react-native-sdk/src/styles/dimensions.ts b/packages/react-native-sdk/src/styles/dimensions.ts
new file mode 100644
index 000000000..ccbb02108
--- /dev/null
+++ b/packages/react-native-sdk/src/styles/dimensions.ts
@@ -0,0 +1,40 @@
+export const spacing = {
+ xs: 8, // gaps, small margins
+ sm: 12, // button padding, margins
+ md: 16, // card padding, margins
+ lg: 20, // container padding
+ xl: 24, // button horizontal padding
+ xxl: 48, // large vertical padding
+}
+
+export const radius = {
+ sm: 8, // buttons, tokens, action buttons
+ md: 12, // cards
+ lg: 16, // modals
+ full: 32, // avatars (half of avatar size)
+}
+
+export const borderWidths = {
+ default: 1,
+}
+
+export const sizes = {
+ avatar: 64,
+ iconSm: 16,
+ iconMd: 32,
+ buttonMinHeight: 48,
+ modalMaxWidth: 400,
+}
+
+export const fontSizes = {
+ xs: 12, // labels
+ sm: 14, // body text, symbols
+ md: 16, // addresses, button text
+ lg: 28, // balance amount
+}
+
+export const fontWeights = {
+ medium: "500" as const,
+ semibold: "600" as const,
+ bold: "700" as const,
+}
diff --git a/packages/react-native-sdk/src/styles/index.ts b/packages/react-native-sdk/src/styles/index.ts
new file mode 100644
index 000000000..a9d0a9e8f
--- /dev/null
+++ b/packages/react-native-sdk/src/styles/index.ts
@@ -0,0 +1,9 @@
+export {colors} from "./colors"
+export {
+ spacing,
+ radius,
+ borderWidths,
+ sizes,
+ fontSizes,
+ fontWeights,
+} from "./dimensions"
diff --git a/packages/react-native-sdk/tsconfig.json b/packages/react-native-sdk/tsconfig.json
new file mode 100644
index 000000000..bc84097d0
--- /dev/null
+++ b/packages/react-native-sdk/tsconfig.json
@@ -0,0 +1,14 @@
+{
+ "extends": "../../tsconfig",
+ "include": ["src/**/*.ts", "src/**/*.tsx"],
+ "compilerOptions": {
+ "declarationDir": "types",
+ "rootDir": "src",
+ "jsx": "react",
+ "lib": ["ES2015", "ES2022.Error"],
+ "skipLibCheck": true,
+ "paths": {
+ "react": ["../../node_modules/@types/react/index"]
+ }
+ }
+}
diff --git a/packages/react-sdk/src/components/Connect.tsx b/packages/react-sdk/src/components/Connect.tsx
index b4aa03bea..f68b05cd7 100644
--- a/packages/react-sdk/src/components/Connect.tsx
+++ b/packages/react-sdk/src/components/Connect.tsx
@@ -1,5 +1,5 @@
import React, {useState} from "react"
-import {useFlowCurrentUser} from "@onflow/react-core"
+import {useFlowCurrentUser, truncateAddress} from "@onflow/react-core"
import {UseCrossVmTokenBalanceData} from "@onflow/react-core"
import {Button, ButtonProps} from "./internal/Button"
import {Dialog} from "./internal/Dialog"
@@ -52,9 +52,7 @@ export const Connect: React.FC = ({
: "flow-max-w-md"
const displayAddress =
- user?.loggedIn && user.addr
- ? `${user.addr.slice(0, 6)}...${user.addr.slice(-4)}`
- : ""
+ user?.loggedIn && user.addr ? truncateAddress(user.addr) : ""
const handleButtonClick = async () => {
if (user?.loggedIn) {
diff --git a/packages/react-sdk/src/components/Profile.tsx b/packages/react-sdk/src/components/Profile.tsx
index 5a9b4fd3b..25f988a70 100644
--- a/packages/react-sdk/src/components/Profile.tsx
+++ b/packages/react-sdk/src/components/Profile.tsx
@@ -10,7 +10,8 @@ import {
TabPanel,
TabPanels,
} from "@headlessui/react"
-import {useFlowCurrentUser} from "@onflow/react-core"
+import {sansPrefix} from "@onflow/fcl"
+import {useFlowCurrentUser, truncateAddress} from "@onflow/react-core"
import {
useCrossVmTokenBalance,
UseCrossVmTokenBalanceData,
@@ -64,7 +65,7 @@ export const Profile: React.FC = ({
: CONTRACT_ADDRESSES.mainnet.FlowToken
}
- const address = getFlowTokenAddress().replace("0x", "")
+ const address = sansPrefix(getFlowTokenAddress())
return [
{
symbol: "FLOW",
@@ -132,9 +133,7 @@ export const Profile: React.FC = ({
})
const displayAddress =
- user?.loggedIn && user.addr
- ? `${user.addr.slice(0, 6)}...${user.addr.slice(-4)}`
- : ""
+ user?.loggedIn && user.addr ? truncateAddress(user.addr) : ""
const flowscanUrl = getFlowscanAccountUrl(user?.addr || "", chainId)
diff --git a/packages/react-sdk/src/components/ScheduledTransactionList.tsx b/packages/react-sdk/src/components/ScheduledTransactionList.tsx
index 4bc275dad..1c5534a7c 100644
--- a/packages/react-sdk/src/components/ScheduledTransactionList.tsx
+++ b/packages/react-sdk/src/components/ScheduledTransactionList.tsx
@@ -14,7 +14,7 @@ import {TrashIcon} from "../icons/TrashIcon"
import {FlowIcon} from "../icons/FlowIcon"
import {ExternalLinkIcon} from "../icons/ExternalLink"
import {twMerge} from "tailwind-merge"
-import {useFlowQueryClient} from "../provider/FlowQueryClient"
+import {useFlowQueryClient} from "@onflow/react-core"
import {useFlowChainId} from "@onflow/react-core"
import {getFlowscanScheduledTxUrl} from "@onflow/react-core"
diff --git a/packages/react-sdk/src/components/TransactionButton.tsx b/packages/react-sdk/src/components/TransactionButton.tsx
index c042fe58f..a3d798842 100644
--- a/packages/react-sdk/src/components/TransactionButton.tsx
+++ b/packages/react-sdk/src/components/TransactionButton.tsx
@@ -4,7 +4,7 @@ import {Button, ButtonProps} from "./internal/Button"
import {StyleWrapper} from "./internal/StyleWrapper"
import {UseMutationOptions} from "@tanstack/react-query"
import {type mutate} from "@onflow/fcl"
-import {useGlobalTransaction} from "../provider/GlobalTransactionProvider"
+import {useGlobalTransaction} from "@onflow/react-core"
interface TransactionButtonProps
extends Omit {
diff --git a/packages/react-sdk/src/provider/FlowProvider.tsx b/packages/react-sdk/src/provider/FlowProvider.tsx
index 997203092..d9ea775bb 100644
--- a/packages/react-sdk/src/provider/FlowProvider.tsx
+++ b/packages/react-sdk/src/provider/FlowProvider.tsx
@@ -3,12 +3,12 @@ import {
FlowConfig,
FlowConfigContext,
FlowClientContext,
+ FlowQueryClientProvider,
+ GlobalTransactionProvider,
} from "@onflow/react-core"
import {DefaultOptions, QueryClient} from "@tanstack/react-query"
-import {FlowQueryClientProvider} from "./FlowQueryClient"
import {createFlowClient} from "@onflow/fcl"
import {ThemeProvider, Theme} from "../core/theme"
-import {GlobalTransactionProvider} from "./GlobalTransactionProvider"
import tailwindStyles from "../styles/tailwind.css"
import {DarkModeProvider} from "./DarkModeProvider"
diff --git a/packages/react-sdk/src/provider/FlowQueryClient.tsx b/packages/react-sdk/src/provider/FlowQueryClient.tsx
deleted file mode 100644
index 42f8974cb..000000000
--- a/packages/react-sdk/src/provider/FlowQueryClient.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, {PropsWithChildren} from "react"
-import {QueryClient} from "@tanstack/react-query"
-import {FlowQueryClientContext} from "@onflow/react-core"
-
-export function FlowQueryClientProvider({
- queryClient,
- children,
-}: PropsWithChildren<{queryClient: QueryClient}>) {
- return (
-
- )
-}
-
-// Re-export the hook from react-core for convenience
-export {useFlowQueryClient} from "@onflow/react-core"
diff --git a/packages/react-sdk/src/provider/index.ts b/packages/react-sdk/src/provider/index.ts
index 00727d831..6c5f33c8d 100644
--- a/packages/react-sdk/src/provider/index.ts
+++ b/packages/react-sdk/src/provider/index.ts
@@ -1,3 +1,3 @@
export {FlowProvider} from "./FlowProvider"
-export {FlowQueryClientProvider, useFlowQueryClient} from "./FlowQueryClient"
+export {useFlowQueryClient} from "@onflow/react-core"
export {DarkModeProvider, useDarkMode} from "./DarkModeProvider"