Merge branch 'develop' into 'main'

feat: auth + wallet

See merge request changying/platform/xteriosdk-web!4

examples/example-auth-react/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 3000",
+    "dev": "vite --port 3001",
     "build": "tsc && vite build",
     "lint": "eslint .",
     "preview": "vite preview"

examples/example-auth-react/src/App.css

@@ -40,9 +40,16 @@
   display: flex;
   flex-direction: row;
 }
+.col{
+  display: flex;
+  flex-direction: column;
+}
 .justify-center{
   justify-content: center;
 }
+.items-center{
+  align-items: center;
+}
 
 .read-the-docs {
   color: #888;

examples/example-auth-react/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
@@ -7,6 +7,7 @@ import {
   IUserInfo,
   LoginType,
   OpenPageMode,
+  PageAlertConfig,
   PageOptionParam,
   PageType,
   XterEventEmiter,
@@ -24,6 +25,11 @@ const getRadioValue = (name: string) => {
   const tab: HTMLInputElement | null = document.querySelector(`input[name="${name}"]:checked`)
   return tab?.value
 }
+const getInputValue = (cls: string, tag: string = 'input') => {
+  const ele = document.getElementsByClassName(cls)?.[0]
+  const input = ele.getElementsByTagName(tag)?.[0] as HTMLInputElement
+  return input?.value
+}
 
 function App() {
   const [userinfo, setUserinfo] = useState<string>('')
@@ -59,7 +65,11 @@ function App() {
     XterioAuth.logout()
   }
   const openPage = async (_t: OpenPageMode) => {
-    const res = await XterioAuth.openPage(currentPage, _t, getPageParam())
+    let param = getPageParam()
+    if (_t === OpenPageMode.alert) {
+      param = { ...param, alertConfig: getAlertConfig() }
+    }
+    const res = await XterioAuth.openPage(currentPage, _t, param)
     if (_t === OpenPageMode.iframeDom) {
       console.log('dom=', res)
       alert(res)
@@ -97,6 +107,9 @@ function App() {
     if (isChecked('hide_sign_out')) {
       dic = { ...dic, hide_sign_out: true }
     }
+    if (isChecked('hide_header')) {
+      dic = { ...dic, hide_header: true }
+    }
     if (isChecked('hide_footer')) {
       dic = { ...dic, hide_footer: true }
     }
@@ -116,6 +129,25 @@ function App() {
     console.log('dic=', dic)
     return dic
   }
+  const getAlertConfig = () => {
+    const placement = (getRadioValue('alert_active_place_option') || 'right') as PageAlertConfig['placement']
+    let dic: Partial<PageAlertConfig> = { placement }
+    if (isChecked('alert_showCloseIcon')) {
+      dic = { ...dic, showCloseIcon: false }
+    }
+    let _sty = { width: getInputValue('alert_width'), height: getInputValue('alert_height') }
+
+    const _customsty = getInputValue('alert_style', 'textarea') || '{}'
+    try {
+      _sty = { ..._sty, ...JSON.parse(_customsty) }
+    } catch (err: unknown) {
+      console.error('自定义样式输入不合法', _customsty, err)
+    }
+    dic.style = _sty
+
+    console.log('alertConfig=', dic)
+    return dic
+  }
   const getOtac = async () => {
     const _otac = await XterioAuth.getOtac()
     console.log('_otac=', _otac)
@@ -126,6 +158,12 @@ function App() {
     console.log('_idToken=', _idToken)
     alert(_idToken)
   }
+  const defaultStyle = useMemo(() => {
+    return JSON.stringify({
+      marginTop: '20px',
+      backgroundColor: 'red'
+    })
+  }, [])
 
   return (
     <>
@@ -169,12 +207,16 @@ function App() {
           </div>
           <div className="hide_menu_entrance">
             <input type="checkbox" />
-            <span>隐藏顶部导航栏(仅H5生效)</span>
+            <span>隐藏菜单入口(仅H5生效)</span>
           </div>
           <div className="hide_sign_out">
             <input type="checkbox" />
             <span>隐藏登出按钮</span>
           </div>
+          <div className="hide_header">
+            <input type="checkbox" />
+            <span>隐藏顶部导航</span>
+          </div>
           <div className="hide_footer">
             <input type="checkbox" />
             <span>隐藏页脚</span>
@@ -238,6 +280,36 @@ function App() {
           <div className="config-nft-collection">tip: features 参考文档，collection必传(示例为写死的值)</div>
         )}
       </div>
+      <div className="card col">
+        <p>弹框样式控制:</p>
+        <div className="config-alert row justify-center">
+          <div>位置:</div>
+          <div>
+            <input type="radio" name="alert_active_place_option" value="left" />
+            <label>left</label>
+            <input type="radio" name="alert_active_place_option" value="center" />
+            <label>center</label>
+            <input type="radio" name="alert_active_place_option" value="right" />
+            <label>right</label>
+          </div>
+        </div>
+        <div className="config-alert alert_showCloseIcon">
+          <input type="checkbox" />
+          <span>是否隐藏关闭按钮</span>
+        </div>
+        <div className="config-alert row items-center justify-center alert_width">
+          <label>宽度:</label>
+          <input type="text" placeholder="200px" defaultValue="200px" />
+        </div>
+        <div className="config-alert row items-center justify-center alert_height">
+          <label>高度:</label>
+          <input type="text" placeholder="200px" defaultValue="300px" />
+        </div>
+        <div className="config-alert col items-center justify-center alert_style">
+          <label>自定义样式对象(合法json字符串):</label>
+          <textarea style={{ width: '400px' }} placeholder="" rows={7} defaultValue={defaultStyle}></textarea>
+        </div>
+      </div>
       <div className="card">
         <p>打开页面的方式如下：</p>
         <button onClick={() => openPage(OpenPageMode.alert)}>弹框形式(iframe)</button>

examples/example-auth-react/src/main.tsx

@@ -25,7 +25,7 @@ const GET_QUERY_STRING = (key: string) => {
 import '@xterio-sdk/auth/style/main.css'
 import { Env, XterioAuth } from '@xterio-sdk/auth'
 const devConfig = {
-  redirect_uri: 'http://localhost:3000/',
+  redirect_uri: location.href.replace(/[?&]code=[^&]+/, ''),
   client_id: '4gsmgur6gkp8u9ps8dlco3k7eo',
   client_secret: 'ABC23',
   app_id: 'apiautotest'
@@ -35,7 +35,7 @@ const stageConfig = {
   redirect_uri: location.href.replace(/[?&]code=[^&]+/, ''),
   client_id: '3094298453404953',
   client_secret: 'mzmhYqcqDGdymblv5gb7s9OWcnYpH1ha',
-  app_id: '6c684e202700'
+  app_id: '6f5d74164311'
 }
 let _env: Env = __EXAMPLE_ENV__ || Env.Dev
 const variable = GET_QUERY_STRING('env')

examples/example-auth-vanillajs/js/main.js

@@ -21,11 +21,11 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   // init auth sdk
-  const redirect_uri = 'http://localhost:3000/'
+  const redirect_uri = 'http://localhost:3001/'
   const client_id = '4gsmgur6gkp8u9ps8dlco3k7eo'
   const client_secret = 'ABC23'
   const app_id = ''
-  XterioAuth.XterioAuth.init({app_id, client_id, client_secret, redirect_uri }, 'Dev') //ENV:'Dev','Staging','Production'
+  XterioAuth.XterioAuth.init({ app_id, client_id, client_secret, redirect_uri }, 'Dev') //ENV:'Dev','Staging','Production'
 
   // call useLoginModal
   const { open, logout } = XterioAuth.useXterLoginModal({

examples/example-auth-vue/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 3000",
+    "dev": "vite --port 3001",
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview"
   },

examples/example-auth-vue/src/App.vue

@@ -12,6 +12,11 @@ const getRadioValue = (name: string) => {
   const tab: HTMLInputElement | null = document.querySelector(`input[name="${name}"]:checked`)
   return tab?.value
 }
+const getInputValue = (cls: string, tag: string = 'input') => {
+  const ele = document.getElementsByClassName(cls)?.[0]
+  const input = ele.getElementsByTagName(tag)?.[0] as HTMLInputElement
+  return input?.value
+}
 
 defineProps<{ msg: string }>()
 
@@ -47,7 +52,11 @@ const logout = () => {
   XterioAuth.logout()
 }
 const openPage = async (_t: OpenPageMode) => {
-  const res = await XterioAuth.openPage(currentPage.value, _t, getPageParam())
+  let param = getPageParam()
+  if (_t === OpenPageMode.alert) {
+    param = { ...param, alertConfig: getAlertConfig() }
+  }
+  const res = await XterioAuth.openPage(currentPage.value, _t, param)
   if (_t === OpenPageMode.iframeDom) {
     console.log('dom=', res)
     alert(res)
@@ -85,6 +94,9 @@ const getPageParam = () => {
   if (isChecked('hide_sign_out')) {
     dic = { ...dic, hide_sign_out: true }
   }
+  if (isChecked('hide_header')) {
+    dic = { ...dic, hide_header: true }
+  }
   if (isChecked('hide_footer')) {
     dic = { ...dic, hide_footer: true }
   }
@@ -104,6 +116,25 @@ const getPageParam = () => {
   console.log('dic=', dic)
   return dic
 }
+const getAlertConfig = () => {
+  const placement = (getRadioValue('alert_active_place_option') || 'right') as PageAlertConfig['placement']
+  let dic: Partial<PageAlertConfig> = { placement }
+  if (isChecked('alert_showCloseIcon')) {
+    dic = { ...dic, showCloseIcon: false }
+  }
+  let _sty = { width: getInputValue('alert_width'), height: getInputValue('alert_height') }
+
+  const _customsty = getInputValue('alert_style', 'textarea') || '{}'
+  try {
+    _sty = { ..._sty, ...JSON.parse(_customsty) }
+  } catch (err: unknown) {
+    console.error('自定义样式输入不合法', _customsty, err)
+  }
+  dic.style = _sty
+
+  console.log('alertConfig=', dic)
+  return dic
+}
 const getOtac = async () => {
   const _otac = await XterioAuth.getOtac()
   console.log('_otac=', _otac)
@@ -114,6 +145,11 @@ const getIdToken = async () => {
   console.log('_idToken=', _idToken)
   alert(_idToken)
 }
+const defaultStyle = JSON.stringify({
+  marginTop: '20px',
+  backgroundColor: 'red'
+})
+
 </script>
 
 <template>
@@ -157,12 +193,16 @@ const getIdToken = async () => {
       </div>
       <div class="hide_menu_entrance">
         <input type="checkbox" />
-        <span>隐藏顶部导航栏(仅H5生效)</span>
+        <span>隐藏菜单入口(仅H5生效)</span>
       </div>
       <div class="hide_sign_out">
         <input type="checkbox" />
         <span>隐藏登出按钮</span>
       </div>
+      <div class="hide_header">
+        <input type="checkbox" />
+        <span>隐藏顶部导航</span>
+      </div>
       <div class="hide_footer">
         <input type="checkbox" />
         <span>隐藏页脚</span>
@@ -212,6 +252,38 @@ const getIdToken = async () => {
     <div v-if="currentPage === PageType.nft_market" class="config-nft-market">tip: keyword & features 参考文档</div>
     <div v-if="currentPage === PageType.nft_collection" class="config-nft-collection">tip: features 参考文档，collection必传(示例为写死的值)</div>
   </div>
+  <div class="card col">
+    <p>弹框样式控制:</p>
+    <div class="config-alert row justify-center">
+      <div>位置:</div>
+      <div>
+        <input type="radio" name="alert_active_place_option" value="left" />
+        <label>left</label>
+        <input type="radio" name="alert_active_place_option" value="center" />
+        <label>center</label>
+        <input type="radio" name="alert_active_place_option" value="right" />
+        <label>right</label>
+      </div>
+    </div>
+    <div class="config-alert alert_showCloseIcon">
+      <input type="checkbox" />
+      <span>是否隐藏关闭按钮</span>
+    </div>
+    <div class="config-alert row items-center justify-center alert_width">
+      <label>宽度:</label>
+      <input type="text" placeholder="200px" value="200px" />
+    </div>
+    <div class="config-alert row items-center justify-center alert_height">
+      <label>高度:</label>
+      <input type="text" placeholder="200px" value="300px" />
+    </div>
+    <div class="config-alert col items-center justify-center alert_style">
+      <label>自定义样式对象(合法json字符串):</label>
+      <textarea style="width: 400px;" placeholder="" :rows="7">
+        {{ defaultStyle }}
+      </textarea>
+    </div>
+  </div>
   <div class="card">
     <p>打开页面的方式如下：</p>
     <button @click="openPage(OpenPageMode.alert)">弹框形式(iframe)</button>

examples/example-auth-vue/src/main.ts

@@ -5,7 +5,7 @@ import App from './App.vue'
 import '@xterio-sdk/auth/style/main.css'
 import { XterioAuth, Env } from '@xterio-sdk/auth'
 
-const redirect_uri = 'http://localhost:3000/'
+const redirect_uri = location.href.replace(/[?&]code=[^&]+/, '')
 const client_id = '4gsmgur6gkp8u9ps8dlco3k7eo'
 const client_secret = 'ABC23'
 const app_id = 'apiautotest'

examples/example-auth-vue/src/style.css

@@ -62,9 +62,16 @@ button:focus-visible {
   display: flex;
   flex-direction: row;
 }
+.col{
+  display: flex;
+  flex-direction: column;
+}
 .justify-center{
   justify-content: center;
 }
+.items-center{
+  align-items: center;
+}
 
 #app {
   max-width: 1280px;