npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@jup-ag/wallet-adapter

v0.2.1

Published

<img src="public/unified-wallet-kit-demo.gif" />

Downloads

8,805

Readme

Unified Wallet Kit

Unified Wallet Kit is an open-sourced, Swiss Army Knife wallet adapter, striving for the best wallet integration experience for developers, and best wallet experience for your users.

Along with Terminal, it's the fastest way to get started on Solana.

Used by Jupiter and Meteora.

NPM: https://www.npmjs.com/package/@jup-ag/wallet-adapter

Motives

Why not just use the existing wallet adapters?

  • To bootstrap a dApp, we always find ourself doing the same thing over and over again, such as:
    • Notification when wallets are selected, connecting, connected, disconnected.
    • Auto reconnect to the last connected wallet
    • Mobile-first, responsive design
    • Themeing support
    • Internationalization (i18n) support
    • New user onboarding
  • Built on-top of @solana/wallet-adapter-base, @solana/wallet-adapter-react and @solana-mobile/wallet-adapter-mobile, you are always welcomed to onboard or depart.

Philosophy

  • Set a sensible defaults
  • Lightweight, easy to adopt, fast to access
  • Extensible wallets, with a BYOW (Bring your own wallets) approach
  • Better onboarding experience for new users

Core features

  • [x] Main esm bundle at 94Kb (~20Kb gzipped)

  • [x] Built-in Wallet Standard, Mobile Wallet Adapter support

  • [x] Abstracted wallet adapter, with a BYOW (Bring your own wallets) approach

  • [x] Mobile responsive

  • [x] Notification plug-in

  • [x] Internationalization (i18n)

    • More contributions required for more languages
    • Currently generated from Copilot
    • Help contribute
  • [x] New user onboarding on Jupiter Station

  • [x] Theming

    • Light, Dark, Jupiter
    • More thmes coming soon
  • [x] Pluralization for i18n

Getting Started

  • pnpm i @jup-ag/wallet-adapter
  • Wrap your app with <UnifiedWalletProvider /> and pass in as little to as many wallets you would like to support.
  • Below example is ExampleBaseOnly.tsx
const ExampleBaseOnly = () => {
  return (
    <UnifiedWalletProvider
      wallets={[]}
      config={{
        autoConnect: false,
        env: 'mainnet-beta',
        metadata: {
          name: 'UnifiedWallet',
          description: 'UnifiedWallet',
          url: 'https://jup.ag',
          iconUrls: ['https://jup.ag/favicon.ico'],
        },
        notificationCallback: WalletNotification,
        walletlistExplanation: {
          href: 'https://station.jup.ag/docs/additional-topics/wallet-list',
        },
      }}
    >
      <UnifiedWalletButton />
    </UnifiedWalletProvider>
  );
};

export default ExampleBaseOnly;
  • More example can be found on the demo page, or in src/components/examples

More features

  • [x] Wallet attachment
    • Target specific wallet and attach custom element to it
config={{
  walletAttachments: { 
    'Phantom': {
      attachment: <div tw="text-xs rounded-md bg-red-500 px-2 mx-2 text-center">Auto Confirm</div>
    } 
  }
}}

FAQs

  • Why not ship with all wallets?

    • Unnecessary bloat and bundle size on your dApp
    • It's not sensible to always maintain an ever-growing list of wallets
    • Many existing wallets are not well maintained, often with unpatched security, or abandoned development
    • Lack of users
    • Does not support Versioned Transaction, severely limiting the adoption of many innovative functionalities of dApp.
    • And hopefully, a gradually disappearing list of installed wallet adapter, as they migrate to wallet-standard
  • Why not ship with notification by default

    • Existing dApp might already have their own notification system
    • Checkout src/components/examples/WalletNotification.tsx for an example of how to use the notification system
  • How to add/develop a new wallet?

    • We recommend new developer develops Wallets that comforms to WalletStandard or MWA, to get instant discoverability.
    • https://github.com/solana-labs/wallet-adapter/blob/master/WALLET.md

#By Raccoons