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

@sqds/iframe-adapter

v1.0.16

Published

Wallet adapter for interacting with Squads via iframe message passing

Downloads

7,657

Readme

Squads Apps Iframe Adapter

The Squads iframe-adapter package is an easy way to get your app functioning within the Squads Apps ecosystem on Solana. It creates a bridge between your app and Squads so that any transaction from within your app is created as a Squads Multisig transaction on behalf of a multisig vault or authority.

Requirements

The iframe-adapter operates very similar to a normal wallet, but will need the following in order to properly bridge your app to Squads

  1. The @sqds/iframe-adapter npm package.
  2. The app will need the proper Content Security Policy (CSP Header) for frame-ancestor: Content-Security-Policy: frame-ancestors https://iframe-preview.squads.so
  3. A small snippet of code (which may depend on your apps wallet configuration)

Installation

  1. Add the package to your project:
    npm install @sqds/iframe-adapter
    or
    yarn add @sqds/iframe-adapter

  2. Add the proper CSP header:
    Content-Security-Policy: frame-ancestors https://iframe-preview.squads.so;

  3. Add the following code where your wallet adapter context is initialized:

    import {detectEmbeddedInSquadsIframe, SquadsEmbeddedWalletAdapter} from @sqds/iframe-adapter
    ...
    // then add the following conditional (or similar) where your supported wallets are loaded
    
    let wallets = detectEmbeddedInSquadsIframe() ? [new SquadsEmbeddedWalletAdapter("https://iframe-preview.squads.so")] : [ new PhantomWalletAdapter(), new ExodusWalletAdapter()];
    // the rest of your code
    return (
     <WalletProvider wallets={wallets} autoConnect>
    // etc

Testing the setup

Head over to https://iframe-preview.squads.so/apps/test/{yourSquadId} replacing the {yourSquadId} with the address of your Squad (NOT your vault). You can similarly go to your Squad multisig and simply change the URL to match the pattern mentioned here. You'll be asked to enter the URL of your app and a title, after which you can test to see that your app is properly configured to use Squads.

  1. You should be able to connect the SquadsEmbeddedWallet from the wallet selection in your app.
  2. The address displayed by your App should match your vault address

Adding your App to Squads

After you've validated that your App is ready to be integrated with Squads, send us a message on Telegram or Discord for final testing and implementation. During this process the url https://iframe-preview.squads.so will be change for the classic https://v3.squads.so