<WalletWidget>

<WalletWidget> wallet widget को render करने के लिए ज़िम्मेदार React component है।

<WalletWidget> को एक <WalletProvider> के अंदर render किया जाना चाहिए।

उदाहरण

import { WalletWidget } from '@money-sdk/react'

function Layout() {
  return (
    <header>
      <WalletWidget theme={{ variant: 'dark' }} size="large" shape="squared" />
    </header>
  )
}

INFO

Widget तब तक invisible रहता है जब तक user wallet से connect नहीं करता — यह disconnected होने पर null return करता है। इसे एक ऐसे container में रखें जो हमेशा mounted रहे (जैसे आपका root layout) और इसके पास अपना स्वयं का connect button render करें।

Reference

props.theme

निम्नलिखित attributes वाला एक object pass करके wallet widget के theme को customize करें:

Attribute	विवरण	Default	Values
variant	विस्तारित wallet widget के लिए skin।	'glow'	'dark' | 'flat' | 'glow'
colors.accentColor	Wallet widget के लिए accent color। इसे set करने से monochromatic mode चालू हो जाता है, जिससे कोई अन्य प्रतिस्पर्धी रंग (जैसे token icons) हट जाते हैं।	undefined	कोई भी वैध CSS color string।
colors.collapsed.accentColor	Collapsed wallet widget के लिए accent color। यदि colors.accentColor परिभाषित है तो उस पर fall back करता है।	undefined	कोई भी वैध CSS color string।
colors.collapsed.backgroundColor	Collapsed wallet widget के लिए background color।	undefined	कोई भी वैध CSS color string।

CSS var(...) references को iframe पर forward किए जाने से पहले eagerly resolve किया जाता है, ताकि आप अपने design tokens का संदर्भ दे सकें:

<WalletWidget
  theme={{
    variant: 'glow',
    colors: { accentColor: 'var(--brand-accent)' },
  }}
/>

props.size

Collapsed wallet widget के लिए चार अलग-अलग sizes में से चुनें: small, medium, large और huge।

Default 'medium' है।

props.shape

Collapsed wallet widget के लिए दो अलग-अलग shapes में से चुनें: rounded और squared।

Default 'rounded' है।

props.compact

Compact mode सक्षम करें। यह mode collapsed wallet widget का एक tiny version है जिसमें केवल avatar होता है।

Default false है।

props.noAutoCompact

Wallet widget को small screens पर compact mode में switch होने से रोकें।

Default false है।

props.smallBreakpoint

Pixels में breakpoint परिभाषित करता है, जिसका उपयोग wallet widget को small screens के लिए optimize करने हेतु किया जाता है।

जब viewport की चौड़ाई इस संख्या से कम होती है, तो wallet widget compact mode का उपयोग करता है और पूरी screen पर occupy करने के लिए expand हो जाता है।

Default 540 है।

props.noAutoCollapse

Wallet widget को इसके बाहर click करने पर collapse होने से रोकें।

Default false है।

props.experimental_mode

Render mode। dropdown widget को in place expand करता है (desktop के लिए उपयुक्त); modal widget को एक centered portal में render करता है। Default dropdown है — यह smallBreakpoint prop के माध्यम से responsive रहता है।

props.className

Custom styling के लिए अतिरिक्त CSS classes।

Default undefined है।

props.style

Custom styling के लिए Inline styles।

Default undefined है।