Merge branch 'main' of gitlab.itlibecc.com:changying/platform/xterios…

…dk-web
XterioTech · Oct 15, 2024 · beb6e86 · beb6e86
2 parents 5525809 + 4d23fdf
commit beb6e86
Show file tree

Hide file tree

Showing 29 changed files with 781 additions and 279 deletions.
diff --git a/examples/example-auth-react/src/App.tsx b/examples/example-auth-react/src/App.tsx
@@ -3,10 +3,19 @@ import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
 
-import { IUserInfo, LoginType, OpenPageMode, PageType, XterEventEmiter, XterioAuth } from '@xterio-sdk/auth'
+import {
+  IUserInfo,
+  LoginType,
+  OpenPageMode,
+  PageType,
+  XterEventEmiter,
+  XTERIO_EVENTS,
+  XterioAuth
+} from '@xterio-sdk/auth'
 
 function App() {
-  const [userinfo, setUserinfo] = useState('')
+  const [userinfo, setUserinfo] = useState<string>('')
+  //这种形式记录不够准确，比如登录态中途变更时，该页面无法及时获悉。所以对于需要判断登录的操作，直接调用XterioAuth.isLogin即可
   const [isLogin, setIsLogin] = useState(XterioAuth.isLogin)
   const [currentPage, setCurrentPage] = useState(PageType.asset)
 
@@ -17,8 +26,17 @@ function App() {
       setUserinfo(JSON.stringify(res))
       setIsLogin(XterioAuth.isLogin)
     })
+
+    //退出登录刷新本地islogin跟userinfo状态
+    const logout_unsub = XterEventEmiter.subscribe(() => {
+      console.log('logout auth, and deal page state data')
+      setIsLogin(XterioAuth.isLogin)
+      setUserinfo(JSON.stringify(XterioAuth.userinfo))
+    }, XTERIO_EVENTS.LOGOUT)
+
     return () => {
       unsubscribe?.()
+      logout_unsub?.()
     }
   }, [])
 
