diff --git a/docs/.eslintignore b/docs/.eslintignore deleted file mode 100644 index 38972655f..000000000 --- a/docs/.eslintignore +++ /dev/null @@ -1,13 +0,0 @@ -.DS_Store -node_modules -/build -/.svelte-kit -/package -.env -.env.* -!.env.example - -# Ignore files for PNPM, NPM and YARN -pnpm-lock.yaml -package-lock.json -yarn.lock diff --git a/docs/.eslintrc.cjs b/docs/.eslintrc.cjs deleted file mode 100644 index c9c248180..000000000 --- a/docs/.eslintrc.cjs +++ /dev/null @@ -1,20 +0,0 @@ -module.exports = { - root: true, - parser: '@typescript-eslint/parser', - extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], - plugins: ['svelte3', '@typescript-eslint'], - ignorePatterns: ['*.cjs'], - overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], - settings: { - 'svelte3/typescript': () => require('typescript') - }, - parserOptions: { - sourceType: 'module', - ecmaVersion: 2020 - }, - env: { - browser: true, - es2017: true, - node: true - } -} diff --git a/docs/.gitignore b/docs/.gitignore index 43cdd4575..27f3e983d 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -6,4 +6,4 @@ node_modules .env .env.* !.env.example -.vercel +vite.config.js.timestamp-* diff --git a/docs/README.md b/docs/README.md index c3385e03e..6c30dafb7 100644 --- a/docs/README.md +++ b/docs/README.md @@ -22,4 +22,4 @@ Run `yarn build` and confirm no errors present from the proposed changes. Confirm vercel build within PR builds without error and check instance deployment for accuracy. -PR should target branch the main develop branch - [develop](https://github.com/blocknative/web3-onboard/tree/develop). \ No newline at end of file +PR should target branch the main develop branch - [develop](https://github.com/blocknative/web3-onboard/tree/develop). diff --git a/docs/package.json b/docs/package.json index 2e6e65aaf..4bec61fa2 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,58 +1,49 @@ { "name": "docs", "version": "0.0.1", + "private": true, "scripts": { - "dev": "svelte-kit dev", - "build": "NODE_OPTIONS=--max_old_space_size=8192 svelte-kit build", - "package": "svelte-kit package", - "preview": "svelte-kit preview", + "dev": "vite dev", + "build": "export NODE_OPTIONS=--max-old-space-size=32768 && vite build", + "preview": "vite preview", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "lint": "prettier --plugin-search-dir . --check .", + "format": "prettier --plugin-search-dir . --write .", "prepare": "svelte-kit sync", "test": "playwright test", - "check": "svelte-check --tsconfig ./tsconfig.json", - "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", - "lint": "prettier --check --plugin-search-dir=. . && eslint .", - "format": "prettier --write --plugin-search-dir=. .", "w3o-latest-prod": "yarn add '@web3-onboard/coinbase' '@web3-onboard/core' '@web3-onboard/dcent' '@web3-onboard/enkrypt' '@web3-onboard/fortmatic' '@web3-onboard/gas' '@web3-onboard/gnosis' '@web3-onboard/infinity-wallet' '@web3-onboard/injected-wallets' '@web3-onboard/keepkey' '@web3-onboard/keystone' '@web3-onboard/ledger' '@web3-onboard/magic' '@web3-onboard/mew-wallet' '@web3-onboard/portis' '@web3-onboard/sequence' '@web3-onboard/taho' '@web3-onboard/torus' '@web3-onboard/transaction-preview' '@web3-onboard/trezor' '@web3-onboard/trust' '@web3-onboard/uauth' '@web3-onboard/walletconnect' '@web3-onboard/web3auth' '@web3-onboard/xdefi' '@web3-onboard/frame'", "w3o-latest-alpha": "yarn add '@web3-onboard/coinbase@next' '@web3-onboard/core@next' '@web3-onboard/dcent@next' '@web3-onboard/enkrypt@next' '@web3-onboard/fortmatic@next' '@web3-onboard/gas@next' '@web3-onboard/gnosis@next' '@web3-onboard/infinity-wallet@next' '@web3-onboard/injected-wallets@next' '@web3-onboard/keepkey@next' '@web3-onboard/keystone@next' '@web3-onboard/ledger@next' '@web3-onboard/magic@next' '@web3-onboard/mew-wallet@next' '@web3-onboard/portis@next' '@web3-onboard/sequence@next' '@web3-onboard/taho@next' '@web3-onboard/torus@next' '@web3-onboard/transaction-preview@next' '@web3-onboard/trezor@next' '@web3-onboard/trust@next' '@web3-onboard/uauth@next' '@web3-onboard/walletconnect@next' '@web3-onboard/web3auth@next' '@web3-onboard/xdefi@next' '@web3-onboard/frame'" }, "devDependencies": { - "@algolia/client-search": "^4.14.2", - "@docsearch/css": "^3.2.1", - "@docsearch/js": "^3.2.1", - "@iconify-json/ri": "^1.1.3", - "@playwright/test": "^1.22.2", - "@sveltejs/adapter-static": "^1.0.0-next.39", - "@sveltejs/adapter-vercel": "next", - "@sveltejs/kit": "1.0.0-next.357", - "@svelteness/kit-docs": "^0.22.12", - "@tailwindcss/typography": "^0.5.2", - "@types/react": "^18.0.21", - "@types/react-dom": "^18.0.6", - "@typescript-eslint/eslint-plugin": "^5.27.0", - "@typescript-eslint/parser": "^5.27.0", - "@vitebook/client": "^0.100.5", - "@vitebook/core": "^0.100.5", - "@vitebook/markdown-shiki": "^0.100.5", - "@vitebook/markdown-svelte": "^0.100.5", - "autoprefixer": "^10.4.7", - "clsx": "^1.1.1", - "daisyui": "^2.17.0", - "eslint": "^8.16.0", - "eslint-config-prettier": "^8.3.0", - "eslint-plugin-svelte3": "^4.0.0", - "postcss": "^8.4.14", - "prettier": "^2.6.2", - "prettier-plugin-svelte": "^2.7.0", + "@algolia/client-search": "^4.17.0", + "@docsearch/css": "^3.3.3", + "@docsearch/js": "^3.3.3", + "@iconify-json/ri": "^1.0.0", + "@sveltejs/adapter-auto": "^2.0.0", + "@sveltejs/kit": "^1.5.0", + "@svelteness/kit-docs": "^1.1.3", + "@tailwindcss/typography": "^0.5.9", + "@types/animejs": "^3.1.7", + "@types/react": "^18.0.37", + "assert": "^2.0.0", + "autoprefixer": "^10.4.14", + "clsx": "^1.0.0", + "crypto-browserify": "^3.12.0", + "prettier": "^2.8.0", + "prettier-plugin-svelte": "^2.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "rollup-plugin-polyfill-node": "^0.11.0", - "shiki": "^0.10.1", - "svelte": "^3.49.0", - "svelte-check": "^2.7.1", - "svelte-preprocess": "^4.10.7", - "tslib": "^2.3.1", - "typescript": "^4.7.2", - "unplugin-icons": "^0.13.4" + "rollup-plugin-polyfill-node": "^0.12.0", + "shiki": "^0.12.0", + "stream-browserify": "^3.0.0", + "svelte": "^3.54.0", + "svelte-check": "^3.0.1", + "svelte-preprocess": "^5.0.3", + "tslib": "^2.4.1", + "typescript": "^5.0.4", + "unplugin-icons": "^0.14.0", + "vite": "^4.2.2" }, "type": "module", "dependencies": { @@ -62,7 +53,7 @@ "@web3-onboard/dcent": "^2.2.6-alpha.2", "@web3-onboard/enkrypt": "^2.0.3-alpha.2", "@web3-onboard/fortmatic": "^2.0.18-alpha.2", - "@web3-onboard/frame": "2.21.2-alpha.1", + "@web3-onboard/frame": "^2.21.2-alpha.1", "@web3-onboard/gas": "^2.1.7-alpha.2", "@web3-onboard/gnosis": "^2.1.9-alpha.2", "@web3-onboard/infinity-wallet": "^2.0.3-alpha.2", @@ -81,9 +72,11 @@ "@web3-onboard/trust": "^2.0.3-alpha.2", "@web3-onboard/uauth": "^2.0.4-alpha.2", "@web3-onboard/walletconnect": "^2.3.7-alpha.3", + "@web3-onboard/web3auth": "^2.2.1-alpha.1", "@web3-onboard/xdefi": "^2.0.3-alpha.2", "animejs": "^3.2.1", "bnc-sdk": "^4.6.6", - "ethers": "^5.7.0" + "ethers": "^5.7.0", + "tailwindcss": "^3.3.1" } } diff --git a/docs/playwright.config.ts b/docs/playwright.config.ts deleted file mode 100644 index 086f60504..000000000 --- a/docs/playwright.config.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { PlaywrightTestConfig } from '@playwright/test' - -const config: PlaywrightTestConfig = { - webServer: { - command: 'npm run build && npm run preview', - port: 3000 - } -} - -export default config diff --git a/docs/src/app.d.ts b/docs/src/app.d.ts index 02d3fab72..4898fe0d8 100644 --- a/docs/src/app.d.ts +++ b/docs/src/app.d.ts @@ -1,14 +1,14 @@ -/// /// // See https://kit.svelte.dev/docs/types#app // for information about these interfaces -// and what to do when importing types -declare namespace App { - // interface Locals {} - // interface Platform {} - // interface Session {} - // interface Stuff {} +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface Platform {} + } } -declare module '@svelteness/kit-docs/tailwind.config.cjs' +export {} diff --git a/docs/src/app.html b/docs/src/app.html index 008b56e67..54e2a9b67 100644 --- a/docs/src/app.html +++ b/docs/src/app.html @@ -2,19 +2,8 @@ - - - %sveltekit.head% - - - - + + + + %sveltekit.head% + + + - -
%sveltekit.body%
+ +
%sveltekit.body%
diff --git a/docs/src/lib/fonts/FiraCode-VF.woff b/docs/src/fonts/FiraCode-VF.woff similarity index 100% rename from docs/src/lib/fonts/FiraCode-VF.woff rename to docs/src/fonts/FiraCode-VF.woff diff --git a/docs/src/lib/fonts/FiraCode-VF.woff2 b/docs/src/fonts/FiraCode-VF.woff2 similarity index 100% rename from docs/src/lib/fonts/FiraCode-VF.woff2 rename to docs/src/fonts/FiraCode-VF.woff2 diff --git a/docs/src/lib/fonts/Inter-VF.italic-latin.woff2 b/docs/src/fonts/Inter-VF.italic-latin.woff2 similarity index 100% rename from docs/src/lib/fonts/Inter-VF.italic-latin.woff2 rename to docs/src/fonts/Inter-VF.italic-latin.woff2 diff --git a/docs/src/lib/fonts/Inter-VF.roman-latin.woff2 b/docs/src/fonts/Inter-VF.roman-latin.woff2 similarity index 100% rename from docs/src/lib/fonts/Inter-VF.roman-latin.woff2 rename to docs/src/fonts/Inter-VF.roman-latin.woff2 diff --git a/docs/src/lib/fonts/SofiaPro-Light.eot b/docs/src/fonts/SofiaPro-Light.eot similarity index 100% rename from docs/src/lib/fonts/SofiaPro-Light.eot rename to docs/src/fonts/SofiaPro-Light.eot diff --git a/docs/src/lib/fonts/SofiaPro-Light.svg b/docs/src/fonts/SofiaPro-Light.svg similarity index 100% rename from docs/src/lib/fonts/SofiaPro-Light.svg rename to docs/src/fonts/SofiaPro-Light.svg diff --git a/docs/src/lib/fonts/SofiaPro-Light.ttf b/docs/src/fonts/SofiaPro-Light.ttf similarity index 100% rename from docs/src/lib/fonts/SofiaPro-Light.ttf rename to docs/src/fonts/SofiaPro-Light.ttf diff --git a/docs/src/lib/fonts/SofiaPro-Light.woff b/docs/src/fonts/SofiaPro-Light.woff similarity index 100% rename from docs/src/lib/fonts/SofiaPro-Light.woff rename to docs/src/fonts/SofiaPro-Light.woff diff --git a/docs/src/lib/fonts/SofiaPro-Light.woff2 b/docs/src/fonts/SofiaPro-Light.woff2 similarity index 100% rename from docs/src/lib/fonts/SofiaPro-Light.woff2 rename to docs/src/fonts/SofiaPro-Light.woff2 diff --git a/docs/src/lib/fonts/SofiaPro-Regular.eot b/docs/src/fonts/SofiaPro-Regular.eot similarity index 100% rename from docs/src/lib/fonts/SofiaPro-Regular.eot rename to docs/src/fonts/SofiaPro-Regular.eot diff --git a/docs/src/lib/fonts/SofiaPro-Regular.svg b/docs/src/fonts/SofiaPro-Regular.svg similarity index 100% rename from docs/src/lib/fonts/SofiaPro-Regular.svg rename to docs/src/fonts/SofiaPro-Regular.svg diff --git a/docs/src/lib/fonts/SofiaPro-Regular.ttf b/docs/src/fonts/SofiaPro-Regular.ttf similarity index 100% rename from docs/src/lib/fonts/SofiaPro-Regular.ttf rename to docs/src/fonts/SofiaPro-Regular.ttf diff --git a/docs/src/lib/fonts/SofiaPro-Regular.woff b/docs/src/fonts/SofiaPro-Regular.woff similarity index 100% rename from docs/src/lib/fonts/SofiaPro-Regular.woff rename to docs/src/fonts/SofiaPro-Regular.woff diff --git a/docs/src/lib/fonts/SofiaPro-Regular.woff2 b/docs/src/fonts/SofiaPro-Regular.woff2 similarity index 100% rename from docs/src/lib/fonts/SofiaPro-Regular.woff2 rename to docs/src/fonts/SofiaPro-Regular.woff2 diff --git a/docs/src/lib/fonts/SofiaPro-SemiBold.eot b/docs/src/fonts/SofiaPro-SemiBold.eot similarity index 100% rename from docs/src/lib/fonts/SofiaPro-SemiBold.eot rename to docs/src/fonts/SofiaPro-SemiBold.eot diff --git a/docs/src/lib/fonts/SofiaPro-SemiBold.svg b/docs/src/fonts/SofiaPro-SemiBold.svg similarity index 100% rename from docs/src/lib/fonts/SofiaPro-SemiBold.svg rename to docs/src/fonts/SofiaPro-SemiBold.svg diff --git a/docs/src/lib/fonts/SofiaPro-SemiBold.ttf b/docs/src/fonts/SofiaPro-SemiBold.ttf similarity index 100% rename from docs/src/lib/fonts/SofiaPro-SemiBold.ttf rename to docs/src/fonts/SofiaPro-SemiBold.ttf diff --git a/docs/src/lib/fonts/SofiaPro-SemiBold.woff b/docs/src/fonts/SofiaPro-SemiBold.woff similarity index 100% rename from docs/src/lib/fonts/SofiaPro-SemiBold.woff rename to docs/src/fonts/SofiaPro-SemiBold.woff diff --git a/docs/src/lib/fonts/SofiaPro-SemiBold.woff2 b/docs/src/fonts/SofiaPro-SemiBold.woff2 similarity index 100% rename from docs/src/lib/fonts/SofiaPro-SemiBold.woff2 rename to docs/src/fonts/SofiaPro-SemiBold.woff2 diff --git a/docs/src/img/svelte-horizontal.svg b/docs/src/img/svelte-horizontal.svg deleted file mode 100644 index fadf24d5e..000000000 --- a/docs/src/img/svelte-horizontal.svg +++ /dev/null @@ -1 +0,0 @@ -svelte-horizontal diff --git a/docs/src/kit-docs/README.md b/docs/src/kit-docs/README.md new file mode 100644 index 000000000..4c093d124 --- /dev/null +++ b/docs/src/kit-docs/README.md @@ -0,0 +1,112 @@ +# `kit-docs` + +## Global Components + +You can create Svelte components that are global by placing them in this directory. Global +components are imported into every single Markdown file. In addition, they're automatically +mapped to Markdown containers, on which you can pass in props and dynamic slot elements. + +First, create a component in this directory: + +``` +src +└─ kit-docs + ├─ Button.svelte <- +``` + +Now, inside your markdown files you can use the ` +``` + +## Default Components + +There's a few components we provide out of the box such as `CodeFence`, `CodeInline`, `Link` and +others. You can find all of our [default components](https://github.com/svelteness/kit-docs/tree/main/packages/kit-docs/src/lib/kit-docs) +on GitHub. + +### Overriding + +If you want to override any of the default components, simply create a Svelte component with the +same name in this directory and make sure it accepts the same props. + +For example, you can override `CodeFence` by creating it in this directory like so: + +``` +src +└─ kit-docs + ├─ CodeFence.svelte <- +``` + +Finally, you can use the following minimal boilerplate and style the component as desired: + +```svelte title=CodeFence.svelte|copy + + +
+ {@html code} +
+``` diff --git a/docs/src/kit-docs/index.ts b/docs/src/kit-docs/index.ts deleted file mode 100644 index cc3f9f4d6..000000000 --- a/docs/src/kit-docs/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Tabs, TabPanel, TabItem } from './tabs' diff --git a/docs/src/kit-docs/tabs/TabItem.svelte b/docs/src/kit-docs/tabs/TabItem.svelte index b155986d4..aff01764b 100644 --- a/docs/src/kit-docs/tabs/TabItem.svelte +++ b/docs/src/kit-docs/tabs/TabItem.svelte @@ -47,7 +47,7 @@ } .tab.selected { - color: var(--kd-color-brand); + color: rgb(var(--kd-color-brand)); border-color: currentColor; } diff --git a/docs/src/kit-docs/tabs/Tabs.svelte b/docs/src/kit-docs/tabs/Tabs.svelte index 3a195c552..8428db521 100644 --- a/docs/src/kit-docs/tabs/Tabs.svelte +++ b/docs/src/kit-docs/tabs/Tabs.svelte @@ -23,7 +23,7 @@
    @@ -38,3 +38,9 @@
+ + \ No newline at end of file diff --git a/docs/src/lib/assets/favicon.ico b/docs/src/lib/assets/favicon.ico new file mode 100644 index 000000000..9aae6c08a Binary files /dev/null and b/docs/src/lib/assets/favicon.ico differ diff --git a/docs/src/lib/components/ConnectWalletButton.svelte b/docs/src/lib/components/ConnectWalletButton.svelte index 09d6f0fb3..7d2a948b9 100644 --- a/docs/src/lib/components/ConnectWalletButton.svelte +++ b/docs/src/lib/components/ConnectWalletButton.svelte @@ -2,6 +2,7 @@ import { onMount } from 'svelte' import type { OnboardAPI, WalletState } from '@web3-onboard/core' import getOnboard from '$lib/services/onboard.js' + import { Button } from '@svelteness/kit-docs' let onboard: OnboardAPI let connectedWallets: WalletState[] let buttonText = 'Connect' @@ -20,10 +21,10 @@ const initOnboard = async () => { if (document.location.href.includes('theming-tool')) { - onboard = await getOnboard('default') - } else { - onboard = await getOnboard() - } + onboard = await getOnboard('default') + } else { + onboard = await getOnboard() + } } onMount(async () => { @@ -38,9 +39,6 @@ }) - diff --git a/docs/src/lib/components/FeaturesSection.svelte b/docs/src/lib/components/FeaturesSection.svelte index 36ec45d36..931cc0cca 100644 --- a/docs/src/lib/components/FeaturesSection.svelte +++ b/docs/src/lib/components/FeaturesSection.svelte @@ -12,9 +12,6 @@ import AccountCenterGraphic from './svg/account-center-graphic.svg' import WalletsGraphic from './svg/wallet-row.svg' import TransactionPreviewGraphic from './svg/transaction-preview-graphic.svg' - - import InstallCode from './code-snippet/install-code.md' - import InstallCodeTp from './code-snippet/install-code-tp.md'
@@ -31,8 +28,8 @@
-
- +
+
@@ -117,7 +114,7 @@ >
- +
@@ -215,6 +212,10 @@ flex: 50%; } + .fixed-width { + max-width: 800px; + } + @media screen and (min-width: 640px) { .flexbox { flex-flow: row nowrap; diff --git a/docs/src/lib/components/Footer.svelte b/docs/src/lib/components/Footer.svelte index 0842f6f81..753bc4574 100644 --- a/docs/src/lib/components/Footer.svelte +++ b/docs/src/lib/components/Footer.svelte @@ -130,5 +130,4 @@ white-space: nowrap; border-width: 0; } - diff --git a/docs/src/lib/components/GettingStarted.svelte b/docs/src/lib/components/GettingStarted.svelte index aad08a930..a774c8b7f 100644 --- a/docs/src/lib/components/GettingStarted.svelte +++ b/docs/src/lib/components/GettingStarted.svelte @@ -1,10 +1,6 @@ - -
- +
diff --git a/docs/src/lib/components/HeroSection.svelte b/docs/src/lib/components/HeroSection.svelte index 3386f9f73..95a452382 100644 --- a/docs/src/lib/components/HeroSection.svelte +++ b/docs/src/lib/components/HeroSection.svelte @@ -1,7 +1,6 @@ @@ -13,7 +12,7 @@ {'Open-source, framework-agnostic JavaScript library to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection, real-time transaction states, and more.'}
- +
diff --git a/docs/src/lib/components/TransactionPreviewButton.svelte b/docs/src/lib/components/TransactionPreviewButton.svelte index 10f30353a..e355ef778 100644 --- a/docs/src/lib/components/TransactionPreviewButton.svelte +++ b/docs/src/lib/components/TransactionPreviewButton.svelte @@ -72,7 +72,6 @@ ] } - const handlePreview = async () => { await transactionPreview.init({ apiKey: '133a026b-c7a0-419c-a00b-66255b3cd487', @@ -82,7 +81,6 @@ const stubTrans = await buildTransaction() await transactionPreview.previewTransaction(stubTrans) - } onMount(async () => { diff --git a/docs/src/lib/components/code-snippet/getting-started-guide.md b/docs/src/lib/components/code-snippet/getting-started-guide.md deleted file mode 100644 index cae1b3d7d..000000000 --- a/docs/src/lib/components/code-snippet/getting-started-guide.md +++ /dev/null @@ -1,57 +0,0 @@ -# Getting Started - -## Installation - -Install the core Onboard library and the injected wallets module to support browser extension and mobile wallets: - -```bash copy -npm i @web3-onboard/core @web3-onboard/injected-wallets -``` - -## Quick Start - -Then initialize in your app: - -```js copy lineNumbers -import Onboard from '@web3-onboard/core' -import injectedModule from '@web3-onboard/injected-wallets' -import { ethers } from 'ethers' - -const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/' - -const injected = injectedModule() - -const onboard = Onboard({ - wallets: [injected], - chains: [ - { - id: '0x1', - token: 'ETH', - label: 'Ethereum Mainnet', - rpcUrl: MAINNET_RPC_URL - } - ] -}) - -const wallets = await onboard.connectWallet() - -console.log(wallets) - -if (wallets[0]) { - // create an ethers provider with the last connected wallet provider - const ethersProvider = new ethers.providers.Web3Provider(wallets[0].provider, 'any') - // if using ethers v6 this is: - // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') - - const signer = ethersProvider.getSigner() - - // send a transaction with the ethers provider - const txn = await signer.sendTransaction({ - to: '0x', - value: 100000000000000 - }) - - const receipt = await txn.wait() - console.log(receipt) -} -``` diff --git a/docs/src/lib/components/code-snippet/install-code-tp.md b/docs/src/lib/components/code-snippet/install-code-tp.md deleted file mode 100644 index 982a56706..000000000 --- a/docs/src/lib/components/code-snippet/install-code-tp.md +++ /dev/null @@ -1,16 +0,0 @@ - - - -```sh copy -npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview -``` - - - - -```sh copy -yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview -``` - - - diff --git a/docs/src/lib/components/code-snippet/install-code.md b/docs/src/lib/components/code-snippet/install-code.md deleted file mode 100644 index 8e2ab2395..000000000 --- a/docs/src/lib/components/code-snippet/install-code.md +++ /dev/null @@ -1,16 +0,0 @@ - - - -```sh copy -npm install @web3-onboard/core @web3-onboard/injected-wallets -``` - - - - -```sh copy -yarn add @web3-onboard/core @web3-onboard/injected-wallets -``` - - - diff --git a/docs/src/lib/components/code-snippet/theming-code.md b/docs/src/lib/components/code-snippet/theming-code.md deleted file mode 100644 index 00d1bdc42..000000000 --- a/docs/src/lib/components/code-snippet/theming-code.md +++ /dev/null @@ -1,10 +0,0 @@ -```css copy -:root { - --w3o-background-color: #1a1d26; - --w3o-foreground-color: #242835; - --w3o-text-color: #eff1fc; - --w3o-border-color: #33394b; - --w3o-action-color: #929bed; - --w3o-border-radius: 16px; -} -``` diff --git a/docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte b/docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte index 5317fbcc9..9f289d006 100644 --- a/docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte +++ b/docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte @@ -13,5 +13,5 @@
- +
diff --git a/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md deleted file mode 100644 index 684c4735e..000000000 --- a/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md +++ /dev/null @@ -1,205 +0,0 @@ -## Step 1: Import + Configure - -Import the libraries and any wallets you would like to use. For this example, we are going to use the injected wallets module. You can easily add more wallet support to your dapp via our other wallet modules. Additionally, we'll setup web3-onboard to support 2 chains: Ethereum mainnet and Polygon mainnet. - -```js title="onboard.js"|copy -import Onboard from '@web3-onboard/core' -import injectedModule from '@web3-onboard/injected-wallets' -import infinityWalletModule from '@web3-onboard/infinity-wallet' -import fortmaticModule from '@web3-onboard/fortmatic' -import gnosisModule from '@web3-onboard/gnosis' -import keepkeyModule from '@web3-onboard/keepkey' -import keystoneModule from '@web3-onboard/keystone' -import ledgerModule from '@web3-onboard/ledger' -import portisModule from '@web3-onboard/portis' -import torusModule from '@web3-onboard/torus' -import trezorModule from '@web3-onboard/trezor' -import walletConnectModule from '@web3-onboard/walletconnect' -import coinbaseModule from '@web3-onboard/coinbase' -import magicModule from '@web3-onboard/magic' -import web3authModule from '@web3-onboard/web3auth' -import dcentModule from '@web3-onboard/dcent' -import sequenceModule from '@web3-onboard/sequence' -import tahoModule from '@web3-onboard/taho' -import trustModule from '@web3-onboard/trust' -import frontierModule from '@web3-onboard/frontier' - -const INFURA_KEY = '' - -const injected = injectedModule() -const coinbase = coinbaseModule() -const dcent = dcentModule() -const walletConnect = walletConnectModule() - -const portis = portisModule({ - apiKey: 'apiKey' -}) - -const fortmatic = fortmaticModule({ - apiKey: 'apiKey' -}) - -const infinityWallet = infinityWalletModule() -const ledger = ledgerModule() -const keystone = keystoneModule() -const keepkey = keepkeyModule() -const gnosis = gnosisModule() -const sequence = sequenceModule() -const taho = tahoModule() // Previously named Tally Ho wallet -const trust = trustModule() -const frontier = frontierModule() - -const trezorOptions = { - email: 'test@test.com', - appUrl: 'https://www.blocknative.com' -} - -const trezor = trezorModule(trezorOptions) - -const magic = magicModule({ - apiKey: 'apiKey' -}) - -const enkrypt = enkryptModule() -const mewWallet = mewWalletModule() - -const wallets = [ - infinityWallet, - keepkey, - sequence, - injected, - taho, - ledger, - coinbase, - dcent, - trust, - frontier, - trezor, - walletConnect, - enkrypt, - mewWallet, - gnosis, - magic, - fortmatic, - keystone, - portis -] - -const chains = [ - { - id: '0x1', - token: 'ETH', - label: 'Ethereum Mainnet', - rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}` - }, - { - id: '0x5', - token: 'ETH', - label: 'Goerli', - rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}` - }, - { - id: '0x13881', - token: 'MATIC', - label: 'Polygon - Mumbai', - rpcUrl: 'https://matic-mumbai.chainstacklabs.com' - }, - { - id: '0x38', - token: 'BNB', - label: 'Binance', - rpcUrl: 'https://bsc-dataseed.binance.org/' - }, - { - id: '0xA', - token: 'OETH', - label: 'Optimism', - rpcUrl: 'https://mainnet.optimism.io' - }, - { - id: '0xA4B1', - token: 'ARB-ETH', - label: 'Arbitrum', - rpcUrl: 'https://rpc.ankr.com/arbitrum' - } -] - -const appMetadata = { - name: 'Connect Wallet Example', - icon: 'My App Icon', - description: 'Example showcasing how to connect a wallet.', - recommendedInjectedWallets: [ - { name: 'MetaMask', url: 'https://metamask.io' }, - { name: 'Coinbase', url: 'https://wallet.coinbase.com/' } - ] -} - -const onboard = Onboard({ - wallets, - chains, - appMetadata -}) - -export default onboard -``` - -## Step 2: Display the connect wallet button - -In main `App.svelte` file we'll import our previously initialized web3-onboard instance and then display our connect wallet button. - -```svelte title="App.svelte"|copy - - -
- -
-``` - -## Step 3: Display account information - -Now that we have our wallet connected, let's display some basic information, such as the connected wallet's address, ENS name, and avatar. - -```svelte title="App.svelte"|copy - - -{#if $wallets$?.[0]?.provider} -
- ENS Avatar -
{ ens?.name ? ens.name : address }
-
Connected to {wallet.label}
- -
-{:else} -
- -
-{/if} -``` diff --git a/docs/src/lib/components/examples/index.ts b/docs/src/lib/components/examples/index.ts index da992af9e..be83a4bfc 100644 --- a/docs/src/lib/components/examples/index.ts +++ b/docs/src/lib/components/examples/index.ts @@ -1,3 +1 @@ export { default as ConnectWallet } from './connect-wallet/ConnectWallet.svelte' -export { default as ReactConnectWallet } from './connect-wallet/ReactConnectWallet.md' -export { default as SvelteConnectWallet } from './connect-wallet/SvelteConnectWallet.md' diff --git a/docs/src/lib/components/gas/Gas.svelte b/docs/src/lib/components/gas/Gas.svelte index 0497d8951..aacf39c23 100644 --- a/docs/src/lib/components/gas/Gas.svelte +++ b/docs/src/lib/components/gas/Gas.svelte @@ -69,7 +69,7 @@ }) -
+
MORE LIKELY LESS LIKELY
-
+
{#each ($ethMainnetGasBlockPrices && $ethMainnetGasBlockPrices[0]?.blockPrices[0]?.estimatedPrices) || GAS_DATA_DEFAULT.estimatedPrices as gasData} {/each} diff --git a/docs/src/lib/components/gas/GasCard.svelte b/docs/src/lib/components/gas/GasCard.svelte index 11992a7ac..c914e671c 100644 --- a/docs/src/lib/components/gas/GasCard.svelte +++ b/docs/src/lib/components/gas/GasCard.svelte @@ -22,7 +22,8 @@ const gasDiff = (bnGas: GasPrice) => { if (!rpcGasForDiff || !bnGas || !bnGas.maxPriorityFeePerGas || !bnGas.maxFeePerGas) return - const priFeeDiff = Number.parseInt(rpcGasForDiff.maxPriorityFeePerGas) - bnGas.maxPriorityFeePerGas + const priFeeDiff = + Number.parseInt(rpcGasForDiff.maxPriorityFeePerGas) - bnGas.maxPriorityFeePerGas const maxFeeDiff = Number.parseInt(rpcGasForDiff.maxFeePerGas) - bnGas.maxFeePerGas return priFeeDiff + maxFeeDiff } @@ -56,7 +57,7 @@ {#if gasPriceFrom === 'bn'}
- {(gasData && gasData?.confidence) ? `${gasData.confidence}% probability` : '...'} + {gasData && gasData?.confidence ? `${gasData.confidence}% probability` : '...'}
{rpcGasForDiff ? `${gasDiff(gasData)?.toFixed(2)} gwei saved` : '...'} diff --git a/docs/src/lib/components/gas/index.ts b/docs/src/lib/components/gas/index.ts index afd3cb0f4..6db88a7a1 100644 --- a/docs/src/lib/components/gas/index.ts +++ b/docs/src/lib/components/gas/index.ts @@ -1 +1 @@ -export { default as Gas } from './Gas.svelte' \ No newline at end of file +export { default as Gas } from './Gas.svelte' diff --git a/docs/src/lib/components/gas/types.ts b/docs/src/lib/components/gas/types.ts index f31016936..ea734a17b 100644 --- a/docs/src/lib/components/gas/types.ts +++ b/docs/src/lib/components/gas/types.ts @@ -13,7 +13,7 @@ export type RPCGasPrice = { export interface GasData { estimatedPrices: GasPrice[] - baseFeePerGas: number| null + baseFeePerGas: number | null blockNumber: number | null maxPrice: number | null estimatedTransactionCount: number | null @@ -25,4 +25,4 @@ export interface GasData { export interface EstimatedBaseFee { confidence: number baseFee: number -} \ No newline at end of file +} diff --git a/docs/src/lib/components/icons/blocknative-icon.js b/docs/src/lib/components/icons/blocknative-icon.js index a85040b7c..91ca1cb81 100644 --- a/docs/src/lib/components/icons/blocknative-icon.js +++ b/docs/src/lib/components/icons/blocknative-icon.js @@ -22,5 +22,4 @@ export default ` - ` diff --git a/docs/src/lib/components/icons/bnWhiteBackground.js b/docs/src/lib/components/icons/bnWhiteBackground.js index 71c1bc7af..73b52594a 100644 --- a/docs/src/lib/components/icons/bnWhiteBackground.js +++ b/docs/src/lib/components/icons/bnWhiteBackground.js @@ -1 +1 @@ -export default `` \ No newline at end of file +export default `` diff --git a/docs/src/lib/components/index.ts b/docs/src/lib/components/index.ts index 745bf18f8..151d51101 100644 --- a/docs/src/lib/components/index.ts +++ b/docs/src/lib/components/index.ts @@ -1,4 +1,3 @@ export * from './examples' export * from './gas' -export { default as ThemeCustomizer } from './ThemeCustomizer.svelte' export { default as TransactionPreviewButton } from './TransactionPreviewButton.svelte' diff --git a/docs/src/lib/services/onboard.js b/docs/src/lib/services/onboard.js index e8ca05f07..88d5cc0fc 100644 --- a/docs/src/lib/services/onboard.js +++ b/docs/src/lib/services/onboard.js @@ -29,7 +29,6 @@ const classMutationListener = () => { } const intiOnboard = async (theme) => { - const { default: cedeModule } = await import('@web3-onboard/cede-store') const { default: Onboard } = await import('@web3-onboard/core') const { default: injectedModule } = await import('@web3-onboard/injected-wallets') const { default: trezorModule } = await import('@web3-onboard/trezor') @@ -52,6 +51,7 @@ const intiOnboard = async (theme) => { const { default: uauthModule } = await import('@web3-onboard/uauth') const { default: trustModule } = await import('@web3-onboard/trust') const { default: xdefiModule } = await import('@web3-onboard/xdefi') + const { default: cedeModule } = await import('@web3-onboard/cede-store') const { default: frameModule } = await import('@web3-onboard/frame') const INFURA_ID = '8b60d52405694345a99bcb82e722e0af' @@ -78,7 +78,6 @@ const intiOnboard = async (theme) => { const torus = torusModule() const trust = trustModule() const xdefi = xdefiModule() - const frame = frameModule() const cede = cedeModule() const portis = portisModule({ @@ -106,6 +105,8 @@ const intiOnboard = async (theme) => { apiKey: 'pk_live_02207D744E81C2BA' }) + const frame = frameModule() + return Onboard({ wallets: [ injected, diff --git a/docs/src/lib/styles/docsearch.css b/docs/src/lib/styles/docsearch.css new file mode 100644 index 000000000..30292e1c3 --- /dev/null +++ b/docs/src/lib/styles/docsearch.css @@ -0,0 +1,290 @@ +:root { + --docsearch-primary-color: var(--kd-color-brand); + --docsearch-highlight-color: var(--docsearch-primary-color); + --docsearch-text-color: var(--kd-color-gray-inverse); + --docsearch-searchbox-shadow: none; + --docsearch-searchbox-focus-background: transparent; + --docsearch-key-gradient: transparent; + --docsearch-key-shadow: none; + --docsearch-modal-background: #fafafa; + --docsearch-footer-background: #ededed; + --docsearch-muted-color: #606060; + --docsearch-logo-color: #606060; + --docsearch-hit-color: #606060; + --docsearch-hit-active-color: var(--kd-color-gray-inverse); + --docsearch-hit-background: none; +} + +:root.dark { + --docsearch-modal-shadow: none; + --docsearch-footer-shadow: none; + --docsearch-hit-background: #292929; + --docsearch-hit-color: #b4b4b4; + --docsearch-modal-background: #2d2d2d; + --docsearch-hit-shadow: none; + --docsearch-footer-background: #242424; + --docsearch-muted-color: #b4b4b4; + --docsearch-logo-color: #b4b4b4; +} + +.DocSearch-Container { + background-color: rgb(0 0 0 / 0.7); + font-family: var(--kd-font-family-sans); + --tw-backdrop-blur: blur(4px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.dark .DocSearch-Container { + background-color: rgb(34 34 34 / 0.8); +} + +.DocSearch-Button { + display: flex; + height: auto; + width: 100%; + align-items: center; + border-radius: 0.125rem; + background-color: var(--kd-color-gray-elevate); + padding-top: 0.625rem; + padding-bottom: 0.625rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} + +.DocSearch-Button:hover { + background-color: var(--kd-color-gray-hover); +} + +.DocSearch-Button { + margin: 0px; + font-size: 15px; + border: 1px solid var(--kd-color-gray-divider); +} + +.DocSearch-Button:focus-visible, +.DocSearch-Button.focus-visible { + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) + var(--tw-ring-offset-color) !important; + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) + var(--tw-ring-color) !important; + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important; + --tw-ring-color: var(--kd-color-focus); + outline: 2px solid transparent !important; +} + +.DocSearch-Button-Container { + display: flex; + width: 100%; + align-items: center; +} + +.DocSearch-SearchBar { + padding-bottom: 0.5rem; +} + +.DocSearch-Search-Icon { + margin-top: -0.25rem; + margin-right: 0.5rem; +} + +.DocSearch-Button-Placeholder { + margin: 0px; + height: auto; + padding: 0px; + font-size: 15px; + font-weight: 400; + color: var(--kd-color-gray-inverse); +} + +.DocSearch-Button-Keys { + display: flex; +} + +.DocSearch-Button-Keys > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.125rem * var(--tw-space-x-reverse)); + margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse))); +} + +.DocSearch-Button-Keys { + padding: 0px; + min-width: unset; +} + +.DocSearch-Button-Key { + top: 0px; + margin: 0px; + display: flex; + height: auto; + width: auto; +} + +.DocSearch-Button-Key > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.125rem * var(--tw-space-x-reverse)); + margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse))); +} + +.DocSearch-Button-Key { + background-image: none; + padding: 0px; + font-size: 15px; + font-weight: 600; + color: var(--kd-color-gray-inverse); + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} + +.DocSearch-Input { + margin-left: 0.25rem; + margin-right: 0.5rem; + padding: 0px; + padding-left: 0px; + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.DocSearch-Form:focus-within { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) + var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) + var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-color: var(--kd-color-focus); +} + +.DocSearch-Input:focus, +.DocSearch-Input:focus-visible { + outline: 0; + box-shadow: none; +} + +.DocSearch-Hit { + padding: 0.25rem; +} + +.DocSearch-Hit-source { + color: var(--docsearch-hit-text-color); +} + +.DocSearch-Hit[aria-selected='true'] a { + color: var(--docsearch-text-color); + background: var(--docsearch-hit-background); +} + +.DocSearch-Hit[aria-selected='true'] mark { + color: var(--docsearch-highlight-color) !important; +} + +:root.dark .DocSearch-Input { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.DocSearch-Cancel { + display: none; +} + +.DocSearch-Screen-Icon { + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 1.5rem; +} + +.DocSearch-NoResults-Prefill-List { + padding-bottom: 1.5rem; +} + +.DocSearch-Form:focus-within .DocSearch-MagnifierLabel { + color: var(--kd-color-focus); +} + +.DocSearch-MagnifierLabel { + color: var(--docsearch-text-color); +} + +@media screen and (max-width: 750px) { + .DocSearch-Modal { + top: 1rem; + left: 0px; + right: 0px; + margin-left: auto; + margin-right: auto; + max-height: 75vh; + max-width: 90vw; + overflow: hidden !important; + --docsearch-vh: 0.75vh !important; + } +} + +@media only screen and (max-width: 991px) { + .DocSearch-Button { + --docsearch-text-color: var(--kd-color-gray-soft); + margin: 0px; + display: flex; + height: 3rem; + width: 3rem; + align-items: center; + justify-content: center; + border-width: 0px; + background-color: transparent; + padding: 0px; + } + + .DocSearch-Button:hover { + background-color: transparent; + } + + .DocSearch-Button-Container { + width: auto; + } + + .DocSearch-Button-Placeholder { + display: none; + } + + .DocSearch-Search-Icon { + display: inline-block; + height: 1.5rem; + width: 1.5rem; + } + + .DocSearch-Search-Icon:hover { + color: var(--kd-color-gray-inverse); + } + + .DocSearch-Button { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } + + .DocSearch-Button-Keys { + display: none; + } + + .DocSearch-Button-Key { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) + var(--tw-ring-offset-color) !important; + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) + var(--tw-ring-color) !important; + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important; + } +} diff --git a/docs/src/lib/styles/kit-docs.css b/docs/src/lib/styles/kit-docs.css index 44ef18914..1b8517d2f 100644 --- a/docs/src/lib/styles/kit-docs.css +++ b/docs/src/lib/styles/kit-docs.css @@ -9,6 +9,8 @@ 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; */ --kd-font-family-sans: 'Sofia Pro'; + --kd-color-brand: rgb(var(--kd-color-brand-rgb)); + --kd-font-family-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation, Mono, Fira Code VF, monospace; @@ -59,7 +61,6 @@ --kd-color-gray-hover: rgb(54, 54, 54); --kd-color-gray-hover-inverse: rgb(245, 245, 245); --kd-color-gray-elevate: rgb(45, 45, 45); - /* --kd-color-gray-body: rgb(26, 26, 26); */ --kd-color-gray-body: rgb(26, 29, 38); } @@ -93,3 +94,39 @@ --kd-sidebar-padding: 0 0 2rem 0.25rem; } } + +:root, +.prefers-light-scheme { + --kd-color-brand: 99 112 229; + --kd-color-focus: 79 70 229; + --kd-color-soft: 112 112 112; + --kd-color-body: 250 250 250; + --kd-color-elevate: 243 244 246; + --kd-color-inverse: 5 11 23; + --kd-color-border: 209 213 219; +} + +:root.dark, +.prefers-dark-scheme { + color-scheme: dark; + --kd-color-brand: 99 112 229; + --kd-color-soft: 140 140 140; + --kd-color-inverse: 245 245 245; + --kd-color-border: 38 48 64; + --kd-color-elevate: 10 19 33; + --kd-color-body: 26 29 38; + --kd-color-focus: 129 140 248; +} + +.socialIcon { + color: var(--kd-color-gray-soft); +} + +.socialIcon:hover { + color: rgb(0, 0, 0); +} + +.socialIcon:hover, +.prefers-dark-scheme { + color: rgb(99 112 229); +} diff --git a/docs/src/routes/+layout.js b/docs/src/routes/+layout.js new file mode 100644 index 000000000..644ef735f --- /dev/null +++ b/docs/src/routes/+layout.js @@ -0,0 +1,13 @@ +import { createKitDocsLoader } from '@svelteness/kit-docs' + +export const prerender = true + +/** @type {import('./$types').LayoutLoad} */ +export const load = createKitDocsLoader({ + sidebar: { + '/': null, + '/docs': '/docs', + '/examples': '/examples', + faq: 'faq' + } +}) diff --git a/docs/src/routes/__layout-kit-docs.svelte b/docs/src/routes/+layout.svelte similarity index 66% rename from docs/src/routes/__layout-kit-docs.svelte rename to docs/src/routes/+layout.svelte index d54a5ec93..950150093 100644 --- a/docs/src/routes/__layout-kit-docs.svelte +++ b/docs/src/routes/+layout.svelte @@ -1,46 +1,26 @@ - - @@ -64,12 +45,14 @@ {#if title} {title} {/if} - {#if description} - + {#if metadescription} + {/if} {/key} + +
@@ -88,10 +71,11 @@
- - +
+ @@ -99,6 +83,12 @@ diff --git a/docs/src/routes/+page.md b/docs/src/routes/+page.md new file mode 100644 index 000000000..7edd1acb9 --- /dev/null +++ b/docs/src/routes/+page.md @@ -0,0 +1,150 @@ + + + + + + + +```sh copy +npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +``` + + + + +```sh copy +yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +``` + + + + + + + + + +```sh copy +npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +``` + + + + +```sh copy +yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +``` + + + + + + +```sh copy +npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +``` + + + + +```sh copy +yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +``` + + + + + + + +
+ +```css copy +:root { + --w3o-background-color: #1a1d26; + --w3o-foreground-color: #242835; + --w3o-text-color: #eff1fc; + --w3o-border-color: #33394b; + --w3o-action-color: #929bed; + --w3o-border-radius: 16px; +} +``` + +
+ +
+ + + + +
+ +# Getting Started + +## Installation + +Install the core Onboard library and the injected wallets module to support browser extension and mobile wallets: + +```bash copy +npm i @web3-onboard/core @web3-onboard/injected-wallets +``` + +## Quick Start + +Then initialize in your app: + +```js copy lineNumbers +import Onboard from '@web3-onboard/core' +import injectedModule from '@web3-onboard/injected-wallets' +import { ethers } from 'ethers' + +const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/' + +const injected = injectedModule() + +const onboard = Onboard({ + wallets: [injected], + chains: [ + { + id: '0x1', + token: 'ETH', + label: 'Ethereum Mainnet', + rpcUrl: MAINNET_RPC_URL + } + ] +}) + +const wallets = await onboard.connectWallet() + +console.log(wallets) + +if (wallets[0]) { + // create an ethers provider with the last connected wallet provider + const ethersProvider = new ethers.providers.Web3Provider(wallets[0].provider, 'any') + // if using ethers v6 this is: + // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') + + const signer = ethersProvider.getSigner() + + // send a transaction with the ethers provider + const txn = await signer.sendTransaction({ + to: '0x', + value: 100000000000000 + }) + + const receipt = await txn.wait() + console.log(receipt) +} +``` + +
+
+ +
diff --git a/docs/src/routes/__layout-homepage.svelte b/docs/src/routes/__layout-homepage.svelte deleted file mode 100644 index 1dc0125eb..000000000 --- a/docs/src/routes/__layout-homepage.svelte +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - {#if title} - {title} - {/if} - {#if metadescription} - - {/if} - - - - - - -
- - - -
-
-
- - - -
-
- -
-
- - diff --git a/docs/src/routes/docs/+page.js b/docs/src/routes/docs/+page.js new file mode 100644 index 000000000..18cab696e --- /dev/null +++ b/docs/src/routes/docs/+page.js @@ -0,0 +1,8 @@ +import { redirect } from '@sveltejs/kit' + +export const prerender = true + +/** @type {import('./$types').PageLoad} */ +export function load() { + throw redirect(307, '/docs/overview/introduction') +} diff --git a/docs/src/routes/docs/[...1]overview/[...1]introduction.md b/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md similarity index 83% rename from docs/src/routes/docs/[...1]overview/[...1]introduction.md rename to docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md index 643132a1c..67cb56c6a 100644 --- a/docs/src/routes/docs/[...1]overview/[...1]introduction.md +++ b/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md @@ -1,5 +1,5 @@ --- -sidebar_title: Introduction +title: Introduction --- -# Core +# {$frontmatter.title} This is the core package that contains all of the UI and logic to be able to seamlessly connect user's wallets to your app and track the state of those wallets. Onboard no longer contains any wallet specific code, so wallets need to be passed in upon initialization. @@ -74,6 +78,7 @@ Checkout our full library of quick start examples for connecting and interacting - **[Vite/React](https://github.com/blocknative/web3-onboard/tree/main/examples/with-vite-react)** - **[Vue](https://github.com/blocknative/web3-onboard/tree/main/examples/with-vuejs)** - **[Vue2](https://github.com/blocknative/web3-onboard/tree/main/examples/with-vuejs-v2)** +- **[Vanilla-JS](https://github.com/blocknative/web3-onboard/tree/main/examples/with-vanilla-js)** ## Initialization @@ -140,7 +145,11 @@ type Chain = { icon?: string // the icon to represent the chain publicRpcUrl?: string // an optional public RPC used when adding a new chain config to the wallet blockExplorerUrl?: string // also used when adding a new config to the wallet +<<<<<<< HEAD:docs/src/routes/docs/[...3]modules/[...1]core/+page.md + secondaryTokens?: SecondaryTokens[] // An optional array of tokens (max of 5) to be available to the dapp in the app state object per wallet within the wallet account and displayed in Account Center (if enabled) +======= secondaryTokens?: SecondaryTokens[] // An optional array of tokens (max of 5) to be available to the dapp in the app state object per wallet within the wallet account and displayed in Account Center (if enabled) +>>>>>>> develop:docs/src/routes/docs/[...3]modules/core.md } interface SecondaryTokens { @@ -360,7 +369,7 @@ An object that defines whether the account center UI (default and minimal) is en ```ts type AccountCenter = { enabled: boolean - position?: AccountCenterPosition // default: 'topRight' + position?: AccountCenterPosition // default: 'bottomRight' expanded?: boolean // default: true minimal?: boolean // enabled by default for mobile diff --git a/docs/src/routes/docs/[...3]modules/gas.md b/docs/src/routes/docs/[...3]modules/[...2]gas/+page.md similarity index 98% rename from docs/src/routes/docs/[...3]modules/gas.md rename to docs/src/routes/docs/[...3]modules/[...2]gas/+page.md index 1c02d7911..bdd6edd32 100644 --- a/docs/src/routes/docs/[...3]modules/gas.md +++ b/docs/src/routes/docs/[...3]modules/[...2]gas/+page.md @@ -1,8 +1,12 @@ +--- +title: Gas +--- + -# Gas +# {$frontmatter.title} A module for requesting streams or single requests of gas price estimates from the [Blocknative Gas Platform API](https://docs.blocknative.com/gas-platform). diff --git a/docs/src/routes/docs/[...3]modules/react.md b/docs/src/routes/docs/[...3]modules/[...3]react/+page.md similarity index 98% rename from docs/src/routes/docs/[...3]modules/react.md rename to docs/src/routes/docs/[...3]modules/[...3]react/+page.md index 6d6275a77..cfedee3d8 100644 --- a/docs/src/routes/docs/[...3]modules/react.md +++ b/docs/src/routes/docs/[...3]modules/[...3]react/+page.md @@ -1,4 +1,8 @@ -# React +--- +title: React +--- + +# {$frontmatter.title} A collection of React hooks for implementing web3-onboard into a React project @@ -77,6 +81,7 @@ function App() { ``` ## Using the `Web3OnboardProvider` + You can use the context provider `Web3OnboardProvider` to better manage global state. Simply wrap the provider around your `App` and the initialized web3Onboard instance will be available in all children components. See example below. @@ -96,9 +101,9 @@ const web3Onboard = init({ wallets, chains, appMetadata: { - name: "Web3-Onboard Demo", + name: 'Web3-Onboard Demo', icon: 'App Icon', - description: "A demo of Web3-Onboard." + description: 'A demo of Web3-Onboard.' } }) function MyApp({ Component, pageProps }) { @@ -113,7 +118,7 @@ export default MyApp ## `init` -The `init` function must be called before any hooks can be used. The `init` function just initializes `web3-onboard` and makes it available for all hooks to use. For reference check out the [initialization docs for `@web3-onboard/core`](./core.md#initialization) +The `init` function must be called before any hooks can be used. The `init` function just initializes `web3-onboard` and makes it available for all hooks to use. For reference check out the [initialization docs for `@web3-onboard/core`](../../modules/core.md#initialization) ## `useConnectWallet` @@ -200,7 +205,7 @@ type SetChainOptions = { chainNamespace?: string wallet?: WalletState['label'], // if chain was instantiated without rpcUrl, include here. Used for network requests - rpcUrl?: string, + rpcUrl?: string, // if chain was instantiated without token, include here. Used for display, eg Ethereum Mainnet label?: string, // if chain was instantiated without label, include here. The native token symbol, eg ETH, BNB, MATIC @@ -221,7 +226,7 @@ const [ This hook allows the dev to access all notifications if enabled, send custom notifications and update notify **note** requires an API key be added to the initialization, enabled by default if API key exists -For full Notification documentation please see [Notify section within the `@web3-onboard/core` docs](./core.md#options) +For full Notification documentation please see [Notify section within the `@web3-onboard/core` docs](../../modules/core.md#options) ```typescript type UseNotifications = (): [ @@ -437,7 +442,6 @@ const updateLocale = useSetLocale() updateLocale('es') ``` - ## Build Environments Many of the wallet modules require dependencies that are not normally included in browser builds (namely the node built-in modules such as `crypto`, `buffer`, `util` etc). If you are having build issues you can try the following bundler configs to resolve these dependency issues: diff --git a/docs/src/routes/docs/[...3]modules/transaction-preview.md b/docs/src/routes/docs/[...3]modules/[...4]transaction-preview/+page.md similarity index 99% rename from docs/src/routes/docs/[...3]modules/transaction-preview.md rename to docs/src/routes/docs/[...3]modules/[...4]transaction-preview/+page.md index 72bfb2b86..b2512f893 100644 --- a/docs/src/routes/docs/[...3]modules/transaction-preview.md +++ b/docs/src/routes/docs/[...3]modules/[...4]transaction-preview/+page.md @@ -1,10 +1,14 @@ +--- +title: Transaction Preview +--- + -# Transaction Preview +# {$frontmatter.title} A modular UI for previewing a single or set of unsigned Ethereum transactions. @@ -16,6 +20,7 @@ Preview Vitalik swapping 100 UNI tokens for ETH using Transaction Preview Full Simulation Platform API documentation can be found [here](https://docs.blocknative.com/transaction-preview-api) + ### Install diff --git a/docs/src/routes/docs/[...3]modules/unstoppable-resolution.md b/docs/src/routes/docs/[...3]modules/[...5]unstoppable-resolution/+page.md similarity index 90% rename from docs/src/routes/docs/[...3]modules/unstoppable-resolution.md rename to docs/src/routes/docs/[...3]modules/[...5]unstoppable-resolution/+page.md index 5ee90b500..17780b2f3 100644 --- a/docs/src/routes/docs/[...3]modules/unstoppable-resolution.md +++ b/docs/src/routes/docs/[...3]modules/[...5]unstoppable-resolution/+page.md @@ -1,4 +1,8 @@ -# Unstoppable Domains Resolution +--- +title: Unstoppable Domains Resolution +--- + +# {$frontmatter.title} A module to add Unstoppable Domain resolution to web3-onboard. diff --git a/docs/src/routes/docs/[...3]modules/vue.md b/docs/src/routes/docs/[...3]modules/[...6]vue/+page.md similarity index 78% rename from docs/src/routes/docs/[...3]modules/vue.md rename to docs/src/routes/docs/[...3]modules/[...6]vue/+page.md index b648fed47..05828a26d 100644 --- a/docs/src/routes/docs/[...3]modules/vue.md +++ b/docs/src/routes/docs/[...3]modules/[...6]vue/+page.md @@ -1,4 +1,8 @@ -# Vue +--- +title: Vue +--- + +# {$frontmatter.title} A collection of composable functions for implementing web3-onboard in to a Vue project; compatible both with Vue 2 + composition-api and Vue 3 @@ -57,7 +61,7 @@ if (connectedWallet) { ## `init` -The `init` function initializes `web3-onboard` and makes it available to the `useOnboard()` composable. For references check out the [initialization docs for `@web3-onboard/core`](./core.md#initialization) +The `init` function initializes `web3-onboard` and makes it available to the `useOnboard()` composable. For references check out the [initialization docs for `@web3-onboard/core`](../../modules/core.md#initialization) ### Example usage @@ -99,20 +103,20 @@ const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } = u ### `connectWallet` -Function to open the onboard modal and connect to a wallet provider. For reference check out the [connecting a wallet for `@web3-onboard/core`](./core.md#connecting-a-wallet) +Function to open the onboard modal and connect to a wallet provider. For reference check out the [connecting a wallet for `@web3-onboard/core`](../../modules/core.md#connecting-a-wallet) ### Example usage -```vue +```html