@reown/appkit-react-native 2.0.0 → 2.0.1

package/src/client.ts

@@ -1,379 +0,0 @@
-import './config/animations';
-
-import type {
-  AccountControllerState,
-  ConnectionControllerClient,
-  ModalControllerState,
-  NetworkControllerClient,
-  NetworkControllerState,
-  OptionsControllerState,
-  EventsControllerState,
-  PublicStateControllerState,
-  ThemeControllerState,
-  Connector,
-  ConnectedWalletInfo,
-  Features,
-  EventName
-} from '@reown/appkit-core-react-native';
-import { SIWEController, type SIWEControllerClient } from '@reown/appkit-siwe-react-native';
-import {
-  AccountController,
-  BlockchainApiController,
-  ConnectionController,
-  ConnectorController,
-  EnsController,
-  EventsController,
-  ModalController,
-  NetworkController,
-  OptionsController,
-  PublicStateController,
-  SnackController,
-  StorageUtil,
-  ThemeController,
-  TransactionsController
-} from '@reown/appkit-core-react-native';
-import {
-  ConstantsUtil,
-  ErrorUtil,
-  type ThemeMode,
-  type ThemeVariables
-} from '@reown/appkit-common-react-native';
-import { Appearance } from 'react-native';
-
-// -- Types ---------------------------------------------------------------------
-export interface LibraryOptions {
-  projectId: OptionsControllerState['projectId'];
-  metadata: OptionsControllerState['metadata'];
-  themeMode?: ThemeMode;
-  themeVariables?: ThemeVariables;
-  includeWalletIds?: OptionsControllerState['includeWalletIds'];
-  excludeWalletIds?: OptionsControllerState['excludeWalletIds'];
-  featuredWalletIds?: OptionsControllerState['featuredWalletIds'];
-  customWallets?: OptionsControllerState['customWallets'];
-  defaultChain?: NetworkControllerState['caipNetwork'];
-  tokens?: OptionsControllerState['tokens'];
-  clipboardClient?: OptionsControllerState['clipboardClient'];
-  enableAnalytics?: OptionsControllerState['enableAnalytics'];
-  _sdkVersion: OptionsControllerState['sdkVersion'];
-  debug?: OptionsControllerState['debug'];
-  features?: Features;
-}
-
-export interface ScaffoldOptions extends LibraryOptions {
-  networkControllerClient: NetworkControllerClient;
-  connectionControllerClient: ConnectionControllerClient;
-  siweControllerClient?: SIWEControllerClient;
-}
-
-export interface OpenOptions {
-  view: 'Account' | 'Connect' | 'Networks' | 'Swap' | 'OnRamp';
-}
-
-// -- Client --------------------------------------------------------------------
-export class AppKitScaffold {
-  public reportedAlertErrors: Record<string, boolean> = {};
-
-  public constructor(options: ScaffoldOptions) {
-    this.initControllers(options);
-  }
-
-  // -- Public -------------------------------------------------------------------
-  public async open(options?: OpenOptions) {
-    ModalController.open(options);
-  }
-
-  public async close() {
-    ModalController.close();
-  }
-
-  public getThemeMode() {
-    return ThemeController.state.themeMode;
-  }
-
-  public getThemeVariables() {
-    return ThemeController.state.themeVariables;
-  }
-
-  public setThemeMode(themeMode: ThemeControllerState['themeMode']) {
-    ThemeController.setThemeMode(themeMode);
-  }
-
-  public setThemeVariables(themeVariables: ThemeControllerState['themeVariables']) {
-    ThemeController.setThemeVariables(themeVariables);
-  }
-
-  public subscribeTheme(callback: (newState: ThemeControllerState) => void) {
-    return ThemeController.subscribe(callback);
-  }
-
-  public getWalletInfo() {
-    return AccountController.state.connectedWalletInfo;
-  }
-
-  public subscribeWalletInfo(callback: (newState: ConnectedWalletInfo) => void) {
-    return AccountController.subscribeKey('connectedWalletInfo', callback);
-  }
-
-  public getState() {
-    return { ...PublicStateController.state };
-  }
-
-  public subscribeState(callback: (newState: PublicStateControllerState) => void) {
-    return PublicStateController.subscribe(callback);
-  }
-
-  public subscribeStateKey<K extends keyof PublicStateControllerState>(
-    key: K,
-    callback: (value: PublicStateControllerState[K]) => void
-  ) {
-    return PublicStateController.subscribeKey(key, callback);
-  }
-
-  public subscribeConnection(
-    callback: (isConnected: AccountControllerState['isConnected']) => void
-  ) {
-    return AccountController.subscribeKey('isConnected', callback);
-  }
-
-  public setLoading(loading: ModalControllerState['loading']) {
-    ModalController.setLoading(loading);
-  }
-
-  public getEvent() {
-    return { ...EventsController.state };
-  }
-
-  public subscribeEvents(callback: (newEvent: EventsControllerState) => void) {
-    return EventsController.subscribe(callback);
-  }
-
-  public subscribeEvent(event: EventName, callback: (newEvent: EventsControllerState) => void) {
-    return EventsController.subscribeEvent(event, callback);
-  }
-
-  public resolveReownName = async (name: string) => {
-    const wcNameAddress = await EnsController.resolveName(name);
-    const networkNameAddresses = wcNameAddress?.addresses
-      ? Object.values(wcNameAddress?.addresses)
-      : [];
-
-    return networkNameAddresses[0]?.address || false;
-  };
-
-  // -- Protected ----------------------------------------------------------------
-  protected setIsConnected: (typeof AccountController)['setIsConnected'] = isConnected => {
-    AccountController.setIsConnected(isConnected);
-  };
-
-  protected setCaipAddress: (typeof AccountController)['setCaipAddress'] = caipAddress => {
-    AccountController.setCaipAddress(caipAddress);
-  };
-
-  protected getCaipAddress = () => AccountController.state.caipAddress;
-
-  protected setBalance: (typeof AccountController)['setBalance'] = (balance, balanceSymbol) => {
-    AccountController.setBalance(balance, balanceSymbol);
-  };
-
-  protected setProfileName: (typeof AccountController)['setProfileName'] = profileName => {
-    AccountController.setProfileName(profileName);
-  };
-
-  protected setProfileImage: (typeof AccountController)['setProfileImage'] = profileImage => {
-    AccountController.setProfileImage(profileImage);
-  };
-
-  protected resetAccount: (typeof AccountController)['resetAccount'] = () => {
-    AccountController.resetAccount();
-  };
-
-  protected setCaipNetwork: (typeof NetworkController)['setCaipNetwork'] = caipNetwork => {
-    NetworkController.setCaipNetwork(caipNetwork);
-  };
-
-  protected getCaipNetwork = () => NetworkController.state.caipNetwork;
-
-  protected setRequestedCaipNetworks: (typeof NetworkController)['setRequestedCaipNetworks'] =
-    requestedCaipNetworks => {
-      NetworkController.setRequestedCaipNetworks(requestedCaipNetworks);
-    };
-
-  protected getApprovedCaipNetworksData: (typeof NetworkController)['getApprovedCaipNetworksData'] =
-    () => NetworkController.getApprovedCaipNetworksData();
-
-  protected resetNetwork: (typeof NetworkController)['resetNetwork'] = () => {
-    NetworkController.resetNetwork();
-  };
-
-  protected setConnectors: (typeof ConnectorController)['setConnectors'] = (
-    connectors: Connector[]
-  ) => {
-    ConnectorController.setConnectors(connectors);
-    this.setConnectorExcludedWallets(connectors);
-  };
-
-  protected addConnector: (typeof ConnectorController)['addConnector'] = (connector: Connector) => {
-    ConnectorController.addConnector(connector);
-  };
-
-  protected getConnectors: (typeof ConnectorController)['getConnectors'] = () =>
-    ConnectorController.getConnectors();
-
-  protected resetWcConnection: (typeof ConnectionController)['resetWcConnection'] = () => {
-    ConnectionController.resetWcConnection();
-    TransactionsController.resetTransactions();
-  };
-
-  protected fetchIdentity: (typeof BlockchainApiController)['fetchIdentity'] = request =>
-    BlockchainApiController.fetchIdentity(request);
-
-  protected setAddressExplorerUrl: (typeof AccountController)['setAddressExplorerUrl'] =
-    addressExplorerUrl => {
-      AccountController.setAddressExplorerUrl(addressExplorerUrl);
-    };
-
-  protected setConnectedWalletInfo: (typeof AccountController)['setConnectedWalletInfo'] =
-    connectedWalletInfo => {
-      AccountController.setConnectedWalletInfo(connectedWalletInfo);
-    };
-
-  protected setClientId: (typeof BlockchainApiController)['setClientId'] = clientId => {
-    BlockchainApiController.setClientId(clientId);
-  };
-
-  protected setPreferredAccountType: (typeof AccountController)['setPreferredAccountType'] =
-    preferredAccountType => {
-      AccountController.setPreferredAccountType(preferredAccountType);
-    };
-
-  protected handleAlertError(error?: string | { shortMessage: string; longMessage: string }) {
-    if (!error) return;
-
-    if (typeof error === 'object') {
-      SnackController.showInternalError(error);
-
-      return;
-    }
-
-    // Check if the error is a universal provider error
-    const matchedUniversalProviderError = Object.entries(ErrorUtil.UniversalProviderErrors).find(
-      ([, { message }]) => error?.includes(message)
-    );
-
-    const [errorKey, errorValue] = matchedUniversalProviderError ?? [];
-
-    const { message, alertErrorKey } = errorValue ?? {};
-
-    if (errorKey && message && !this.reportedAlertErrors[errorKey]) {
-      const alertError =
-        ErrorUtil.ALERT_ERRORS[alertErrorKey as keyof typeof ErrorUtil.ALERT_ERRORS];
-
-      if (alertError) {
-        SnackController.showInternalError(alertError);
-        this.reportedAlertErrors[errorKey] = true;
-      }
-    }
-  }
-
-  // -- Private ------------------------------------------------------------------
-  private async initControllers(options: ScaffoldOptions) {
-    this.initAsyncValues(options);
-    NetworkController.setClient(options.networkControllerClient);
-    NetworkController.setDefaultCaipNetwork(options.defaultChain);
-
-    OptionsController.setProjectId(options.projectId);
-    OptionsController.setIncludeWalletIds(options.includeWalletIds);
-    OptionsController.setExcludeWalletIds(options.excludeWalletIds);
-    OptionsController.setFeaturedWalletIds(options.featuredWalletIds);
-    OptionsController.setTokens(options.tokens);
-    OptionsController.setCustomWallets(options.customWallets);
-    OptionsController.setEnableAnalytics(options.enableAnalytics);
-    OptionsController.setSdkVersion(options._sdkVersion);
-    OptionsController.setDebug(options.debug);
-
-    if (options.clipboardClient) {
-      OptionsController.setClipboardClient(options.clipboardClient);
-    }
-
-    ConnectionController.setClient(options.connectionControllerClient);
-
-    if (options.themeMode) {
-      ThemeController.setThemeMode(options.themeMode);
-    } else {
-      ThemeController.setThemeMode(Appearance.getColorScheme() as ThemeMode);
-    }
-
-    if (options.themeVariables) {
-      ThemeController.setThemeVariables(options.themeVariables);
-    }
-    if (options.metadata) {
-      OptionsController.setMetadata(options.metadata);
-    }
-
-    if (options.siweControllerClient) {
-      SIWEController.setSIWEClient(options.siweControllerClient);
-    }
-
-    if (options.features) {
-      OptionsController.setFeatures(options.features);
-    }
-
-    if (
-      (options.features?.onramp === true || options.features?.onramp === undefined) &&
-      (options.metadata?.redirect?.universal || options.metadata?.redirect?.native)
-    ) {
-      OptionsController.setIsOnRampEnabled(true);
-    }
-  }
-
-  private async setConnectorExcludedWallets(connectors: Connector[]) {
-    const excludedWallets = OptionsController.state.excludeWalletIds || [];
-
-    // Exclude Coinbase if the connector is not implemented
-    const excludeCoinbase =
-      connectors.findIndex(connector => connector.id === ConstantsUtil.COINBASE_CONNECTOR_ID) ===
-      -1;
-
-    if (excludeCoinbase) {
-      excludedWallets.push(ConstantsUtil.COINBASE_EXPLORER_ID);
-    }
-
-    OptionsController.setExcludeWalletIds(excludedWallets);
-  }
-
-  private async initRecentWallets(options: ScaffoldOptions) {
-    const wallets = await StorageUtil.getRecentWallets();
-
-    const filteredWallets = wallets.filter(wallet => {
-      const { includeWalletIds, excludeWalletIds } = options;
-      if (includeWalletIds) {
-        return includeWalletIds.includes(wallet.id);
-      }
-      if (excludeWalletIds) {
-        return !excludeWalletIds.includes(wallet.id);
-      }
-
-      return true;
-    });
-
-    ConnectionController.setRecentWallets(filteredWallets);
-  }
-
-  private async initConnectedConnector() {
-    const connectedConnector = await StorageUtil.getConnectedConnector();
-    if (connectedConnector) {
-      ConnectorController.setConnectedConnector(connectedConnector, false);
-    }
-  }
-
-  private async initSocial() {
-    const connectedSocialProvider = await StorageUtil.getConnectedSocialProvider();
-    ConnectionController.setConnectedSocialProvider(connectedSocialProvider);
-  }
-
-  private async initAsyncValues(options: ScaffoldOptions) {
-    await this.initConnectedConnector();
-    await this.initRecentWallets(options);
-    await this.initSocial();
-  }
-}

