@reown/appkit-core-react-native 0.0.0-canary-20240912195440

package/src/controllers/ConnectorController.ts

@@ -0,0 +1,50 @@
+import { subscribeKey as subKey } from 'valtio/utils';
+import { proxy, ref } from 'valtio';
+import type { Connector, ConnectorType } from '../utils/TypeUtil';
+
+// -- Types --------------------------------------------- //
+export interface ConnectorControllerState {
+  connectors: Connector[];
+  connectedConnector?: ConnectorType;
+  authLoading?: boolean;
+}
+
+type StateKey = keyof ConnectorControllerState;
+
+// -- State --------------------------------------------- //
+const state = proxy<ConnectorControllerState>({
+  connectors: []
+});
+
+// -- Controller ---------------------------------------- //
+export const ConnectorController = {
+  state,
+
+  subscribeKey<K extends StateKey>(key: K, callback: (value: ConnectorControllerState[K]) => void) {
+    return subKey(state, key, callback);
+  },
+
+  setConnectors(connectors: ConnectorControllerState['connectors']) {
+    state.connectors = connectors.map(c => ref(c));
+  },
+
+  addConnector(connector: Connector) {
+    state.connectors.push(ref(connector));
+  },
+
+  getConnectors() {
+    return state.connectors;
+  },
+
+  getAuthConnector() {
+    return state.connectors.find(c => c.type === 'AUTH');
+  },
+
+  setConnectedConnector(connectorType: ConnectorControllerState['connectedConnector']) {
+    state.connectedConnector = connectorType;
+  },
+
+  setAuthLoading(loading: ConnectorControllerState['authLoading']) {
+    state.authLoading = loading;
+  }
+};

package/src/controllers/EventsController.ts

@@ -0,0 +1,79 @@
+import { Platform } from 'react-native';
+import { proxy, subscribe as sub } from 'valtio/vanilla';
+import { ApiController } from './ApiController';
+import { OptionsController } from './OptionsController';
+import { CoreHelperUtil } from '../utils/CoreHelperUtil';
+import { FetchUtil } from '../utils/FetchUtil';
+import type { Event } from '../utils/TypeUtil';
+
+// -- Helpers ------------------------------------------- //
+const baseUrl = CoreHelperUtil.getAnalyticsUrl();
+const api = new FetchUtil({ baseUrl });
+const excluded = ['MODAL_CREATED'];
+
+// -- Types --------------------------------------------- //
+export interface EventsControllerState {
+  timestamp: number;
+  data: Event;
+}
+
+// -- State --------------------------------------------- //
+const state = proxy<EventsControllerState>({
+  timestamp: Date.now(),
+  data: {
+    type: 'track',
+    event: 'MODAL_CREATED' // just for init purposes
+  }
+});
+
+// -- Controller ---------------------------------------- //
+export const EventsController = {
+  state,
+
+  subscribe(callback: (newState: EventsControllerState) => void) {
+    return sub(state, () => callback(state));
+  },
+
+  _getApiHeaders() {
+    const { projectId, sdkType, sdkVersion } = OptionsController.state;
+
+    return {
+      'x-project-id': projectId,
+      'x-sdk-type': sdkType,
+      'x-sdk-version': sdkVersion,
+      'User-Agent': `${Platform.OS}-${Platform.Version}`
+    };
+  },
+
+  async _sendAnalyticsEvent(data: EventsControllerState['data'], timestamp: number) {
+    if (excluded.includes(data.event)) {
+      return;
+    }
+
+    try {
+      await api.post({
+        path: '/e',
+        headers: this._getApiHeaders(),
+        body: {
+          eventId: CoreHelperUtil.getUUID(),
+          bundleId: CoreHelperUtil.getBundleId(),
+          timestamp,
+          props: data
+        }
+      });
+    } catch {
+      // Catch silently
+    }
+  },
+
+  async sendEvent(data: EventsControllerState['data']) {
+    const timestamp = Date.now();
+    state.timestamp = timestamp;
+    state.data = data;
+    await ApiController.state.prefetchPromise;
+
+    if (OptionsController.state.enableAnalytics) {
+      EventsController._sendAnalyticsEvent(data, timestamp);
+    }
+  }
+};

package/src/controllers/ModalController.ts

@@ -0,0 +1,64 @@
+import { proxy } from 'valtio';
+import { AccountController } from './AccountController';
+import type { RouterControllerState } from './RouterController';
+import { RouterController } from './RouterController';
+import { PublicStateController } from './PublicStateController';
+import { EventsController } from './EventsController';
+import { ApiController } from './ApiController';
+
+// -- Types --------------------------------------------- //
+export interface ModalControllerState {
+  open: boolean;
+  loading: boolean;
+}
+
+export interface ModalControllerArguments {
+  open: {
+    view?: RouterControllerState['view'];
+  };
+}
+
+// -- State --------------------------------------------- //
+const state = proxy<ModalControllerState>({
+  open: false,
+  loading: false
+});
+
+// -- Controller ---------------------------------------- //
+export const ModalController = {
+  state,
+
+  async open(options?: ModalControllerArguments['open']) {
+    await ApiController.state.prefetchPromise;
+    const connected = AccountController.state.isConnected;
+    if (options?.view) {
+      RouterController.reset(options.view);
+    } else if (AccountController.state.isConnected) {
+      RouterController.reset('Account');
+    } else {
+      RouterController.reset('Connect');
+    }
+    state.open = true;
+    PublicStateController.set({ open: true });
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'MODAL_OPEN',
+      properties: { connected }
+    });
+  },
+
+  close() {
+    const connected = AccountController.state.isConnected;
+    state.open = false;
+    PublicStateController.set({ open: false });
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'MODAL_CLOSE',
+      properties: { connected }
+    });
+  },
+
+  setLoading(loading: ModalControllerState['loading']) {
+    state.loading = loading;
+  }
+};

package/src/controllers/NetworkController.ts

@@ -0,0 +1,79 @@
+import { proxy, ref } from 'valtio';
+import type { CaipNetwork, CaipNetworkId } from '../utils/TypeUtil';
+import { PublicStateController } from './PublicStateController';
+
+// -- Types --------------------------------------------- //
+export interface NetworkControllerClient {
+  switchCaipNetwork: (network: NetworkControllerState['caipNetwork']) => Promise<void>;
+  getApprovedCaipNetworksData: () => Promise<{
+    approvedCaipNetworkIds: NetworkControllerState['approvedCaipNetworkIds'];
+    supportsAllNetworks: NetworkControllerState['supportsAllNetworks'];
+  }>;
+}
+
+export interface NetworkControllerState {
+  supportsAllNetworks: boolean;
+  isDefaultCaipNetwork: boolean;
+  _client?: NetworkControllerClient;
+  caipNetwork?: CaipNetwork;
+  requestedCaipNetworks?: CaipNetwork[];
+  approvedCaipNetworkIds?: CaipNetworkId[];
+}
+
+// -- State --------------------------------------------- //
+const state = proxy<NetworkControllerState>({
+  supportsAllNetworks: true,
+  isDefaultCaipNetwork: false
+});
+
+// -- Controller ---------------------------------------- //
+export const NetworkController = {
+  state,
+
+  _getClient() {
+    if (!state._client) {
+      throw new Error('NetworkController client not set');
+    }
+
+    return state._client;
+  },
+
+  setClient(client: NetworkControllerClient) {
+    state._client = ref(client);
+  },
+
+  setCaipNetwork(caipNetwork: NetworkControllerState['caipNetwork']) {
+    state.caipNetwork = caipNetwork;
+    PublicStateController.set({ selectedNetworkId: caipNetwork?.id });
+  },
+
+  setDefaultCaipNetwork(caipNetwork: NetworkControllerState['caipNetwork']) {
+    state.caipNetwork = caipNetwork;
+    state.isDefaultCaipNetwork = true;
+    PublicStateController.set({ selectedNetworkId: caipNetwork?.id });
+  },
+
+  setRequestedCaipNetworks(requestedNetworks: NetworkControllerState['requestedCaipNetworks']) {
+    state.requestedCaipNetworks = requestedNetworks;
+  },
+
+  async getApprovedCaipNetworksData() {
+    const data = await this._getClient().getApprovedCaipNetworksData();
+    state.supportsAllNetworks = data.supportsAllNetworks;
+    state.approvedCaipNetworkIds = data.approvedCaipNetworkIds;
+  },
+
+  async switchActiveNetwork(network: NetworkControllerState['caipNetwork']) {
+    await this._getClient().switchCaipNetwork(network);
+    state.caipNetwork = network;
+    PublicStateController.set({ selectedNetworkId: network?.id });
+  },
+
+  resetNetwork() {
+    if (!state.isDefaultCaipNetwork) {
+      state.caipNetwork = undefined;
+    }
+    state.approvedCaipNetworkIds = undefined;
+    state.supportsAllNetworks = true;
+  }
+};

package/src/controllers/OptionsController.ts

@@ -0,0 +1,89 @@
+import { proxy, ref } from 'valtio';
+import type { CustomWallet, Metadata, ProjectId, SdkVersion, Tokens } from '../utils/TypeUtil';
+
+// -- Types --------------------------------------------- //
+export interface ClipboardClient {
+  setString: (value: string) => Promise<void>;
+}
+
+export interface OptionsControllerState {
+  projectId: ProjectId;
+  _clipboardClient?: ClipboardClient;
+  includeWalletIds?: string[];
+  excludeWalletIds?: string[];
+  featuredWalletIds?: string[];
+  customWallets?: CustomWallet[];
+  tokens?: Tokens;
+  enableAnalytics?: boolean;
+  sdkType: string;
+  sdkVersion: SdkVersion;
+  metadata?: Metadata;
+  isSiweEnabled?: boolean;
+}
+
+// -- State --------------------------------------------- //
+const state = proxy<OptionsControllerState>({
+  projectId: '',
+  sdkType: 'appkit',
+  sdkVersion: 'react-native-wagmi-undefined'
+});
+
+// -- Controller ---------------------------------------- //
+export const OptionsController = {
+  state,
+
+  setClipboardClient(client: ClipboardClient) {
+    state._clipboardClient = ref(client);
+  },
+
+  setProjectId(projectId: OptionsControllerState['projectId']) {
+    state.projectId = projectId;
+  },
+
+  setIncludeWalletIds(includeWalletIds: OptionsControllerState['includeWalletIds']) {
+    state.includeWalletIds = includeWalletIds;
+  },
+
+  setExcludeWalletIds(excludeWalletIds: OptionsControllerState['excludeWalletIds']) {
+    state.excludeWalletIds = excludeWalletIds;
+  },
+
+  setFeaturedWalletIds(featuredWalletIds: OptionsControllerState['featuredWalletIds']) {
+    state.featuredWalletIds = featuredWalletIds;
+  },
+
+  setTokens(tokens: OptionsControllerState['tokens']) {
+    state.tokens = tokens;
+  },
+
+  setCustomWallets(customWallets: OptionsControllerState['customWallets']) {
+    state.customWallets = customWallets;
+  },
+
+  setEnableAnalytics(enableAnalytics: OptionsControllerState['enableAnalytics']) {
+    state.enableAnalytics = enableAnalytics;
+  },
+
+  setSdkVersion(sdkVersion: OptionsControllerState['sdkVersion']) {
+    state.sdkVersion = sdkVersion;
+  },
+
+  setMetadata(metadata: OptionsControllerState['metadata']) {
+    state.metadata = metadata;
+  },
+
+  setIsSiweEnabled(isSiweEnabled: OptionsControllerState['isSiweEnabled']) {
+    state.isSiweEnabled = isSiweEnabled;
+  },
+
+  isClipboardAvailable() {
+    return !!state._clipboardClient;
+  },
+
+  copyToClipboard(value: string) {
+    const client = state._clipboardClient;
+    if (client) {
+      client.setString(value);
+    }
+  }
+};

package/src/controllers/PublicStateController.ts

@@ -0,0 +1,37 @@
+import { proxy, subscribe as sub } from 'valtio';
+import { subscribeKey as subKey } from 'valtio/utils';
+import type { CaipNetworkId } from '../utils/TypeUtil.js';
+
+// -- Types --------------------------------------------- //
+export interface PublicStateControllerState {
+  open: boolean;
+  selectedNetworkId?: CaipNetworkId;
+}
+
+type StateKey = keyof PublicStateControllerState;
+
+// -- State --------------------------------------------- //
+const state = proxy<PublicStateControllerState>({
+  open: false,
+  selectedNetworkId: undefined
+});
+
+// -- Controller ---------------------------------------- //
+export const PublicStateController = {
+  state,
+
+  subscribe(callback: (newState: PublicStateControllerState) => void) {
+    return sub(state, () => callback(state));
+  },
+
+  subscribeKey<K extends StateKey>(
+    key: K,
+    callback: (value: PublicStateControllerState[K]) => void
+  ) {
+    return subKey(state, key, callback);
+  },
+
+  set(newState: Partial<PublicStateControllerState>) {
+    Object.assign(state, { ...state, ...newState });
+  }
+};

