feat: added content for web3wallet

docs/components/CloudBanner.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import wcGlassImage from '../../static/assets/wc-logo-glass.png'
+
+export const CloudBanner = props => {
+  return (
+    <div className="cloud__wrapper">
+      <div className="cloud__text-container">
+        <h2>Don't have a project ID?</h2>
+        <p>Head over to WalletConnect Cloud and create a New Project now!</p>
+      </div>
+      <a href="https://cloud.walletconnect.com" target="_blank">
+        Get started for free
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          height={20}
+          width={20}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
+          />
+        </svg>
+      </a>
+      <img className="cloud__image" src={wcGlassImage} alt="cloud illustration" />
+    </div>
+  )
+}
+
+export default CloudBanner

docs/components/PlatformTabItem.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import TabItem from '@theme-original/TabItem'
+
+export default function PlatformTabItem(props) {
+  return (
+    <>
+      <TabItem className="platform-tabs--items" {...props} />
+    </>
+  )
+}

docs/components/PlatformTabs.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import Tabs from './Tabs'
+
+const PLATFORM_MAP = [
+  {
+    value: 'web',
+    label: 'Web'
+  },
+  {
+    value: 'ios',
+    label: 'iOS'
+  },
+  {
+    value: 'android',
+    label: 'Android'
+  },
+  {
+    value: 'flutter',
+    label: 'Flutter'
+  },
+  {
+    value: 'react-native',
+    label: 'React Native'
+  },
+  {
+    value: 'unity',
+    label: 'Unity'
+  }
+]
+
+const valuesBuilder = activeOptions => {
+  const values = PLATFORM_MAP.filter(({ value }) => activeOptions.includes(value))
+  return values.length ? values : PLATFORM_MAP
+}
+
+export default function PlatformTabs(props) {
+  const values = valuesBuilder(props.activeOptions)
+  return (
+    <>
+      <Tabs className="platform-tabs" queryString="platform" values={values} {...props} />
+    </>
+  )
+}

docs/components/Tabs/index.js

@@ -0,0 +1,113 @@
+import React, { cloneElement } from 'react'
+import clsx from 'clsx'
+import { useScrollPositionBlocker, useTabs } from '@docusaurus/theme-common/internal'
+import useIsBrowser from '@docusaurus/useIsBrowser'
+import styles from './styles.module.css'
+function TabList({ className, block, selectedValue, selectValue, tabValues }) {
+  const tabRefs = []
+  const { blockElementScrollPositionUntilNextRender } = useScrollPositionBlocker()
+  const handleTabChange = event => {
+    const newTab = event.currentTarget
+    const newTabIndex = tabRefs.indexOf(newTab)
+    const newTabValue = tabValues[newTabIndex].value
+    if (newTabValue !== selectedValue) {
+      blockElementScrollPositionUntilNextRender(newTab)
+      selectValue(newTabValue)
+    }
+  }
+  const handleKeydown = event => {
+    let focusElement = null
+    switch (event.key) {
+      case 'Enter': {
+        handleTabChange(event)
+        break
+      }
+      case 'ArrowRight': {
+        const nextTab = tabRefs.indexOf(event.currentTarget) + 1
+        focusElement = tabRefs[nextTab] ?? tabRefs[0]
+        break
+      }
+      case 'ArrowLeft': {
+        const prevTab = tabRefs.indexOf(event.currentTarget) - 1
+        focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1]
+        break
+      }
+      default:
+        break
+    }
+    focusElement?.focus()
+  }
+  return (
+    <ul
+      role="tablist"
+      aria-orientation="horizontal"
+      className={clsx(
+        'tabs',
+        {
+          'tabs--block': block
+        },
+        className
+      )}
+    >
+      {tabValues.map(({ value, label, attributes }) => (
+        <li
+          // TODO extract TabListItem
+          role="tab"
+          tabIndex={selectedValue === value ? 0 : -1}
+          aria-selected={selectedValue === value}
+          key={value}
+          ref={tabControl => tabRefs.push(tabControl)}
+          onKeyDown={handleKeydown}
+          onClick={handleTabChange}
+          {...attributes}
+          className={clsx('tabs__item', styles.tabItem, attributes?.className, {
+            'tabs__item--active': selectedValue === value
+          })}
+        >
+          {label ?? value}
+        </li>
+      ))}
+    </ul>
+  )
+}
+function TabContent({ lazy, children, selectedValue }) {
+  const childTabs = (Array.isArray(children) ? children : [children]).filter(Boolean)
+  if (lazy) {
+    const selectedTabItem = childTabs.find(tabItem => tabItem.props.value === selectedValue)
+    if (!selectedTabItem) {
+      // fail-safe or fail-fast? not sure what's best here
+      return null
+    }
+    return cloneElement(selectedTabItem, { className: 'platform-tabs--container' })
+  }
+  return (
+    <div className="platform-tabs--container">
+      {childTabs.map((tabItem, i) =>
+        cloneElement(tabItem, {
+          key: i,
+          hidden: tabItem.props.value !== selectedValue
+        })
+      )}
+    </div>
+  )
+}
+function TabsComponent(props) {
+  const tabs = useTabs(props)
+  return (
+    <div className={clsx('tabs-container', styles.tabList)}>
+      <TabList {...props} {...tabs} />
+      <TabContent {...props} {...tabs} />
+    </div>
+  )
+}
+export default function Tabs(props) {
+  const isBrowser = useIsBrowser()
+  return (
+    <TabsComponent
+      // Remount tabs after hydration
+      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
+      key={String(isBrowser)}
+      {...props}
+    />
+  )
+}

docs/components/Tabs/styles.module.css

@@ -0,0 +1,7 @@
+.tabList {
+  margin-bottom: var(--ifm-leading);
+}
+
+.tabItem {
+  margin-top: 0 !important;
+}