package/src/config/animations.ts

@@ -1,7 +0,0 @@
-import { Platform, UIManager } from 'react-native';
-
-if (Platform.OS === 'android') {
-  if (UIManager.setLayoutAnimationEnabledExperimental) {
-    UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-}

package/src/hooks/useCustomDimensions.ts

@@ -1,21 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useWindowDimensions } from 'react-native';
-
-/**
- * Hook used to get the width of the screen and the padding needed to accomplish portrait and landscape modes.
- * @returns { width: number, isPortrait: boolean, isLandscape: boolean, padding: number }
- */
-export function useCustomDimensions() {
-  const { width, height } = useWindowDimensions();
-  const [maxWidth, setMaxWidth] = useState<number>(Math.min(width, height));
-  const [isPortrait, setIsPortrait] = useState<boolean>(height > width);
-  const [padding, setPadding] = useState<number>(0);
-
-  useEffect(() => {
-    setMaxWidth(Math.min(width, height));
-    setIsPortrait(height > width);
-    setPadding(width < height ? 0 : (width - height) / 2);
-  }, [width, height]);
-
-  return { maxWidth, isPortrait, isLandscape: !isPortrait, padding };
-}

package/src/partials/w3m-otp-code/index.tsx

@@ -1,81 +0,0 @@
-import { Platform } from 'react-native';
-import { FlexView, Link, LoadingSpinner, Otp, Spacing, Text } from '@reown/appkit-ui-react-native';
-
-import { useKeyboard } from '../../hooks/useKeyboard';
-import styles from './styles';
-
-interface Props {
-  onCodeChange?: (code: string) => void;
-  onSubmit: (code: string) => void;
-  onRetry: () => void;
-  loading?: boolean;
-  error?: string;
-  email?: string;
-  timeLeft?: number;
-  codeExpiry?: number;
-  retryLabel?: string;
-  retryDisabledButtonLabel?: string;
-  retryButtonLabel?: string;
-}
-
-export function OtpCodeView({
-  onCodeChange,
-  onSubmit,
-  onRetry,
-  error,
-  loading,
-  email,
-  timeLeft = 0,
-  codeExpiry = 20,
-  retryLabel = "Didn't receive it?",
-  retryDisabledButtonLabel = 'Resend',
-  retryButtonLabel = 'Resend code'
-}: Props) {
-  const { keyboardShown, keyboardHeight } = useKeyboard();
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing.l : Spacing.l,
-    default: Spacing.l
-  });
-
-  const handleCodeChange = (code: string) => {
-    onCodeChange?.(code);
-
-    if (code.length === 6) {
-      onSubmit?.(code);
-    }
-  };
-
-  return (
-    <FlexView padding={['l', 'l', '3xl', 'l']} alignItems="center" style={{ paddingBottom }}>
-      <Text center variant="paragraph-400">
-        Enter the code we sent to{' '}
-      </Text>
-      <Text variant="paragraph-500">{email ?? 'your email'}</Text>
-      <Text style={styles.expiryText} variant="small-400" color="fg-200">
-        {`The code expires in ${codeExpiry} minutes`}
-      </Text>
-      <FlexView justifyContent="center" style={styles.otpContainer}>
-        {loading ? (
-          <LoadingSpinner size="xl" />
-        ) : (
-          <Otp length={6} onChangeText={handleCodeChange} autoFocus />
-        )}
-      </FlexView>
-      {error && (
-        <Text variant="small-400" color="error-100" style={styles.errorText}>
-          {error}
-        </Text>
-      )}
-      {!loading && (
-        <FlexView alignItems="center" flexDirection="row" margin={['s', '0', '0', '0']}>
-          <Text variant="small-400" color="fg-200">
-            {retryLabel}
-          </Text>
-          <Link onPress={onRetry} disabled={timeLeft > 0 || loading}>
-            {timeLeft > 0 ? `${retryDisabledButtonLabel} in ${timeLeft}s` : retryButtonLabel}
-          </Link>
-        </FlexView>
-      )}
-    </FlexView>
-  );
-}

