0.2.20 • Published 9 months ago

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

Weekly downloads
-
License
-
Repository
-
Last release
9 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

9 months ago

0.2.26-beta.1

9 months ago

0.2.25-beta.1

10 months ago

0.2.19

10 months ago

0.2.24-beta.1

10 months ago

0.2.23-beta.1

10 months ago

0.2.22-beta.1

10 months ago

0.2.21-beta.1

10 months ago

0.2.20-beta.1

11 months ago

0.2.19-beta.1

11 months ago

0.2.18

11 months ago

0.2.19-beta

11 months ago

0.2.18-beta.1

11 months ago

0.2.18-beta

11 months ago

0.2.17

11 months ago

0.2.16

12 months ago

0.2.15

12 months ago

0.2.14

12 months ago

0.2.13

12 months ago

0.2.12

1 year ago

0.2.11

1 year ago

0.2.10

1 year ago

0.2.9

1 year ago

0.2.8

1 year ago

0.2.7

1 year ago

0.2.6

1 year ago

0.2.5

1 year ago

0.2.4

1 year ago

0.2.3

1 year ago

0.2.2

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.1.27

1 year ago

0.1.26

1 year ago

0.1.25

1 year ago

0.1.24

1 year ago

0.1.23

1 year ago

0.1.22

1 year ago

0.1.21

1 year ago

0.1.20

1 year ago

0.1.19

1 year ago

0.1.18

1 year ago

0.1.17

1 year ago

0.1.16

1 year ago

0.1.15

1 year ago

0.1.14

1 year ago

0.1.13

1 year ago

0.1.12

1 year ago

0.1.11

1 year ago

0.1.10

1 year ago

0.1.9

1 year ago

0.1.8

1 year ago

0.1.7

1 year ago

0.1.6

1 year ago

0.1.5

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago