@reown/appkit-react-native 0.0.0-feat-multichain-20250513175016

package/src/partials/w3m-swap-details/utils.ts

@@ -0,0 +1,33 @@
+export interface ModalData {
+  detail: ModalDetail;
+  opts?: ModalDataOpts;
+}
+
+export type ModalDetail = 'slippage' | 'networkCost' | 'priceImpact';
+
+export interface ModalDataOpts {
+  networkSymbol?: string;
+  networkName?: string;
+  minimumReceive?: string;
+  toTokenSymbol?: string;
+}
+
+export const getModalData = (detail: ModalDetail, opts?: ModalDataOpts) => {
+  switch (detail) {
+    case 'slippage':
+      return {
+        title: 'Max. slippage',
+        description: `Max slippage sets the minimum amount you must receive for the transaction to proceed. The transaction will be reversed if you receive less than ${opts?.minimumReceive} ${opts?.toTokenSymbol} due to price changes`
+      };
+    case 'networkCost':
+      return {
+        title: 'Network cost',
+        description: `Network cost is paid in ${opts?.networkSymbol} on the ${opts?.networkName} network in order to execute the transaction`
+      };
+    case 'priceImpact':
+      return {
+        title: 'Price impact',
+        description: 'Price impact reflects the change in market price due to your trade'
+      };
+  }
+};

package/src/partials/w3m-swap-input/index.tsx

@@ -0,0 +1,152 @@
+import { useRef } from 'react';
+import type BigNumber from 'bignumber.js';
+import { TextInput, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  FlexView,
+  useTheme,
+  TokenButton,
+  Shimmer,
+  Text,
+  UiUtil,
+  Link
+} from '@reown/appkit-ui-react-native';
+import { type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
+
+import styles from './styles';
+import { NumberUtil } from '@reown/appkit-common-react-native';
+
+export interface SwapInputProps {
+  token?: SwapTokenWithBalance;
+  value?: string;
+  gasPrice?: number;
+  style?: StyleProp<ViewStyle>;
+  loading?: boolean;
+  onTokenPress?: () => void;
+  onMaxPress?: () => void;
+  onChange?: (value: string) => void;
+  balance?: BigNumber;
+  marketValue?: number;
+  editable?: boolean;
+  autoFocus?: boolean;
+}
+
+const MINIMUM_USD_VALUE_TO_CONVERT = 0.00005;
+
+export function SwapInput({
+  token,
+  value,
+  style,
+  loading,
+  onTokenPress,
+  onMaxPress,
+  onChange,
+  marketValue,
+  editable,
+  autoFocus
+}: SwapInputProps) {
+  const Theme = useTheme();
+  const valueInputRef = useRef<TextInput | null>(null);
+  const isMarketValueGreaterThanZero =
+    !!marketValue && NumberUtil.bigNumber(marketValue).isGreaterThan('0');
+  const maxAmount = UiUtil.formatNumberToLocalString(token?.quantity.numeric, 3);
+  const maxError = Number(value) > Number(token?.quantity.numeric);
+  const showMax =
+    onMaxPress &&
+    !!token?.quantity.numeric &&
+    NumberUtil.multiply(token?.quantity.numeric, token?.price).isGreaterThan(
+      MINIMUM_USD_VALUE_TO_CONVERT
+    );
+
+  const handleInputChange = (_value: string) => {
+    const formattedValue = _value.replace(/,/g, '.');
+
+    if (Number(formattedValue) >= 0 || formattedValue === '') {
+      onChange?.(formattedValue);
+    }
+  };
+
+  const handleMaxPress = () => {
+    if (valueInputRef.current) {
+      valueInputRef.current.blur();
+    }
+
+    onMaxPress?.();
+  };
+
+  return (
+    <FlexView
+      style={[
+        styles.container,
+        { backgroundColor: Theme['gray-glass-005'], borderColor: Theme['gray-glass-005'] },
+        style
+      ]}
+      justifyContent="center"
+      padding={['xl', 'l', 'l', 'l']}
+    >
+      {loading ? (
+        <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
+          <Shimmer height={36} width={80} borderRadius={12} />
+          <Shimmer height={36} width={80} borderRadius={18} />
+        </FlexView>
+      ) : (
+        <>
+          <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
+            <TextInput
+              ref={valueInputRef}
+              placeholder="0"
+              placeholderTextColor={Theme['fg-275']}
+              returnKeyType="done"
+              style={[styles.input, { color: Theme['fg-100'] }]}
+              autoCapitalize="none"
+              autoCorrect={false}
+              value={value}
+              onChangeText={handleInputChange}
+              keyboardType="decimal-pad"
+              inputMode="decimal"
+              autoComplete="off"
+              spellCheck={false}
+              selectionColor={Theme['accent-100']}
+              underlineColorAndroid="transparent"
+              selectTextOnFocus={false}
+              numberOfLines={1}
+              editable={editable}
+              autoFocus={autoFocus}
+            />
+            <TokenButton
+              text={token?.symbol}
+              imageUrl={token?.logoUri}
+              onPress={onTokenPress}
+              chevron
+            />
+          </FlexView>
+          {(showMax || isMarketValueGreaterThanZero) && (
+            <FlexView
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="space-between"
+              margin={['3xs', '0', '0', '0']}
+            >
+              <Text variant="small-400" color="fg-200" numberOfLines={1}>
+                {isMarketValueGreaterThanZero
+                  ? `~$${UiUtil.formatNumberToLocalString(marketValue, 2)}`
+                  : ''}
+              </Text>
+              {showMax && (
+                <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+                  <Text
+                    variant="small-400"
+                    color={maxError ? 'error-100' : 'fg-200'}
+                    numberOfLines={1}
+                  >
+                    {showMax ? maxAmount : ''}
+                  </Text>
+                  <Link onPress={handleMaxPress}>Max</Link>
+                </FlexView>
+              )}
+            </FlexView>
+          )}
+        </>
+      )}
+    </FlexView>
+  );
+}

package/src/partials/w3m-swap-input/styles.ts

@@ -0,0 +1,20 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: 100,
+    width: '100%',
+    borderRadius: BorderRadius.s,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  input: {
+    fontSize: 32,
+    flex: 1,
+    marginRight: Spacing.xs
+  },
+  sendValue: {
+    flex: 1,
+    marginRight: Spacing.xs
+  }
+});