package/src/partials/w3m-otp-code/styles.ts

@@ -1,15 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { Spacing } from '@reown/appkit-ui-react-native';
-
-export default StyleSheet.create({
-  expiryText: {
-    marginTop: Spacing.s,
-    marginBottom: Spacing.l
-  },
-  otpContainer: {
-    height: 60
-  },
-  errorText: {
-    marginTop: Spacing['2xs']
-  }
-});

package/src/views/w3m-connect-view/components/connect-email-input.tsx

@@ -1,69 +0,0 @@
-import { useSnapshot } from 'valtio';
-import { useState } from 'react';
-import { EmailInput, FlexView } from '@reown/appkit-ui-react-native';
-import {
-  ConnectorController,
-  CoreHelperUtil,
-  EventsController,
-  RouterController,
-  SnackController,
-  type AppKitFrameProvider
-} from '@reown/appkit-core-react-native';
-
-interface Props {
-  loading?: boolean;
-}
-
-export function ConnectEmailInput({ loading }: Props) {
-  const { connectors } = useSnapshot(ConnectorController.state);
-  const [inputLoading, setInputLoading] = useState(false);
-  const [error, setError] = useState('');
-  const [isValidEmail, setIsValidEmail] = useState(false);
-  const authProvider = connectors.find(c => c.type === 'AUTH')?.provider as AppKitFrameProvider;
-
-  const onChangeText = (value: string) => {
-    setIsValidEmail(CoreHelperUtil.isValidEmail(value));
-    setError('');
-  };
-
-  const onEmailFocus = () => {
-    EventsController.sendEvent({ type: 'track', event: 'EMAIL_LOGIN_SELECTED' });
-  };
-
-  const onEmailSubmit = async (email: string) => {
-    try {
-      if (email.length === 0) return;
-
-      setInputLoading(true);
-      const response = await authProvider.connectEmail({ email });
-      EventsController.sendEvent({ type: 'track', event: 'EMAIL_SUBMITTED' });
-      if (response.action === 'VERIFY_DEVICE') {
-        RouterController.push('EmailVerifyDevice', { email });
-      } else if (response.action === 'VERIFY_OTP') {
-        RouterController.push('EmailVerifyOtp', { email });
-      }
-    } catch (e: any) {
-      const parsedError = CoreHelperUtil.parseError(e);
-      if (parsedError?.includes('valid email')) {
-        setError('Invalid email. Try again.');
-      } else {
-        SnackController.showError(parsedError);
-      }
-    } finally {
-      setInputLoading(false);
-    }
-  };
-
-  return (
-    <FlexView padding={['0', 's', '0', 's']}>
-      <EmailInput
-        onSubmit={onEmailSubmit}
-        onFocus={onEmailFocus}
-        loading={inputLoading || loading}
-        errorMessage={error}
-        onChangeText={onChangeText}
-        submitEnabled={isValidEmail}
-      />
-    </FlexView>
-  );
-}

