feat(website): support badges

website/docusaurus.config.js

@@ -4,6 +4,7 @@
 const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 const version = require('../packages/kit/package.json').version;
+const walletStandardVersion = '0.5.0'
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -131,6 +132,10 @@ const config = {
         darkTheme: darkCodeTheme,
       },
     }),
+
+  customFields: {
+    walletStandardVersion,
+  }
 };
 
 module.exports = config;

website/package.json

@@ -28,6 +28,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.1.0",
     "@mysten/wallet-adapter-sui-wallet": "0.3.0",
+    "@mysten/wallet-standard": "^0.5.0",
     "@tsconfig/docusaurus": "^1.0.5",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",

website/src/pages/index.module.css

@@ -19,8 +19,14 @@
   font-size: 24px;
   line-height: 24px;
   color: #B9C0D4;
-  margin-bottom: 48px;
+  margin-bottom: 24px;
 }
+
+.hero-badges {
+  margin-bottom: 24px;
+  text-align: center;
+}
+
 .heroBanner {
   padding: 4rem 0;
   text-align: center;

website/src/pages/index.tsx

@@ -1,22 +1,54 @@
-import React, { useEffect } from 'react';
+import React, {useEffect} from 'react';
 import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import styles from './index.module.css';
-import { ConnectButton, WalletProvider } from '@suiet/wallet-kit';
+import {ConnectButton, WalletProvider} from '@suiet/wallet-kit';
 import '@suiet/wallet-kit/style.css';
 import KitBanner from '../../static/img/kit-banner.svg';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
+import {CustomFields} from "@site/types/customFields";
+
+const Badge = (props: {
+  href: string,
+  subject: string,
+  status: string,
+  color: string,
+  icon?: string,
+  className?: string,
+}) => {
+  const {color = 'green'} = props
+  const encode = encodeURIComponent;
+  const link = `https://badgen.net/badge/${encode(props.subject)}/${encode(props.status)}/${encode(color)}`
+  return <a href={props.href} className={props.className}>
+    <img src={link}/>
+  </a>
+}
 
+const WalletStandardBadge = (props: { version: string, className?: string }) => {
+  return (
+    <Badge
+      href={'https://www.npmjs.com/package/@mysten/wallet-standard'}
+      subject={'wallet-standard'}
+      status={props.version}
+      color={'green'}
+    />
+  )
+};
+
+function HomepageHeader() {
+  const {siteConfig} = useDocusaurusContext();
+  const {walletStandardVersion} = siteConfig.customFields as unknown as CustomFields;
   return (
     <header className={clsx('hero', styles.heroBanner)}>
       <div className="container">
         {/* <h1 className="hero__title">{siteConfig.title}</h1> */}
         <h1 className={styles['hero-title']}>{siteConfig.title}</h1>
         <p className={styles['hero-desc']}>{siteConfig.tagline}</p>
+        <div className={styles['hero-badges']}>
+          <WalletStandardBadge version={walletStandardVersion}/>
+        </div>
         <div className={styles.buttons}>
           <a className={styles['doc-button']} href="/docs/QuickStart">
             View Docs
@@ -29,15 +61,15 @@ function HomepageHeader() {
 }
 
 export default function Home(): JSX.Element {
-  const { siteConfig } = useDocusaurusContext();
+  const {siteConfig} = useDocusaurusContext();
 
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
       description="Suiet wallet kit is the best way to connect all Sui wallets."
     >
       <WalletProvider autoConnect={false}>
-        <HomepageHeader />
+        <HomepageHeader/>
         <main
           style={{
             margin: 'auto',
@@ -51,7 +83,7 @@ export default function Home(): JSX.Element {
               margin: 'auto',
             }}
           >
-            <KitBanner />
+            <KitBanner/>
           </div>
           <div
             style={{
@@ -60,7 +92,7 @@ export default function Home(): JSX.Element {
               margin: 'auto',
             }}
           >
-            <img src={useBaseUrl('img/kit-banner-2.png')} />
+            <img src={useBaseUrl('img/kit-banner-2.png')}/>
           </div>
           <div
             style={{
@@ -69,7 +101,7 @@ export default function Home(): JSX.Element {
               margin: 'auto',
             }}
           >
-            <img src={useBaseUrl('img/trustedby.png')} />
+            <img src={useBaseUrl('img/trustedby.png')}/>
           </div>
         </main>
       </WalletProvider>

website/types/customFields.ts

@@ -0,0 +1,3 @@
+export interface CustomFields {
+  walletStandardVersion: string;
+}