Skip to content

Commit

Permalink
revise: update solid package to use yarn + include examples on the re…
Browse files Browse the repository at this point in the history 
…adme file
  • Loading branch information
@yisacc
yisacc committed Sep 16, 2023
1 parent e3b07c1 commit 79ea7f3
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 2,825 deletions.
261 changes: 72 additions & 189 deletions packages/solid/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

# @web3-onboard/solid

A collection of composable functions for implementing web3-onboard in to a Solid project;
A collection of composable functions for implementing web3-onboard in to a Solid project;

## Install Modules

Expand Down Expand Up @@ -100,8 +100,13 @@ import { useOnboard } from '@web3-onboard/solid'
// Use the composable
const onboard = useOnboard()
// Or destructure it
const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } =
useOnboard()
const {
wallets,
connectedWallet,
connectedChain,
connectWallet,
disconnectConnectedWallet
} = useOnboard()
// do stuff
```

Expand All @@ -111,110 +116,38 @@ Function to open the onboard modal and connect to a wallet provider. For referen

### Example usage

```vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
setup() {
const { connectWallet } = useOnboard()
const connect = async () => connectWallet()
return { connect }
}
}
</script>
```tsx
function SampleConnect() {
const { connectWallet } = useOnboard()

<template>
<button type="button" @click="connect">Connect to a Wallet</button>
</template>
return <button onClick={() => connectWallet()}> connect wallet</button>
}
```

### `connectedChain`

Computed property that contains the current chain to which `connectedWallet` is connected
Property that contains the current chain to which `connectedChain` is connected

### Example usage

```vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
setup() {
```tsx
function SampleConnect() {
const { connectedChain } = useOnboard()
return { connectedChain }
}
}
</script>

<template>
<span>Connected Chain: {{ connectedChain.id }}</span>
</template>
return <span>Connected Chain: { connectedChain() }</span>
```
### `connectedWallet`
Computed property that contains the latest connected wallet
Property that contains the latest connected wallet
### Example usage
```vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
setup() {
const { connectedWallet } = useOnboard()
return { connectedWallet }
}
```tsx
function SampleConnect() {
const { connectedWallet } = useOnboard()
return <span>Connected Wallet: {connectedWallet()?.label}</span>
}
</script>
<template>
<span>Connected Wallet: {{ connectedWallet.label }}</span>
</template>
```

### `connectingWallet`

Readonly boolean ref that tracks the state of the wallet connection status

### Example usage

```vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
setup() {
const { connectingWallet } = useOnboard()
return { connectingWallet }
}
}
</script>
<template>
<span v-if="connectingWallet">Connecting...</span>
</template>
```

### `disconnectWallet`

Function to disconnect a specific wallet

### Example usage

```vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
setup() {
const { disconnectWallet } = useOnboard()
const disconnect = async () => disconnectWallet('MetaMask')
return { disconnect }
}
}
</script>
<template>
<button type="button" @click="disconnect">Disconnect MetaMask</button>
</template>
```
### `disconnectConnectedWallet`
Expand All @@ -223,22 +156,17 @@ Function to disconnect the `connectedWallet`
### Example usage
```vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
setup() {
const { disconnectConnectedWallet } = useOnboard()
return { disconnectConnectedWallet }
}
```tsx
import { useOnboard } from '@web3-onboard/solid'
function SampleConnect() {
const { disconnectConnectedWallet } = useOnboard()
return (
<button onClick={() => disconnectConnectedWallet()}>
{' '}
disconnect wallet
</button>
)
}
</script>
<template>
<button type="button" @click="disconnectConnectedWallet">
Disconnect connectedWallet
</button>
</template>
```
### `getChain`
Expand All @@ -247,20 +175,12 @@ Function that returns the current chain a wallet is connected to
### Example usage
```vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
setup() {
const { getChain } = useOnboard()
return { getChain }
}
```tsx
import { useOnboard } from '@web3-onboard/solid'
function SampleConnect() {
const { getChain } = useOnboard()
return <span>MetaMask is connected to: {getChain('MetaMask')}</span>
}
</script>
<template>
<span>MetaMask is connected to: {{ getChain('MetaMask') }}</span>
</template>
```
### `setChain`
Expand All @@ -269,21 +189,17 @@ Function to set the chain of a wallet
### Example usage
```vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
setup() {
const { setChain } = useOnboard()
const set = () => setChain({ wallet: 'MetaMask', chainId: '0x1' })
return { set }
}
```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>
)
}
</script>
<template>
<button type="button" @click="set">Set MetaMask chain to mainnet</button>
</template>
```
### `settingChain`
Expand All @@ -292,20 +208,12 @@ Readonly boolean ref that tracks the status of setting the chain
### Example usage
```vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
setup() {
const { settingChain } = useOnboard()
return { settingChain }
}
```tsx
import { useOnboard } from '@web3-onboard/solid'
function SampleConnect() {
const { settingChain } = useOnboard()
return { settingChain }
}
</script>
<template>
<span v-if="settingChain">Setting chain...</span>
</template>
```
### `wallets`
Expand All @@ -314,40 +222,22 @@ Readonly ref that contains every wallet that has been connected
### Example usage
```vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
setup() {
```tsx
import { useOnboard } from '@web3-onboard/solid'
function SampleConnect() {
const { wallets } = useOnboard()
return { wallets }
}
}
```

### `alreadyConnectedWallets`

Readonly ref that contains every wallet that user connected to in the past; useful to reconnect wallets automatically after a reload

### Example usage

```
vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
setup() {
const { alreadyConnectedWallets } = useOnboard()
return { alreadyConnectedWallets }
return(
<ul>
<For each={wallets()}>{wallet=>{
return <li>
{wallet.label}
</li>
}}
</For>
</ul>
)
}
}
</script>
<template>
<div v-for="wallet in wallets">
<span>Label: {{wallet.label}}</span>
</div>
</template>
```

### `lastConnectedTimestamp`
Expand All @@ -356,19 +246,12 @@ Readonly ref that contains the last time that the user connected a wallet in mil

### Example usage

```
vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
setup() {
const { lastConnectedTimestamp } = useOnboard()
return { lastConnectedTimestamp }
}
```tsx
import { useOnboard } from '@web3-onboard/solid'
function SampleConnect() {
const { lastConnectedTimestamp } = useOnboard()
return (
<span>Your last connection timestamp was: {lastConnectedTimestamp}</span>
)
}
</script>
<template>
<span>Your last connection timestamp was: {{ lastConnectedTimestamp }}</span>
</template>
```
11 changes: 2 additions & 9 deletions packages/solid/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,7 @@
"peerDependencies": {
"solid-js": "^1.6.0"
},
"packageManager": "[email protected]",
"engines": {
"node": ">=18",
"pnpm": ">=8.6.0"
},
"pnpm": {
"overrides": {
"@rollup/plugin-node-resolve": "13.3.0"
}
}
"node": ">=18"
}
}
Loading

0 comments on commit 79ea7f3

Please sign in to comment.