SNSウォレットとは？
SNSウォレットはSNSアカウントをキーとして、ブロックチェーン上のウォレットを作成する方法です。従来のSNSログインのようにウォレットを利用することができるので最近のNFTの受け取りによく利用されています。
主要なSNSウォレット
Web3Auth
秘密鍵を独自の仕組みで分散化させており、単一障害点が少ないという点と、OSSであるため自由に開発を行うことができる点でSNSウォレットだと最も利用されているサービス。プロバイダーも多く、Google, twitter, facebook, twitchなど様々なSNSと連携させることができる。
Magic
web3authと引き合いに出されることが多いSNSウォレットソリューション、AWSに依存している点がしばしば指摘されるが、web3authよりシンプルで、低レイヤーからカスタマイズすることができるので、firebaseAuthなどと連携したい場合などはおすすめ。
UPBOND
国産のSNSウォレットソリューション、もしLINEをベースにSNSウォレットを展開したい場合はUPBONDが一番おすすめ。MagicはLINE対応していないのと、Web3AuthはLINEが不安定のためあまり体験が良くない。
RainbowKit
ウォレットのバンドルサービス。ウォレットサービスが増える中、サービス内で様々なウォレットの対応を求められる。そのため、RainbowKitを用いて各々のウォレットのズレをRainbowKitで吸収してコード内では同じようにしようというライブラリ。超おすすめ。
Web3Auth in RainbowKitをやってみる
「1から実装」や「後から実装」のような記事がないので、Next13(page Router)で開発してみる。
基本的には公式のGithubのReact版jsをNext版tsとして0から実装していくような流れです。
構成(初期)
├─ pages/
├─ public/
├─ styles/
└─ package.json
必要なライブラリを導入
package.json
{
...
"dependencies": {
...
"@rainbow-me/rainbowkit": "1.0.1", //固定
"@web3auth/base": "^6.0.1",
"@web3auth/ethereum-provider": "^6.0.1",
"@web3auth/modal": "^6.0.1",
"@web3auth/openlogin-adapter": "^6.0.1",
"@web3auth/web3auth-wagmi-connector": "^4.0.1",
"viem": "^0.3.50",
"wagmi": "1.0.1" //固定
}
}
RinbowKitの設定
_app.tsx
import "@rainbow-me/rainbowkit/styles.css";
import {
connectorsForWallets,
RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
import { createConfig, WagmiConfig, configureChains } from "wagmi";
import { mainnet, polygon } from "wagmi/chains";
import {
walletConnectWallet,
metaMaskWallet,
} from "@rainbow-me/rainbowkit/wallets";
import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";
import { AppProps } from "next/app";
const { chains, publicClient } = configureChains(
[mainnet, polygon],
[
alchemyProvider({ apiKey: "7wSu45FYTMHUO4HJkHjQwX4HFkb7k9Ui" }),
publicProvider(),
]
);
const connectors = connectorsForWallets([
{
groupName: "Recommended",
wallets: [
walletConnectWallet({ chains }),
metaMaskWallet({ chains }),
],
},
]);
const wagmiConfig = createConfig({
autoConnect: true,
connectors,
publicClient,
});
export default function App({ Component, pageProps }: AppProps) {
return (
<WagmiConfig config={wagmiConfig}>
<RainbowKitProvider chains={chains}>
<Component {...pageProps} />
</RainbowKitProvider>
</WagmiConfig>
);
}
画面に「coonect wallet」ボタンを表示する
index.tsx
import { ConnectButton } from "@rainbow-me/rainbowkit";
export default function Home() {
return (
<div
style={{
position: "fixed",
top: 0,
bottom: 0,
left: 0,
right: 0,
display: "flex",
alignItems: "center",
justifyContent: "center",
fontFamily: "sans-serif",
}}
>
<ConnectButton />
</div>
);
}
Web3Authの設定
RainbowKitでカスタムのウォレットを導入するためにはProviderを設定する必要がある。そのため、libs/RainbowWeb3authConnector.tsを追加する。
構成(初期)
├─ libs/ *追加
├─ pages/
├─ public/
├─ styles/
└─ package.json
RainbowWeb3authConnector.ts
import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3Auth } from "@web3auth/modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CHAIN_NAMESPACES } from "@web3auth/base";
const name = "Web3auth";
const iconUrl =
"https://res.cloudinary.com/beincrypto/image/upload/v1661461003/logos/ukflgfdxacovx9yzyrr4.png";
export const rainbowWeb3AuthConnector = ({ chains }: any) => {
// Create Web3Auth Instance
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x" + chains[0].id.toString(16),
rpcTarget: chains[0].rpcUrls.default.http[0],
displayName: chains[0].name,
tickerName: chains[0].nativeCurrency?.name,
ticker: chains[0].nativeCurrency?.symbol,
blockExplorer: chains[0].blockExplorers?.default.url[0],
};
const web3AuthInstance = new Web3Auth({
clientId: "YOUR_CLIENT_ID",
chainConfig,
uiConfig: {
theme: "light",
loginMethodsOrder: ["google", "apple", "line", "twitter"],
defaultLanguage: "en",
appLogo: iconUrl, // Your App Logo Here
modalZIndex: "2147483647",
appName: name,
},
web3AuthNetwork: "cyan",
enableLogging: true,
});
// Add openlogin adapter for customisations
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
const openloginAdapterInstance = new OpenloginAdapter({
privateKeyProvider,
adapterSettings: {
network: "cyan",
uxMode: "popup",
whiteLabel: {
name: "Your app Name",
logoLight: iconUrl,
logoDark: iconUrl,
defaultLanguage: "en",
dark: true,
},
},
});
web3AuthInstance.configureAdapter(openloginAdapterInstance);
return {
id: "web3auth",
name,
iconUrl,
iconBackground: "#fff",
createConnector: () => {
const connector = new Web3AuthConnector({
chains: chains,
options: {
web3AuthInstance,
},
});
return {
connector,
};
},
};
};
RainbowKitの設定に追加
_app.tsx
import { publicProvider } from "wagmi/providers/public";
import { AppProps } from "next/app";
+ import { rainbowWeb3AuthConnector } from "@/libs/RainbowWeb3authConnector";
const connectors = connectorsForWallets([
{
groupName: "Recommended",
wallets: [
walletConnectWallet({ chains }),
metaMaskWallet({ chains }),
+ rainbowWeb3AuthConnector({ chains }) as any,
],
},
]);
完成
参考
Demoサイト
Github
公式Github
Discussion