dmtp-sdk-react v1.2.2

Requirements

• Node.js 16.x.x
• React 18.x.x

Install

NPM

npm install --save dmtp-sdk-react

Yarn

yarn add dmtp-sdk-react

Quick Start

Setup DMTPProvider

React

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { DMTPProvider } from 'dmtp-sdk-react'

// You must import bootstrap here　if you use useSNS function
import 'bootstrap/dist/css/bootstrap.min.css'

ReactDOM.render(
  <DMTPProvider APIKey='YOUR_DMTP_API_KEY' dappAddress='YOUR_DAPP_WALLET_ADDRESS>
    <App />
  </DMTPProvider>,
  document.getElementById('root')
)

Next.js

import type { AppProps } from "next/app";
import { DMTPProvider } from "dmtp-sdk-react";

// You must import bootstrap here　if you use useSNS function
import "bootstrap/dist/css/bootstrap.min.css";

function MyApp({ Component, pageProps }: AppProps) {
  return (
      <DMTPProvider
        ?isDev
        APIKey="YOUR_DMTP_API_KEY"
        dappAddress="YOUR_DAPP_WALLET_ADDRESS"
      >
          <Component {...pageProps} />
      </DMTPProvider>
  );
}

export default MyApp;

DMTPProvider Props

useConnectDMTP

import { useConnectDMTP } from 'dmtp-sdk-react'

const App = () => {
  const { isConnectDMTP, connectDMTP } = useConnectDMTP()
  return (
    <>
      <h1>DMTP SDK</h1>
      <h3>useConnectDMTP</h3>
      <div>isConnectDMTP: {isConnectDMTP}</div>
      <button onClick={() => connectDMTP()}>connect DMTP</button>
    </>
  )
}

useSendMessage

• connectDMTP() before useSendMessage | Props | Type | Description | Require | Default | |-------------|------------------------------------------------------|--------------------------|---------|---------| | sendMessage | (message:string, to_address:string) => Promise< void > | Sending message with SDK | | |

import { useSendMessage } from 'dmtp-sdk-react'

const Message = () => {
  const sendMessage = useSendMessage()

  const [message, setMessage] = useState('')
  const [toAddress, setToAddress] = React.useState(
    ''
  )

  return (
    <>
      <h3>useSendMessage</h3>
      <input
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder='Enter your message'
      />
      <input
        value={toAddress}
        onChange={(e) => setToAddress(e.target.value)}
        placeholder='To address'
      />
      <button onClick={() => sendMessage(message, toAddress)}>
        Send Message
      </button>
    </>
  )
}

useSNS

• connectDMTP() before useSNS | Props | Type | Description | Require | Default | |----------------|--------------------------------------------------|-----------------------------------------------------------------|---------|---------| | show | () => void | Show SNS connection UI | | | | hide | () => void | Hide SNS connection UI | | | | verifyTelegram | (otp: string) => Promise< void > | Verify with from url params when telegram bot open redirect url | | | | snsData | { discord: boolean; telegram: boolean; } | null | The data of SNS from DMTP | | |

Change YOUR_WEBPAGE_URL

import { useSNS, DmtpSNS } from 'dmtp-sdk-react'

const SNS = () => {
  const { show, hide, verifyTelegram, snsData } = useSNS()
  const { isConnectDMTP } = useConnectDMTP()

  // get telegram code from url
  useEffect(() => {
    if (isConnectDMTP) {
      const query = new URLSearchParams(window.location.search)
      const telegramCode = query.get('code')
      if (telegramCode) {
        verifyTelegram(telegramCode)
      }
    }
  }, [isConnectDMTP])
  return (
    <>
      <h3>useSNS</h3>
      <DmtpSNS redirect_uri_telegram='YOUR_WEBPAGE_URL' />
      <div>Telegram: {snsData?.telegram}</div>
      <div>Discord: {snsData?.discord}</div>
      <button onClick={show}>Show SNS</button>
      <p />
      <button onClick={hide}>Hide SNS</button>
    </>
  )
}

License

MIT © DMTP