Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@civic/civic-link

Package Overview
Dependencies
Maintainers
16
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@civic/civic-link

This package provides the tools and UI for a dApp to orchestrate a user linking one wallet to another. The linking mechanism uses the Decentralised IDentifier Solana program, and the associated [identity.com DID toolkit libraries](https://www.npmjs.com/pa

  • 0.0.7-beta.15
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
16
Created
Source

This package provides the tools and UI for a dApp to orchestrate a user linking one wallet to another. The linking mechanism uses the Decentralised IDentifier Solana program, and the associated identity.com DID toolkit libraries.

The orchestration works by setting up opening a new 'child' browser window where the user can connect the wallet they want to link in a separate wallet signing context, without the 'parent' dApp needing to log the user out (the solana wallet adapter doesn't allow connection of multiple wallets). The child browser window is initialised with GET parameters passed from the parent dApp. When the wallet linking is finished, the child window communicates this to the parent window using the window.postMessage API.

Note: the 'child' link-wallet component must be hosted in a separate application from the 'parent' dApp, alternatively, the civic-themed iframe can be referenced which is hosted at https://link.civic.me.

The Civic Link tools can be seen in action as part of civic.me. You can try it by connecting your primary wallet and linking an additional wallet to your civic.me profile (in the Settings -> Wallet menu):

For more details: Civic Help Center - How do I link an additional wallet?.

Usage

The link-wallet flow needs to run in a separately hosted application from the parent dApp and needs to implement an App like below:

import React from "react";
import {
  LinkWalletInputParameters,
  WalletConnectionProvider,
  LinkWalletWithOwnershipFlow,
  PostMessageProvider,
} from "@civic/civic-link";

export function LinkWalletFlow({}): React.ReactElement {
  return (
    <PostMessageProvider
    ...
    >
      <WalletConnectionProvider
        ...
      >
          <LinkWalletWithOwnershipFlow
            ...
          />
      </WalletConnectionProvider>
    </PostMessageProvider>
  );
}

dApp (parent)

The parent dApp needs to trigger the opening of the child link-wallet window using the openLinkWalletPage function from useWalletLinking. When wallet linking has completed successfully, the parent dApp can react to this event by using the successfullyAddedWalletToDidPromise fromuseWalletLinking. Note that all the snippets below need to be wrapped in the <WalletLinkingProvider>./

<App>
  <WalletLinkingProvider>
    const { openLinkWalletPage, successfullyAddedWalletToDidPromise } = useWalletLinking();
    successfullyAddedWalletToDidPromise.then(() => {
      showSuccess();
    });
    return <button onClick={openLinkWalletPage}>
        Link Wallet
      </button>
    
  </WalletLinkingProvider>
</App>

FAQs

Package last updated on 01 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc