-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: tomiir <rocchitomas@gmail.com>
- Loading branch information
Showing
58 changed files
with
2,051 additions
and
386 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| --- | ||
| '@reown/appkit-adapter-solana': patch | ||
| '@reown/appkit-wallet-button': patch | ||
| '@reown/appkit-utils': patch | ||
| '@reown/appkit-scaffold-ui': patch | ||
| '@reown/appkit-common': patch | ||
| '@reown/appkit-core': patch | ||
| '@reown/appkit-siwx': patch | ||
| '@reown/appkit-ui': patch | ||
| '@apps/builder': patch | ||
| '@reown/appkit-adapter-ethers': patch | ||
| '@reown/appkit-adapter-ethers5': patch | ||
| '@reown/appkit-adapter-wagmi': patch | ||
| '@reown/appkit': patch | ||
| '@reown/appkit-cdn': patch | ||
| 'appkit-cli': patch | ||
| '@reown/appkit-experimental': patch | ||
| '@reown/appkit-polyfills': patch | ||
| '@reown/appkit-siwe': patch | ||
| '@reown/appkit-wallet': patch | ||
| --- | ||
|
|
||
| Introduced wallet button component and custom hook for headless integration. | ||
|
|
||
| Components example: | ||
| ```tsx | ||
| import '@reown/appkit-wallet-button' | ||
|
|
||
| export function YourApp() { | ||
| return ( | ||
| <> | ||
| {/* QR Code (WalletConnect) */} | ||
| <appkit-wallet-button wallet="walletConnect" /> | ||
|
|
||
| {/* Wallets */} | ||
| <appkit-wallet-button wallet="metamask" /> | ||
| <appkit-wallet-button wallet="trust" /> | ||
| <appkit-wallet-button wallet="coinbase" /> | ||
|
|
||
| {/* Socials */} | ||
| <appkit-wallet-button wallet="google" /> | ||
| <appkit-wallet-button wallet="x" /> | ||
| <appkit-wallet-button wallet="discord" /> | ||
| <appkit-wallet-button wallet="farcaster" /> | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| Hook example: | ||
| ```tsx | ||
| import { useAppKitWallet } from '@reown/appkit-wallet-button/react' | ||
|
|
||
| export function YourApp() { | ||
| const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({ | ||
| onError: err => { | ||
| // ... | ||
| }, | ||
| onSuccess: data => { | ||
| // ... | ||
| } | ||
| }) | ||
|
|
||
| return ( | ||
| <> | ||
| <button onClick={() => connect('walletConnect')}>Open QR modal</button> | ||
| <button onClick={() => connect('metamask')}>Connect to MetaMask</button> | ||
| <button onClick={() => connect('google')}>Connect to Google</button> | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| Additionally a new theme variable property called `--w3m-qr-color` was added where you can configure a custom color for the QR code. | ||
|
|
||
| ```tsx | ||
| import { createAppKit } from '@reown/appkit/react' | ||
|
|
||
| const modal = createAppKit({ | ||
| /* Your Config */ | ||
| themeVariables: { | ||
| '--w3m-qr-color': '...', // Optional | ||
| '--w3m-color-mix': '...', | ||
| '--w3m-color-mix-strength': 50 | ||
| } | ||
| }) | ||
|
|
||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
apps/gallery/stories/composites/wui-wallet-button.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import type { Meta } from '@storybook/web-components' | ||
| import '@reown/appkit-ui/src/composites/wui-wallet-button' | ||
| import { html } from 'lit' | ||
| import { iconOptions, walletImageSrc } from '../../utils/PresetUtils' | ||
| import type { WuiWalletButton } from '@reown/appkit-ui/dist/types/src/composites/wui-wallet-button' | ||
|
|
||
| type Component = Meta<WuiWalletButton> | ||
|
|
||
| export default { | ||
| title: 'Composites/wui-wallet-button', | ||
| args: { | ||
| name: 'Rainbow', | ||
| imageSrc: walletImageSrc, | ||
| loading: false, | ||
| error: false, | ||
| icon: undefined, | ||
| disabled: false | ||
| }, | ||
| argTypes: { | ||
| name: { | ||
| control: { type: 'text' } | ||
| }, | ||
| imageSrc: { | ||
| control: { type: 'text' } | ||
| }, | ||
| loading: { | ||
| control: { type: 'boolean' } | ||
| }, | ||
| error: { | ||
| control: { type: 'boolean' } | ||
| }, | ||
| icon: { | ||
| options: [undefined, ...iconOptions], | ||
| control: { type: 'select' } | ||
| }, | ||
| disabled: { | ||
| control: { type: 'boolean' } | ||
| }, | ||
| size: { | ||
| options: ['md', 'lg'], | ||
| control: { type: 'select' } | ||
| } | ||
| } | ||
| } as Component | ||
|
|
||
| export const Default: Component = { | ||
| render: args => | ||
| html`<wui-wallet-button | ||
| .imageSrc=${args.imageSrc} | ||
| .icon=${args.icon} | ||
| name=${args.name} | ||
| ?loading=${args.loading} | ||
| ?error=${args.error} | ||
| ?disabled=${args.disabled} | ||
| ></wui-wallet-button>` | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import { | ||
| Button, | ||
| Card, | ||
| CardBody, | ||
| CardHeader, | ||
| Flex, | ||
| Heading, | ||
| Stack, | ||
| StackDivider | ||
| } from '@chakra-ui/react' | ||
| import * as AppKitWalletButton from '@reown/appkit-wallet-button/react' | ||
| import type { Wallet } from '@reown/appkit-wallet-button' | ||
| import { Fragment, useState } from 'react' | ||
| import { useAppKitAccount, type SocialProvider } from '@reown/appkit/react' | ||
| import { useChakraToast } from './Toast' | ||
| import { ConstantsUtil } from '../utils/ConstantsUtil' | ||
|
|
||
| interface AppKitWalletButtonsProps { | ||
| wallets: Wallet[] | ||
| } | ||
|
|
||
| interface WalletButtonHooksProps { | ||
| wallets: Wallet[] | ||
| } | ||
|
|
||
| interface WalletButtonComponentsProps { | ||
| wallets: Wallet[] | ||
| } | ||
|
|
||
| export function AppKitWalletButtons({ wallets }: AppKitWalletButtonsProps) { | ||
| return ( | ||
| <Card marginTop={10} marginBottom={10}> | ||
| <CardHeader> | ||
| <Heading size="md">Wallet Buttons</Heading> | ||
| </CardHeader> | ||
|
|
||
| <CardBody> | ||
| <Stack divider={<StackDivider />} spacing="4" flexWrap="wrap"> | ||
| <Flex flexDirection="column" gap="4"> | ||
| <Heading size="xs" textTransform="uppercase"> | ||
| Components | ||
| </Heading> | ||
|
|
||
| <Flex display="flex" flexWrap="wrap" gap="4"> | ||
| <WalletButtonComponents wallets={wallets} /> | ||
| </Flex> | ||
| </Flex> | ||
|
|
||
| <Flex flexDirection="column" gap="4"> | ||
| <Heading size="xs" textTransform="uppercase"> | ||
| Hooks Interactions | ||
| </Heading> | ||
|
|
||
| <Flex display="flex" flexWrap="wrap" gap="4"> | ||
| <WalletButtonHooks wallets={wallets} /> | ||
| </Flex> | ||
| </Flex> | ||
| </Stack> | ||
| </CardBody> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| function WalletButtonComponents({ wallets }: WalletButtonComponentsProps) { | ||
| return wallets.map(wallet => ( | ||
| <Fragment key={`wallet-button-${wallet}`}> | ||
| <appkit-wallet-button wallet={wallet} data-testid={`wallet-button-${wallet}`} /> | ||
| </Fragment> | ||
| )) | ||
| } | ||
|
|
||
| function WalletButtonHooks({ wallets }: WalletButtonHooksProps) { | ||
| const [pendingWallet, setPendingWallet] = useState<Wallet>() | ||
|
|
||
| const toast = useChakraToast() | ||
|
|
||
| const { caipAddress } = useAppKitAccount() | ||
|
|
||
| const { isReady, isPending, connect } = AppKitWalletButton.useAppKitWallet({ | ||
| onSuccess() { | ||
| setPendingWallet(undefined) | ||
| }, | ||
| onError(error) { | ||
| toast({ | ||
| title: 'Wallet Button', | ||
| description: error.message, | ||
| type: 'error' | ||
| }) | ||
| setPendingWallet(undefined) | ||
| } | ||
| }) | ||
|
|
||
| return wallets.map(wallet => { | ||
| const isSocial = ConstantsUtil.Socials.includes(wallet as SocialProvider) | ||
| const isWalletConnect = wallet === 'walletConnect' | ||
|
|
||
| const isWalletButtonDisabled = !isWalletConnect && !isSocial && !isReady | ||
|
|
||
| return ( | ||
| <Button | ||
| key={`wallet-button-hook-${wallet}`} | ||
| onClick={() => { | ||
| setPendingWallet(wallet) | ||
| connect(wallet) | ||
| }} | ||
| maxW="fit-content" | ||
| size="md" | ||
| isLoading={isPending && pendingWallet === wallet} | ||
| isDisabled={Boolean(caipAddress) || isWalletButtonDisabled} | ||
| textTransform="capitalize" | ||
| data-testid={`wallet-button-hook-${wallet}`} | ||
| > | ||
| {wallet} | ||
| </Button> | ||
| ) | ||
| }) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { Grid, Heading, useRadioGroup } from '@chakra-ui/react' | ||
| import { colors } from '../../utils/DataUtil' | ||
| import RadioColor from './RadioColor' | ||
| import { ThemeStore } from '../../utils/StoreUtil' | ||
| import { useProxy } from 'valtio/utils' | ||
|
|
||
| export default function QrColorInput() { | ||
| const state = useProxy(ThemeStore.state) | ||
|
|
||
| function handleColorChange(e: string) { | ||
| ThemeStore.setQRColor(e) | ||
| } | ||
|
|
||
| const { getRootProps, getRadioProps } = useRadioGroup({ | ||
| name: 'qrColor', | ||
| onChange: handleColorChange, | ||
| defaultValue: state.qrColor ? state.qrColor : undefined | ||
| }) | ||
|
|
||
| const group = getRootProps() | ||
|
|
||
| return ( | ||
| <> | ||
| <Heading size="sm" fontWeight="400" as="h2"> | ||
| QR color | ||
| </Heading> | ||
| <Grid templateColumns="repeat(15, 1fr)" gap={2} {...group}> | ||
| {colors.map(value => { | ||
| const radio = getRadioProps({ value }) | ||
|
|
||
| return ( | ||
| <RadioColor key={value} {...radio}> | ||
| {value} | ||
| </RadioColor> | ||
| ) | ||
| })} | ||
| </Grid> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.