package/src/utils/HelpersUtil.ts

@@ -0,0 +1,214 @@
+import type { Namespace, NamespaceConfig } from '@walletconnect/universal-provider';
+
+import type {
+  AppKitNetwork,
+  CaipNetworkId,
+  ChainNamespace
+} from '@reown/appkit-common-react-native';
+import { solana, solanaDevnet } from '../networks/solana';
+// import { EnsController, type OptionsControllerState } from '@reown/appkit-controllers'
+
+// import { solana, solanaDevnet } from '../networks/index.js'
+
+export const DEFAULT_METHODS = {
+  solana: [
+    'solana_signMessage',
+    'solana_signTransaction',
+    'solana_requestAccounts',
+    'solana_getAccounts',
+    'solana_signAllTransactions',
+    'solana_signAndSendTransaction'
+  ],
+  eip155: [
+    'eth_accounts',
+    'eth_requestAccounts',
+    'eth_sendRawTransaction',
+    'eth_sign',
+    'eth_signTransaction',
+    'eth_signTypedData',
+    'eth_signTypedData_v3',
+    'eth_signTypedData_v4',
+    'eth_sendTransaction',
+    'personal_sign',
+    'wallet_switchEthereumChain',
+    'wallet_addEthereumChain',
+    'wallet_getPermissions',
+    'wallet_requestPermissions',
+    'wallet_registerOnboarding',
+    'wallet_watchAsset',
+    'wallet_scanQRCode',
+    // EIP-5792
+    'wallet_getCallsStatus',
+    'wallet_showCallsStatus',
+    'wallet_sendCalls',
+    'wallet_getCapabilities',
+    // EIP-7715
+    'wallet_grantPermissions',
+    'wallet_revokePermissions',
+    //EIP-7811
+    'wallet_getAssets'
+  ],
+  bip122: ['sendTransfer', 'signMessage', 'signPsbt', 'getAccountAddresses']
+};
+
+export const WcHelpersUtil = {
+  getMethodsByChainNamespace(chainNamespace: ChainNamespace): string[] {
+    return DEFAULT_METHODS[chainNamespace as keyof typeof DEFAULT_METHODS] || [];
+  },
+
+  createDefaultNamespace(chainNamespace: ChainNamespace): Namespace {
+    return {
+      methods: this.getMethodsByChainNamespace(chainNamespace),
+      events: ['accountsChanged', 'chainChanged'],
+      chains: [],
+      rpcMap: {}
+    };
+  },
+
+  applyNamespaceOverrides(
+    baseNamespaces: NamespaceConfig,
+    overrides?: any //TODO: add OptionsControllerState['universalProviderConfigOverride']
+  ): NamespaceConfig {
+    if (!overrides) {
+      return { ...baseNamespaces };
+    }
+
+    const result = { ...baseNamespaces };
+
+    const namespacesToOverride = new Set<string>();
+
+    if (overrides.methods) {
+      Object.keys(overrides.methods).forEach(ns => namespacesToOverride.add(ns));
+    }
+
+    if (overrides.chains) {
+      Object.keys(overrides.chains).forEach(ns => namespacesToOverride.add(ns));
+    }
+
+    if (overrides.events) {
+      Object.keys(overrides.events).forEach(ns => namespacesToOverride.add(ns));
+    }
+
+    if (overrides.rpcMap) {
+      Object.keys(overrides.rpcMap).forEach(chainId => {
+        const [ns] = chainId.split(':');
+        if (ns) {
+          namespacesToOverride.add(ns);
+        }
+      });
+    }
+
+    namespacesToOverride.forEach(ns => {
+      if (!result[ns]) {
+        result[ns] = this.createDefaultNamespace(ns as ChainNamespace);
+      }
+    });
+
+    if (overrides.methods) {
+      Object.entries(overrides.methods).forEach(([ns, methods]) => {
+        if (result[ns]) {
+          //@ts-ignore
+          result[ns].methods = methods;
+        }
+      });
+    }
+
+    if (overrides.chains) {
+      Object.entries(overrides.chains).forEach(([ns, chains]) => {
+        if (result[ns]) {
+          //@ts-ignore
+          result[ns].chains = chains;
+        }
+      });
+    }
+
+    if (overrides.events) {
+      Object.entries(overrides.events).forEach(([ns, events]) => {
+        if (result[ns]) {
+          //@ts-ignore
+          result[ns].events = events;
+        }
+      });
+    }
+
+    if (overrides.rpcMap) {
+      const processedNamespaces = new Set<string>();
+
+      Object.entries(overrides.rpcMap).forEach(([chainId, rpcUrl]) => {
+        const [ns, id] = chainId.split(':');
+        if (!ns || !id || !result[ns]) {
+          return;
+        }
+
+        //@ts-ignore
+        if (!result[ns].rpcMap) {
+          //@ts-ignore
+          result[ns].rpcMap = {};
+        }
+
+        //@ts-ignore
+        if (!processedNamespaces.has(ns)) {
+          //@ts-ignore
+          result[ns].rpcMap = {};
+          processedNamespaces.add(ns);
+        }
+
+        //@ts-ignore
+        result[ns].rpcMap[id] = rpcUrl;
+      });
+    }
+
+    return result;
+  },
+
+  createNamespaces(
+    caipNetworks: AppKitNetwork[],
+    configOverride?: any //TODO: fix this
+  ): NamespaceConfig {
+    const defaultNamespaces = caipNetworks.reduce<NamespaceConfig>((acc, chain) => {
+      const { id, rpcUrls } = chain;
+      const chainNamespace = chain.chainNamespace || 'eip155';
+      const rpcUrl = rpcUrls.default.http[0];
+
+      if (!acc[chainNamespace]) {
+        acc[chainNamespace] = this.createDefaultNamespace(chainNamespace);
+      }
+
+      const caipNetworkId: CaipNetworkId = `${chainNamespace}:${id}`;
+
+      const namespace = acc[chainNamespace];
+
+      if (namespace) {
+        //@ts-ignore
+        namespace.chains.push(caipNetworkId);
+
+        // Workaround for wallets that only support deprecated Solana network ID
+        switch (caipNetworkId) {
+          case solana.caipNetworkId:
+            namespace.chains.push(solana.deprecatedCaipNetworkId as string);
+            break;
+          case solanaDevnet.caipNetworkId:
+            namespace.chains.push(solanaDevnet.deprecatedCaipNetworkId as string);
+            break;
+          default:
+        }
+
+        if (namespace?.rpcMap && rpcUrl) {
+          namespace.rpcMap[id] = rpcUrl;
+        }
+      }
+
+      return acc;
+    }, {});
+
+    return this.applyNamespaceOverrides(defaultNamespaces, configOverride);
+  }
+};
+
+export namespace WcHelpersUtil {
+  export type SessionEventData = {
+    id: string;
+    topic: string;
+    params: { chainId: string; event: { data: unknown; name: string } };
+  };
+}

