0.2.20 • Published 7 months ago

@tomo-inc/tomo-social-react v0.2.20

Weekly downloads
-
License
-
Repository
-
Last release
7 months ago

Tomo Social React

This is a boilerplate build with Vite, React 18, TypeScript, Vitest, Testing Library, TailwindCSS 3, Eslint and Prettier.

What is inside?

Install

npm install @tomo-inc/social-wallet-sdk
yarn add @tomo-inc/social-wallet-sdk

Use Demo

import {
  TomoContextProvider,
  TomoSocial,
  useTomoClientMap,
  useTomoModalControl,
  useTomoWalletConnect,
  useTomoWalletState
} from '@tomo-inc/social-wallet-sdk'

export default function Demo() {
  return (
    <TomoContextProvider
      evmDefaultChainId={1}
      clientId={
        'bCMfq7lAMPobDhf6kWAHAPtO5Ct6YuA77W9SzhjUixFwOOi0f92vsdJpkAhn0W4tg8TVSeTNUSvBOC3MXYRuIH0Z'
      }
      sdkMode={'dev'}
    >
      <ChildComponent />
    </TomoContextProvider>
  )
}

export function ChildComponent() {
  const tomoModal = useTomoModalControl()
  const tomoWalletState = useTomoWalletState()
  const tomoClientMap = useTomoClientMap()
  const tomoWalletConnect = useTomoWalletConnect()
  return (
    <div className={'tomo-social tm-flex tm-h-screen tm-w-screen'}>
      <div
        className={
          'tm-flex tm-h-full tm-flex-1 tm-flex-col tm-gap-4 tm-border-r tm-border-r-tc1/10 dark:tm-border-r-tc1-dark/10 tm-px-10 tm-py-10 tm-overflow-auto'
        }
      >
        <div className={'tm-flex tm-gap-3 tm-flex-wrap'}>
          <LodingButton
            onClick={() => {
              tomoModal.open()
            }}
          >
            tomo modal
          </LodingButton>
          <LodingButton
            onClick={async () => {
              await tomoWalletConnect.disconnect()
            }}
          >
            disconnect
          </LodingButton>
          <br />
          <LodingButton
            onClick={async () => {
              await tomoWalletConnect.switchChainType('solana')
            }}
          >
            switch to solana
          </LodingButton>
          <LodingButton
            onClick={async () => {
              await tomoWalletConnect.switchChainType('bitcoin')
            }}
          >
            switch to bitcoin
          </LodingButton>
          <LodingButton
            onClick={async () => {
              await tomoWalletConnect.switchChainType('evm')
            }}
          >
            switch to evm
          </LodingButton>
        </div>

        <ShowJson obj={tomoWalletState} title={'useTomoWalletState'} />
        <ShowJson obj={tomoClientMap} title={'useTomoClientMap'} />
      </div>
      <div className={'tm-flex tm-flex-col tm-gap-4 tm-px-20 tm-py-10'}>
        <div>tomo social</div>
        <TomoSocial />
      </div>
    </div>
  )
}

function LodingButton({
                        onClick,
                        disabled,
                        ...otherProps
                      }: React.DetailedHTMLProps<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
  >) {
  return (
    <button
      {...otherProps}
    />
  )
}

function ShowJson({ title, obj, rows = 10 }) {
  const jsonFn = function jsonValueFn(key, value) {
    if (key && this !== obj) {
      return 'any'
    }
    return value
  }
  return (
    <div>
      <div>{title}: </div>
      <textarea
        value={JSON.stringify(obj, jsonFn, '\t')}
        className={'tm-w-full'}
        rows={rows}
      ></textarea>
    </div>
  )
}
0.2.20

7 months ago

0.2.26-beta.1

7 months ago

0.2.25-beta.1

7 months ago

0.2.19

7 months ago

0.2.24-beta.1

7 months ago

0.2.23-beta.1

7 months ago

0.2.22-beta.1

8 months ago

0.2.21-beta.1

8 months ago

0.2.20-beta.1

8 months ago

0.2.19-beta.1

9 months ago

0.2.18

9 months ago

0.2.19-beta

9 months ago

0.2.18-beta.1

9 months ago

0.2.18-beta

9 months ago

0.2.17

9 months ago

0.2.16

9 months ago

0.2.15

9 months ago

0.2.14

9 months ago

0.2.13

10 months ago

0.2.12

10 months ago

0.2.11

10 months ago

0.2.10

11 months ago

0.2.9

11 months ago

0.2.8

11 months ago

0.2.7

11 months ago

0.2.6

11 months ago

0.2.5

11 months ago

0.2.4

11 months ago

0.2.3

11 months ago

0.2.2

11 months ago

0.2.1

11 months ago

0.2.0

11 months ago

0.1.27

11 months ago

0.1.26

11 months ago

0.1.25

11 months ago

0.1.24

11 months ago

0.1.23

11 months ago

0.1.22

11 months ago

0.1.21

11 months ago

0.1.20

12 months ago

0.1.19

12 months ago

0.1.18

12 months ago

0.1.17

12 months ago

0.1.16

12 months ago

0.1.15

12 months ago

0.1.14

12 months ago

0.1.13

12 months ago

0.1.12

12 months ago

0.1.11

12 months ago

0.1.10

12 months ago

0.1.9

12 months ago

0.1.8

12 months ago

0.1.7

12 months ago

0.1.6

12 months ago

0.1.5

12 months ago

0.1.4

12 months ago

0.1.3

12 months ago

0.1.2

12 months ago

0.1.1

12 months ago

0.1.0

12 months ago