@tomo-inc/tomo-social-react v0.2.20
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>
)
}
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago