https://github.com/ricardojrmcom/use-phantasma-link

React hook for PhantasmaLink
https://github.com/ricardojrmcom/use-phantasma-link

phantasma phantasmaio react reactjs typescript web3

Last synced: 27 days ago
JSON representation

React hook for PhantasmaLink

• Host: GitHub
• URL: https://github.com/ricardojrmcom/use-phantasma-link
• Owner: ricardojrmcom
• License: mit
• Created: 2022-09-09T09:06:06.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-09-12T12:20:03.000Z (almost 3 years ago)
• Last Synced: 2024-11-08T06:12:17.925Z (8 months ago)
• Topics: phantasma, phantasmaio, react, reactjs, typescript, web3
• Language: TypeScript
• Homepage: https://demo-use-phantasma-link.vercel.app/
• Size: 254 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# 👻 `@ricardojrmcom/use-phantasma-link`

React hook for PhantasmaLink

![build](https://img.shields.io/github/workflow/status/ricardojrmcom/use-phantasma-link/Continuous%20Integration?style=for-the-badge)

![license](https://img.shields.io/github/license/ricardojrmcom/use-phantasma-link?style=for-the-badge)

![author]()

![lang](https://img.shields.io/github/languages/top/ricardojrmcom/use-phantasma-link?style=for-the-badge)

![version](https://img.shields.io/npm/v/@ricardojrmcom/use-phantasma-link?style=for-the-badge)

![size](https://img.shields.io/bundlephobia/min/@ricardojrmcom/use-phantasma-link?style=for-the-badge)






---




#### [Demo](http://demo-use-phantasma-link.vercel.app/)




#### React hook wrapper for [@ncwardell's PhantasmaLink](https://github.com/ncwardell/PhantasmaConnect/blob/main/src/phantasmaLink.ts)




### Install

```tsx

npm install @ricardojrmcom/use-phantasma-link

yarn add @ricardojrmcom/use-phantasma-link

```




### Usage

```tsx

// 1. Wrap `PhantasmaLinkProvider` at the root app level

import { PhantasmaLinkProvider } from '@ricardojrmcom/use-phantasma-link';

export const Dapp = () => (

  

    

  

);

// 2. Call the `usePhantasmaLink` inside your components

import { usePhantasmaLink } from '@ricardojrmcom/use-phantasma-link';

export const DemoDapp = () => {

  const { dapp, isLoggedIn, isLoggedInSet } = usePhantasmaLink();

  useEffect(() => {

    if (dapp) {

      console.log({ dapp });

    }

  }, [dapp]);

  const loginSuccess = useCallback(

    (data: any) => {

      console.log('Login Success!: ', data);

      isLoggedInSet(true);

    },

    [isLoggedInSet],

  );

  const loginError = useCallback((error: any) => {

    console.error('Login Error!: ', error);

  }, []);

  const loginWithPoltergeist = useCallback(() => {

    dapp?.login(loginSuccess, loginError, 'poltergeist');

  }, [dapp, loginSuccess, loginError]);

  const loginWithEcto = useCallback(() => {

    dapp?.login(loginSuccess, loginError, 'ecto');

  }, [dapp, loginSuccess, loginError]);

  return (

    


      
DEMO

      
Open the console to explore the "dapp" object

      {dapp && !isLoggedIn && (

        


          

            

              Login with Poltergeist

            

          

          

            

              Login with Ecto

            

          

        

      )}

      {dapp && isLoggedIn && (

        


          
LOGGED IN!

          
Address: {dapp?.account?.address}

          
Name: {dapp?.account?.name}

          
Wallet: {dapp?.wallet}

        

      )}

    

  );

};

```





---




### License

[MIT](https://github.com/ricardojrmcom/use-phantasma-link/blob/main/LICENSE) © Ricardo  Mota ([@ricardojrmcom](https://github.com/ricardojrmcom))

Bootstrapped with 🟣[@ricardojrmcom/supernova](https://github.com/ricardojrmcom/supernova)