package/src/controllers/RouterController.ts

@@ -0,0 +1,84 @@
+import { proxy } from 'valtio';
+import type { WcWallet, CaipNetwork, Connector } from '../utils/TypeUtil';
+
+// -- Types --------------------------------------------- //
+export interface RouterControllerState {
+  view:
+    | 'Account'
+    | 'Connect'
+    | 'ConnectingWalletConnect'
+    | 'ConnectingExternal'
+    | 'Networks'
+    | 'SwitchNetwork'
+    | 'AllWallets'
+    | 'WhatIsAWallet'
+    | 'WhatIsANetwork'
+    | 'GetWallet'
+    | 'EmailVerifyDevice'
+    | 'EmailVerifyOtp'
+    | 'UpdateEmailWallet'
+    | 'UpdateEmailPrimaryOtp'
+    | 'UpdateEmailSecondaryOtp'
+    | 'UpgradeEmailWallet'
+    | 'ConnectingSiwe';
+  history: RouterControllerState['view'][];
+  data?: {
+    connector?: Connector;
+    wallet?: WcWallet;
+    network?: CaipNetwork;
+    email?: string;
+    newEmail?: string;
+  };
+}
+
+// -- State --------------------------------------------- //
+const state = proxy<RouterControllerState>({
+  view: 'Connect',
+  history: ['Connect']
+});
+
+// -- Controller ---------------------------------------- //
+export const RouterController = {
+  state,
+
+  push(view: RouterControllerState['view'], data?: RouterControllerState['data']) {
+    if (view !== state.view) {
+      state.view = view;
+      state.history.push(view);
+      state.data = data;
+    }
+  },
+
+  reset(view: RouterControllerState['view']) {
+    state.view = view;
+    state.history = [view];
+  },
+
+  replace(view: RouterControllerState['view'], data?: RouterControllerState['data']) {
+    if (state.history.length > 1 && state.history.at(-1) !== view) {
+      state.view = view;
+      state.history[state.history.length - 1] = view;
+      state.data = data;
+    }
+  },
+
+  goBack() {
+    if (state.history.length > 1) {
+      state.history.pop();
+      const [last] = state.history.slice(-1);
+      if (last) {
+        state.view = last;
+      }
+    }
+  },
+
+  goBackToIndex(historyIndex: number) {
+    if (state.history.length > 1) {
+      state.history = state.history.slice(0, historyIndex + 1);
+      const [last] = state.history.slice(-1);
+      if (last) {
+        state.view = last;
+      }
+    }
+  }
+};

package/src/controllers/SnackController.ts

@@ -0,0 +1,36 @@
+import { proxy } from 'valtio';
+
+// -- Types --------------------------------------------- //
+export interface SnackControllerState {
+  message: string;
+  variant: 'error' | 'success';
+  open: boolean;
+}
+
+// -- State --------------------------------------------- //
+const state = proxy<SnackControllerState>({
+  message: '',
+  variant: 'success',
+  open: false
+});
+
+// -- Controller ---------------------------------------- //
+export const SnackController = {
+  state,
+
+  showSuccess(message: SnackControllerState['message']) {
+    state.message = message;
+    state.variant = 'success';
+    state.open = true;
+  },
+
+  showError(message: SnackControllerState['message']) {
+    state.message = message;
+    state.variant = 'error';
+    state.open = true;
+  },
+
+  hide() {
+    state.open = false;
+  }
+};

package/src/controllers/ThemeController.ts

@@ -0,0 +1,31 @@
+import { proxy, subscribe as sub } from 'valtio';
+import type { ThemeMode, ThemeVariables } from '../utils/TypeUtil';
+
+// -- Types --------------------------------------------- //
+export interface ThemeControllerState {
+  themeMode: ThemeMode;
+  themeVariables: ThemeVariables;
+}
+
+// -- State --------------------------------------------- //
+const state = proxy<ThemeControllerState>({
+  themeMode: 'dark',
+  themeVariables: {}
+});
+
+// -- Controller ---------------------------------------- //
+export const ThemeController = {
+  state,
+
+  subscribe(callback: (newState: ThemeControllerState) => void) {
+    return sub(state, () => callback(state));
+  },
+
+  setThemeMode(themeMode: ThemeControllerState['themeMode']) {
+    state.themeMode = themeMode;
+  },
+
+  setThemeVariables(themeVariables: ThemeControllerState['themeVariables']) {
+    state.themeVariables = { ...state.themeVariables, ...themeVariables };
+  }
+};

