[demo]: add support for ethereum wallets via irys

apps/demo/src/components/common/connect-button/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import type { MenuProps } from 'antd';
+import { Dropdown, Button, Image } from 'antd';
+
+import { ConnectWallet, useAddress, useDisconnect } from '@thirdweb-dev/react';
+
+import { useConnection, useActiveAddress } from 'arweave-wallet-kit';
+import { TbLogout } from 'react-icons/tb';
+
+const ConnectButton = () => {
+	const { connected, connect, disconnect } = useConnection();
+	const ethAddress = useAddress();
+	const arAddress = useActiveAddress();
+	const ethDisconnect = useDisconnect();
+
+	const shortenAddress = (address: string) => {
+		return `${address.slice(0, 6)}...${address.slice(-4)}`;
+	};
+
+	const onDisconnect = () => {
+		if (connected) {
+			disconnect();
+		}
+		if (ethAddress) {
+			ethDisconnect();
+		}
+	};
+
+	const items: MenuProps['items'] = [
+		{
+			key: 'ar-wallet',
+			label: (
+				<Button
+					type='primary'
+					className='!flex w-full !items-center !justify-center !rounded-lg !bg-[#1A1523] !py-[23px] !text-[1.1rem] font-medium'
+					onClick={connect}
+				>
+					Arweave
+				</Button>
+			),
+		},
+		{
+			key: 'eth-wallet',
+			label: <ConnectWallet btnTitle='Ethereum' />,
+		},
+	];
+
+	if (!connected && ethAddress === undefined) {
+		return (
+			<Dropdown menu={{ items }} trigger={['click']}>
+				<Button size='large'>Connect</Button>
+			</Dropdown>
+		);
+	} else {
+		return (
+			<div className='flex flex-row items-center gap-2'>
+				<Image
+					src={
+						ethAddress
+							? 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Ethereum_logo_2014.svg/1257px-Ethereum_logo_2014.svg.png'
+							: 'https://cryptologos.cc/logos/arweave-ar-logo.png'
+					}
+					preview={false}
+					className='max-w-5 h-full max-h-5 w-full object-cover '
+				/>
+				<div className='text-[0.9rem]'>
+					{connected && shortenAddress(arAddress ?? '')}
+					{ethAddress && shortenAddress(ethAddress ?? '')}
+				</div>
+				<Button
+					onClick={onDisconnect}
+					icon={<TbLogout className='text-xl' />}
+					type='text'
+				/>
+			</div>
+		);
+	}
+};
+
+export default ConnectButton;

apps/demo/src/providers/web3/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { env } from '~/env.mjs';
+import {
+	ThirdwebProvider,
+	metamaskWallet,
+	coinbaseWallet,
+	walletConnect,
+} from '@thirdweb-dev/react';
+
+import { Mumbai } from '@thirdweb-dev/chains';
+
+interface Props {
+	children: React.ReactNode;
+}
+
+const Web3Provider = ({ children }: Props) => {
+	return (
+		<ThirdwebProvider
+			activeChain={Mumbai}
+			clientId={env.NEXT_PUBLIC_TW_ID}
+			supportedWallets={[metamaskWallet(), coinbaseWallet(), walletConnect()]}
+			dAppMeta={{
+				name: 'Atomic Toolkit Demo',
+				description: 'Atomic Toolkit Demo',
+				logoUrl:
+					'https://atomic-toolkit-demo.vercel.app/android-chrome-512x512.png',
+				url: 'https://atomic-toolkit-demo.vercel.app/',
+				isDarkMode: true,
+			}}
+			theme='light'
+		>
+			{children}
+		</ThirdwebProvider>
+	);
+};
+
+export default Web3Provider;