package/src/utils/NetworkUtil.ts

@@ -0,0 +1,53 @@
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import type { AppKitNetwork, CaipNetworkId } from '@reown/appkit-common-react-native';
+
+export const NetworkUtil = {
+  //TODO: check this function
+  formatNetworks(networks: AppKitNetwork[], projectId: string): AppKitNetwork[] {
+    return networks.map(network => {
+      const formattedNetwork = {
+        ...network,
+        rpcUrls: { ...network.rpcUrls }
+      };
+
+      Object.keys(formattedNetwork.rpcUrls).forEach(key => {
+        const rpcConfig = formattedNetwork.rpcUrls[key];
+        if (rpcConfig?.http?.some(url => url.includes(ConstantsUtil.BLOCKCHAIN_API_RPC_URL))) {
+          formattedNetwork.rpcUrls[key] = {
+            ...rpcConfig,
+            http: [
+              this.getBlockchainApiRpcUrl(
+                network.caipNetworkId ?? `${network.chainNamespace ?? 'eip155'}:${network.id}`,
+                projectId
+              )
+            ]
+          };
+        }
+      });
+
+      return formattedNetwork;
+    });
+  },
+
+  getBlockchainApiRpcUrl(caipNetworkId: CaipNetworkId, projectId: string) {
+    const url = new URL(`${ConstantsUtil.BLOCKCHAIN_API_RPC_URL}/v1/`);
+    url.searchParams.set('chainId', caipNetworkId);
+    url.searchParams.set('projectId', projectId);
+
+    return url.toString();
+  },
+
+  getDefaultChainId(network?: AppKitNetwork): CaipNetworkId | undefined {
+    if (!network) return undefined;
+
+    if (network.caipNetworkId) {
+      return network.caipNetworkId;
+    }
+
+    if (network.chainNamespace) {
+      return `${network.chainNamespace}:${network.id}`;
+    }
+
+    return `eip155:${network.id}`;
+  }
+};