package/src/views/w3m-connect-view/components/connectors-list.tsx

@@ -1,45 +0,0 @@
-import { useSnapshot } from 'valtio';
-import type { StyleProp, ViewStyle } from 'react-native';
-import {
-  ConnectorController,
-  AssetUtil,
-  RouterController,
-  ApiController
-} from '@reown/appkit-core-react-native';
-
-import { ListWallet } from '@reown/appkit-ui-react-native';
-import type { ConnectorType } from '@reown/appkit-common-react-native';
-
-interface Props {
-  itemStyle: StyleProp<ViewStyle>;
-  isWalletConnectEnabled: boolean;
-}
-
-export function ConnectorList({ itemStyle, isWalletConnectEnabled }: Props) {
-  const { connectors } = useSnapshot(ConnectorController.state);
-  const excludeConnectors: ConnectorType[] = ['WALLET_CONNECT', 'AUTH'];
-  const imageHeaders = ApiController._getApiHeaders();
-
-  if (isWalletConnectEnabled) {
-    // use wallet from api list
-    excludeConnectors.push('COINBASE');
-  }
-
-  return connectors.map(connector => {
-    if (excludeConnectors.includes(connector.type)) {
-      return null;
-    }
-
-    return (
-      <ListWallet
-        key={connector.type}
-        imageSrc={AssetUtil.getConnectorImage(connector)}
-        imageHeaders={imageHeaders}
-        name={connector.name || 'Unknown'}
-        onPress={() => RouterController.push('ConnectingExternal', { connector })}
-        style={itemStyle}
-        installed={connector.installed}
-      />
-    );
-  });
-}

