<WalletWidget>

<WalletWidget>은 지갑 위젯을 렌더링하는 역할을 하는 React 컴포넌트입니다.

<WalletWidget>은 반드시 <WalletProvider> 내부에서 렌더링되어야 합니다.

예제

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

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

INFO

위젯은 사용자가 지갑을 연결하기 전까지 보이지 않으며 — 연결이 해제된 상태에서는 null을 반환합니다. 항상 마운트되는 컨테이너(예: 루트 레이아웃)에 배치하고, 그 옆에 여러분의 connect 버튼을 렌더링하세요.

레퍼런스

props.theme

다음 속성을 가진 객체를 전달하여 지갑 위젯의 테마를 커스터마이즈할 수 있습니다:

속성	설명	기본값	값
variant	확장된 지갑 위젯의 스킨입니다.	'glow'	'dark' | 'flat' | 'glow'
colors.accentColor	지갑 위젯의 강조 색상입니다. 이 값을 설정하면 단색 모드가 켜져서 경쟁하는 다른 색상(예: 토큰 아이콘)이 제거됩니다.	undefined	유효한 CSS 색상 문자열 아무거나.
colors.collapsed.accentColor	축소된 지갑 위젯의 강조 색상입니다. 정의되어 있지 않으면 colors.accentColor로 폴백됩니다.	undefined	유효한 CSS 색상 문자열 아무거나.
colors.collapsed.backgroundColor	축소된 지갑 위젯의 배경 색상입니다.	undefined	유효한 CSS 색상 문자열 아무거나.

CSS var(...) 참조는 iframe에 전달되기 전에 즉시 해석되므로, 여러분의 디자인 토큰을 참조할 수 있습니다:

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

props.size

축소된 지갑 위젯의 네 가지 크기 중에서 선택하세요: small, medium, large, huge.

기본값은 'medium'입니다.

props.shape

축소된 지갑 위젯의 두 가지 모양 중에서 선택하세요: rounded와 squared.

기본값은 'rounded'입니다.

props.compact

compact 모드를 활성화합니다. 이 모드는 아바타만 포함하는 축소된 지갑 위젯의 아주 작은 버전입니다.

기본값은 false입니다.

props.noAutoCompact

작은 화면에서 지갑 위젯이 compact 모드로 전환되지 않도록 합니다.

기본값은 false입니다.

props.smallBreakpoint

지갑 위젯을 작은 화면에 맞게 최적화하는 데 사용되는 중단점을 픽셀 단위로 정의합니다.

뷰포트의 너비가 이 숫자보다 작으면, 지갑 위젯은 compact 모드를 사용하고 전체 화면을 차지하도록 확장됩니다.

기본값은 540입니다.

props.noAutoCollapse

바깥쪽을 클릭할 때 지갑 위젯이 축소되지 않도록 합니다.

기본값은 false입니다.

props.experimental_mode

렌더 모드입니다. dropdown은 위젯을 제자리에서 확장합니다(데스크톱에 적합합니다); modal은 중앙에 portal로 위젯을 렌더링합니다. 기본값은 dropdown이며, smallBreakpoint prop을 통해 반응형을 유지합니다.

props.className

커스텀 스타일링을 위한 추가 CSS 클래스입니다.

기본값은 undefined입니다.

props.style

커스텀 스타일링을 위한 인라인 스타일입니다.

기본값은 undefined입니다.