package/src/utils/UiUtil.ts

@@ -0,0 +1,42 @@
+import {
+  AssetUtil,
+  ConnectionController,
+  StorageUtil,
+  type WcWallet
+} from '@reown/appkit-core-react-native';
+import {
+  LayoutAnimation,
+  type LayoutAnimationProperty,
+  type LayoutAnimationType
+} from 'react-native';
+
+export const UiUtil = {
+  TOTAL_VISIBLE_WALLETS: 4,
+
+  createViewTransition: () => {
+    LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'));
+  },
+
+  animateChange: (
+    type: LayoutAnimationType = 'linear',
+    creationProp: LayoutAnimationProperty = 'scaleX'
+  ) => {
+    LayoutAnimation.configureNext(LayoutAnimation.create(150, type, creationProp));
+  },
+
+  storeConnectedWallet: async (
+    wcLinking: { name: string; href: string },
+    pressedWallet?: WcWallet
+  ) => {
+    StorageUtil.setWalletConnectDeepLink(wcLinking);
+
+    if (pressedWallet) {
+      const recentWallets = await StorageUtil.addRecentWallet(pressedWallet);
+      if (recentWallets) {
+        ConnectionController.setRecentWallets(recentWallets);
+      }
+      const url = AssetUtil.getWalletImage(pressedWallet);
+      ConnectionController.setConnectedWalletImageUrl(url);
+    }
+  }
+};