package/src/views/w3m-connect-view/components/custom-wallet-list.tsx

@@ -1,41 +0,0 @@
-import { useSnapshot } from 'valtio';
-import type { StyleProp, ViewStyle } from 'react-native';
-import {
-  OptionsController,
-  type CustomWallet,
-  type OptionsControllerState,
-  ApiController,
-  ConnectionController,
-  type ConnectionControllerState
-} from '@reown/appkit-core-react-native';
-import { ListWallet } from '@reown/appkit-ui-react-native';
-import { filterOutRecentWallets } from '../utils';
-
-interface Props {
-  itemStyle: StyleProp<ViewStyle>;
-  onWalletPress: (wallet: CustomWallet) => void;
-  isWalletConnectEnabled: boolean;
-}
-
-export function CustomWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
-  const { installed } = useSnapshot(ApiController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
-  const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
-  const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
-
-  if (!isWalletConnectEnabled || !customWallets?.length) {
-    return null;
-  }
-
-  const list = filterOutRecentWallets(recentWallets, customWallets, RECENT_COUNT);
-
-  return list.map(wallet => (
-    <ListWallet
-      key={wallet.id}
-      imageSrc={wallet.image_url}
-      name={wallet.name}
-      onPress={() => onWalletPress(wallet)}
-      style={itemStyle}
-    />
-  ));
-}