@matchain/matchid-sdk-react 0.1.53-alpha.5 → 0.1.53-alpha.7

package/dist/ui/index.mjs

@@ -11,8 +11,10 @@ import {
   Overlay,
   Popover,
   Radio,
-  Switch
-} from "../chunk-V2S54LGG.mjs";
+  Skeleton_default,
+  Switch,
+  Tabs
+} from "../chunk-AYMVU44P.mjs";
 import "../chunk-3USZ4ZZY.mjs";
 import "../chunk-J5LGTIGS.mjs";
 export {
@@ -28,6 +30,8 @@ export {
   Overlay,
   Popover,
   Radio,
-  Switch
+  Skeleton_default as Skeleton,
+  Switch,
+  Tabs
 };
 //# sourceMappingURL=index.mjs.map

package/example/src/App.tsx

@@ -14,6 +14,7 @@ import useLocalStore from "@/store/useLocalStore";
 import {LoginButton} from "@matchain/matchid-sdk-react/components";
 import UI from "@/pages/UI";
 import TgApp from "@/pages/TgApp";
+import Contact from "./pages/Contact";
 
 
 function Nav() {
@@ -51,6 +52,12 @@ function Nav() {
                 url: '/wallet',
                 onActive: location.pathname === '/wallet',
                 hidden: !isLogin
+            },
+            {
+                name: 'Contact',
+                url: '/contact',
+                onActive: location.pathname === '/contact',
+                hidden: !isLogin
             }
         ]
         return list
@@ -59,7 +66,7 @@ function Nav() {
         <nav className={`text-2xl mb-5 p-2 text-red-600 flex gap-10 flex-wrap`}>
             {menus.map((menu) => {
                 return <Link key={menu.url} to={menu.url}
-                             className={`text-2xl ${menu.onActive ? 'text-red-600' : 'text-gray-400'} ${menu.hidden?'hidden' :''}`}>{menu.name}</Link>
+                             className={`text-2xl ${menu.onActive ? 'text-red-600' : 'text-gray-400'} ${menu.hidden ? 'hidden' : ''}`}>{menu.name}</Link>
             })}
 
             <LoginButton/>
@@ -69,15 +76,29 @@ function Nav() {
 }
 
 function RouterApp() {
-    const {appid, setAppid, locale, setLocale, endpoints, setEndpoints, setWalletType,walletType,backgroundColor,setBackgroundColor,color,setColor} = useLocalStore()
+    const {
+        appid,
+        setAppid,
+        locale,
+        setLocale,
+        endpoints,
+        setEndpoints,
+        setWalletType,
+        walletType,
+        backgroundColor,
+        setBackgroundColor,
+        color,
+        setColor
+    } = useLocalStore()
 
     return <Router>
         <div className={`mb-2 p-2 flex gap-2 flex-col`}>
             <div>
                 <label>BackgroundColor:</label>
-                <input value={backgroundColor} placeholder={"BackgroundColor"} className={"border-solid border"} onChange={(ele) => {
-                    setBackgroundColor(ele.target.value)
-                }}/></div>
+                <input value={backgroundColor} placeholder={"BackgroundColor"} className={"border-solid border"}
+                       onChange={(ele) => {
+                           setBackgroundColor(ele.target.value)
+                       }}/></div>
             <div>
                 <label>Color:</label>
                 <input value={color} placeholder={"Color"} className={"border-solid border"} onChange={(ele) => {
@@ -128,6 +149,7 @@ function RouterApp() {
                 <Route element={<RoutePrivate/>}>
                     <Route path="/user" element={<User/>}/>
                     <Route path="/wallet" element={<Wallet/>}/>
+                    <Route path="/contact" element={<Contact/>}/>
                 </Route>
             </Routes>
         </div>
@@ -135,7 +157,7 @@ function RouterApp() {
 }
 
 function App() {
-    const {appid, locale, endpoints,walletType,backgroundColor,color} = useLocalStore()
+    const {appid, locale, endpoints, walletType, backgroundColor, color} = useLocalStore()
 
     return <div style={{
         backgroundColor: backgroundColor,
@@ -157,7 +179,8 @@ function App() {
         }}
     >
         <RouterApp/>
-    </MatchProvider></div>;
+    </MatchProvider>
+    </div>;
 }
 
 export default App;

package/example/src/pages/Contact/index.tsx

@@ -0,0 +1,4 @@
+import {ContactList} from "@matchain/matchid-sdk-react/components"
+export default function Contact(){
+    return <ContactList/>
+}

package/example/src/pages/UI/components/Tabs.tsx

@@ -0,0 +1,18 @@
+import {useState} from "react";
+import {Tabs} from "@matchain/matchid-sdk-react/ui"
+export default function TabsDemo(){
+    const list = ['Tab1', 'Tab2', 'Tab3']
+    const [activeTab, setActiveTab] = useState(0)
+    return <div>
+        <Tabs tabs={list} activeTab={activeTab} setActiveTab={setActiveTab}/>
+        <div>
+            {list.map((tab, index) => {
+                return <div key={index} style={{display: activeTab === index ? 'block' : 'none'}}>
+                    {tab}
+                </div>
+            })}
+        </div>
+    </div>
+
+
+}

package/example/src/pages/UI/index.tsx

@@ -1,11 +1,13 @@
 import SwitchDemo from "@/pages/UI/components/Switch";
 import AlphaAvatarDemo from "@/pages/UI/components/AlphaAvatar";
 import RadioDemo from "@/pages/UI/components/Radio";
+import TabsDemo from "@/pages/UI/components/Tabs";
 
 export default function UI(){
     return <div>
         <SwitchDemo/>
         <AlphaAvatarDemo/>
         <RadioDemo/>
+        <TabsDemo/>
     </div>
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchain/matchid-sdk-react",
-  "version": "0.1.53-alpha.5",
+  "version": "0.1.53-alpha.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -73,11 +73,13 @@
     "axios-retry": "^4.5.0",
     "copy-to-clipboard": "^3.3.3",
     "ethers": "^5.7.2",
+    "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-intl": "^7.1.0",
     "react-qrcode": "^0.3.6",
     "react-router-dom": "^6.0.0",
+    "react-virtuoso": "^4.12.5",
     "sats-connect": "^3.0.1",
     "siwe": "^2.3.2",
     "styled-components": "^6.1.13",
@@ -87,6 +89,7 @@
   },
   "devDependencies": {
     "@swc/core": "^1.9.1",
+    "@types/lodash": "^4.17.16",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-modal": "^3.16.3",