chore: reown migration (#166)

* chore: migrate packages

README.md

@@ -20,7 +20,7 @@ React Native examples implementing WalletConnect AppKit and WalletKit
 ## Getting Started
 
 - Ensure your [React Native environment](https://reactnative.dev/docs/next/set-up-your-environment) has been properly setup (XCode, ruby etc).
-- Read our [React Native docs](https://docs.walletconnect.com/appkit/react-native/core/installation)
+- Read our [React Native docs](https://docs.reown.com/appkit/react-native/core/installation)
 - Read through the various README files for further information
 - Submit any issues / feature requests.
 

dapps/ModalEthers/.env.example

@@ -1 +1 @@
-ENV_PROJECT_ID='YOUR_PROJECT_ID' #Get it from https://cloud.walletconnect.com/
+ENV_PROJECT_ID='YOUR_PROJECT_ID' #Get it from https://cloud.reown.com/

dapps/ModalEthers/src/utils/ConfigUtils.ts

@@ -5,7 +5,7 @@ const providerMetadata: IProviderMetadata = {
   name: 'Modal with Ethers',
   description: 'RN example using Ethers 5 by WalletConnect',
   url: 'https://walletconnect.com/',
-  icons: ['https://avatars.githubusercontent.com/u/37784886'],
+  icons: ['https://avatars.githubusercontent.com/u/179229932'],
   redirect: {
     native: 'wcmetherssample://',
   },

dapps/ModalUProvider/.env.example

@@ -1,3 +1,3 @@
-ENV_PROJECT_ID='YOUR_ENV_PROJECT_ID' #Get it from https://cloud.walletconnect.com/
+ENV_PROJECT_ID='YOUR_ENV_PROJECT_ID' #Get it from https://cloud.reown.com/
 ENV_RELAY_URL=''
 ENV_SENTRY_DSN='...'

dapps/ModalUProvider/src/utils/ConfigUtils.ts

@@ -5,7 +5,7 @@ const providerMetadata: IProviderMetadata = {
   name: 'Modal with UProvider',
   description: 'RN example using Universal Provider by WalletConnect',
   url: 'https://walletconnect.com/',
-  icons: ['https://avatars.githubusercontent.com/u/37784886'],
+  icons: ['https://avatars.githubusercontent.com/u/179229932'],
   redirect: {
     native: 'wcmuprovidersample://',
   },

dapps/ModalViem/.env.example

@@ -1 +1 @@
-ENV_PROJECT_ID='YOUR_PROJECT_ID' #Get it from https://cloud.walletconnect.com/
+ENV_PROJECT_ID='YOUR_PROJECT_ID' #Get it from https://cloud.reown.com/

dapps/ModalViem/src/utils/ConfigUtils.ts

@@ -5,7 +5,7 @@ const providerMetadata: IProviderMetadata = {
   name: 'Modal with Viem',
   description: 'RN example using Viem by WalletConnect',
   url: 'https://walletconnect.com/',
-  icons: ['https://avatars.githubusercontent.com/u/37784886'],
+  icons: ['https://avatars.githubusercontent.com/u/179229932'],
   redirect: {
     native: 'wcmviemsample://',
   },

dapps/W3MEthers/.env.example

@@ -1 +1 @@
-ENV_PROJECT_ID='YOUR_PROJECT_ID' #Get it from https://cloud.walletconnect.com/
+ENV_PROJECT_ID='YOUR_PROJECT_ID' #Get it from https://cloud.reown.com/

dapps/W3MEthers/ios/Podfile.lock

@@ -970,7 +970,7 @@ PODS:
   - React-Mapbuffer (0.73.4):
     - glog
     - React-debug
-  - react-native-compat (2.15.1):
+  - react-native-compat (2.16.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1449,7 +1449,7 @@ SPEC CHECKSUMS:
   React-jsinspector: 9ac353eccf6ab54d1e0a33862ba91221d1e88460
   React-logger: 0a57b68dd2aec7ff738195f081f0520724b35dab
   React-Mapbuffer: 63913773ed7f96b814a2521e13e6d010282096ad
-  react-native-compat: 52cb0d2564c4f73df88a427f14aa81626c33fe32
+  react-native-compat: 18a0603ec7be84855f7a908329ea877069d47570
   react-native-get-random-values: 384787fd76976f5aec9465aff6fa9e9129af1e74
   react-native-mmkv: e97c0c79403fb94577e5d902ab1ebd42b0715b43
   react-native-netinfo: 8a7fd3f7130ef4ad2fb4276d5c9f8d3f28d2df3d

dapps/W3MEthers/package.json

@@ -15,10 +15,10 @@
     "@react-native-async-storage/async-storage": "1.21.0",
     "@react-native-clipboard/clipboard": "1.13.2",
     "@react-native-community/netinfo": "11.2.1",
-    "@walletconnect/react-native-compat": "2.15.1",
-    "@web3modal/coinbase-ethers-react-native": "2.0.2",
-    "@web3modal/email-ethers-react-native": "2.0.2",
-    "@web3modal/ethers-react-native": "2.0.2",
+    "@walletconnect/react-native-compat": "2.16.1",
+    "@reown/appkit-coinbase-ethers-react-native": "1.0.0",
+    "@reown/appkit-auth-ethers-react-native": "1.0.0",
+    "@reown/appkit-ethers-react-native": "1.0.0",
     "ethers": "6.10.0",
     "expo": "^50.0.0",
     "react": "18.2.0",

dapps/W3MEthers/src/App.tsx

@@ -5,15 +5,15 @@ import {Linking, SafeAreaView, StyleSheet} from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 
 import {
-  createWeb3Modal,
+  createAppKit,
   defaultConfig,
-  W3mButton,
-  Web3Modal,
-} from '@web3modal/ethers-react-native';
-import {FlexView, Text} from '@web3modal/ui-react-native';
+  AppKitButton,
+  AppKit,
+} from '@reown/appkit-ethers-react-native';
+import {FlexView, Text} from '@reown/appkit-ui-react-native';
 import {handleResponse} from '@coinbase/wallet-mobile-sdk';
-import {CoinbaseProvider} from '@web3modal/coinbase-ethers-react-native';
-import {EmailProvider} from '@web3modal/email-ethers-react-native';
+import {CoinbaseProvider} from '@reown/appkit-coinbase-ethers-react-native';
+import {AuthProvider} from '@reown/appkit-auth-ethers-react-native';
 import {ENV_PROJECT_ID} from '@env';
 
 import {SignMessage} from './views/SignMessage';
@@ -24,18 +24,18 @@ import {SignTypedDataV4} from './views/SignTypedDataV4';
 import {mainnet, polygon} from './utils/ChainUtils';
 import {siweConfig} from './utils/SiweUtils';
 
-// 1. Get projectId at https://cloud.walletconnect.com
+// 1. Get projectId at https://cloud.reown.com
 const projectId = ENV_PROJECT_ID;
 
 // 2. Define your chains
 const chains = [mainnet, polygon];
 
 // 3. Create config
 const metadata = {
-  name: 'W3M ethers',
-  description: 'Web3Modal with Ethers',
-  url: 'https://web3modal.com',
-  icons: ['https://avatars.githubusercontent.com/u/37784886'],
+  name: 'AppKit Ethers',
+  description: 'AppKit with Ethers',
+  url: 'https://reown.com/appkit',
+  icons: ['https://avatars.githubusercontent.com/u/179229932'],
   redirect: {
     native: 'rn-w3m-ethers-sample://',
   },
@@ -46,11 +46,11 @@ const coinbaseProvider = new CoinbaseProvider({
   rpcUrl: mainnet.rpcUrl,
 });
 
-const emailProvider = new EmailProvider({projectId, metadata});
+const auth = new AuthProvider({projectId, metadata});
 
 const config = defaultConfig({
   metadata,
-  extraConnectors: [coinbaseProvider, emailProvider],
+  extraConnectors: [coinbaseProvider, auth],
 });
 
 const clipboardClient = {
@@ -70,7 +70,7 @@ const customWallets = [
 ];
 
 // 3. Create modal
-createWeb3Modal({
+createAppKit({
   projectId,
   chains,
   config,
@@ -96,17 +96,17 @@ function App(): React.JSX.Element {
   return (
     <SafeAreaView style={styles.container}>
       <Text style={styles.title} variant="large-600">
-        Web3Modal + ethers
+        AppKit + ethers
       </Text>
       <FlexView style={styles.buttonContainer}>
-        <W3mButton balance="show" />
+        <AppKitButton balance="show" />
         <SignMessage />
         <SendTransaction />
         <SignTypedDataV4 />
         <ReadContract />
         <WriteContract />
       </FlexView>
-      <Web3Modal />
+      <AppKit />
     </SafeAreaView>
   );
 }

dapps/W3MEthers/src/utils/SiweUtils.ts

@@ -3,9 +3,9 @@
 import type {
   SIWEVerifyMessageArgs,
   SIWECreateMessageArgs,
-} from '@web3modal/siwe-react-native';
+} from '@reown/appkit-siwe-react-native';
 import {generateRandomBytes32} from '@walletconnect/utils';
-import {createSIWEConfig, formatMessage} from '@web3modal/siwe-react-native';
+import {createSIWEConfig, formatMessage} from '@reown/appkit-siwe-react-native';
 import {mainnet, polygon} from './ChainUtils';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 

dapps/W3MEthers/src/views/ReadContract.tsx

@@ -1,12 +1,12 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import {Button} from '@web3modal/ui-react-native';
+import {Button} from '@reown/appkit-ui-react-native';
 
 import {RequestModal} from '../components/RequestModal';
 import {
-  useWeb3ModalAccount,
-  useWeb3ModalProvider,
-} from '@web3modal/ethers-react-native';
+  useAppKitAccount,
+  useAppKitProvider,
+} from '@reown/appkit-ethers-react-native';
 import {BrowserProvider, Contract} from 'ethers';
 import wagmigotchiABI from '../utils/wagmigotchiABI';
 
@@ -15,8 +15,8 @@ export function ReadContract() {
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<string | undefined>();
   const [error, setError] = useState(false);
-  const {walletProvider} = useWeb3ModalProvider();
-  const {isConnected} = useWeb3ModalAccount();
+  const {walletProvider} = useAppKitProvider();
+  const {isConnected} = useAppKitAccount();
 
   const onPress = async () => {
     if (!isConnected || !walletProvider) {

dapps/W3MEthers/src/views/SendTransaction.tsx

@@ -1,22 +1,22 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import {Button} from '@web3modal/ui-react-native';
+import {Button} from '@reown/appkit-ui-react-native';
 
 import {RequestModal} from '../components/RequestModal';
 
 import {
-  useWeb3ModalAccount,
-  useWeb3ModalProvider,
-} from '@web3modal/ethers-react-native';
+  useAppKitAccount,
+  useAppKitProvider,
+} from '@reown/appkit-ethers-react-native';
 import {BrowserProvider, parseEther} from 'ethers';
 
 export function SendTransaction() {
   const [requestModalVisible, setRequetsModalVisible] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<string | undefined>();
   const [error, setError] = useState(false);
-  const {walletProvider} = useWeb3ModalProvider();
-  const {isConnected} = useWeb3ModalAccount();
+  const {walletProvider} = useAppKitProvider();
+  const {isConnected} = useAppKitAccount();
 
   const onPress = async () => {
     if (!isConnected || !walletProvider) {

dapps/W3MEthers/src/views/SignMessage.tsx

@@ -1,21 +1,21 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import {Button} from '@web3modal/ui-react-native';
+import {Button} from '@reown/appkit-ui-react-native';
 
 import {RequestModal} from '../components/RequestModal';
 import {BrowserProvider} from 'ethers';
 import {
-  useWeb3ModalAccount,
-  useWeb3ModalProvider,
-} from '@web3modal/ethers-react-native';
+  useAppKitAccount,
+  useAppKitProvider,
+} from '@reown/appkit-ethers-react-native';
 
 export function SignMessage() {
   const [requestModalVisible, setRequetsModalVisible] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<string | undefined>();
   const [error, setError] = useState(false);
-  const {walletProvider} = useWeb3ModalProvider();
-  const {isConnected} = useWeb3ModalAccount();
+  const {walletProvider} = useAppKitProvider();
+  const {isConnected} = useAppKitAccount();
 
   const onPress = async () => {
     if (!isConnected || !walletProvider) {

dapps/W3MEthers/src/views/SignTypedDataV4.tsx

@@ -1,22 +1,22 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import {Button} from '@web3modal/ui-react-native';
+import {Button} from '@reown/appkit-ui-react-native';
 
 import {RequestModal} from '../components/RequestModal';
 import {BrowserProvider} from 'ethers';
 import {
-  useWeb3ModalAccount,
-  useWeb3ModalProvider,
-} from '@web3modal/ethers-react-native';
+  useAppKitAccount,
+  useAppKitProvider,
+} from '@reown/appkit-ethers-react-native';
 import {eip712} from '../utils/eip712';
 
 export function SignTypedDataV4() {
   const [requestModalVisible, setRequetsModalVisible] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<string | undefined>();
   const [error, setError] = useState(false);
-  const {walletProvider} = useWeb3ModalProvider();
-  const {isConnected} = useWeb3ModalAccount();
+  const {walletProvider} = useAppKitProvider();
+  const {isConnected} = useAppKitAccount();
 
   const onPress = async () => {
     if (!isConnected || !walletProvider) {

dapps/W3MEthers/src/views/WriteContract.tsx

@@ -1,22 +1,22 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import {Button} from '@web3modal/ui-react-native';
+import {Button} from '@reown/appkit-ui-react-native';
 
 import {RequestModal} from '../components/RequestModal';
 import usdtAbi from '../utils/usdtAbi';
 import {
-  useWeb3ModalAccount,
-  useWeb3ModalProvider,
-} from '@web3modal/ethers-react-native';
+  useAppKitAccount,
+  useAppKitProvider,
+} from '@reown/appkit-ethers-react-native';
 import {BrowserProvider, Contract} from 'ethers';
 
 export function WriteContract() {
   const [requestModalVisible, setRequetsModalVisible] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<string | undefined>();
   const [error, setError] = useState(false);
-  const {walletProvider} = useWeb3ModalProvider();
-  const {isConnected} = useWeb3ModalAccount();
+  const {walletProvider} = useAppKitProvider();
+  const {isConnected} = useAppKitAccount();
 
   const onPress = async () => {
     if (!isConnected || !walletProvider) {