package/src/index.ts

@@ -0,0 +1,57 @@
+// -- Controllers -------------------------------------------------------------
+export { ModalController } from './controllers/ModalController';
+export type { ModalControllerArguments, ModalControllerState } from './controllers/ModalController';
+
+export { RouterController } from './controllers/RouterController';
+export type { RouterControllerState } from './controllers/RouterController';
+
+export { AccountController } from './controllers/AccountController';
+export type { AccountControllerState } from './controllers/AccountController';
+
+export { NetworkController } from './controllers/NetworkController';
+export type {
+  NetworkControllerClient,
+  NetworkControllerState
+} from './controllers/NetworkController';
+
+export { ConnectionController } from './controllers/ConnectionController';
+export type {
+  ConnectionControllerClient,
+  ConnectionControllerState
+} from './controllers/ConnectionController';
+
+export { ConnectorController } from './controllers/ConnectorController';
+export type { ConnectorControllerState } from './controllers/ConnectorController';
+
+export { SnackController } from './controllers/SnackController';
+export type { SnackControllerState } from './controllers/SnackController';
+
+export { ApiController } from './controllers/ApiController';
+export type { ApiControllerState } from './controllers/ApiController';
+
+export { AssetController } from './controllers/AssetController';
+export type { AssetControllerState } from './controllers/AssetController';
+
+export { ThemeController } from './controllers/ThemeController';
+export type { ThemeControllerState } from './controllers/ThemeController';
+
+export { OptionsController } from './controllers/OptionsController';
+export type { OptionsControllerState } from './controllers/OptionsController';
+
+export { PublicStateController } from './controllers/PublicStateController';
+export type { PublicStateControllerState } from './controllers/PublicStateController';
+
+export { BlockchainApiController } from './controllers/BlockchainApiController';
+
+export { EventsController } from './controllers/EventsController';
+export type { EventsControllerState } from './controllers/EventsController';
+
+// -- Utils -------------------------------------------------------------------
+export { AssetUtil } from './utils/AssetUtil';
+export { ConstantsUtil } from './utils/ConstantsUtil';
+export { CoreHelperUtil } from './utils/CoreHelperUtil';
+export { StorageUtil } from './utils/StorageUtil';
+export { EventUtil } from './utils/EventUtil';
+export { RouterUtil } from './utils/RouterUtil';
+
+export type * from './utils/TypeUtil';

package/src/utils/AssetUtil.ts

@@ -0,0 +1,40 @@
+import { AssetController } from '../controllers/AssetController';
+import type { CaipNetwork, Connector, WcWallet } from './TypeUtil';
+
+export const AssetUtil = {
+  getWalletImage(wallet?: WcWallet) {
+    if (wallet?.image_url) {
+      return wallet?.image_url;
+    }
+
+    if (wallet?.image_id) {
+      return AssetController.state.walletImages[wallet.image_id];
+    }
+
+    return undefined;
+  },
+
+  getNetworkImage(network?: CaipNetwork) {
+    if (network?.imageUrl) {
+      return network?.imageUrl;
+    }
+
+    if (network?.imageId) {
+      return AssetController.state.networkImages[network.imageId];
+    }
+
+    return undefined;
+  },
+
+  getConnectorImage(connector?: Connector) {
+    if (connector?.imageUrl) {
+      return connector.imageUrl;
+    }
+
+    if (connector?.imageId) {
+      return AssetController.state.connectorImages[connector.imageId];
+    }
+
+    return undefined;
+  }
+};

package/src/utils/ConstantsUtil.ts

@@ -0,0 +1,11 @@
+export const ConstantsUtil = {
+  FOUR_MINUTES_MS: 240000,
+
+  TEN_SEC_MS: 10000,
+
+  ONE_SEC_MS: 1000,
+
+  EMAIL_REGEX: /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/,
+
+  LINKING_ERROR: 'LINKING_ERROR'
+};