NaxdyOrg/svelte-on-solana-wallet-adapter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(core): readme updated pointing to the ui packages

Browse source
This commit is contained in:
silvestrevivo 2022-01-31 12:43:55 +01:00
parent 27e2d33dbc
commit 2205bd1774
4 changed files with 79 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

66
README.md
View file

@ -1,13 +1,20 @@
# `@solana/wallet-adapter`
# `@svelte-on-solana/wallet-adapter`
Modular TypeScript wallet adapters and components for Solana applications.
Modular TypeScript wallet adapter and UI components for Solana/Anchor applications using [SvelteJS](https://svelte.dev/) as framework. This package contains a solution for [Svelte Template](https://github.com/sveltejs/template) and [SvelteKit](https://kit.svelte.dev/), making possible to build Solana Dapps in SPA or SSR mode.
![Wallets](wallets.png)
![Wallets](wallets-adapter.png)
## Quick Links
- [Demo Repo](https://github.com/silvestrevivo/solana-svelte-counter/)
- [Demo Site](https://solana-svelte-counter.netlify.app/)
- [Demo](https://solana-labs.github.io/wallet-adapter/example/)
- [TypeScript Docs](https://solana-labs.github.io/wallet-adapter/)
## How to setup
To use the wallet adapter first of all you will need to install the core package. Then choose on the two different UI implementations, Svelte Template or SvelteKit.
- [Installing the core package](https://github.com/svelte-on-solana/wallet-adapter/blob/master/packages/core/README.md/)
- [Using Svelte Template](https://github.com/svelte-on-solana/wallet-adapter/blob/master/packages/ui/README.md)
- [Using SvelteKit](https://github.com/svelte-on-solana/wallet-adapter/blob/master/packages/ui/README.md)
<!-- - [TypeScript Docs](https://solana-labs.github.io/wallet-adapter/)
- [FAQ (Frequently Asked Questions)](https://github.com/solana-labs/wallet-adapter/blob/master/FAQ.md)
+ [How can I get support?](https://github.com/solana-labs/wallet-adapter/blob/master/FAQ.md#how-can-i-get-support)
+ [Can I use this with ___?](https://github.com/solana-labs/wallet-adapter/blob/master/FAQ.md#can-i-use-this-with-___)
@ -22,9 +29,9 @@ Modular TypeScript wallet adapters and components for Solana applications.
+ [UI Components](#ui-components)
+ [Starter Projects](#starter-projects)
+ [Wallets](#wallets)
- [Build from Source](#build-from-source)
- [Build from Source](#build-from-source) -->
## Quick Setup (using React UI)
<!-- ## Quick Setup (using React UI)
There are also [material-ui](https://github.com/solana-labs/wallet-adapter/tree/master/packages/ui/material-ui) and [ant-design](https://github.com/solana-labs/wallet-adapter/tree/master/packages/ui/ant-design) packages if you use those component frameworks.
@ -141,22 +148,10 @@ export const SendOneLamportToRandomAddress: FC = () => {
## Packages
This library is organized into small packages with few dependencies.
To add it to your dApp, you'll need core packages, some wallets, and UI components for your chosen framework.
To add it to your dApp, you'll need core packages, some wallets, and UI components for your chosen framework. -->
### Core
These packages are what most projects can use to support wallets on Solana.
| package | description | npm |
| --------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| [base](https://github.com/solana-labs/wallet-adapter/tree/master/packages/core/base) | Adapter interfaces, error types, and common utilities | [`@solana/wallet-adapter-base`](https://npmjs.com/package/@solana/wallet-adapter-base) |
| [react](https://github.com/solana-labs/wallet-adapter/tree/master/packages/core/react) | Contexts and hooks for React dApps | [`@solana/wallet-adapter-react`](https://npmjs.com/package/@solana/wallet-adapter-react) |
| [angular](https://github.com/solana-labs/wallet-adapter/tree/master/packages/core/angular) \* | Stores and configuration for Angular dApps | [`@solana/wallet-adapter-angular`](https://npmjs.com/package/@solana/wallet-adapter-angular) |
| [vue](https://github.com/solana-labs/wallet-adapter/tree/master/packages/core/vue) | Stores and composables for Vue 3 dApps | [`@solana/wallet-adapter-vue`](https://npmjs.com/package/@solana/wallet-adapter-vue) |
| [svelte](https://github.com/solana-labs/wallet-adapter/tree/master/packages/core/svelte) \* | Stores for Svelte dApps | [`@solana/wallet-adapter-svelte`](https://www.npmjs.com/package/@solana/wallet-adapter-svelte) |
\* Package has not been published to NPM yet.
### Wallets
<!-- ## Wallets
These packages provide adapters for each wallet.
You can use the [wallets](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/wallets) package, or add the individual wallet packages you want.
@ -181,34 +176,13 @@ You can use the [wallets](https://github.com/solana-labs/wallet-adapter/tree/mas
| [torus](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/torus) | Adapter for [Torus](https://tor.us) | [`@solana/wallet-adapter-torus`](https://npmjs.com/package/@solana/wallet-adapter-torus) |
| [walletconnect](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/walletconnect) \* | Adapter for [WalletConnect](https://walletconnect.org) | [`@solana/wallet-adapter-walletconnect`](https://npmjs.com/package/@solana/wallet-adapter-walletconnect) |
\* Package has not been published to NPM yet.
### UI Components
These packages provide components for common UI frameworks.
| package | description | npm |
| ------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| [material-ui](https://github.com/solana-labs/wallet-adapter/tree/master/packages/ui/material-ui) | Components for [Material UI](https://material-ui.com) | [`@solana/wallet-adapter-material-ui`](https://npmjs.com/package/@solana/wallet-adapter-material-ui) |
| [ant-design](https://github.com/solana-labs/wallet-adapter/tree/master/packages/ui/ant-design) | Components for [Ant Design](https://ant.design) | [`@solana/wallet-adapter-ant-design`](https://npmjs.com/package/@solana/wallet-adapter-ant-design) |
| [react-ui](https://github.com/solana-labs/wallet-adapter/tree/master/packages/ui/react-ui) | Components for React (no UI framework, just CSS) | [`@solana/wallet-adapter-react-ui`](https://npmjs.com/package/@solana/wallet-adapter-react-ui) |
| [vue-ui](https://github.com/solana-labs/wallet-adapter/tree/master/packages/ui/vue-ui) | Components for Vue (no UI framework, just CSS) | [`@solana/wallet-adapter-vue-ui`](https://npmjs.com/package/@solana/wallet-adapter-vue-ui) |
### Starter Projects
These packages provide projects that you can use to start building a dApp with built-in wallet support.
Alternatively, check out [dapp-scaffold](https://github.com/solana-labs/dapp-scaffold) for a more complete framework.
| package | description | npm |
| --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| [example](https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/example) | Demo of UI components | [`@solana/wallet-adapter-example`](https://npmjs.com/package/@solana/wallet-adapter-example) |
| [material-ui-starter](https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/material-ui-starter) | [Create React App](https://create-react-app.dev) project using Material UI | [`@solana/wallet-adapter-material-ui-starter`](https://npmjs.com/package/@solana/wallet-adapter-material-ui-starter) |
| [react-ui-starter](https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/react-ui-starter) | [Create React App](https://create-react-app.dev) project using React UI | [`@solana/wallet-adapter-react-ui-starter`](https://npmjs.com/package/@solana/wallet-adapter-react-ui-starter) |
| [nextjs-starter](https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/nextjs-starter) | [Next.js](https://nextjs.org) project using React | [`@solana/wallet-adapter-nextjs-starter`](https://npmjs.com/package/@solana/wallet-adapter-nextjs-starter) |
\* Package has not been published to NPM yet. -->
## Build from Source
1. Clone the project:
```shell
git clone https://github.com/solana-labs/wallet-adapter.git
git clone https://github.com/svelte-on-solana/wallet-adapter.git
```
2. Install dependencies:
@ -224,6 +198,6 @@ yarn build
4. Run locally:
```shell
cd packages/starter/react-ui-starter
cd packages/ui/
yarn start
```

62
packages/core/README.md
View file

@ -1,5 +1,61 @@
# `@solana/wallet-adapter-svelte`
# `@svelte-on-solana/wallet-adapter-core`
<!-- @TODO -->
The core of the wallet adapter is a Svelte Store which exposes methods and properties to run the wallet in your application. This allows to share this data among all components in your application.
Coming soon.
## Install
```shell
npm install @solana/wallet-adapter-base \
@solana/wallet-adapter-wallets \
@solana/web3.js \
@svelte-on-solana/wallet-adapter-core
```
## Use
Once it is installed, you can use it and subscribe to its methods as an usual Svelte Store:
```html
<script>
import { walletStore } from '@svelte-on-solana/wallet-adapter-core';
//...
</script>
{#if $walletStore.connected}
<div>My wallet is connected</div>
{/if}
```
## UI
To complete the setup you will need to add some UI components which will provide the full experience to connect, disconnect and visualize address. You can choose between the [Svelte Template](https://github.com/sveltejs/template) or the [SvelteKit](https://kit.svelte.dev/) implementation. Both are using the same packages but setup is different.
- [Using Svelte Template](https://github.com/svelte-on-solana/wallet-adapter/blob/master/packages/ui/README.md)
- [Using SvelteKit](https://github.com/svelte-on-solana/wallet-adapter/blob/master/packages/ui/README.md)
## Wallets
These packages provide adapters for each wallet.
You can use the [wallets](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/wallets) package, or add the individual wallet packages you want.
| package | description | npm |
| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- |
| [wallets](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/wallets) | Includes all the wallets (with tree shaking) | [`@solana/wallet-adapter-wallets`](https://npmjs.com/package/@solana/wallet-adapter-wallets) |
| [bitkeep](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/bitkeep) | Adapter for [BitKeep](https://bitkeep.com) | [`@solana/wallet-adapter-bitkeep`](https://npmjs.com/package/@solana/wallet-adapter-bitkeep) |
| [bitpie](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/bitpie) | Adapter for [Bitpie](https://bitpie.com) | [`@solana/wallet-adapter-bitpie`](https://npmjs.com/package/@solana/wallet-adapter-bitpie) |
| [blocto](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/blocto) | Adapter for [Blocto](https://blocto.app) | [`@solana/wallet-adapter-blocto`](https://npmjs.com/package/@solana/wallet-adapter-blocto) |
| [clover](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/clover) | Adapter for [Clover](https://clover.finance) | [`@solana/wallet-adapter-clover`](https://npmjs.com/package/@solana/wallet-adapter-clover) |
| [coin98](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/coin98) | Adapter for [Coin98](https://coin98.com) | [`@solana/wallet-adapter-coin98`](https://npmjs.com/package/@solana/wallet-adapter-coin98) |
| [coinhub](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/coinhub) | Adapter for [Coinhub](https://coinhub.org) | [`@solana/wallet-adapter-coinhub`](https://npmjs.com/package/@solana/wallet-adapter-coinhub) |
| [ledger](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/ledger) | Adapter for [Ledger](https://ledger.com) | [`@solana/wallet-adapter-ledger`](https://npmjs.com/package/@solana/wallet-adapter-ledger) |
| [mathwallet](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/mathwallet) | Adapter for [MathWallet](https://mathwallet.org) | [`@solana/wallet-adapter-mathwallet`](https://npmjs.com/package/@solana/wallet-adapter-mathwallet) |
| [phantom](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/phantom) | Adapter for [Phantom](https://phantom.app) | [`@solana/wallet-adapter-phantom`](https://npmjs.com/package/@solana/wallet-adapter-phantom) |
| [safepal](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/safepal) | Adapter for [SafePal](https://safepal.io) | [`@solana/wallet-adapter-safepal`](https://npmjs.com/package/@solana/wallet-adapter-safepal) |
| [slope](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/slope) | Adapter for [Slope](https://slope.finance) | [`@solana/wallet-adapter-slope`](https://npmjs.com/package/@solana/wallet-adapter-slope) |
| [solflare](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/solflare) | Adapter for [Solflare](https://solflare.com) | [`@solana/wallet-adapter-solflare`](https://npmjs.com/package/@solana/wallet-adapter-solflare) |
| [sollet](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/sollet) | Adapter for [Sollet](https://www.sollet.io) | [`@solana/wallet-adapter-sollet`](https://npmjs.com/package/@solana/wallet-adapter-sollet) |
| [solong](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/solong) | Adapter for [Solong](https://solongwallet.com) | [`@solana/wallet-adapter-solong`](https://npmjs.com/package/@solana/wallet-adapter-solong) |
| [tokenpocket](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/tokenpocket) | Adapter for [TokenPocket](https://tokenpocket.pro) | [`@solana/wallet-adapter-tokenpocket`](https://npmjs.com/package/@solana/wallet-adapter-tokenpocket) |
| [torus](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/torus) | Adapter for [Torus](https://tor.us) | [`@solana/wallet-adapter-torus`](https://npmjs.com/package/@solana/wallet-adapter-torus) |
| [walletconnect](https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets/walletconnect) \* | Adapter for [WalletConnect](https://walletconnect.org) | [`@solana/wallet-adapter-walletconnect`](https://npmjs.com/package/@solana/wallet-adapter-walletconnect) |
\* Package has not been published to NPM yet.

BIN
wallets-adapter.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
wallets.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 81 KiB