Feat/add solidjs support (#1886)

README.md

@@ -136,6 +136,7 @@ For full documentation, check out the README.md for each package or the [docs pa
 **Frameworks**
 
 - [React](packages/react/README.md)
+- [Solid](packages/solid/README.md)
 - [Vue](packages/vue/README.md)
 
 ## Test out the demo app

docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md

@@ -192,6 +192,7 @@ We recommend you add the [Core Repo](../../modules/core.md#install) and consider
 **Frameworks**
 
 - [React](../../modules/react.md#quickstart-with-injected-wallets-and-ethers-provider)
+- [Solid](../../modules/solid.md#install)
 - [Vue](../../modules/vue.md#install)
 
 ## Test out the demo app

docs/src/routes/docs/[...3]modules/[...1]core/+page.md

@@ -81,6 +81,7 @@ npm install @web3-onboard/coinbase @web3-onboard/metamask @web3-onboard/fortmati
 
 - All wallet modules (except for `injected-wallets`) require extra dependencies and may require polyfilling the node built in modules for the browser. See the [Build Environments](#build-environments) section for more info
 - **If using React** you may be interested in checking out the React Hooks package here - https://www.npmjs.com/package/@web3-onboard/react
+- **If using Solid** you may be interested in checking out the Solid package here - https://www.npmjs.com/package/@web3-onboard/solid
 - **If using Vue** you may be interested in checking out the Vue package here - https://www.npmjs.com/package/@web3-onboard/vue
   :::
 

docs/src/routes/docs/[...3]modules/[...4]solid/+page.md

@@ -0,0 +1,271 @@
+---
+title: Solid.js
+---
+
+# {$frontmatter.title}
+
+A collection of composable functions for implementing web3-onboard in to a Solid project;
+
+## Quickstart with Injected Wallets and Ethers Provider
+
+### Install
+
+<Tabs values={['yarn', 'npm']}>
+<TabPanel value="yarn">
+
+```sh copy
+yarn add @web3-onboard/solid @web3-onboard/injected-wallets
+```
+
+  </TabPanel>
+  <TabPanel value="npm">
+
+```sh copy
+npm install @web3-onboard/solid @web3-onboard/injected-wallets
+```
+
+  </TabPanel>
+</Tabs>
+
+
+## Quickstart
+
+```typescript
+import { init } from '@web3-onboard/solid'
+import injectedModule from '@web3-onboard/injected-wallets'
+
+const injected = injectedModule()
+
+// Only one RPC endpoint required per chain
+const rpcAPIKey = '<INFURA_KEY>' || '<ALCHEMY_KEY>'
+const rpcUrl =
+  `https://eth-mainnet.g.alchemy.com/v2/${rpcAPIKey}` ||
+  `https://mainnet.infura.io/v3/${rpcAPIKey}`
+
+const web3Onboard = init({
+  wallets: [injected],
+  chains: [
+    {
+      id: '0x1',
+      token: 'ETH',
+      label: 'Ethereum Mainnet',
+      rpcUrl
+    },
+    {
+      id: '0x2105',
+      token: 'ETH',
+      label: 'Base',
+      rpcUrl: 'https://mainnet.base.org'
+    }
+  ]
+})
+
+const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } =
+  useOnboard()
+
+if (connectedWallet) {
+  // if using ethers v6 this is:
+  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
+  const ethersProvider = new ethers.providers.Web3Provider(
+    connectedWallet.provider,
+    'any'
+  )
+  // ..... do stuff with the provider
+}
+```
+
+## Functions
+
+### `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/README.md#initialization)
+
+#### Example usage
+
+```typescript
+import { init } from '@web3-onboard/solid'
+import injectedModule from '@web3-onboard/injected-wallets'
+
+const injected = injectedModule()
+const infuraKey = '<INFURA_KEY>'
+const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`
+
+const web3Onboard = init({
+  wallets: [injected],
+  chains: [
+    {
+      id: '0x1',
+      token: 'ETH',
+      label: 'Ethereum Mainnet',
+      rpcUrl
+    }
+  ]
+})
+```
+
+### `useOnboard`
+
+`useOnboard` must be used after the `init` function has been called - it will return an object that can be destructured to obtain the following reactive variables and functions:
+
+#### Example usage
+
+```typescript
+import { useOnboard } from '@web3-onboard/solid'
+// Use the composable
+const onboard = useOnboard()
+// Or destructure it
+const {
+  wallets,
+  connectedWallet,
+  connectedChain,
+  connectWallet,
+  disconnectConnectedWallet
+} = useOnboard()
+// do stuff
+```
+
+### `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/README.md#connecting-a-wallet)
+
+#### Example usage
+
+```tsx
+function SampleConnect() {
+  const { connectWallet } = useOnboard()
+
+  return <button onClick={() => connectWallet()}> connect wallet</button>
+}
+```
+
+### `connectedChain`
+
+Property that contains the current chain to which `connectedChain` is connected
+
+#### Example usage
+
+```tsx
+function SampleConnect() {
+    const { connectedChain } = useOnboard()
+
+  return <span>Connected Chain: { connectedChain() }</span>
+```
+
+### `connectedWallet`
+
+Property that contains the latest connected wallet
+
+#### Example usage
+
+```tsx
+function SampleConnect() {
+  const { connectedWallet } = useOnboard()
+  return <span>Connected Wallet: {connectedWallet()?.label}</span>
+}
+```
+
+### `disconnectConnectedWallet`
+
+Function to disconnect the `connectedWallet`
+
+#### Example usage
+
+```tsx
+import { useOnboard } from '@web3-onboard/solid'
+function SampleConnect() {
+  const { disconnectConnectedWallet } = useOnboard()
+  return (
+    <button onClick={() => disconnectConnectedWallet()}>
+      {' '}
+      disconnect wallet
+    </button>
+  )
+}
+```
+
+### `getChain`
+
+Function that returns the current chain a wallet is connected to
+
+#### Example usage
+
+```tsx
+import { useOnboard } from '@web3-onboard/solid'
+function SampleConnect() {
+  const { getChain } = useOnboard()
+  return <span>MetaMask is connected to: {getChain('MetaMask')}</span>
+}
+```
+
+### `setChain`
+
+Function to set the chain of a wallet
+
+#### Example usage
+
+```tsx
+import { useOnboard } from '@web3-onboard/solid'
+function SampleConnect() {
+  const { setChain } = useOnboard()
+  const set = () => setChain({ wallet: 'MetaMask', chainId: '0x1' })
+  return (
+    <button type="button" onClick={set}>
+      Set MetaMask chain to mainnet
+    </button>
+  )
+}
+```
+
+### `settingChain`
+
+Readonly boolean ref that tracks the status of setting the chain
+
+#### Example usage
+
+```tsx
+import { useOnboard } from '@web3-onboard/solid'
+function SampleConnect() {
+  const { settingChain } = useOnboard()
+  return { settingChain }
+}
+```
+
+### `wallets`
+
+Readonly ref that contains every wallet that has been connected
+
+#### Example usage
+
+```tsx
+import { useOnboard } from '@web3-onboard/solid'
+function SampleConnect() {
+    const { wallets } = useOnboard()
+   return(
+    <ul>
+    <For each={wallets()}>{wallet=>{
+      return <li>
+        {wallet.label}
+      </li>
+      }}
+    </For>
+    </ul>
+   )
+  }
+}
+```
+
+### `lastConnectedTimestamp`
+
+Readonly ref that contains the last time that the user connected a wallet in milliseconds
+
+#### Example usage
+
+```tsx
+import { useOnboard } from '@web3-onboard/solid'
+function SampleConnect() {
+  const { lastConnectedTimestamp } = useOnboard()
+  return (
+    <span>Your last connection timestamp was: {lastConnectedTimestamp}</span>
+  )
+}
+```

examples/with-solidjs/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/with-solidjs/README.md

@@ -0,0 +1,28 @@
+## Usage
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html)

examples/with-solidjs/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Solid</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

examples/with-solidjs/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "with-solidjs",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.7.8"
+  },
+  "devDependencies": {
+    "vite": "^4.4.5",
+    "vite-plugin-solid": "^2.7.0"
+  }
+}