From ed14df1de1742c317f4cebe535a078c91a30ec81 Mon Sep 17 00:00:00 2001 From: yuki-js Date: Sun, 10 Dec 2023 02:32:31 +0900 Subject: [PATCH] finally got xrpl address --- frontend/src/blockchain/AddrFetcher.tsx | 33 +++++++++++++++++ frontend/src/blockchain/index.ts | 47 ++++++++++++++----------- frontend/src/pages/_app.tsx | 7 +++- frontend/src/pages/signin.tsx | 10 +++++- 4 files changed, 75 insertions(+), 22 deletions(-) create mode 100644 frontend/src/blockchain/AddrFetcher.tsx diff --git a/frontend/src/blockchain/AddrFetcher.tsx b/frontend/src/blockchain/AddrFetcher.tsx new file mode 100644 index 0000000..8f2d880 --- /dev/null +++ b/frontend/src/blockchain/AddrFetcher.tsx @@ -0,0 +1,33 @@ +import { useEffect } from "react"; +import { web3auth } from "."; +import { ADAPTER_EVENTS } from "@web3auth/base"; + +export function AddrFetcher() { + useEffect(() => { + window.currentAddr = null; + const conn = async () => { + if (!web3auth.connected) { + window.currentAddr = null; + console.log("DISCONNECTED"); + return; + } + const result = (await web3auth.provider!.request({ + method: "xrpl_getAccounts", + })) as string[]; + window.currentAddr = result[0]; + console.log("CONNECTED", window.currentAddr); + }; + conn(); + + web3auth.on(ADAPTER_EVENTS.CONNECTED, conn); + web3auth.on(ADAPTER_EVENTS.DISCONNECTED, conn); + console.log("attached event handlers"); + + return () => { + web3auth.off("CONNECTED", conn); + web3auth.off("DISCONNECTED", conn); + console.log("detached event handlers"); + }; + }, []); + return <>; +} diff --git a/frontend/src/blockchain/index.ts b/frontend/src/blockchain/index.ts index 0200d80..d9a0619 100644 --- a/frontend/src/blockchain/index.ts +++ b/frontend/src/blockchain/index.ts @@ -5,16 +5,15 @@ import { XrplPrivateKeyProvider, getXRPLChainConfig, } from "@web3auth/xrpl-provider"; -import { convertStringToHex, Payment, xrpToDrops } from "xrpl"; -const chainConfig = getXRPLChainConfig("devnet"); - -const web3auth = new Web3AuthNoModal({ - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.OTHER, - chainId: "0x3", - rpcTarget: "https://s.altnet.rippletest.net:51234", - }, +const chainConfig = { + ...getXRPLChainConfig("testnet"), + wsTarget: "wss://testnet.xrpl-labs.com/", + rpcTarget: "https://testnet.xrpl-labs.com/", +}; +console.log("chainConfig", chainConfig); +export const web3auth = new Web3AuthNoModal({ + chainConfig, clientId: "BOyXHg9WYpxLJEzFcvTctGwM_Bof6WItmq31Mf8A4WFutBFv-urrckEGXx2lEZ0DN0511F13_QhKYgTgwY2mBQI", // get from https://dashboard.web3auth.io web3AuthNetwork: "sapphire_devnet", @@ -28,31 +27,39 @@ const xrplProvider = new XrplPrivateKeyProvider({ const adapter = new OpenloginAdapter({ privateKeyProvider: xrplProvider, adapterSettings: { - uxMode: "redirect", + uxMode: "popup", loginConfig: { jwt: { - verifier: "b2clogin", + verifier: "xrpense-auth0", typeOfLogin: "jwt", name: "企業アカウントでシングルサインオン", - description: "Azure AD B2C経由で企業アカウントでログイン", - clientId: "fd3b26bf-6c50-411f-bc92-052b5693e413", + description: "Auth0経由で企業アカウントでログイン", + clientId: "a3ljjOhdkgUdG4xSMQ4rlFJsqAfVy7jg", }, }, }, }); web3auth.configureAdapter(adapter); +web3auth.init(); export async function signIn() { - await web3auth.init(); + if (web3auth.connected) { + return web3auth.provider; + } const provider = await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { loginProvider: "jwt", extraLoginOptions: { - domain: - "https://xrpensehackathon.b2clogin.com/xrpensehackathon.onmicrosoft.com/oauth2/v2.0/?p=b2c_1_xrpenselogin", - response_type: "token", - scope: - "openid offline_access https://xrpensehackathon.onmicrosoft.com/xrpense/email.read", - response_mode: "fragment", + domain: "https://dev-lvysvbffb7t6gp8w.us.auth0.com", }, }); + if (!provider) { + alert("provider is undefined"); + } + return provider; +} + +declare global { + interface Window { + currentAddr: string | null; + } } diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx index 2e21a55..a241141 100644 --- a/frontend/src/pages/_app.tsx +++ b/frontend/src/pages/_app.tsx @@ -7,11 +7,16 @@ import * as ph from "@plasmicapp/react-web/lib/host"; import { UserTypeContext } from "../components/plasmic/xrpense/PlasmicGlobalVariant__UserType"; import GlobalContextsProvider from "../components/plasmic/xrpense/PlasmicGlobalContextsProvider"; import "@/styles/globals.css"; +import { web3auth } from "@/blockchain"; +import { AddrFetcher } from "@/blockchain/AddrFetcher"; export default function MyApp({ Component, pageProps }: AppProps) { return ( - + + ; + const router = useRouter(); + return ( + { + await signIn(); + router.push("/"); + }} + /> + ); } export default SignIn;