@@ -27,8 +45,6 @@ function App() {
   }
   const logout = () => {
     XterioAuth.logout()
-    setUserinfo('')
-    setIsLogin(XterioAuth.isLogin)
   }
   const openPage = async (_t: OpenPageMode) => {
     const res = await XterioAuth.openPage(currentPage, _t)
@@ -55,6 +71,7 @@ function App() {
       <div className="card">
         <p>是否登录: {isLogin ? 'true' : 'false'}</p>
         <p>用户信息: {userinfo}</p>
+        <button onClick={() => alert(XterioAuth.isLogin)}>检查登录态</button>
         <button onClick={() => login()}>默认登录</button>
         <button onClick={() => login(LoginType.Email)}>邮箱登录</button>
         <button onClick={() => login(LoginType.Mini)}>TG 登录</button>

diff --git a/examples/example-auth-vue/src/App.vue b/examples/example-auth-vue/src/App.vue
@@ -1,32 +1,37 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
-import { IUserInfo, LoginType, OpenPageMode, PageType, XterEventEmiter, XterioAuth } from '@xterio-sdk/auth'
+import { IUserInfo, LoginType, OpenPageMode, PageType, XterEventEmiter, XTERIO_EVENTS, XterioAuth } from '@xterio-sdk/auth'
 
 defineProps<{ msg: string }>()
 
 const userinfo = ref('')
 const isLogin = ref(XterioAuth.isLogin)
-const unsubscribe = ref()
 const currentPage = ref(PageType.asset)
+const unsubscribe = ref()
+const logout_unsub = ref()
 
 onMounted(() => {
   unsubscribe.value = XterEventEmiter.subscribe((res: IUserInfo) => {
     console.log('info1=', res)
     userinfo.value = JSON.stringify(res)
     isLogin.value = XterioAuth.isLogin
   })
+  logout_unsub.value = XterEventEmiter.subscribe(() => {
+    console.log('logout auth, and deal page state data')
+    userinfo.value = JSON.stringify(XterioAuth.userinfo)
+    isLogin.value = XterioAuth.isLogin
+  }, XTERIO_EVENTS.LOGOUT)
 })
 onUnmounted(() => {
   unsubscribe.value?.()
+  logout_unsub.value?.()
 })
 
 const login = (mode?: LoginType) => {
   XterioAuth.login(mode)
 }
 const logout = () => {
   XterioAuth.logout()
-  userinfo.value = ''
-  isLogin.value = XterioAuth.isLogin
 }
 const openPage = async (_t: OpenPageMode) => {
   const res = await XterioAuth.openPage(currentPage.value, _t)

diff --git a/examples/example-auth/index.html b/examples/example-auth/index.html
@@ -5,18 +5,48 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
+<style>
+  .card {
+    display: flex;
 
+    >div {
+      margin-right: 10px;
+      margin-bottom: 10px;
+      cursor: pointer;
+      width: 100px;
+      height: 40px;
+      background-color: red;
+    }
+  }
+</style>
 </head>
 
 <body>
-  <h1>Hello, Webpack!</h1>
+  <h1>Hello, Xterio Auth!</h1>
+  <div class="card">
+    <div id="isLogin">是否登录</div>
+    <div id="login">默认登录</div>
+    <div id="login_email">邮箱登录</div>
+    <div id="login_mini">小程序登录</div>
+    <div id="logout">退出登录</div>
+    <div id="getIdToken">IdToken</div>
+  </div>
 
-  <div id="login" style="width: 100px;height: 40px;background-color: red;">默认登录</div>
-  <div id="login_email" style="width: 100px;height: 40px;background-color: red;">邮箱登录</div>
-  <div id="login_mini" style="width: 100px;height: 40px;background-color: red;">小程序登录</div>
-  <div id="logout" style="width: 100px;height: 40px;background-color: red;">退出登录</div>
   <div>用户信息</div>
   <p id="userinfo"></p>
+  <div class="card">
+    <p>设置要打开的页面:<span id="current-page" style="color: red;"></span></p>
+    <div id="page-asset">资产页</div>
+    <div id="page-account">账户页</div>
+    <div id="page-wallet">钱包页</div>
+    <div id="page-nft">nft页</div>
+  </div>
+  <div class="card">
+    <div id="openAsset">打开页面(弹框)</div>
+    <div id="openAsset-new">打开页面(新页)</div>
+    <div id="openAsset-dom">打开页面(dom)</div>
+    <div id="openAsset-uri">打开页面(uri)</div>
+  </div>
   <script type="module" src="./src/index.js"></script>
 
 </body>

diff --git a/examples/example-auth/src/index.js b/examples/example-auth/src/index.js
@@ -1,44 +1,91 @@
 import '@xterio-sdk/auth/style/main.css'
 //方式1，先授权，再登录
-import { XterioAuth, XterEventEmiter, Env, LoginType } from '@xterio-sdk/auth'
+import { XterioAuth, XterEventEmiter, Env, LoginType, PageType, OpenPageMode } from '@xterio-sdk/auth'
 
 console.log('initial')
 const redirect_uri = 'http://localhost:3000/'
 const client_id = '4gsmgur6gkp8u9ps8dlco3k7eo'
 const client_secret = 'ABC23'
-const app_id = ''
+const app_id = 'apiautotest'
 //4gsmgur6gkp8u9ps8dlco3k7eo, 4gsmgur6gkp8u9ps8dlco3aaaa
-XterioAuth.init({ client_id, client_secret, redirect_uri }, Env.Dev)
+XterioAuth.init({ client_id, client_secret, redirect_uri, app_id }, Env.Dev)
 XterEventEmiter.subscribe((info) => {
   console.log('emit userinfo=', info)
-  p.innerText = JSON.stringify(info)
+  updateInfo(info)
 })
 
-const btn = document.getElementById('login')
-const logoutBtn = document.getElementById('logout')
-const emailBtn = document.getElementById('email')
-const miniBtn = document.getElementById('login_mini')
 const p = document.getElementById('userinfo')
-
-if (miniBtn) {
-  miniBtn.onclick = () => {
-    // XterioAuth.
-    XterioAuth.login(LoginType.Mini)
-  }
-}
-if (btn) {
-  btn.onclick = () => {
-    XterioAuth.login()
+const updateInfo = (info) => {
+  if (p) {
+    p.innerText = JSON.stringify(info)
   }
 }
-if (emailBtn) {
-  emailBtn.onclick = () => {
-    XterioAuth.login(LoginType.Email)
+const addClick = (id, callback) => {
+  const btn = document.getElementById(id)
+  if (btn) {
+    btn.onclick = () => {
+      callback()
+    }
   }
 }
-if (logoutBtn) {
-  logoutBtn.onclick = () => {
-    XterioAuth.logout()
-    p.innerText = ''
+addClick('login', () => {
+  XterioAuth.login()
+})
+addClick('login_email', () => {
+  XterioAuth.login(LoginType.Email)
+})
+addClick('login_mini', () => {
+  XterioAuth.login(LoginType.Mini)
+})
+addClick('logout', () => {
+  XterioAuth.logout()
+  updateInfo({})
+})
+addClick('isLogin', () => {
+  alert(XterioAuth.isLogin)
+})
+addClick('getIdToken', async () => {
+  const id_token = await XterioAuth.getIdToken()
+  alert(id_token)
+})
+
+let currentPageName = PageType.asset
+const changePage = () => {
+  const el = document.getElementById('current-page')
+  if (el) {
+    el.innerText = currentPageName
   }
 }
+addClick('openAsset', () => {
+  XterioAuth.openPage(currentPageName)
+})
+addClick('openAsset-new', () => {
+  XterioAuth.openPage(currentPageName, OpenPageMode.page)
+})
+addClick('openAsset-dom', async () => {
+  const dom = await XterioAuth.openPage(currentPageName, OpenPageMode.iframeDom)
+  console.log('dom=', dom)
+  alert(dom)
+})
+addClick('openAsset-uri', async () => {
+  const uri = await XterioAuth.openPage(currentPageName, OpenPageMode.iframeUri)
+  console.log('uri=', uri)
+  alert(uri)
+})
+addClick('page-asset', () => {
+  currentPageName = PageType.asset
+  changePage()
+})
+addClick('page-account', () => {
+  currentPageName = PageType.account
+  changePage()
+})
+addClick('page-wallet', () => {
+  currentPageName = PageType.wallet
+  changePage()
+})
+addClick('page-nft', () => {
+  currentPageName = PageType.nft
+  changePage()
+})
+changePage()
diff --git a/examples/example-wallet-react/src/App.tsx b/examples/example-wallet-react/src/App.tsx
@@ -1,25 +1,14 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import './App.css'
 import { ERC20_ABI } from './abi'
 import { getContract, NETWORK_NAME } from './common'
 
 import { useXterioWalletContext, useXterioTransaction } from '@xterio-sdk/wallet'
-import { LoginType } from '@xterio-sdk/auth'
+import { IUserInfo, LoginType, XterEventEmiter, XTERIO_EVENTS, XterioAuth } from '@xterio-sdk/auth'
 
 function App() {
-  const {
-    userinfo,
-    isLogin,
-    login,
-    logout,
-    aaAddress,
-    isConnect,
-    disconnectWallet,
-    openWallet,
-    obtainWallet,
-    connectWallet,
-    signMessage
-  } = useXterioWalletContext()
+  const { aaAddress, isConnect, disconnectWallet, openWallet, obtainWallet, connectWallet, signMessage } =
+    useXterioWalletContext()
 
   const contractAddress = '0x12065F0d03cd1Bd280565069164F9E803c2DA988'
   const abi = ERC20_ABI
@@ -50,27 +39,45 @@ function App() {
     await sendUserOperation?.(tx)
   }
 
+  const [userinfo, setUserInfo] = useState({})
+  useEffect(() => {
+    console.log('[xtest] ---- add listener')
+    const unsubscribe_Info = XterEventEmiter.subscribe((res: IUserInfo) => {
+      setUserInfo(res)
+    }, XTERIO_EVENTS.ACCOUNT)
+
+    const unsubscribe_logout = XterEventEmiter.subscribe(() => {
+      setUserInfo({})
+    }, XTERIO_EVENTS.LOGOUT)
+    return () => {
+      console.log('[xtest] ---- remove listener')
+      unsubscribe_Info?.()
+      unsubscribe_logout?.()
+    }
+  }, [])
+
   return (
     <>
       <h1>Xterio SDK</h1>
       <div>xterio auth sdk</div>
       <div className="card">
-        <p>是否登录: {isLogin ? 'true' : 'false'}</p>
+        <p>是否登录: {XterioAuth.isLogin ? 'true' : 'false'}</p>
         <p>用户信息: {userinfo ? JSON.stringify(userinfo) : ''}</p>
-        <button onClick={() => login()}>默认登录</button>
-        <button onClick={() => login(LoginType.Email)}>邮箱登录</button>
-        <button onClick={() => login(LoginType.Mini)}>TG 登录</button>
-        <button onClick={logout}>退出登录</button>
+        <button onClick={() => alert(XterioAuth.isLogin)}>检查登录态</button>
+        <button onClick={() => XterioAuth.login()}>默认登录</button>
+        <button onClick={() => XterioAuth.login(LoginType.Email)}>邮箱登录</button>
+        <button onClick={() => XterioAuth.login(LoginType.Mini)}>TG 登录</button>
+        <button onClick={() => XterioAuth.logout()}>退出登录</button>
       </div>
 
       <div>xterio wallet sdk</div>
       <div className="card">
         <div>pn aa wallet address: {aaAddress}</div>
         <div>pn aa wallet connected status: {isConnect ? 'true' : 'false'}</div>
         <button onClick={() => connectWallet()}>AA钱包连接</button>
-        <button onClick={disconnectWallet}>AA钱包断开连接</button>
-        <button onClick={obtainWallet}>AA钱包领取</button>
-        <button onClick={openWallet}>打开AA钱包</button>
+        <button onClick={() => disconnectWallet()}>AA钱包断开连接</button>
+        <button onClick={() => obtainWallet()}>AA钱包领取</button>
+        <button onClick={() => openWallet()}>打开AA钱包</button>
       </div>
       <div>xterio wallet transaction</div>
       <div className="card">