package/src/views/w3m-account-default-view/components/auth-buttons.tsx

@@ -0,0 +1,68 @@
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { UpgradeWalletButton } from './upgrade-wallet-button';
+import { ListItem, ListSocial, Spacing, Text } from '@reown/appkit-ui-react-native';
+import type { SocialProvider } from '@reown/appkit-common-react-native';
+
+export interface AuthButtonsProps {
+  onUpgradePress: () => void;
+  onPress: () => void;
+  socialProvider?: SocialProvider;
+  text: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AuthButtons({
+  onUpgradePress,
+  onPress,
+  socialProvider,
+  text,
+  style
+}: AuthButtonsProps) {
+  return (
+    <>
+      <UpgradeWalletButton onPress={onUpgradePress} style={styles.upgradeButton} />
+      {socialProvider ? (
+        <ListSocial
+          logo={socialProvider}
+          logoHeight={32}
+          logoWidth={32}
+          style={[styles.socialContainer, style]}
+        >
+          <Text color="fg-100" numberOfLines={1} ellipsizeMode="tail" style={styles.socialText}>
+            {text}
+          </Text>
+        </ListSocial>
+      ) : (
+        <ListItem
+          icon="mail"
+          onPress={onPress}
+          chevron
+          testID="button-email"
+          iconColor="fg-100"
+          style={style}
+        >
+          <Text color="fg-100" numberOfLines={1} ellipsizeMode="tail">
+            {text}
+          </Text>
+        </ListItem>
+      )}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  actionButton: {
+    marginBottom: Spacing.xs
+  },
+  upgradeButton: {
+    marginBottom: Spacing.s
+  },
+  socialContainer: {
+    justifyContent: 'flex-start',
+    width: '100%'
+  },
+  socialText: {
+    flex: 1,
+    marginLeft: Spacing.s
+  }
+});

package/src/views/w3m-account-default-view/components/upgrade-wallet-button.tsx

@@ -0,0 +1,67 @@
+import { Animated, Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  BorderRadius,
+  FlexView,
+  Icon,
+  IconBox,
+  Spacing,
+  Text,
+  useTheme,
+  useAnimatedValue
+} from '@reown/appkit-ui-react-native';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface Props {
+  onPress: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function UpgradeWalletButton({ style, onPress }: Props) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['accent-glass-010'],
+    Theme['accent-glass-020']
+  );
+
+  return (
+    <AnimatedPressable
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      style={[styles.container, { backgroundColor: animatedValue }, style]}
+    >
+      <IconBox icon="wallet" size="lg" background iconColor="accent-100" />
+      <FlexView flexGrow={1} margin={['0', 's', '0', 's']}>
+        <Text style={styles.upgradeText} color="fg-100">
+          Upgrade your wallet
+        </Text>
+        <Text variant="small-400" color="fg-150">
+          Transition to a self-custodial wallet
+        </Text>
+      </FlexView>
+      <Icon name="chevronRight" size="md" color="fg-150" style={styles.chevron} />
+    </AnimatedPressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 75,
+    borderRadius: BorderRadius.s,
+    backgroundColor: 'red',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: Spacing.s
+  },
+  textContainer: {
+    marginHorizontal: Spacing.m
+  },
+  upgradeText: {
+    marginBottom: Spacing['3xs']
+  },
+  chevron: {
+    marginRight: Spacing['2xs']
+  }
+});