앱에서 MetaMask 연동하기 (Flutter, reown, walletconnect)

Connect MetaMask to a Flutter app (reown, walletconnect)

flutter pub add reown_appkit

platform :ios, '13.0'

cd ios
pod install

<dict>
	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>metamask</string> <!-- 지갑 이름 -->
		<!-- 다른 지갑 이름을 추가할 수 있습니다 -->
	</array>
	<array>
		<dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>com.example.yourBundleId</string> <!-- 앱의 Bundle ID -->
    <key>CFBundleURLSchemes</key>
    <array>
      <string>exampleapp</string> <!-- 임의의 소문자로 이루어진 문자열 -->
			</array>
		</dict>
	</array>
</dict>

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application>
			<activity > <!-- 태그 속성 생략 -->
				<intent-filter>
					<action android:name="android.intent.action.VIEW" />
					<category android:name="android.intent.category.DEFAULT" />
					<category android:name="android.intent.category.BROWSABLE" />
					<data android:scheme="exampleapp" /> <!-- 임의의 소문자로 이루어진 문자열 -->
				</intent-filter>
			</activity>
    </application>
		<!-- ... -->
    <queries>
        <package android:name="io.metamask"/> <!-- 지갑 이름 -->
        <!-- 다른 지갑 이름을 추가할 수 있습니다 -->
    </queries>	
</manifest>

import 'package:reown_appkit/reown_appkit.dart';

class PageWallet extends StatefulWidget {
  const PageWallet({super.key});
  @override
  State<PageWallet> createState() => _PageWalletState();
}
 
class _PageWalletState extends State<PageWallet> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wallet'),
      ),
    );
  }
}

// _PageWalletState 클래스 내부
	late ReownAppKitModal appKitModal;
 
	@override
	void initState() {
		super.initState();
 
		appKitModal = ReownAppKitModal(
			context: context,
			projectId: '{YOUR_PROJECT_ID}', // 프로젝트 ID 입력
			metadata: const PairingMetadata(
				name: 'Example App',
				description: 'Example app description',
				url: 'https://example.com/',
				icons: ['https://example.com/logo.png'],
				redirect: Redirect(  // OPTIONAL 이지만 (준)필수인 항목입니다
					native: 'exampleapp://', // 위에서 정의한 url scheme
					universal: 'https://reown.com/exampleapp',
					linkMode: true|false,
				),
			),
		);
 
		appKitModal.init().then((value) => setState(() {}));
	}
// ...

// _PageWalletState 클래스 내부
	String address = "none";
	late ReownAppKitModal appKitModal;
 
	@override
	void initState() {
		super.initState();
 
		appKitModal = ReownAppKitModal(
			context: context,
			projectId: '{YOUR_PROJECT_ID}', // 프로젝트 ID 입력
			metadata: const PairingMetadata(
				name: 'Example App',
				description: 'Example app description',
				url: 'https://example.com/',
				icons: ['https://example.com/logo.png'],
				redirect: Redirect(  // OPTIONAL 이지만 (준)필수인 항목입니다
					native: 'exampleapp://', // 위에서 정의한 url scheme
					universal: 'https://reown.com/exampleapp',
					linkMode: true|false,
				),
			),
		);
 
 
    appKitModal.init();
    appKitModal.addListener(updateAddress);
	}
 
	void updateAddress() {
    setState(() {
      address = appKitModal.session
              ?.getAddress(ReownAppKitModalNetworks.getNamespaceForChainId(
            appKitModal.selectedChain?.chainId ?? "1",
          )) ??
          "none";
    });
  }
// ...

// _PageWalletState 클래스 내부
	@override
	Widget build(BuildContext context) {
		return Scaffold(
			backgroundColor: Colors.white,
			body: Center(
				child: Stack(
					children: [
						Column(
							mainAxisAlignment: MainAxisAlignment.center,
							crossAxisAlignment: CrossAxisAlignment.center,
							children: [
								AppKitModalNetworkSelectButton(
									appKit: appKitModal,
									context: context,
								),
								AppKitModalConnectButton(
									appKit: appKitModal,
									context: context,
								),
								AppKitModalAccountButton(
									appKitModal: appKitModal,
								),
								AppKitModalAddressButton(
									appKitModal: appKitModal,
									onTap: appKitModal.openModalView,
								),
								Text(address),
							],
						),
					],
				),
			),
		);
	}