@walletconnect/react-native-dapp 한글 번역 정리

기(起) - 영어 읽기 힘들어서 번역

npm에 있는 @walletconnect/react-native-dapp 페이지가 당연 영어로 되어있습니다.
중요 문서인 것 같아 초보 개발자 입장에서 번역본으로 싶었습니다.
주요 이유는

1. 쉬운 이해를 위해
2. 영어와 번역본을 번갈아 보면 공부도 되기 때문에

승(承)

한글 번역은 구글링을 통해서 이뤄졌습니다.
영어 원문 - https://www.npmjs.com/package/@walletconnect/react-native-dapp?activeTab=readme

전(轉)

React Native dapp을 Android, iOS 및 웹의 이더리움 지갑에 쉽게 연결하는 데 도움이 되는 **drop-in library** 입니다.

알림: 이 라이브러리는 애플리케이션 내에서 Web3에 대한 필수 지원을 이미 활성화했다고 가정합니다. 이는 npx create-react-native-dapp를 사용하여 새 프로젝트를 생성하거나 npx rn-nodeify --install --hack을 사용하여 기존 프로젝트에 Web3 지원을 도입하여 수행할 수 있습니다.

자세한 내용은 설명서를 확인하세요.

설치

시작하려면 @walletconnect/react-native-dapp을 설치하세요.

yarn add @walletconnect/react-native-dapp

아직 설치하지 않은 경우 @react-native-async-storage/async-storage와 같은 영구 저장소 공급자와 함께 react-native-svg를 설치해야 할 수도 있습니다.

yarn add react-native-svg @react-native-async-storage/async-storage

구조

이 라이브러리는 응용 프로그램 전체에서 커넥터 인스턴스에 전역적으로 액세스할 수 있도록 하는 데 사용되는 React Context API를 사용하여 구현됩니다. 이렇게 하면 깊이 중첩된 구성 요소 내에서도 균일한 인스턴스를 사용할 수 있으며 렌더링된 응용 프로그램이 커넥터 상태에 대해 항상 동기화되도록 합니다.

WalletConnectProvider

애플리케이션의 루트에서 커넥터 인스턴스에 대한 액세스 및 지속성을 제어하는 ​​WalletConnectProvider를 선언할 수 있습니다.

import * as React from 'react';
import WalletConnectProvider from '@walletconnect/react-native-dapp';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App(): JSX.Element {
  return (
    <WalletConnectProvider
      redirectUrl={Platform.OS === 'web' ? window.location.origin : 'yourappscheme://'}
      storageOptions= {{
        asyncStorage AsyncStorage,
      }}>
      <>{/* awesome app here */}</>
    </WalletConnectProvider>
  );
}

위에서 WalletConnectProvider에 두 개의 필수 매개변수를 전달합니다. redirectUrl 및 storageOptions:

• redirectUrl은 외부 지갑과 애플리케이션 간의 탐색을 제어하는 ​​데 사용됩니다. 웹에서는 유효한 애플리케이션 경로만 지정하면 됩니다. 반면 모바일 플랫폼에서는 딥 링크 URI 체계를 지정해야 합니다.
• storageOptions 소품을 사용하면 세션 데이터를 유지하는 데 사용해야 하는 스토리지 엔진을 지정할 수 있습니다.
  • 예제에서는 @react-native-async-storage/async-storage를 사용하지만 IAsyncStorage 일반 스토리지 인터페이스 선언을 준수한다면 원하는 엔진이 될 수 있습니다.

특히 WalletConnectProvider는 선택적으로 IWalletConnectOptions 인터페이스에서 정의한 대로 WalletConnect 구성 인수를 허용합니다.

import * as React from 'react';
import WalletConnectProvider from '@walletconnect/react-native-dapp';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App(): JSX.Element {
  return (
    <WalletConnectProvider
      bridge="https://bridge.walletconnect.org"
      clientMeta={{
        description: 'Connect with WalletConnect',
        url: 'https://walletconnect.org',
        icons: ['https://walletconnect.org/walletconnect-logo.png'],
        name: 'WalletConnect',
      }}
      redirectUrl={Platform.OS === 'web' ? window.location.origin : 'yourappscheme://'}
      storageOptions= {{
        asyncStorage AsyncStorage,
      }}>
      <>{/* awesome app here */}</>
    </WalletConnectProvider>
  );
}

위의 코드 조각에서 필수 소품 외에 WalletConnectProvider의 기본 구성을 볼 수 있습니다.

