@reown/appkit-siwe-react-native/lib/module/scaffold/views/w3m-connecting-siwe-view/index.js

#### 🔎 [Examples](https://github.com/reown-com/react-native-examples)

import { useSnapshot } from 'valtio';
import { Avatar, Button, DoubleImageLoader, FlexView, IconLink, Text } from '@reown/appkit-ui-react-native';
import { AccountController, AssetUtil, ConnectionController, EventsController, ModalController, NetworkController, OptionsController, RouterController, SnackController } from '@reown/appkit-core-react-native';
import { useState } from 'react';
import { SIWEController } from '../../../controller/SIWEController';
import styles from './styles';
export function ConnectingSiweView() {
  const {
    metadata
  } = useSnapshot(OptionsController.state);
  const {
    connectedWalletImageUrl,
    pressedWallet
  } = useSnapshot(ConnectionController.state);
  const {
    address,
    profileImage
  } = useSnapshot(AccountController.state);
  const [isSigning, setIsSigning] = useState(false);
  const [isDisconnecting, setIsDisconnecting] = useState(false);
  const dappName = metadata?.name || 'Dapp';
  const dappIcon = metadata?.icons[0] || '';
  const walletIcon = AssetUtil.getWalletImage(pressedWallet) || connectedWalletImageUrl;
  const onSign = async () => {
    setIsSigning(true);
    EventsController.sendEvent({
      event: 'CLICK_SIGN_SIWE_MESSAGE',
      type: 'track',
      properties: {
        network: NetworkController.state.caipNetwork?.id || '',
        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
      }
    });
    try {
      const session = await SIWEController.signIn();
      EventsController.sendEvent({
        event: 'SIWE_AUTH_SUCCESS',
        type: 'track',
        properties: {
          network: NetworkController.state.caipNetwork?.id || '',
          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
        }
      });
      return session;
    } catch (error) {
      SnackController.showError('Signature declined');
      SIWEController.setStatus('error');
      return EventsController.sendEvent({
        event: 'SIWE_AUTH_ERROR',
        type: 'track',
        properties: {
          network: NetworkController.state.caipNetwork?.id || '',
          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
        }
      });
    } finally {
      setIsSigning(false);
    }
  };
  const onCancel = async () => {
    const {
      isConnected
    } = AccountController.state;
    if (isConnected) {
      setIsDisconnecting(true);
      await ConnectionController.disconnect();
      ModalController.close();
      setIsDisconnecting(false);
    } else {
      RouterController.push('Connect');
    }
    EventsController.sendEvent({
      event: 'CLICK_CANCEL_SIWE',
      type: 'track',
      properties: {
        network: NetworkController.state.caipNetwork?.id || '',
        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
      }
    });
  };
  return /*#__PURE__*/React.createElement(FlexView, {
    padding: ['2xl', 's', '3xl', 's']
  }, /*#__PURE__*/React.createElement(IconLink, {
    icon: "close",
    size: "md",
    onPress: onCancel,
    testID: "header-close",
    style: styles.closeButton
  }), /*#__PURE__*/React.createElement(Text, {
    variant: "paragraph-600",
    numberOfLines: 1,
    center: true
  }, "Sign in"), /*#__PURE__*/React.createElement(DoubleImageLoader, {
    style: styles.logoContainer,
    leftImage: dappIcon,
    rightImage: walletIcon,
    renderRightPlaceholder: () => /*#__PURE__*/React.createElement(Avatar, {
      imageSrc: profileImage,
      address: address,
      size: 60,
      borderWidth: 0
    }),
    rightItemStyle: !walletIcon && styles.walletAvatar
  }), /*#__PURE__*/React.createElement(Text, {
    center: true,
    variant: "medium-600",
    color: "fg-100",
    style: styles.title
  }, dappName, " needs to connect to your wallet"), /*#__PURE__*/React.createElement(Text, {
    center: true,
    variant: "small-400",
    color: "fg-200",
    style: styles.subtitle
  }, "Sign this message to prove you own this wallet and proceed. Cancelling will disconnect you"), /*#__PURE__*/React.createElement(FlexView, {
    flexDirection: "row",
    justifyContent: "space-between",
    margin: ['s', '0', '0', '0']
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "shade",
    onPress: onCancel,
    style: styles.button,
    loading: isDisconnecting
  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
    variant: "fill",
    loading: isSigning,
    disabled: isDisconnecting,
    onPress: onSign,
    style: styles.button
  }, "Sign")));
}
//# sourceMappingURL=index.js.map