Only export component for React refresh

packages/keychain/src/components/ErrorBoundary.tsx

@@ -4,7 +4,7 @@ import { AlertIcon, ExternalIcon, Button } from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { CARTRIDGE_DISCORD_LINK } from "@/const";
 import { Link } from "react-router-dom";
-import { usePostHog } from "@/context/posthog";
+import { usePostHog } from "@/hooks/posthog";
 import { useEffect } from "react";
 
 export class ErrorBoundary extends React.Component<

packages/keychain/src/components/connect/create/CreateController.tsx

@@ -10,7 +10,7 @@ import { useCreateController } from "./useCreateController";
 import { ErrorAlert } from "@/components/ErrorAlert";
 import { VerifiableControllerTheme } from "@/context/theme";
 import InAppSpy from "inapp-spy";
-import { usePostHog } from "@/context/posthog";
+import { usePostHog } from "@/hooks/posthog";
 
 interface CreateControllerViewProps {
   theme: VerifiableControllerTheme;

packages/keychain/src/components/home.tsx

@@ -13,7 +13,7 @@ import { Settings } from "./settings";
 import { SignMessage } from "./SignMessage";
 import { PageLoading } from "./Loading";
 import { execute } from "@/utils/connection/execute";
-import { usePostHog } from "@/context/posthog";
+import { usePostHog } from "@/hooks/posthog";
 
 export function Home() {
   const { context, setContext, controller, error, policies, upgrade } =

packages/keychain/src/components/provider/index.tsx

@@ -4,12 +4,12 @@ import { useConnectionValue } from "@/hooks/connection";
 import { CartridgeAPIProvider } from "@cartridge/utils/api/cartridge";
 import { ENDPOINT } from "@/utils/graphql";
 import { ConnectionContext } from "./connection";
+import { PostHogProvider } from "./posthog";
 import { ControllerThemeProvider } from "./theme";
 import { jsonRpcProvider, StarknetConfig, voyager } from "@starknet-react/core";
 import { sepolia, mainnet } from "@starknet-react/chains";
 import { constants, num } from "starknet";
 import { BrowserRouter } from "react-router-dom";
-import { PostHogProvider } from "@/context/posthog";
 
 export function Provider({ children }: PropsWithChildren) {
   const connection = useConnectionValue();

packages/keychain/src/components/provider/posthog.tsx

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from "react";
+import { PostHogContext, PostHogWrapper } from "@/context/posthog";
+
+export function PostHogProvider({ children }: PropsWithChildren) {
+  const posthog = new PostHogWrapper(import.meta.env.VITE_POSTHOG_KEY!, {
+    host: import.meta.env.VITE_POSTHOG_HOST,
+    persistence: "memory",
+    autocapture: false,
+  });
+
+  return (
+    <PostHogContext.Provider value={{ posthog }}>
+      {children}
+    </PostHogContext.Provider>
+  );
+}

packages/keychain/src/context/posthog.tsx

@@ -1,10 +1,10 @@
-import { createContext, useContext, PropsWithChildren } from "react";
+import { createContext } from "react";
 import PostHog from "posthog-js-lite";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Properties = Record<string, any>;
 
-class PostHogWrapper extends PostHog {
+export class PostHogWrapper extends PostHog {
   isLocal =
     typeof window !== "undefined" &&
     window.location.hostname.includes("localhost");
@@ -87,26 +87,6 @@ interface PostHogContextType {
   posthog: PostHogWrapper;
 }
 
-const PostHogContext = createContext<PostHogContextType | undefined>(undefined);
-
-export function PostHogProvider({ children }: PropsWithChildren) {
-  const posthog = new PostHogWrapper(import.meta.env.VITE_POSTHOG_KEY!, {
-    host: import.meta.env.VITE_POSTHOG_HOST,
-    persistence: "memory",
-    autocapture: false,
-  });
-
-  return (
-    <PostHogContext.Provider value={{ posthog }}>
-      {children}
-    </PostHogContext.Provider>
-  );
-}
-
-export function usePostHog() {
-  const context = useContext(PostHogContext);
-  if (!context) {
-    return undefined;
-  }
-  return context.posthog;
-}
+export const PostHogContext = createContext<PostHogContextType | undefined>(
+  undefined,
+);

packages/keychain/src/hooks/connection.ts

@@ -18,7 +18,7 @@ import {
   ConnectionContextValue,
 } from "@/components/provider/connection";
 import { UpgradeInterface, useUpgrade } from "./upgrade";
-import { usePostHog } from "@/context/posthog";
+import { usePostHog } from "@/hooks/posthog";
 import { Policies } from "@cartridge/presets";
 import {
   defaultTheme,

packages/keychain/src/hooks/posthog.tsx

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { PostHogContext } from "@/context/posthog";
+
+export function usePostHog() {
+  const context = useContext(PostHogContext);
+  if (!context) {
+    return undefined;
+  }
+  return context.posthog;
+}

packages/profile/src/components/achievements/trophy.tsx

@@ -442,7 +442,7 @@ Do you have what it takes to carve your name into history?
     )}&url=${encodeURIComponent(url)}`;
 
     window.open(twitterUrl, "_blank", "noopener,noreferrer");
-  }, [url, xhandle, title, earning, date]);
+  }, [url, xhandle, title, earning, date, percentage]);
 
   if (!url || !xhandle) return null;
 

packages/profile/src/components/context/arcade.tsx → packages/profile/src/components/provider/arcade.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   ReactNode,
   useCallback,
   useContext,
@@ -19,25 +18,10 @@ import {
   RegistryOptions,
 } from "@bal7hazar/arcade-sdk";
 import { constants } from "starknet";
+import { ArcadeContext } from "@/context/arcade";
 
 const CHAIN_ID = constants.StarknetChainId.SN_SEPOLIA;
 
-/**
- * Interface defining the shape of the Arcade context.
- */
-interface ArcadeContextType {
-  /** The Arcade client instance */
-  chainId: string;
-  provider: ExternalProvider;
-  pins: { [playerId: string]: string[] };
-  games: { [gameId: string]: GameModel };
-}
-
-/**
- * React context for sharing Arcade-related data throughout the application.
- */
-export const ArcadeContext = createContext<ArcadeContextType | null>(null);
-
 /**
  * Provider component that makes Arcade context available to child components.
  *

packages/profile/src/components/context/connection.tsx → packages/profile/src/components/provider/connection.tsx

@@ -1,58 +1,19 @@
 import { connectToParent } from "@cartridge/penpal";
-import {
-  createContext,
-  useState,
-  ReactNode,
-  useEffect,
-  useCallback,
-} from "react";
+import { useState, ReactNode, useEffect, useCallback } from "react";
 import {
   ETH_CONTRACT_ADDRESS,
-  isIframe,
   normalize,
   STRK_CONTRACT_ADDRESS,
 } from "@cartridge/utils";
-import { Call, constants, getChecksumAddress, RpcProvider } from "starknet";
+import { constants, getChecksumAddress, RpcProvider } from "starknet";
 import { useNavigate, useSearchParams } from "react-router-dom";
+import {
+  ConnectionContext,
+  initialState,
+  ParentMethods,
+} from "@/context/connection";
 
-type ConnectionContextType = {
-  origin: string;
-  parent: ParentMethods;
-  provider: RpcProvider;
-  chainId: string;
-  erc20: string[];
-  project?: string;
-  namespace?: string;
-  version?: string;
-  isVisible: boolean;
-  setIsVisible: (isVisible: boolean) => void;
-};
-
-type ParentMethods = {
-  close: () => void;
-  openSettings: () => void;
-  openPurchaseCredits: () => void;
-  openExecute: (calls: Call[], chain?: string) => Promise<boolean>;
-};
-
-const initialState: ConnectionContextType = {
-  origin: location.origin,
-  parent: {
-    close: () => {},
-    openSettings: () => {},
-    openPurchaseCredits: () => {},
-    openExecute: async () => false,
-  },
-  provider: new RpcProvider({ nodeUrl: import.meta.env.VITE_RPC_SEPOLIA }),
-  chainId: "",
-  erc20: [],
-  isVisible: !isIframe(),
-  setIsVisible: () => {},
-};
-
-export const ConnectionContext =
-  createContext<ConnectionContextType>(initialState);
-
+import { ConnectionContextType } from "@/context/connection";
 export function ConnectionProvider({ children }: { children: ReactNode }) {
   const [state, setState] = useState<ConnectionContextType>(initialState);
 

packages/profile/src/components/provider/data.tsx

@@ -0,0 +1,17 @@
+import { useState, ReactNode } from "react";
+import { useAchievements } from "@/hooks/achievements";
+import { DataContext } from "@/context/data";
+
+export function DataProvider({ children }: { children: ReactNode }) {
+  const [accountAddress, setAccountAddress] = useState<string | undefined>(
+    undefined,
+  );
+
+  const trophies = useAchievements(accountAddress);
+
+  return (
+    <DataContext.Provider value={{ trophies, setAccountAddress }}>
+      {children}
+    </DataContext.Provider>
+  );
+}

packages/profile/src/components/context/theme.tsx → packages/profile/src/components/provider/theme.tsx

@@ -4,33 +4,17 @@ import {
   ControllerTheme,
 } from "@cartridge/presets";
 import { useThemeEffect } from "@cartridge/ui-next";
-import { createContext, useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useConnection } from "@/hooks/context";
+import { ColorScheme, ThemeContext, initialState } from "@/context/theme";
 
-type ColorScheme = "dark" | "light" | "system";
-
-type ThemeProviderProps = {
+export type ThemeProviderProps = {
   children: React.ReactNode;
   defaultScheme?: ColorScheme;
   storageKey?: string;
 };
 
-type ThemeProviderContextType = {
-  colorScheme: ColorScheme;
-  setColorScheme: (colorMode: ColorScheme) => void;
-  theme: ControllerTheme;
-};
-
-const initialState: ThemeProviderContextType = {
-  colorScheme: "system",
-  setColorScheme: () => null,
-  theme: defaultTheme,
-};
-
-export const ThemeContext =
-  createContext<ThemeProviderContextType>(initialState);
-
 export function ThemeProvider({
   children,
   defaultScheme = "system",

packages/profile/src/context/arcade.ts

@@ -0,0 +1,18 @@
+import { ArcadeProvider, GameModel } from "@bal7hazar/arcade-sdk";
+import { createContext } from "react";
+
+/**
+ * Interface defining the shape of the Arcade context.
+ */
+interface ArcadeContextType {
+  /** The Arcade client instance */
+  chainId: string;
+  provider: ArcadeProvider;
+  pins: { [playerId: string]: string[] };
+  games: { [gameId: string]: GameModel };
+}
+
+/**
+ * React context for sharing Arcade-related data throughout the application.
+ */
+export const ArcadeContext = createContext<ArcadeContextType | null>(null);

packages/profile/src/context/connection.ts

@@ -0,0 +1,41 @@
+import { isIframe } from "@cartridge/utils";
+import { createContext } from "react";
+import { Call, RpcProvider } from "starknet";
+
+export type ConnectionContextType = {
+  origin: string;
+  parent: ParentMethods;
+  provider: RpcProvider;
+  chainId: string;
+  erc20: string[];
+  project?: string;
+  namespace?: string;
+  version?: string;
+  isVisible: boolean;
+  setIsVisible: (isVisible: boolean) => void;
+};
+
+export type ParentMethods = {
+  close: () => void;
+  openSettings: () => void;
+  openPurchaseCredits: () => void;
+  openExecute: (calls: Call[], chain?: string) => Promise<boolean>;
+};
+
+export const initialState: ConnectionContextType = {
+  origin: location.origin,
+  parent: {
+    close: () => {},
+    openSettings: () => {},
+    openPurchaseCredits: () => {},
+    openExecute: async () => false,
+  },
+  provider: new RpcProvider({ nodeUrl: import.meta.env.VITE_RPC_SEPOLIA }),
+  chainId: "",
+  erc20: [],
+  isVisible: !isIframe(),
+  setIsVisible: () => {},
+};
+
+export const ConnectionContext =
+  createContext<ConnectionContextType>(initialState);