팁: 사용자 지정 옵션은 이 기본 구성에 대해 깊이 병합됩니다. 따라서 모든 중첩 속성을 정의할 필요 없이 개별 중첩 속성을 재정의할 수 있습니다.

withWalletConnect

WalletConnectProvider를 수동으로 사용하는 대신 루트 애플리케이션을 WalletConnectProvider에 래핑하는 withWalletConnect 상위 구성 요소를 사용할 수 있습니다.

import * as React from 'react';
import { withWalletConnect, useWalletConnect } from '@walletconnect/react-native-dapp';
import AsyncStorage from '@react-native-async-storage/async-storage';
 
function App(): JSX.Element {
  const connector = useWalletConnect(); // valid
  return <>{/* awesome app here */}</>;
}
 
export default withWalletConnect(App, {
  clientMeta: {
    description: 'Connect with WalletConnect',
  },
  redirectUrl: Platform.OS === 'web' ? window.location.origin : 'yourappscheme://',
  storageOptions: {
    asyncStorage: AsyncStorage,
  },
});

이것은 WalletConnectProvider의 수동 구현과 기능면에서 거의 동일하지만 앱 구성 요소에서 직접 useWalletConnect를 호출할 수 있다는 주요 차이점이 있습니다. 반대로 이전 예제에서는 WalletConnectProvider의 하위 구성 요소만 이 후크(앱을 부르는 hook을 의미하는 듯 <>{/ awesome app here /}</>)를 호출할 수 있습니다.

useWalletConnect

useWalletConnect 후크는 Android, iOS 및 웹에서 액세스할 수 있는 WalletConnect 커넥터 인스턴스에 대한 액세스를 제공합니다. 이것은 원래 사양을 준수합니다.

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useWalletConnect, withWalletConnect } from '@walletconnect/react-native-dapp';
import * as React from 'react';
 
function App(): JSX.Element {
  const connector = useWalletConnect();
  if (!connector.connected) {
    /**
     *  Connect! 🎉
     */
    return <Button title="Connect" onPress={() => connector.connect())} />;
  }
  return <Button title="Kill Session" onPress={() => connector.killSession()} />;
}
 
export default withWalletConnect(App, {
  redirectUrl: Platform.OS === 'web' ? window.location.origin : 'yourappscheme://',
  storageOptions: {
    asyncStorage AsyncStorage,
  },
});

개인 맞춤 설정

@walletconnect/react-native-dapp을 사용하면 QrcodeModal의 표시를 사용자 지정할 수도 있습니다. 이는 Render Callback prop인 renderQrcodeModal을 withWalletConnect 또는 WalletConnectProvider 인스턴스에 대한 호출에 전달하여 달성됩니다.

예를 들어 Modal이 아닌 BottomSheet를 사용하여 지갑 선택을 렌더링하도록 선택할 수 있습니다.

import AsyncStorage from '@react-native-async-storage/async-storage';
import BottomSheet from 'react-native-reanimated-bottom-sheet';
import { Image, Text, TouchableOpacity } from 'react-native';
import {
  useWalletConnect,
  withWalletConnect,
  RenderQrcodeModalProps,
  WalletService,
} from '@walletconnect/react-native-dapp';
import * as React from 'react';
 
function CustomBottomSheet({
  walletServices,
  visible,
  connectToWalletService,
  uri,
}: RenderQrcodeModalProps): JSX.Element {
  const renderContent = React.useCallback(() => {
    return walletServices.map((walletService: WalletService, i: number) => (
      <TouchableOpacity key={`i${i}`} onPress={() => connectToWalletService(walletService, uri)}>
        <Image source={{ uri: walletService.logo }} />
        <Text>{walletService.name}</Text>
      </TouchableOpacity>
    ));
  }, [walletServices, uri]);
  return <BottomSheet renderContent={renderContent} {...etc} />;
};
 
function App(): JSX.Element {
  const connector = useWalletConnect();
  return <>{/* awesome custom app here */}</>;
}
 
export default withWalletConnect(App, {
  redirectUrl: Platform.OS === 'web' ? window.location.origin : 'yourappscheme://',
  storageOptions: {
    asyncStorage AsyncStorage,
  },
  renderQrcodeModal: (props: RenderQrcodeModalProps): JSX.Element => (
    <CustomBottomSheet {...props} />
  ),
});

용어 사전

drop-in library : 프로그램을 대체 했을 때 다른 설정 등을 바꿀 필요 없이 성능이 올라가는 라이브러리를 의미한다고 해석 - (drop-in replacement 참조)

snippet : 단편, 조각 으로 해석

결(結)