diff --git a/examples/sample-next-privy-app/src/app/components/SocialLoginWrapper.tsx b/examples/sample-next-privy-app/src/app/components/SocialLoginWrapper.tsx index 179935c5..c68b5308 100644 --- a/examples/sample-next-privy-app/src/app/components/SocialLoginWrapper.tsx +++ b/examples/sample-next-privy-app/src/app/components/SocialLoginWrapper.tsx @@ -24,6 +24,7 @@ export function SocialLoginWrapper({ children }: Props) { clientId: process.env.NEXT_PUBLIC_PRIVY_CLIENT_ID!, loginMethods: ['google', 'twitter', 'github', 'sms', 'email'], appearance: { + walletList: ['metamask', 'rainbow'], theme: colorMode, accentColor: '#696FFD', loginMessage: 'Select a social media profile', @@ -33,10 +34,9 @@ export function SocialLoginWrapper({ children }: Props) { createOnLogin: 'all-users', }, ecosystemAppsID: [ + 'cm4wxxujb022fyujl7g0thb21', //vechain 'clz41gcg00e4ay75dmq3uzzgr', //cleanify 'clxdoatq601h35inz6qykgmai', - 'clpgf04wn04hnkw0fv1m11mnb', - 'clrtmg1n104ypl60p9w5c3v4c', ], allowPasskeyLinking: true, }} diff --git a/examples/sample-next-privy-app/src/app/pages/homepage.tsx b/examples/sample-next-privy-app/src/app/pages/homepage.tsx index fcd52275..da46441a 100644 --- a/examples/sample-next-privy-app/src/app/pages/homepage.tsx +++ b/examples/sample-next-privy-app/src/app/pages/homepage.tsx @@ -30,7 +30,8 @@ const HomePage = (): ReactElement => { const { toggleColorMode: toggleDAppKitPrivyColorMode } = useDAppKitPrivyColorMode(); - const { connection, smartAccount, connectedWallet } = useWallet(); + const { connection, selectedAccount, connectedWallet, smartAccount } = + useWallet(); // A dummy tx sending 0 b3tr tokens const clauses = useMemo(() => { @@ -45,7 +46,7 @@ const HomePage = (): ReactElement => { connectedWallet.address, '0', // 1 B3TR (in wei) ]), - comment: `Transfer ${1} B3TR to `, + comment: `Transfer ${0} B3TR to `, abi: abi.getFunction('transfer'), }); return clausesArray; @@ -59,11 +60,11 @@ const HomePage = (): ReactElement => { isTransactionPending, error, } = useSendTransaction({ - signerAccount: smartAccount, + signerAccountAddress: selectedAccount?.address, privyUIOptions: { title: 'Sign to confirm', description: - 'This is a test transaction performing a transfer of 1 B3TR tokens from your smart account.', + 'This is a test transaction performing a transfer of 0 B3TR tokens from your smart account.', buttonText: 'Sign', }, }); @@ -131,7 +132,6 @@ const HomePage = (): ReactElement => { Deployed: {smartAccount.isDeployed.toString()} - Owner: {smartAccount.owner} )} @@ -140,12 +140,18 @@ const HomePage = (): ReactElement => { Wallet Address: {connectedWallet?.address} - Connection Type: {connection.source.type} + + + + + Connection + + Type: {connection.source.type} - Actions + Test actions @@ -154,14 +160,14 @@ const HomePage = (): ReactElement => { isLoading={isTransactionPending} isDisabled={isTransactionPending} > - Test Tx with toast + Tx with toast diff --git a/packages/dapp-kit-react-privy/package.json b/packages/dapp-kit-react-privy/package.json index cd26c73f..3bc94557 100644 --- a/packages/dapp-kit-react-privy/package.json +++ b/packages/dapp-kit-react-privy/package.json @@ -25,7 +25,7 @@ "dependencies": { "@chakra-ui/react": "^2.8.2", "@choc-ui/chakra-autocomplete": "^5.3.0", - "@privy-io/react-auth": "1.98.2", + "@privy-io/react-auth": "1.98.4", "@vechain/dapp-kit-react": "*", "@vechain/picasso": "^2.1.1", "@vechain/sdk-core": "^1.0.0-rc.5", diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/assets/abi.ts b/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/assets/abi.ts deleted file mode 100644 index 75dbe9b2..00000000 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/assets/abi.ts +++ /dev/null @@ -1,926 +0,0 @@ -export const SimpleAccountABI = [ - { - "inputs": [], - "stateMutability": "nonpayable", - "type": "constructor" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "target", - "type": "address" - } - ], - "name": "AddressEmptyCode", - "type": "error" - }, - { - "inputs": [], - "name": "ECDSAInvalidSignature", - "type": "error" - }, - { - "inputs": [ - { - "internalType": "uint256", - "name": "length", - "type": "uint256" - } - ], - "name": "ECDSAInvalidSignatureLength", - "type": "error" - }, - { - "inputs": [ - { - "internalType": "bytes32", - "name": "s", - "type": "bytes32" - } - ], - "name": "ECDSAInvalidSignatureS", - "type": "error" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "implementation", - "type": "address" - } - ], - "name": "ERC1967InvalidImplementation", - "type": "error" - }, - { - "inputs": [], - "name": "ERC1967NonPayable", - "type": "error" - }, - { - "inputs": [], - "name": "FailedCall", - "type": "error" - }, - { - "inputs": [], - "name": "InvalidInitialization", - "type": "error" - }, - { - "inputs": [], - "name": "NotInitializing", - "type": "error" - }, - { - "inputs": [], - "name": "UUPSUnauthorizedCallContext", - "type": "error" - }, - { - "inputs": [ - { - "internalType": "bytes32", - "name": "slot", - "type": "bytes32" - } - ], - "name": "UUPSUnsupportedProxiableUUID", - "type": "error" - }, - { - "anonymous": false, - "inputs": [], - "name": "EIP712DomainChanged", - "type": "event" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": false, - "internalType": "uint64", - "name": "version", - "type": "uint64" - } - ], - "name": "Initialized", - "type": "event" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": true, - "internalType": "address", - "name": "owner", - "type": "address" - } - ], - "name": "SimpleAccountInitialized", - "type": "event" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": true, - "internalType": "address", - "name": "implementation", - "type": "address" - } - ], - "name": "Upgraded", - "type": "event" - }, - { - "inputs": [], - "name": "UPGRADE_INTERFACE_VERSION", - "outputs": [ - { - "internalType": "string", - "name": "", - "type": "string" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [], - "name": "eip712Domain", - "outputs": [ - { - "internalType": "bytes1", - "name": "fields", - "type": "bytes1" - }, - { - "internalType": "string", - "name": "name", - "type": "string" - }, - { - "internalType": "string", - "name": "version", - "type": "string" - }, - { - "internalType": "uint256", - "name": "chainId", - "type": "uint256" - }, - { - "internalType": "address", - "name": "verifyingContract", - "type": "address" - }, - { - "internalType": "bytes32", - "name": "salt", - "type": "bytes32" - }, - { - "internalType": "uint256[]", - "name": "extensions", - "type": "uint256[]" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "dest", - "type": "address" - }, - { - "internalType": "uint256", - "name": "value", - "type": "uint256" - }, - { - "internalType": "bytes", - "name": "func", - "type": "bytes" - } - ], - "name": "execute", - "outputs": [], - "stateMutability": "nonpayable", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "address[]", - "name": "dest", - "type": "address[]" - }, - { - "internalType": "uint256[]", - "name": "value", - "type": "uint256[]" - }, - { - "internalType": "bytes[]", - "name": "func", - "type": "bytes[]" - } - ], - "name": "executeBatch", - "outputs": [], - "stateMutability": "nonpayable", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "to", - "type": "address" - }, - { - "internalType": "uint256", - "name": "value", - "type": "uint256" - }, - { - "internalType": "bytes", - "name": "data", - "type": "bytes" - }, - { - "internalType": "uint256", - "name": "validAfter", - "type": "uint256" - }, - { - "internalType": "uint256", - "name": "validBefore", - "type": "uint256" - }, - { - "internalType": "bytes", - "name": "signature", - "type": "bytes" - } - ], - "name": "executeWithAuthorization", - "outputs": [], - "stateMutability": "payable", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "anOwner", - "type": "address" - } - ], - "name": "initialize", - "outputs": [], - "stateMutability": "nonpayable", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "", - "type": "address" - }, - { - "internalType": "address", - "name": "", - "type": "address" - }, - { - "internalType": "uint256[]", - "name": "", - "type": "uint256[]" - }, - { - "internalType": "uint256[]", - "name": "", - "type": "uint256[]" - }, - { - "internalType": "bytes", - "name": "", - "type": "bytes" - } - ], - "name": "onERC1155BatchReceived", - "outputs": [ - { - "internalType": "bytes4", - "name": "", - "type": "bytes4" - } - ], - "stateMutability": "pure", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "", - "type": "address" - }, - { - "internalType": "address", - "name": "", - "type": "address" - }, - { - "internalType": "uint256", - "name": "", - "type": "uint256" - }, - { - "internalType": "uint256", - "name": "", - "type": "uint256" - }, - { - "internalType": "bytes", - "name": "", - "type": "bytes" - } - ], - "name": "onERC1155Received", - "outputs": [ - { - "internalType": "bytes4", - "name": "", - "type": "bytes4" - } - ], - "stateMutability": "pure", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "", - "type": "address" - }, - { - "internalType": "address", - "name": "", - "type": "address" - }, - { - "internalType": "uint256", - "name": "", - "type": "uint256" - }, - { - "internalType": "bytes", - "name": "", - "type": "bytes" - } - ], - "name": "onERC721Received", - "outputs": [ - { - "internalType": "bytes4", - "name": "", - "type": "bytes4" - } - ], - "stateMutability": "pure", - "type": "function" - }, - { - "inputs": [], - "name": "owner", - "outputs": [ - { - "internalType": "address", - "name": "", - "type": "address" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [], - "name": "proxiableUUID", - "outputs": [ - { - "internalType": "bytes32", - "name": "", - "type": "bytes32" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "bytes4", - "name": "interfaceId", - "type": "bytes4" - } - ], - "name": "supportsInterface", - "outputs": [ - { - "internalType": "bool", - "name": "", - "type": "bool" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "newImplementation", - "type": "address" - }, - { - "internalType": "bytes", - "name": "data", - "type": "bytes" - } - ], - "name": "upgradeToAndCall", - "outputs": [], - "stateMutability": "payable", - "type": "function" - }, - { - "stateMutability": "payable", - "type": "receive" - } -] as const; - -export const SimpleAccountFactoryABI = [ - { - "inputs": [], - "stateMutability": "nonpayable", - "type": "constructor" - }, - { - "inputs": [], - "name": "AccessControlBadConfirmation", - "type": "error" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "account", - "type": "address" - }, - { - "internalType": "bytes32", - "name": "neededRole", - "type": "bytes32" - } - ], - "name": "AccessControlUnauthorizedAccount", - "type": "error" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "target", - "type": "address" - } - ], - "name": "AddressEmptyCode", - "type": "error" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "implementation", - "type": "address" - } - ], - "name": "ERC1967InvalidImplementation", - "type": "error" - }, - { - "inputs": [], - "name": "ERC1967NonPayable", - "type": "error" - }, - { - "inputs": [], - "name": "FailedCall", - "type": "error" - }, - { - "inputs": [], - "name": "InvalidInitialization", - "type": "error" - }, - { - "inputs": [], - "name": "NotInitializing", - "type": "error" - }, - { - "inputs": [], - "name": "UUPSUnauthorizedCallContext", - "type": "error" - }, - { - "inputs": [ - { - "internalType": "bytes32", - "name": "slot", - "type": "bytes32" - } - ], - "name": "UUPSUnsupportedProxiableUUID", - "type": "error" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": false, - "internalType": "contract SimpleAccount", - "name": "account", - "type": "address" - }, - { - "indexed": false, - "internalType": "address", - "name": "owner", - "type": "address" - }, - { - "indexed": false, - "internalType": "uint256", - "name": "salt", - "type": "uint256" - } - ], - "name": "AccountCreated", - "type": "event" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": false, - "internalType": "uint64", - "name": "version", - "type": "uint64" - } - ], - "name": "Initialized", - "type": "event" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": true, - "internalType": "bytes32", - "name": "role", - "type": "bytes32" - }, - { - "indexed": true, - "internalType": "bytes32", - "name": "previousAdminRole", - "type": "bytes32" - }, - { - "indexed": true, - "internalType": "bytes32", - "name": "newAdminRole", - "type": "bytes32" - } - ], - "name": "RoleAdminChanged", - "type": "event" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": true, - "internalType": "bytes32", - "name": "role", - "type": "bytes32" - }, - { - "indexed": true, - "internalType": "address", - "name": "account", - "type": "address" - }, - { - "indexed": true, - "internalType": "address", - "name": "sender", - "type": "address" - } - ], - "name": "RoleGranted", - "type": "event" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": true, - "internalType": "bytes32", - "name": "role", - "type": "bytes32" - }, - { - "indexed": true, - "internalType": "address", - "name": "account", - "type": "address" - }, - { - "indexed": true, - "internalType": "address", - "name": "sender", - "type": "address" - } - ], - "name": "RoleRevoked", - "type": "event" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": true, - "internalType": "address", - "name": "implementation", - "type": "address" - } - ], - "name": "Upgraded", - "type": "event" - }, - { - "inputs": [], - "name": "DEFAULT_ADMIN_ROLE", - "outputs": [ - { - "internalType": "bytes32", - "name": "", - "type": "bytes32" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [], - "name": "UPGRADE_INTERFACE_VERSION", - "outputs": [ - { - "internalType": "string", - "name": "", - "type": "string" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [], - "name": "accountImplementation", - "outputs": [ - { - "internalType": "contract SimpleAccount", - "name": "", - "type": "address" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "owner", - "type": "address" - } - ], - "name": "createAccount", - "outputs": [ - { - "internalType": "contract SimpleAccount", - "name": "ret", - "type": "address" - } - ], - "stateMutability": "nonpayable", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "owner", - "type": "address" - } - ], - "name": "getAccountAddress", - "outputs": [ - { - "internalType": "address", - "name": "", - "type": "address" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "bytes32", - "name": "role", - "type": "bytes32" - } - ], - "name": "getRoleAdmin", - "outputs": [ - { - "internalType": "bytes32", - "name": "", - "type": "bytes32" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "bytes32", - "name": "role", - "type": "bytes32" - }, - { - "internalType": "address", - "name": "account", - "type": "address" - } - ], - "name": "grantRole", - "outputs": [], - "stateMutability": "nonpayable", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "bytes32", - "name": "role", - "type": "bytes32" - }, - { - "internalType": "address", - "name": "account", - "type": "address" - } - ], - "name": "hasRole", - "outputs": [ - { - "internalType": "bool", - "name": "", - "type": "bool" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [], - "name": "initialize", - "outputs": [], - "stateMutability": "nonpayable", - "type": "function" - }, - { - "inputs": [], - "name": "proxiableUUID", - "outputs": [ - { - "internalType": "bytes32", - "name": "", - "type": "bytes32" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "bytes32", - "name": "role", - "type": "bytes32" - }, - { - "internalType": "address", - "name": "callerConfirmation", - "type": "address" - } - ], - "name": "renounceRole", - "outputs": [], - "stateMutability": "nonpayable", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "bytes32", - "name": "role", - "type": "bytes32" - }, - { - "internalType": "address", - "name": "account", - "type": "address" - } - ], - "name": "revokeRole", - "outputs": [], - "stateMutability": "nonpayable", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "bytes4", - "name": "interfaceId", - "type": "bytes4" - } - ], - "name": "supportsInterface", - "outputs": [ - { - "internalType": "bool", - "name": "", - "type": "bool" - } - ], - "stateMutability": "view", - "type": "function" - }, - { - "inputs": [ - { - "internalType": "address", - "name": "newImplementation", - "type": "address" - }, - { - "internalType": "bytes", - "name": "data", - "type": "bytes" - } - ], - "name": "upgradeToAndCall", - "outputs": [], - "stateMutability": "payable", - "type": "function" - }, - { - "inputs": [], - "name": "version", - "outputs": [ - { - "internalType": "string", - "name": "", - "type": "string" - } - ], - "stateMutability": "pure", - "type": "function" - } -] as const; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/assets/index.ts b/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/assets/index.ts deleted file mode 100644 index 81cda62e..00000000 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/assets/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './abi'; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Components/ActionButton.tsx b/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Components/ActionButton.tsx deleted file mode 100644 index 46e9fa92..00000000 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Components/ActionButton.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { - Button, - Box, - HStack, - VStack, - Text, - Icon, - Image, - Tag, -} from '@chakra-ui/react'; -import { ElementType } from 'react'; - -interface ActionButtonProps { - title: string; - description: string; - onClick: () => void; - leftIcon?: ElementType; - rightIcon?: ElementType; - leftImage?: string; - backgroundColor?: string; - border?: string; - hide?: boolean; - showComingSoon?: boolean; -} - -export const ActionButton = ({ - leftIcon, - rightIcon, - title, - description, - onClick, - leftImage, - hide = false, - showComingSoon = false, -}: ActionButtonProps) => { - return ( - - ); -}; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/MainContent.tsx b/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/MainContent.tsx deleted file mode 100644 index 8d895ba6..00000000 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/MainContent.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { - Button, - Image, - ModalBody, - ModalCloseButton, - ModalFooter, - ModalHeader, - Text, - VStack, - useColorMode, -} from '@chakra-ui/react'; -import { useWallet, Wallet } from '../../../hooks'; -import { RxExit } from 'react-icons/rx'; -import { - AccountSelector, - AddressDisplay, - FadeInViewFromBottom, -} from '../../common'; -import { AccountModalContentTypes } from '../AccountModal'; -import packageJson from '../../../../../package.json'; -import React from 'react'; - -type Props = { - setCurrentContent: React.Dispatch< - React.SetStateAction - >; - onClose: () => void; - wallet: Wallet; -}; - -export const MainContent = ({ setCurrentContent, onClose, wallet }: Props) => { - const { colorMode } = useColorMode(); - const isDark = colorMode === 'dark'; - - const { disconnect, connection } = useWallet(); - - return ( - - - {'Connected with ' + connection.source.displayName} - - - - {connection.isConnectedWithPrivy ? ( - { - setCurrentContent('accounts'); - }} - wallet={wallet} - /> - ) : ( - - )} - - - - - - - - - v{packageJson.version} - - - - - ); -}; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/SmartAccountContent.tsx b/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/SmartAccountContent.tsx deleted file mode 100644 index e61b2f85..00000000 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/SmartAccountContent.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { - Image, - ModalBody, - ModalCloseButton, - VStack, - ModalFooter, - ModalHeader, - Text, - useColorMode, - Link, - Icon, -} from '@chakra-ui/react'; -import { useWallet } from '../../../hooks'; -import React, { useState } from 'react'; -import { IoOpenOutline } from 'react-icons/io5'; -import { - AddressDisplay, - FadeInViewFromBottom, - ModalBackButton, -} from '../../common'; -import { AccountModalContentTypes } from '../AccountModal'; -import { getPicassoImage } from '../../../utils'; - -type Props = { - setCurrentContent: React.Dispatch< - React.SetStateAction - >; -}; - -export const SmartAccountContent = ({ setCurrentContent }: Props) => { - const { smartAccount } = useWallet(); - - const walletImage = getPicassoImage(smartAccount.address ?? ''); - - const { colorMode } = useColorMode(); - const isDark = colorMode === 'dark'; - - const [isExpanded, setIsExpanded] = useState(false); - - return ( - - - {'Smart Account'} - - - setCurrentContent('accounts')} /> - - - - - - - - - - To allow you a smooth onboarding on VeChain we are - helping you manage a wallet. - - - - You have full control and ownership of this wallet, - accessible through your selected login method. - - - {isExpanded && ( - - - You can backup your wallet by exporting your - private key. This will allow you to restore your - wallet if you lose your login method. - - - - To experience the full blockchain experience, - transfer your assets to{' '} - - VeWorld Wallet{' '} - - - . - - - )} - - setIsExpanded(!isExpanded)} - color="gray.500" - fontSize={'sm'} - _hover={{ textDecoration: 'none' }} - > - {isExpanded ? 'Read less' : 'Read more'} - - - - - - ); -}; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/MainContent.tsx b/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/MainContent.tsx deleted file mode 100644 index 6c5ddfe5..00000000 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/MainContent.tsx +++ /dev/null @@ -1,193 +0,0 @@ -import { - Button, - HStack, - Image, - ModalBody, - ModalCloseButton, - ModalFooter, - ModalHeader, - Stack, - Text, - VStack, - useColorMode, -} from '@chakra-ui/react'; -import { usePrivy } from '@privy-io/react-auth'; -import { useWalletModal } from '@vechain/dapp-kit-react'; -import { useDAppKitPrivyConfig } from '../../DAppKitPrivyProvider'; -import { AppLogos, FadeInViewFromBottom } from '../common'; -import { useFetchAppInfo } from '../../hooks/useFetchAppInfo'; -import { PrivyAppInfo, SOCIAL_INFOS, WALLET_INFOS } from '../../utils'; -import React from 'react'; - -type Props = { - setCurrentContent: React.Dispatch< - React.SetStateAction<'main' | 'ecosystem'> - >; - onClose: () => void; - logo?: string; - setAppsInfo: React.Dispatch< - React.SetStateAction | undefined> - >; -}; - -export const MainContent = ({ - setCurrentContent, - onClose, - logo, - setAppsInfo, -}: Props) => { - const { colorMode } = useColorMode(); - const isDark = colorMode === 'dark'; - - const { login } = usePrivy(); - const { open } = useWalletModal(); - const { privyConfig } = useDAppKitPrivyConfig(); - - const { data: appsInfo, isLoading } = useFetchAppInfo( - privyConfig?.ecosystemAppsID || [], - ); - - const showEcosystemButton = Boolean( - privyConfig?.ecosystemAppsID && privyConfig.ecosystemAppsID.length > 0, - ); - - const handleEcosystemClick = () => { - if (appsInfo) { - setAppsInfo(appsInfo); - } - setCurrentContent('ecosystem'); - }; - - // Filter SOCIAL_INFOS based on privyConfig.loginMethods and order by loginMethods - const configuredSocialInfos = SOCIAL_INFOS.filter((social) => - privyConfig?.loginMethods?.includes(social.code as any), - ).sort( - (a, b) => - privyConfig?.loginMethods?.indexOf(a.code as any) - - privyConfig?.loginMethods?.indexOf(b.code as any), - ); - - return ( - - - {'Log in or sign up'} - - - logo - - - - - - - {'Select a login method'} - - - - - - {showEcosystemButton && ( - - )} - - - - - - - ); -}; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/AccountSelector.tsx b/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/AccountSelector.tsx deleted file mode 100644 index 3b684f2e..00000000 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/AccountSelector.tsx +++ /dev/null @@ -1,67 +0,0 @@ -'use client'; - -import { Text, Icon, HStack, Button, useColorMode } from '@chakra-ui/react'; -import { humanAddress } from '../../utils'; -import { Wallet } from '../../hooks'; -import { IoIosArrowDown } from 'react-icons/io'; -import { useState } from 'react'; -import { IoCheckmarkOutline, IoCopyOutline } from 'react-icons/io5'; - -type Props = { - wallet: Wallet; - size?: string; - onClick?: () => void; -}; - -export const AccountSelector = ({ wallet, size = 'xl', onClick }: Props) => { - const { colorMode } = useColorMode(); - const isDark = colorMode === 'dark'; - - const [copied, setCopied] = useState(false); - - const copyToClipboard = async (textToCopy: string) => { - await navigator.clipboard.writeText(textToCopy); - setCopied(true); - setTimeout(() => { - setCopied(false); - }, 2000); - }; - - return ( - - ); -}; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/AppLogos.tsx b/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/AppLogos.tsx deleted file mode 100644 index 96778f07..00000000 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/AppLogos.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { Circle, HStack, Image, Text, useColorMode } from '@chakra-ui/react'; -import { PrivyAppInfo, SocialInfo } from '../../utils'; - -export type AppLogosProps = { - apps: PrivyAppInfo[] | SocialInfo[]; - maxDisplayed?: number; - showText?: boolean; - textContent?: string; - size?: string; - my?: number | string; - backgroundColor?: string; -}; - -export const AppLogos = ({ - apps, - maxDisplayed = 2, - showText = true, - textContent = 'Continue with VeChain Apps', - size = '40px', - backgroundColor, -}: AppLogosProps) => { - const { colorMode } = useColorMode(); - const isDark = colorMode === 'dark'; - - return ( - - {apps.slice(0, maxDisplayed).map((app, index) => ( - - {app.name} - - ))} - - {showText && ( - - - {textContent} - - - )} - - ); -}; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/index.ts b/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/index.ts deleted file mode 100644 index 4f24fbac..00000000 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './FadeInViewFromRight'; -export * from './FadeInViewFromBottom'; -export * from './ModalBackButton'; -export * from './AddressDisplay'; -export * from './AppLogos'; -export * from './AccountSelector'; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/index.ts b/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/index.ts deleted file mode 100644 index 0cc506ef..00000000 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './assets'; -export * from './components'; -export * from './hooks'; -export * from './DAppKitPrivyProvider'; -export * from './utils'; diff --git a/packages/dapp-kit-react-privy/src/assets/abi.ts b/packages/dapp-kit-react-privy/src/assets/abi.ts new file mode 100644 index 00000000..6b3f51a7 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/assets/abi.ts @@ -0,0 +1,926 @@ +export const SimpleAccountABI = [ + { + inputs: [], + stateMutability: 'nonpayable', + type: 'constructor', + }, + { + inputs: [ + { + internalType: 'address', + name: 'target', + type: 'address', + }, + ], + name: 'AddressEmptyCode', + type: 'error', + }, + { + inputs: [], + name: 'ECDSAInvalidSignature', + type: 'error', + }, + { + inputs: [ + { + internalType: 'uint256', + name: 'length', + type: 'uint256', + }, + ], + name: 'ECDSAInvalidSignatureLength', + type: 'error', + }, + { + inputs: [ + { + internalType: 'bytes32', + name: 's', + type: 'bytes32', + }, + ], + name: 'ECDSAInvalidSignatureS', + type: 'error', + }, + { + inputs: [ + { + internalType: 'address', + name: 'implementation', + type: 'address', + }, + ], + name: 'ERC1967InvalidImplementation', + type: 'error', + }, + { + inputs: [], + name: 'ERC1967NonPayable', + type: 'error', + }, + { + inputs: [], + name: 'FailedCall', + type: 'error', + }, + { + inputs: [], + name: 'InvalidInitialization', + type: 'error', + }, + { + inputs: [], + name: 'NotInitializing', + type: 'error', + }, + { + inputs: [], + name: 'UUPSUnauthorizedCallContext', + type: 'error', + }, + { + inputs: [ + { + internalType: 'bytes32', + name: 'slot', + type: 'bytes32', + }, + ], + name: 'UUPSUnsupportedProxiableUUID', + type: 'error', + }, + { + anonymous: false, + inputs: [], + name: 'EIP712DomainChanged', + type: 'event', + }, + { + anonymous: false, + inputs: [ + { + indexed: false, + internalType: 'uint64', + name: 'version', + type: 'uint64', + }, + ], + name: 'Initialized', + type: 'event', + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: 'address', + name: 'owner', + type: 'address', + }, + ], + name: 'SimpleAccountInitialized', + type: 'event', + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: 'address', + name: 'implementation', + type: 'address', + }, + ], + name: 'Upgraded', + type: 'event', + }, + { + inputs: [], + name: 'UPGRADE_INTERFACE_VERSION', + outputs: [ + { + internalType: 'string', + name: '', + type: 'string', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [], + name: 'eip712Domain', + outputs: [ + { + internalType: 'bytes1', + name: 'fields', + type: 'bytes1', + }, + { + internalType: 'string', + name: 'name', + type: 'string', + }, + { + internalType: 'string', + name: 'version', + type: 'string', + }, + { + internalType: 'uint256', + name: 'chainId', + type: 'uint256', + }, + { + internalType: 'address', + name: 'verifyingContract', + type: 'address', + }, + { + internalType: 'bytes32', + name: 'salt', + type: 'bytes32', + }, + { + internalType: 'uint256[]', + name: 'extensions', + type: 'uint256[]', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [ + { + internalType: 'address', + name: 'dest', + type: 'address', + }, + { + internalType: 'uint256', + name: 'value', + type: 'uint256', + }, + { + internalType: 'bytes', + name: 'func', + type: 'bytes', + }, + ], + name: 'execute', + outputs: [], + stateMutability: 'nonpayable', + type: 'function', + }, + { + inputs: [ + { + internalType: 'address[]', + name: 'dest', + type: 'address[]', + }, + { + internalType: 'uint256[]', + name: 'value', + type: 'uint256[]', + }, + { + internalType: 'bytes[]', + name: 'func', + type: 'bytes[]', + }, + ], + name: 'executeBatch', + outputs: [], + stateMutability: 'nonpayable', + type: 'function', + }, + { + inputs: [ + { + internalType: 'address', + name: 'to', + type: 'address', + }, + { + internalType: 'uint256', + name: 'value', + type: 'uint256', + }, + { + internalType: 'bytes', + name: 'data', + type: 'bytes', + }, + { + internalType: 'uint256', + name: 'validAfter', + type: 'uint256', + }, + { + internalType: 'uint256', + name: 'validBefore', + type: 'uint256', + }, + { + internalType: 'bytes', + name: 'signature', + type: 'bytes', + }, + ], + name: 'executeWithAuthorization', + outputs: [], + stateMutability: 'payable', + type: 'function', + }, + { + inputs: [ + { + internalType: 'address', + name: 'anOwner', + type: 'address', + }, + ], + name: 'initialize', + outputs: [], + stateMutability: 'nonpayable', + type: 'function', + }, + { + inputs: [ + { + internalType: 'address', + name: '', + type: 'address', + }, + { + internalType: 'address', + name: '', + type: 'address', + }, + { + internalType: 'uint256[]', + name: '', + type: 'uint256[]', + }, + { + internalType: 'uint256[]', + name: '', + type: 'uint256[]', + }, + { + internalType: 'bytes', + name: '', + type: 'bytes', + }, + ], + name: 'onERC1155BatchReceived', + outputs: [ + { + internalType: 'bytes4', + name: '', + type: 'bytes4', + }, + ], + stateMutability: 'pure', + type: 'function', + }, + { + inputs: [ + { + internalType: 'address', + name: '', + type: 'address', + }, + { + internalType: 'address', + name: '', + type: 'address', + }, + { + internalType: 'uint256', + name: '', + type: 'uint256', + }, + { + internalType: 'uint256', + name: '', + type: 'uint256', + }, + { + internalType: 'bytes', + name: '', + type: 'bytes', + }, + ], + name: 'onERC1155Received', + outputs: [ + { + internalType: 'bytes4', + name: '', + type: 'bytes4', + }, + ], + stateMutability: 'pure', + type: 'function', + }, + { + inputs: [ + { + internalType: 'address', + name: '', + type: 'address', + }, + { + internalType: 'address', + name: '', + type: 'address', + }, + { + internalType: 'uint256', + name: '', + type: 'uint256', + }, + { + internalType: 'bytes', + name: '', + type: 'bytes', + }, + ], + name: 'onERC721Received', + outputs: [ + { + internalType: 'bytes4', + name: '', + type: 'bytes4', + }, + ], + stateMutability: 'pure', + type: 'function', + }, + { + inputs: [], + name: 'owner', + outputs: [ + { + internalType: 'address', + name: '', + type: 'address', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [], + name: 'proxiableUUID', + outputs: [ + { + internalType: 'bytes32', + name: '', + type: 'bytes32', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [ + { + internalType: 'bytes4', + name: 'interfaceId', + type: 'bytes4', + }, + ], + name: 'supportsInterface', + outputs: [ + { + internalType: 'bool', + name: '', + type: 'bool', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [ + { + internalType: 'address', + name: 'newImplementation', + type: 'address', + }, + { + internalType: 'bytes', + name: 'data', + type: 'bytes', + }, + ], + name: 'upgradeToAndCall', + outputs: [], + stateMutability: 'payable', + type: 'function', + }, + { + stateMutability: 'payable', + type: 'receive', + }, +] as const; + +export const SimpleAccountFactoryABI = [ + { + inputs: [], + stateMutability: 'nonpayable', + type: 'constructor', + }, + { + inputs: [], + name: 'AccessControlBadConfirmation', + type: 'error', + }, + { + inputs: [ + { + internalType: 'address', + name: 'account', + type: 'address', + }, + { + internalType: 'bytes32', + name: 'neededRole', + type: 'bytes32', + }, + ], + name: 'AccessControlUnauthorizedAccount', + type: 'error', + }, + { + inputs: [ + { + internalType: 'address', + name: 'target', + type: 'address', + }, + ], + name: 'AddressEmptyCode', + type: 'error', + }, + { + inputs: [ + { + internalType: 'address', + name: 'implementation', + type: 'address', + }, + ], + name: 'ERC1967InvalidImplementation', + type: 'error', + }, + { + inputs: [], + name: 'ERC1967NonPayable', + type: 'error', + }, + { + inputs: [], + name: 'FailedCall', + type: 'error', + }, + { + inputs: [], + name: 'InvalidInitialization', + type: 'error', + }, + { + inputs: [], + name: 'NotInitializing', + type: 'error', + }, + { + inputs: [], + name: 'UUPSUnauthorizedCallContext', + type: 'error', + }, + { + inputs: [ + { + internalType: 'bytes32', + name: 'slot', + type: 'bytes32', + }, + ], + name: 'UUPSUnsupportedProxiableUUID', + type: 'error', + }, + { + anonymous: false, + inputs: [ + { + indexed: false, + internalType: 'contract SimpleAccount', + name: 'account', + type: 'address', + }, + { + indexed: false, + internalType: 'address', + name: 'owner', + type: 'address', + }, + { + indexed: false, + internalType: 'uint256', + name: 'salt', + type: 'uint256', + }, + ], + name: 'AccountCreated', + type: 'event', + }, + { + anonymous: false, + inputs: [ + { + indexed: false, + internalType: 'uint64', + name: 'version', + type: 'uint64', + }, + ], + name: 'Initialized', + type: 'event', + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: 'bytes32', + name: 'role', + type: 'bytes32', + }, + { + indexed: true, + internalType: 'bytes32', + name: 'previousAdminRole', + type: 'bytes32', + }, + { + indexed: true, + internalType: 'bytes32', + name: 'newAdminRole', + type: 'bytes32', + }, + ], + name: 'RoleAdminChanged', + type: 'event', + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: 'bytes32', + name: 'role', + type: 'bytes32', + }, + { + indexed: true, + internalType: 'address', + name: 'account', + type: 'address', + }, + { + indexed: true, + internalType: 'address', + name: 'sender', + type: 'address', + }, + ], + name: 'RoleGranted', + type: 'event', + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: 'bytes32', + name: 'role', + type: 'bytes32', + }, + { + indexed: true, + internalType: 'address', + name: 'account', + type: 'address', + }, + { + indexed: true, + internalType: 'address', + name: 'sender', + type: 'address', + }, + ], + name: 'RoleRevoked', + type: 'event', + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: 'address', + name: 'implementation', + type: 'address', + }, + ], + name: 'Upgraded', + type: 'event', + }, + { + inputs: [], + name: 'DEFAULT_ADMIN_ROLE', + outputs: [ + { + internalType: 'bytes32', + name: '', + type: 'bytes32', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [], + name: 'UPGRADE_INTERFACE_VERSION', + outputs: [ + { + internalType: 'string', + name: '', + type: 'string', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [], + name: 'accountImplementation', + outputs: [ + { + internalType: 'contract SimpleAccount', + name: '', + type: 'address', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [ + { + internalType: 'address', + name: 'owner', + type: 'address', + }, + ], + name: 'createAccount', + outputs: [ + { + internalType: 'contract SimpleAccount', + name: 'ret', + type: 'address', + }, + ], + stateMutability: 'nonpayable', + type: 'function', + }, + { + inputs: [ + { + internalType: 'address', + name: 'owner', + type: 'address', + }, + ], + name: 'getAccountAddress', + outputs: [ + { + internalType: 'address', + name: '', + type: 'address', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [ + { + internalType: 'bytes32', + name: 'role', + type: 'bytes32', + }, + ], + name: 'getRoleAdmin', + outputs: [ + { + internalType: 'bytes32', + name: '', + type: 'bytes32', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [ + { + internalType: 'bytes32', + name: 'role', + type: 'bytes32', + }, + { + internalType: 'address', + name: 'account', + type: 'address', + }, + ], + name: 'grantRole', + outputs: [], + stateMutability: 'nonpayable', + type: 'function', + }, + { + inputs: [ + { + internalType: 'bytes32', + name: 'role', + type: 'bytes32', + }, + { + internalType: 'address', + name: 'account', + type: 'address', + }, + ], + name: 'hasRole', + outputs: [ + { + internalType: 'bool', + name: '', + type: 'bool', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [], + name: 'initialize', + outputs: [], + stateMutability: 'nonpayable', + type: 'function', + }, + { + inputs: [], + name: 'proxiableUUID', + outputs: [ + { + internalType: 'bytes32', + name: '', + type: 'bytes32', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [ + { + internalType: 'bytes32', + name: 'role', + type: 'bytes32', + }, + { + internalType: 'address', + name: 'callerConfirmation', + type: 'address', + }, + ], + name: 'renounceRole', + outputs: [], + stateMutability: 'nonpayable', + type: 'function', + }, + { + inputs: [ + { + internalType: 'bytes32', + name: 'role', + type: 'bytes32', + }, + { + internalType: 'address', + name: 'account', + type: 'address', + }, + ], + name: 'revokeRole', + outputs: [], + stateMutability: 'nonpayable', + type: 'function', + }, + { + inputs: [ + { + internalType: 'bytes4', + name: 'interfaceId', + type: 'bytes4', + }, + ], + name: 'supportsInterface', + outputs: [ + { + internalType: 'bool', + name: '', + type: 'bool', + }, + ], + stateMutability: 'view', + type: 'function', + }, + { + inputs: [ + { + internalType: 'address', + name: 'newImplementation', + type: 'address', + }, + { + internalType: 'bytes', + name: 'data', + type: 'bytes', + }, + ], + name: 'upgradeToAndCall', + outputs: [], + stateMutability: 'payable', + type: 'function', + }, + { + inputs: [], + name: 'version', + outputs: [ + { + internalType: 'string', + name: '', + type: 'string', + }, + ], + stateMutability: 'pure', + type: 'function', + }, +] as const; diff --git a/packages/dapp-kit-react-privy/src/assets/icons/GoogleLogo/GoogleLogo.tsx b/packages/dapp-kit-react-privy/src/assets/icons/GoogleLogo/GoogleLogo.tsx new file mode 100644 index 00000000..ef6b6df6 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/assets/icons/GoogleLogo/GoogleLogo.tsx @@ -0,0 +1,22 @@ +import { Box, BoxProps } from '@chakra-ui/react'; +import React from 'react'; +import { googleSvg } from '../../svg'; + +type Props = { + boxSize?: string | number; +} & Omit; + +export const GoogleLogo: React.FC = ({ boxSize = '20px', ...props }) => { + return ( + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/assets/icons/GoogleLogo/index.ts b/packages/dapp-kit-react-privy/src/assets/icons/GoogleLogo/index.ts new file mode 100644 index 00000000..c73648f2 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/assets/icons/GoogleLogo/index.ts @@ -0,0 +1 @@ +export * from './GoogleLogo'; diff --git a/packages/dapp-kit-react-privy/src/assets/icons/TwitterLogo/TwitterLogo.tsx b/packages/dapp-kit-react-privy/src/assets/icons/TwitterLogo/TwitterLogo.tsx new file mode 100644 index 00000000..487a3b89 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/assets/icons/TwitterLogo/TwitterLogo.tsx @@ -0,0 +1,27 @@ +import { Box, BoxProps } from '@chakra-ui/react'; +import React from 'react'; +import { twitterSvg } from '../../svg'; + +type Props = { + isDark?: boolean; + boxSize?: string | number; +} & Omit; + +export const TwitterLogo: React.FC = ({ + isDark, + boxSize = '20px', + ...props +}) => { + return ( + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/assets/icons/TwitterLogo/index.ts b/packages/dapp-kit-react-privy/src/assets/icons/TwitterLogo/index.ts new file mode 100644 index 00000000..f817cb74 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/assets/icons/TwitterLogo/index.ts @@ -0,0 +1 @@ +export * from './TwitterLogo'; diff --git a/packages/dapp-kit-react-privy/src/assets/icons/VechainLogo/VechainLogo.tsx b/packages/dapp-kit-react-privy/src/assets/icons/VechainLogo/VechainLogo.tsx new file mode 100644 index 00000000..67c0bef3 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/assets/icons/VechainLogo/VechainLogo.tsx @@ -0,0 +1,17 @@ +import { Icon, IconProps } from '@chakra-ui/react'; +import React from 'react'; + +type Props = { + isDark?: boolean; +} & Omit; + +export const VechainLogo: React.FC = ({ isDark = false, ...props }) => { + return ( + + + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/assets/icons/VechainLogo/index.ts b/packages/dapp-kit-react-privy/src/assets/icons/VechainLogo/index.ts new file mode 100644 index 00000000..757d5708 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/assets/icons/VechainLogo/index.ts @@ -0,0 +1 @@ +export * from './VechainLogo'; diff --git a/packages/dapp-kit-react-privy/src/assets/icons/VechainLogoHorizontal/VechainLogoHorizontal.tsx b/packages/dapp-kit-react-privy/src/assets/icons/VechainLogoHorizontal/VechainLogoHorizontal.tsx new file mode 100644 index 00000000..11520d5f --- /dev/null +++ b/packages/dapp-kit-react-privy/src/assets/icons/VechainLogoHorizontal/VechainLogoHorizontal.tsx @@ -0,0 +1,23 @@ +import { Image, ImageProps } from '@chakra-ui/react'; +import React from 'react'; + +type Props = { + isDark?: boolean; +} & Omit; + +export const VechainLogoHorizontal: React.FC = ({ + isDark = false, + ...props +}) => { + return ( + Vechain Logo Horizontal + ); +}; diff --git a/packages/dapp-kit-react-privy/src/assets/icons/VechainLogoHorizontal/index.ts b/packages/dapp-kit-react-privy/src/assets/icons/VechainLogoHorizontal/index.ts new file mode 100644 index 00000000..f295bae5 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/assets/icons/VechainLogoHorizontal/index.ts @@ -0,0 +1 @@ +export * from './VechainLogoHorizontal'; diff --git a/packages/dapp-kit-react-privy/src/assets/icons/index.ts b/packages/dapp-kit-react-privy/src/assets/icons/index.ts new file mode 100644 index 00000000..95359abc --- /dev/null +++ b/packages/dapp-kit-react-privy/src/assets/icons/index.ts @@ -0,0 +1,4 @@ +export * from './GoogleLogo'; +export * from './TwitterLogo'; +export * from './VechainLogo'; +export * from './VechainLogoHorizontal'; diff --git a/packages/dapp-kit-react-privy/src/assets/index.ts b/packages/dapp-kit-react-privy/src/assets/index.ts new file mode 100644 index 00000000..a6b828eb --- /dev/null +++ b/packages/dapp-kit-react-privy/src/assets/index.ts @@ -0,0 +1,2 @@ +export * from './abi'; +export * from './icons'; diff --git a/packages/dapp-kit-react-privy/src/assets/svg.ts b/packages/dapp-kit-react-privy/src/assets/svg.ts new file mode 100644 index 00000000..1a1ac89d --- /dev/null +++ b/packages/dapp-kit-react-privy/src/assets/svg.ts @@ -0,0 +1,11 @@ +export const twitterSvg = { + dark: ``, + light: ``, +}; + +export const googleSvg = ` + + + + +`; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/AccountModal.tsx b/packages/dapp-kit-react-privy/src/components/AccountModal/AccountModal.tsx similarity index 95% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/AccountModal.tsx rename to packages/dapp-kit-react-privy/src/components/AccountModal/AccountModal.tsx index e0aa200b..6a6ad810 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/AccountModal.tsx +++ b/packages/dapp-kit-react-privy/src/components/AccountModal/AccountModal.tsx @@ -45,6 +45,7 @@ export const AccountModal = ({ isOpen, onClose }: Props) => { const [currentContent, setCurrentContent] = useState('main'); + useEffect(() => { if (isOpen) { setCurrentContent('main'); @@ -65,6 +66,7 @@ export const AccountModal = ({ isOpen, onClose }: Props) => { return ( ); case 'smart-account': @@ -90,8 +92,10 @@ export const AccountModal = ({ isOpen, onClose }: Props) => { isOpen={isOpen} onClose={onClose} isCentered - size="md" + size="sm" scrollBehavior="inside" + trapFocus={false} + autoFocus={false} > diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Components/AccountDetailsButton.tsx b/packages/dapp-kit-react-privy/src/components/AccountModal/Components/AccountDetailsButton.tsx similarity index 98% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Components/AccountDetailsButton.tsx rename to packages/dapp-kit-react-privy/src/components/AccountModal/Components/AccountDetailsButton.tsx index d505636f..2eb8d03d 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Components/AccountDetailsButton.tsx +++ b/packages/dapp-kit-react-privy/src/components/AccountModal/Components/AccountDetailsButton.tsx @@ -75,7 +75,7 @@ export const AccountDetailsButton = ({ )} void; +}; + +export const AccountSelector = ({ wallet, size = 'md', onClick }: Props) => { + const [copied, setCopied] = useState(false); + + const copyToClipboard = async (textToCopy: string) => { + await navigator.clipboard.writeText(textToCopy); + setCopied(true); + setTimeout(() => { + setCopied(false); + }, 2000); + }; + + return ( + + + + + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/components/AccountModal/Components/ActionButton.tsx b/packages/dapp-kit-react-privy/src/components/AccountModal/Components/ActionButton.tsx new file mode 100644 index 00000000..82854e57 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/AccountModal/Components/ActionButton.tsx @@ -0,0 +1,93 @@ +import { + Button, + Box, + HStack, + VStack, + Text, + Icon, + Image, + Tag, +} from '@chakra-ui/react'; +import { ElementType } from 'react'; +import { FadeInView } from '../../common'; + +interface ActionButtonProps { + title: string; + description: string; + onClick: () => void; + leftIcon?: ElementType; + rightIcon?: ElementType; + leftImage?: string; + backgroundColor?: string; + border?: string; + hide?: boolean; + showComingSoon?: boolean; +} + +export const ActionButton = ({ + leftIcon, + rightIcon, + title, + description, + onClick, + leftImage, + hide = false, + showComingSoon = false, + backgroundColor, +}: ActionButtonProps) => { + return ( + + + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Components/index.ts b/packages/dapp-kit-react-privy/src/components/AccountModal/Components/index.ts similarity index 67% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Components/index.ts rename to packages/dapp-kit-react-privy/src/components/AccountModal/Components/index.ts index ca7412b2..a44d2e9a 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Components/index.ts +++ b/packages/dapp-kit-react-privy/src/components/AccountModal/Components/index.ts @@ -1,2 +1,3 @@ export * from './AccountDetailsButton'; export * from './ActionButton'; +export * from './AccountSelector'; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/AccountsContent.tsx b/packages/dapp-kit-react-privy/src/components/AccountModal/Contents/AccountsContent.tsx similarity index 65% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/AccountsContent.tsx rename to packages/dapp-kit-react-privy/src/components/AccountModal/Contents/AccountsContent.tsx index 75cf0ced..accdf597 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/AccountsContent.tsx +++ b/packages/dapp-kit-react-privy/src/components/AccountModal/Contents/AccountsContent.tsx @@ -1,22 +1,20 @@ import { - Button, Grid, HStack, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, - VStack, useColorMode, } from '@chakra-ui/react'; import { useWallet, Wallet } from '../../../hooks'; -import { RxExit } from 'react-icons/rx'; +import { AddressDisplay } from '../../common/AddressDisplay'; import { - AddressDisplay, FadeInViewFromBottom, ModalBackButton, + StickyHeaderContainer, } from '../../common'; -import { AccountDetailsButton } from '../Components'; +import { AccountDetailsButton } from '../Components/AccountDetailsButton'; import { MdAccountCircle, MdOutlineNavigateNext } from 'react-icons/md'; import { AccountModalContentTypes } from '../AccountModal'; import { HiOutlineWallet } from 'react-icons/hi2'; @@ -30,28 +28,28 @@ type Props = { wallet?: Wallet; }; -export const AccountsContent = ({ setCurrentContent, onClose }: Props) => { +export const AccountsContent = ({ setCurrentContent }: Props) => { const { colorMode } = useColorMode(); const isDark = colorMode === 'dark'; - const { disconnect, connection, selectedAccount, connectedWallet } = - useWallet(); + const { connection, selectedAccount, connectedWallet } = useWallet(); return ( - - {'Your accounts'} - + + + {'Your accounts'} + + setCurrentContent('main')} /> + + - setCurrentContent('main')} /> - - - + {connection.isConnectedWithPrivy ? ( { )} - - - - - + ); }; diff --git a/packages/dapp-kit-react-privy/src/components/AccountModal/Contents/MainContent.tsx b/packages/dapp-kit-react-privy/src/components/AccountModal/Contents/MainContent.tsx new file mode 100644 index 00000000..ccfc3cfc --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/AccountModal/Contents/MainContent.tsx @@ -0,0 +1,88 @@ +import { + Button, + Container, + Image, + ModalBody, + ModalCloseButton, + ModalFooter, + ModalHeader, + VStack, + useColorMode, +} from '@chakra-ui/react'; +import { useWallet, Wallet } from '../../../hooks'; +import { RxExit } from 'react-icons/rx'; +import { AddressDisplay, FadeInViewFromBottom } from '../../common'; +import { AccountModalContentTypes } from '../AccountModal'; +import { AccountSelector } from '../Components'; + +type Props = { + setCurrentContent: React.Dispatch< + React.SetStateAction + >; + onClose: () => void; + wallet: Wallet; +}; + +export const MainContent = ({ setCurrentContent, onClose, wallet }: Props) => { + const { colorMode } = useColorMode(); + const isDark = colorMode === 'dark'; + + const { disconnect, connection } = useWallet(); + + return ( + + + {'Account'} + + + + + + + + + + + {connection.isConnectedWithPrivy ? ( + { + setCurrentContent('accounts'); + }} + wallet={wallet} + /> + ) : ( + + )} + + + + + + + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/components/AccountModal/Contents/SmartAccountContent.tsx b/packages/dapp-kit-react-privy/src/components/AccountModal/Contents/SmartAccountContent.tsx new file mode 100644 index 00000000..9b269758 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/AccountModal/Contents/SmartAccountContent.tsx @@ -0,0 +1,175 @@ +import { + Image, + ModalBody, + ModalCloseButton, + VStack, + ModalFooter, + ModalHeader, + Text, + useColorMode, + Link, + Icon, +} from '@chakra-ui/react'; +import { usePrivy, useWallet } from '../../../hooks'; +import React, { useState } from 'react'; +import { AddressDisplay } from '../../common/AddressDisplay'; +import { IoOpenOutline } from 'react-icons/io5'; +import { + FadeInViewFromBottom, + ModalBackButton, + StickyHeaderContainer, +} from '../../common'; +import { AccountModalContentTypes } from '../AccountModal'; +import { getPicassoImage } from '../../../utils'; +import { ActionButton } from '../Components'; +import { MdOutlineNavigateNext } from 'react-icons/md'; +import { FaRegAddressCard, FaUserEdit } from 'react-icons/fa'; + +type Props = { + setCurrentContent: React.Dispatch< + React.SetStateAction + >; +}; + +export const SmartAccountContent = ({ setCurrentContent }: Props) => { + const { smartAccount } = useWallet(); + const { exportWallet } = usePrivy(); + + const walletImage = getPicassoImage(smartAccount.address ?? ''); + + const { colorMode } = useColorMode(); + const isDark = colorMode === 'dark'; + + const [isExpanded, setIsExpanded] = useState(false); + + return ( + + + + {'Smart Account'} + + + setCurrentContent('accounts')} + /> + + + + + + + + + + + + To allow you a smooth onboarding on VeChain we are + helping you manage a wallet. + + + {isExpanded && ( + + + + You have full control and ownership of this + wallet, accessible through your selected + login method. + + + + You can backup your wallet by exporting your + private key. This will allow you to restore + your wallet if you lose your login method. + + + + To experience the full blockchain + experience, transfer your assets to{' '} + + VeWorld Wallet{' '} + + + . + + + + )} + + setIsExpanded(!isExpanded)} + color="gray.500" + fontSize={'sm'} + transition={'all 0.2s'} + _hover={{ textDecoration: 'none' }} + > + {isExpanded ? 'Read less' : 'Read more'} + + + + + { + exportWallet(); + }} + leftIcon={FaUserEdit} + rightIcon={MdOutlineNavigateNext} + /> + + { + // linkPasskey(); + }} + showComingSoon={true} + leftIcon={FaRegAddressCard} + rightIcon={MdOutlineNavigateNext} + /> + { + // linkPasskey(); + }} + showComingSoon={true} + leftIcon={FaRegAddressCard} + rightIcon={MdOutlineNavigateNext} + /> + { + exportWallet(); + }} + leftIcon={FaUserEdit} + rightIcon={MdOutlineNavigateNext} + /> + { + // linkPasskey(); + }} + showComingSoon={true} + leftIcon={FaRegAddressCard} + rightIcon={MdOutlineNavigateNext} + /> + + + + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/WalletSettingsContent.tsx b/packages/dapp-kit-react-privy/src/components/AccountModal/Contents/WalletSettingsContent.tsx similarity index 56% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/WalletSettingsContent.tsx rename to packages/dapp-kit-react-privy/src/components/AccountModal/Contents/WalletSettingsContent.tsx index d622764a..0ed4f053 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/WalletSettingsContent.tsx +++ b/packages/dapp-kit-react-privy/src/components/AccountModal/Contents/WalletSettingsContent.tsx @@ -6,27 +6,39 @@ import { ModalFooter, ModalHeader, useColorMode, + Text, + Divider, } from '@chakra-ui/react'; import { usePrivy, useWallet, Wallet } from '../../../hooks'; import { GiHouseKeys } from 'react-icons/gi'; import { MdOutlineNavigateNext } from 'react-icons/md'; import { IoIosFingerPrint } from 'react-icons/io'; -import { ActionButton } from '../Components'; -import { ModalBackButton } from '../../common'; -import { useDAppKitPrivyConfig } from '../../../DAppKitPrivyProvider'; -import { AddressDisplay, FadeInViewFromBottom } from '../../common'; +import { ActionButton } from '../Components/ActionButton'; +import { + AddressDisplay, + ModalBackButton, + StickyHeaderContainer, +} from '../../common'; +import { useDAppKitPrivyConfig } from '../../../providers/DAppKitPrivyProvider'; +import { FadeInViewFromBottom } from '../../common'; import { AccountModalContentTypes } from '../AccountModal'; import { FaRegAddressCard } from 'react-icons/fa'; +import { RxExit } from 'react-icons/rx'; type Props = { setCurrentContent: (content: AccountModalContentTypes) => void; + onLogoutSuccess: () => void; }; -export const WalletSettingsContent = ({ setCurrentContent }: Props) => { +export const WalletSettingsContent = ({ + setCurrentContent, + onLogoutSuccess, +}: Props) => { const { exportWallet, linkPasskey } = usePrivy(); const { privyConfig } = useDAppKitPrivyConfig(); - const { embeddedWallet, connection, crossAppWallet } = useWallet(); + const { embeddedWallet, connection, crossAppWallet, disconnect } = + useWallet(); // Privy always creates an embedded wallet, so if the user is connected with app we use the other const account: Wallet = connection.isConnectedWithCrossAppPrivy @@ -38,18 +50,23 @@ export const WalletSettingsContent = ({ setCurrentContent }: Props) => { return ( - - {'Wallet Settings'} - + + + {'Wallet'} + + + setCurrentContent('accounts')} + /> + + - setCurrentContent('accounts')} /> - - + { - + + + This is your main wallet and identity. Please be sure to + keep it safe and backed up. + + + + { exportWallet(); }} @@ -94,9 +118,23 @@ export const WalletSettingsContent = ({ setCurrentContent }: Props) => { leftIcon={FaRegAddressCard} rightIcon={MdOutlineNavigateNext} /> + + + + { + disconnect(); + onLogoutSuccess(); + }} + leftIcon={RxExit} + rightIcon={MdOutlineNavigateNext} + backgroundColor={'#ff00000f'} + /> - + ); }; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/index.ts b/packages/dapp-kit-react-privy/src/components/AccountModal/Contents/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/index.ts rename to packages/dapp-kit-react-privy/src/components/AccountModal/Contents/index.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/index.ts b/packages/dapp-kit-react-privy/src/components/AccountModal/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/index.ts rename to packages/dapp-kit-react-privy/src/components/AccountModal/index.ts diff --git a/packages/dapp-kit-react-privy/src/components/ConnectModal/Components/ConnectionButton.tsx b/packages/dapp-kit-react-privy/src/components/ConnectModal/Components/ConnectionButton.tsx new file mode 100644 index 00000000..1e7d2700 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/ConnectModal/Components/ConnectionButton.tsx @@ -0,0 +1,58 @@ +import { Button, Icon, Text } from '@chakra-ui/react'; +import { IconType } from 'react-icons'; +import { ReactElement } from 'react'; + +interface ConnectionButtonProps { + isDark: boolean; + onClick: () => void; + text?: string; + leftIcon?: ReactElement; + icon?: IconType; +} + +export const ConnectionButton = ({ + isDark, + onClick, + leftIcon, + text, + icon, +}: ConnectionButtonProps) => { + if (!text && icon) { + return ( + + ); + } + + if (leftIcon) { + return ( + + ); + } + + return null; +}; diff --git a/packages/dapp-kit-react-privy/src/components/ConnectModal/Components/EmailLoginButton.tsx b/packages/dapp-kit-react-privy/src/components/ConnectModal/Components/EmailLoginButton.tsx new file mode 100644 index 00000000..0dec5ab0 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/ConnectModal/Components/EmailLoginButton.tsx @@ -0,0 +1,86 @@ +import { + Button, + Icon, + Input, + InputGroup, + InputLeftElement, + useColorMode, + useDisclosure, + VStack, +} from '@chakra-ui/react'; +import { useLoginWithEmail } from '@privy-io/react-auth'; +import { useState } from 'react'; +import { MdEmail } from 'react-icons/md'; +import { EmailCodeVerificationModal } from '../../EmailCodeVerificationModal/EmailCodeVerificationModal'; + +export const EmailLoginButton = () => { + const { colorMode } = useColorMode(); + const isDark = colorMode === 'dark'; + // Email login + const [email, setEmail] = useState(''); + + const { sendCode, state: emailState } = useLoginWithEmail({}); + + const emailCodeVerificationModal = useDisclosure(); + + const handleSendCode = async () => { + await sendCode({ email }); + // onClose(); + emailCodeVerificationModal.onOpen(); + }; + + return ( + <> + + + + + + setEmail(e.target.value)} + variant={'loginIn'} + fontSize={'14px'} + fontWeight={'400'} + backgroundColor={isDark ? 'transparent' : '#ffffff'} + border={`1px solid ${isDark ? '#ffffff0a' : '#ebebeb'}`} + p={6} + borderRadius={16} + w={'full'} + pl={12} + /> + + + + + sendCode({ email })} + email={email} + isLoading={emailState.status === 'sending-code'} + /> + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/components/ConnectModal/Components/index.ts b/packages/dapp-kit-react-privy/src/components/ConnectModal/Components/index.ts new file mode 100644 index 00000000..cf395bb8 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/ConnectModal/Components/index.ts @@ -0,0 +1,2 @@ +export * from './ConnectionButton'; +export * from './EmailLoginButton'; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/ConnectModal.tsx b/packages/dapp-kit-react-privy/src/components/ConnectModal/ConnectModal.tsx similarity index 81% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/ConnectModal.tsx rename to packages/dapp-kit-react-privy/src/components/ConnectModal/ConnectModal.tsx index cfb2c388..fc54284e 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/ConnectModal.tsx +++ b/packages/dapp-kit-react-privy/src/components/ConnectModal/ConnectModal.tsx @@ -8,9 +8,8 @@ import { useMediaQuery, } from '@chakra-ui/react'; import { useState, useEffect } from 'react'; -import { MainContent } from './MainContent'; -import { EcosystemContent } from './EcosystemContent'; -import { PrivyAppInfo } from '../../utils'; +import { MainContent } from './Contents/MainContent'; +import { EcosystemContent } from './Contents/EcosystemContent'; type Props = { isOpen: boolean; @@ -18,6 +17,8 @@ type Props = { logo?: string; }; +export type ConnectModalContents = 'main' | 'ecosystem' | 'email-verification'; + export const ConnectModal = ({ isOpen, onClose, logo }: Props) => { const [isDesktop] = useMediaQuery('(min-width: 768px)'); const _modalContentProps = isDesktop @@ -31,10 +32,8 @@ export const ConnectModal = ({ isOpen, onClose, logo }: Props) => { overflowY: 'scroll', overflowX: 'hidden', }; - const [currentContent, setCurrentContent] = useState<'main' | 'ecosystem'>( - 'main', - ); - const [appsInfo, setAppsInfo] = useState>(); + const [currentContent, setCurrentContent] = + useState('main'); useEffect(() => { if (isOpen) { @@ -50,7 +49,6 @@ export const ConnectModal = ({ isOpen, onClose, logo }: Props) => { setCurrentContent={setCurrentContent} onClose={onClose} logo={logo} - setAppsInfo={setAppsInfo} /> ); case 'ecosystem': @@ -58,7 +56,6 @@ export const ConnectModal = ({ isOpen, onClose, logo }: Props) => { ); } @@ -71,6 +68,7 @@ export const ConnectModal = ({ isOpen, onClose, logo }: Props) => { onClose={onClose} isCentered size={'sm'} + trapFocus={false} > diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/EcosystemContent.tsx b/packages/dapp-kit-react-privy/src/components/ConnectModal/Contents/EcosystemContent.tsx similarity index 54% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/EcosystemContent.tsx rename to packages/dapp-kit-react-privy/src/components/ConnectModal/Contents/EcosystemContent.tsx index 20d032bd..ab812871 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/EcosystemContent.tsx +++ b/packages/dapp-kit-react-privy/src/components/ConnectModal/Contents/EcosystemContent.tsx @@ -3,62 +3,57 @@ import { Image, ModalBody, ModalCloseButton, + ModalFooter, ModalHeader, + Spinner, Text, VStack, useColorMode, } from '@chakra-ui/react'; -import { useCrossAppAccounts, usePrivy } from '@privy-io/react-auth'; -import { useWallet } from '../../hooks'; -import React, { useEffect, useState } from 'react'; -import { useDAppKitPrivyConfig } from '../../DAppKitPrivyProvider'; -import { FadeInViewFromRight } from '../common'; -import { ModalBackButton } from '../common'; -import { PrivyAppInfo } from '../../utils'; +import { useCrossAppAccounts } from '@privy-io/react-auth'; +import { FadeInViewFromBottom } from '../../common'; +import { ModalBackButton } from '../../common'; +import { ConnectModalContents } from '../ConnectModal'; +import { useDAppKitPrivyConfig } from '../../../providers'; +import { useFetchAppInfo } from '../../../hooks/useFetchAppInfo'; type Props = { setCurrentContent: React.Dispatch< - React.SetStateAction<'main' | 'ecosystem'> + React.SetStateAction >; onClose: () => void; - appsInfo?: Record; }; -export const EcosystemContent = ({ - setCurrentContent, - onClose, - appsInfo, -}: Props) => { +export const EcosystemContent = ({ setCurrentContent, onClose }: Props) => { const { colorMode } = useColorMode(); const isDark = colorMode === 'dark'; - const { privyConfig } = useDAppKitPrivyConfig(); - const { authenticated } = usePrivy(); - const { loginWithCrossAppAccount, linkCrossAppAccount } = - useCrossAppAccounts(); - const { connection } = useWallet(); - const [crossAppLogin, setCrossAppLogin] = useState(false); + const { loginWithCrossAppAccount } = useCrossAppAccounts(); const connectWithVebetterDaoApps = async (appId: string) => { - setCrossAppLogin(true); await loginWithCrossAppAccount({ appId }); onClose(); }; - useEffect(() => { - if ( - connection.source.type === 'privy-cross-app' && - crossAppLogin && - authenticated - ) { - linkCrossAppAccount({ - appId: `${privyConfig?.ecosystemAppsID?.[0]}`, - }); - } - }, [connection.source.type, crossAppLogin, authenticated]); + const { privyConfig } = useDAppKitPrivyConfig(); + const { data: appsInfo, isLoading } = useFetchAppInfo( + privyConfig?.ecosystemAppsID || [], + ); + + // useEffect(() => { + // if ( + // connection.source.type === 'privy-cross-app' && + // crossAppLogin && + // authenticated + // ) { + // linkCrossAppAccount({ + // appId: `${privyConfig?.ecosystemAppsID?.[0]}`, + // }); + // } + // }, [connection.source.type, crossAppLogin, authenticated]); return ( - + - Select a login app + Select wallet setCurrentContent('main')} /> - - {appsInfo && - Object.entries(appsInfo).map(([appId, appInfo]) => ( + {isLoading && ( + + + + )} + + {!isLoading && appsInfo && ( + + {Object.entries(appsInfo).map(([appId, appInfo]) => ( ))} - + + )} + + {!isLoading && !appsInfo && ( + + No application from VeChain ecosystem is available to + login. + + )} - + + ); }; diff --git a/packages/dapp-kit-react-privy/src/components/ConnectModal/Contents/MainContent.tsx b/packages/dapp-kit-react-privy/src/components/ConnectModal/Contents/MainContent.tsx new file mode 100644 index 00000000..78a64a35 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/ConnectModal/Contents/MainContent.tsx @@ -0,0 +1,204 @@ +import { + Grid, + GridItem, + HStack, + Icon, + Image, + ModalBody, + ModalCloseButton, + ModalFooter, + ModalHeader, + Stack, + Text, + useColorMode, +} from '@chakra-ui/react'; +import { + useCrossAppAccounts, + usePrivy, + useLoginWithOAuth, + useLoginWithPasskey, +} from '@privy-io/react-auth'; +import { useDAppKitPrivyConfig } from '../../../providers/DAppKitPrivyProvider'; +import { FadeInViewFromBottom, VersionFooter } from '../../common'; +import { HiOutlineWallet } from 'react-icons/hi2'; +import { FcGoogle } from 'react-icons/fc'; +import { VechainLogo } from '../../../assets'; +import { CiCircleMore } from 'react-icons/ci'; +import { ConnectModalContents } from '../ConnectModal'; +import { IoIosApps, IoIosFingerPrint } from 'react-icons/io'; +import { useWalletModal } from '@vechain/dapp-kit-react'; +import { VECHAIN_PRIVY_APP_ID } from '../../../utils'; +import { useEffect } from 'react'; +import { useWallet } from '../../../hooks'; +// import { EmailLoginButton } from '../Components/EmailLoginButton'; +import { ConnectionButton } from '../Components'; + +type Props = { + setCurrentContent: React.Dispatch< + React.SetStateAction + >; + onClose: () => void; + logo?: string; +}; + +export const MainContent = ({ setCurrentContent, onClose, logo }: Props) => { + const { colorMode } = useColorMode(); + const isDark = colorMode === 'dark'; + const { connection } = useWallet(); + const { privyConfig } = useDAppKitPrivyConfig(); + + // View more login + const { login: viewMoreLogin } = usePrivy(); + + // Open DappKit modal + const { open: openDappKitModal } = useWalletModal(); + + // Login with Vechain - Cross app account login + const { loginWithCrossAppAccount } = useCrossAppAccounts(); + // Passkey login + const { loginWithPasskey } = useLoginWithPasskey(); + const handleLoginWithPasskey = async () => { + try { + await loginWithPasskey(); + } catch (error) { + console.error(error); + } + }; + + /** + * Login with Google + * Logic for loggin in with OAuth with whitelabel privy + */ + const { + // When the OAuth provider redirects back to your app, the `loading` + // value can be used to show an intermediate state while login completes. + initOAuth, + } = useLoginWithOAuth(); + + useEffect(() => { + if (connection.isConnected) { + onClose(); + } + }, [connection.isConnected]); + + return ( + + + {'Log in or sign up'} + + + logo + + + + + + + {'Select a login method'} + + + + + {/* {privyConfig?.loginMethods?.includes('email') && ( + <> + + + + + + + or + + + + + )} */} + {privyConfig?.loginMethods?.includes('google') && ( + + { + initOAuth({ provider: 'google' }); + }} + leftIcon={ + + } + text="Continue with Google" + /> + + )} + + + { + await loginWithCrossAppAccount({ + appId: VECHAIN_PRIVY_APP_ID, + // appId: 'clz41gcg00e4ay75dmq3uzzgr', + }); + onClose(); + }} + leftIcon={ + + } + text="Login with VeChain" + /> + + + + + { + setCurrentContent('ecosystem'); + }} + icon={IoIosApps} + /> + + + + + + + + + + + + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/index.ts b/packages/dapp-kit-react-privy/src/components/ConnectModal/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/index.ts rename to packages/dapp-kit-react-privy/src/components/ConnectModal/index.ts diff --git a/packages/dapp-kit-react-privy/src/components/EmailCodeVerificationModal/EmailCodeVerificationModal.tsx b/packages/dapp-kit-react-privy/src/components/EmailCodeVerificationModal/EmailCodeVerificationModal.tsx new file mode 100644 index 00000000..dd71adea --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/EmailCodeVerificationModal/EmailCodeVerificationModal.tsx @@ -0,0 +1,309 @@ +import { + Button, + VStack, + Text, + HStack, + PinInput, + PinInputField, + Icon, + useColorMode, + ModalFooter, + ModalBody, + ModalHeader, + ModalCloseButton, + Container, + Modal, + ModalContent, + ModalOverlay, + useMediaQuery, +} from '@chakra-ui/react'; +import { MdEmail } from 'react-icons/md'; +import { FadeInViewFromBottom } from '../common'; +import { useEffect, useState } from 'react'; +import { useLoginWithEmail } from '@privy-io/react-auth'; + +type Props = { + email: string; + onResend: () => void; + isLoading: boolean; + isOpen: boolean; + onClose: () => void; +}; + +export const EmailCodeVerificationModal = ({ + email, + onResend, + isLoading, + isOpen, + onClose, +}: Props) => { + const { colorMode } = useColorMode(); + const isDark = colorMode === 'dark'; + + const [isDesktop] = useMediaQuery('(min-width: 768px)'); + const [code, setCode] = useState(''); + const [error, setError] = useState(null); + + const { loginWithCode } = useLoginWithEmail({}); + + useEffect(() => { + if (code.length === 6) { + loginWithCode({ code }) + .then(() => { + onClose(); + }) + .catch((error) => { + setError(error.message); + }); + } + }, [code]); + + return ( + + + + + + Enter confirmation code + + + {/* setCurrentContent('main')} + /> */} + + + + + + + + Please check {email} for an email from + privy.io and enter your code below. + + + + + + + + + + + + {error && ( + + {error} + + )} + + + + + + Didn't get an email?{' '} + + + + + + + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/components/EmailCodeVerificationModal/index.ts b/packages/dapp-kit-react-privy/src/components/EmailCodeVerificationModal/index.ts new file mode 100644 index 00000000..f33e47d8 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/EmailCodeVerificationModal/index.ts @@ -0,0 +1 @@ +export { EmailCodeVerificationModal } from './EmailCodeVerificationModal'; diff --git a/packages/dapp-kit-react-privy/src/components/LoginLoadingModal/LoginLoadingModal.tsx b/packages/dapp-kit-react-privy/src/components/LoginLoadingModal/LoginLoadingModal.tsx new file mode 100644 index 00000000..a8693d2a --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/LoginLoadingModal/LoginLoadingModal.tsx @@ -0,0 +1,64 @@ +import { + Modal, + ModalBody, + ModalContent, + ModalContentProps, + ModalFooter, + ModalHeader, + ModalOverlay, + Spinner, + Text, + useMediaQuery, + VStack, +} from '@chakra-ui/react'; + +type LoginLoadingModalProps = { + isOpen: boolean; + onClose: () => void; +}; + +export const LoginLoadingModal = ({ + isOpen, + onClose, +}: LoginLoadingModalProps) => { + const [isDesktop] = useMediaQuery('(min-width: 768px)'); + const _modalContentProps = isDesktop + ? {} + : { + position: 'fixed', + bottom: '0', + mb: '0', + maxW: '2xl', + borderRadius: '24px 24px 0px 0px', + overflowY: 'scroll', + overflowX: 'hidden', + }; + + return ( + + + + + + + + + + Connecting... + + + + + + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/components/LoginLoadingModal/index.ts b/packages/dapp-kit-react-privy/src/components/LoginLoadingModal/index.ts new file mode 100644 index 00000000..a80a484e --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/LoginLoadingModal/index.ts @@ -0,0 +1 @@ +export * from './LoginLoadingModal'; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ConfirmationModalContent/ConfirmationModalContent.tsx b/packages/dapp-kit-react-privy/src/components/TransactionModal/ConfirmationModalContent/ConfirmationModalContent.tsx similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ConfirmationModalContent/ConfirmationModalContent.tsx rename to packages/dapp-kit-react-privy/src/components/TransactionModal/ConfirmationModalContent/ConfirmationModalContent.tsx diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ConfirmationModalContent/index.ts b/packages/dapp-kit-react-privy/src/components/TransactionModal/ConfirmationModalContent/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ConfirmationModalContent/index.ts rename to packages/dapp-kit-react-privy/src/components/TransactionModal/ConfirmationModalContent/index.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/CustomModalContent.tsx b/packages/dapp-kit-react-privy/src/components/TransactionModal/CustomModalContent.tsx similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/CustomModalContent.tsx rename to packages/dapp-kit-react-privy/src/components/TransactionModal/CustomModalContent.tsx diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ErrorModalContent/ErrorModalContent.tsx b/packages/dapp-kit-react-privy/src/components/TransactionModal/ErrorModalContent/ErrorModalContent.tsx similarity index 95% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ErrorModalContent/ErrorModalContent.tsx rename to packages/dapp-kit-react-privy/src/components/TransactionModal/ErrorModalContent/ErrorModalContent.tsx index b9c6ad67..c7339eb2 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ErrorModalContent/ErrorModalContent.tsx +++ b/packages/dapp-kit-react-privy/src/components/TransactionModal/ErrorModalContent/ErrorModalContent.tsx @@ -12,7 +12,7 @@ import { ModalAnimation } from '../ModalAnimation'; import { motion } from 'framer-motion'; import { useSmartAccount } from '../../../hooks'; import { EXPLORER_URL } from '../../../utils'; -import { IoCloseOutline } from 'react-icons/io5'; +import { MdOutlineErrorOutline } from 'react-icons/md'; export type ErrorModalContentProps = { title?: ReactNode; @@ -51,7 +51,7 @@ export const ErrorModalContent = ({ }} > diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ErrorModalContent/index.ts b/packages/dapp-kit-react-privy/src/components/TransactionModal/ErrorModalContent/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ErrorModalContent/index.ts rename to packages/dapp-kit-react-privy/src/components/TransactionModal/ErrorModalContent/index.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/LoadingModalContent/LoadingModalContent.tsx b/packages/dapp-kit-react-privy/src/components/TransactionModal/LoadingModalContent/LoadingModalContent.tsx similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/LoadingModalContent/LoadingModalContent.tsx rename to packages/dapp-kit-react-privy/src/components/TransactionModal/LoadingModalContent/LoadingModalContent.tsx diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/LoadingModalContent/index.ts b/packages/dapp-kit-react-privy/src/components/TransactionModal/LoadingModalContent/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/LoadingModalContent/index.ts rename to packages/dapp-kit-react-privy/src/components/TransactionModal/LoadingModalContent/index.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ModalAnimation.tsx b/packages/dapp-kit-react-privy/src/components/TransactionModal/ModalAnimation.tsx similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ModalAnimation.tsx rename to packages/dapp-kit-react-privy/src/components/TransactionModal/ModalAnimation.tsx diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ShareButtons.tsx b/packages/dapp-kit-react-privy/src/components/TransactionModal/ShareButtons.tsx similarity index 95% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ShareButtons.tsx rename to packages/dapp-kit-react-privy/src/components/TransactionModal/ShareButtons.tsx index 7261c438..2729174c 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/ShareButtons.tsx +++ b/packages/dapp-kit-react-privy/src/components/TransactionModal/ShareButtons.tsx @@ -9,8 +9,7 @@ const TWITTER_INJECT = 'https://twitter.com/intent/tweet?text='; const WHATSAPP_INJECT = 'https://wa.me/?text='; -const TELEGRAM_INJECT = - 'https://telegram.me/share/url?url=https://governance.vebetterdao.org&text='; +const TELEGRAM_INJECT = 'https://telegram.me/share/url?url='; // bouncing circle button animation provider const BouncingAnimation = ({ children }: { children: React.ReactNode }) => ( diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/SuccessModalContent/SuccessModalContent.tsx b/packages/dapp-kit-react-privy/src/components/TransactionModal/SuccessModalContent/SuccessModalContent.tsx similarity index 91% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/SuccessModalContent/SuccessModalContent.tsx rename to packages/dapp-kit-react-privy/src/components/TransactionModal/SuccessModalContent/SuccessModalContent.tsx index edf2a79f..6dc0fae2 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/SuccessModalContent/SuccessModalContent.tsx +++ b/packages/dapp-kit-react-privy/src/components/TransactionModal/SuccessModalContent/SuccessModalContent.tsx @@ -43,8 +43,7 @@ export const SuccessModalContent = ({ const explorerUrl = EXPLORER_URL[chainId as keyof typeof EXPLORER_URL]; const socialDescription = - socialDescriptionEncoded ?? - encodeURIComponent(`🚀 Just transacted on VeChain! 📷🌿 \n\n`); + socialDescriptionEncoded ?? `${explorerUrl}/${txId}`; return ( @@ -76,9 +75,7 @@ export const SuccessModalContent = ({ )} {showSocialButtons && ( - - {'Share your success on social media'} - + {'Share your transaction'} )} diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/SuccessModalContent/index.ts b/packages/dapp-kit-react-privy/src/components/TransactionModal/SuccessModalContent/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/SuccessModalContent/index.ts rename to packages/dapp-kit-react-privy/src/components/TransactionModal/SuccessModalContent/index.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/TransactionModal.tsx b/packages/dapp-kit-react-privy/src/components/TransactionModal/TransactionModal.tsx similarity index 99% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/TransactionModal.tsx rename to packages/dapp-kit-react-privy/src/components/TransactionModal/TransactionModal.tsx index 4bc3515d..53e4f341 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/TransactionModal.tsx +++ b/packages/dapp-kit-react-privy/src/components/TransactionModal/TransactionModal.tsx @@ -111,6 +111,7 @@ export const TransactionModal = ({ trapFocus={false} closeOnOverlayClick={status !== 'pending'} isCentered={true} + size="sm" > diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/index.ts b/packages/dapp-kit-react-privy/src/components/TransactionModal/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionModal/index.ts rename to packages/dapp-kit-react-privy/src/components/TransactionModal/index.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionToast/TransactionToast.tsx b/packages/dapp-kit-react-privy/src/components/TransactionToast/TransactionToast.tsx similarity index 74% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionToast/TransactionToast.tsx rename to packages/dapp-kit-react-privy/src/components/TransactionToast/TransactionToast.tsx index 71d81c75..ae17e7b3 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionToast/TransactionToast.tsx +++ b/packages/dapp-kit-react-privy/src/components/TransactionToast/TransactionToast.tsx @@ -1,15 +1,14 @@ import { - Modal, - ModalContent, + Box, VStack, Text, Link, - ModalCloseButton, - ModalBody, - Spinner, Icon, HStack, Heading, + Spinner, + useColorMode, + Button, } from '@chakra-ui/react'; import React, { useMemo } from 'react'; import { useSmartAccount } from '../../hooks'; @@ -41,6 +40,9 @@ export const TransactionToast = ({ error, resetStatus, }: TransactionToastProps) => { + const { colorMode } = useColorMode(); + const isDark = colorMode === 'dark'; + const { chainId } = useSmartAccount(); const explorerUrl = EXPLORER_URL[chainId as keyof typeof EXPLORER_URL]; @@ -110,31 +112,35 @@ export const TransactionToast = ({ ); }, [status, txReceipt, explorerUrl, error]); - if (!toastContent) return null; + if (!toastContent || !isOpen) return null; return ( - - - - - {toastContent} - - - + + {toastContent} + {!statusConfig[status].closeDisabled && ( + + )} + + ); }; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionToast/index.ts b/packages/dapp-kit-react-privy/src/components/TransactionToast/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/TransactionToast/index.ts rename to packages/dapp-kit-react-privy/src/components/TransactionToast/index.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/WalletButton/WalletButton.tsx b/packages/dapp-kit-react-privy/src/components/WalletButton/WalletButton.tsx similarity index 58% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/WalletButton/WalletButton.tsx rename to packages/dapp-kit-react-privy/src/components/WalletButton/WalletButton.tsx index e8e06b9a..0d8e1c78 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/WalletButton/WalletButton.tsx +++ b/packages/dapp-kit-react-privy/src/components/WalletButton/WalletButton.tsx @@ -2,17 +2,42 @@ import { Button, HStack, Image, Text, useDisclosure } from '@chakra-ui/react'; import { useWallet } from '../../hooks'; import { ConnectModal } from '../ConnectModal'; import { AccountModal } from '../AccountModal'; -import { useDAppKitPrivyConfig } from '../../DAppKitPrivyProvider'; +import { useDAppKitPrivyConfig } from '../../providers/DAppKitPrivyProvider'; import { humanAddress } from '../../utils'; +import { useLoginWithOAuth, usePrivy } from '@privy-io/react-auth'; +import { useEffect } from 'react'; +import { LoginLoadingModal } from '../LoginLoadingModal'; export const WalletButton = () => { const { connection, selectedAccount } = useWallet(); + const { authenticated, user, createWallet } = usePrivy(); const connectModal = useDisclosure(); const accountModal = useDisclosure(); const { privyConfig } = useDAppKitPrivyConfig(); + const { loading: isLoadingLoginOAuth } = useLoginWithOAuth({}); + + // If the user authenticates directly with google, we need to wait for success + // and if it's first time we create an embedded wallet for the user + useEffect(() => { + const embeddedWallet = user?.wallet?.address; + + const asyncCreateWallet = async () => { + await createWallet(); + }; + + if (authenticated && !isLoadingLoginOAuth && !embeddedWallet) { + try { + asyncCreateWallet(); + } catch (error) { + // if user already has an embedded wallet, this will throw an error + console.error(error); + } + } + }, [authenticated, isLoadingLoginOAuth, user]); + return ( <> {connection.isConnected ? ( @@ -45,6 +70,11 @@ export const WalletButton = () => { isOpen={accountModal.isOpen} onClose={accountModal.onClose} /> + + {}} + /> ); }; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/WalletButton/index.ts b/packages/dapp-kit-react-privy/src/components/WalletButton/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/WalletButton/index.ts rename to packages/dapp-kit-react-privy/src/components/WalletButton/index.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/AddressDisplay.tsx b/packages/dapp-kit-react-privy/src/components/common/AddressDisplay.tsx similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/AddressDisplay.tsx rename to packages/dapp-kit-react-privy/src/components/common/AddressDisplay.tsx diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/ModalBackButton.tsx b/packages/dapp-kit-react-privy/src/components/common/ModalBackButton.tsx similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/ModalBackButton.tsx rename to packages/dapp-kit-react-privy/src/components/common/ModalBackButton.tsx diff --git a/packages/dapp-kit-react-privy/src/components/common/Motion/FadeInView.tsx b/packages/dapp-kit-react-privy/src/components/common/Motion/FadeInView.tsx new file mode 100644 index 00000000..66e57f23 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/common/Motion/FadeInView.tsx @@ -0,0 +1,18 @@ +import { motion } from 'framer-motion'; +import { ReactNode } from 'react'; + +type Props = { + children: ReactNode; +}; + +export const FadeInView = ({ children }: Props) => { + return ( + + {children} + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/FadeInViewFromBottom.tsx b/packages/dapp-kit-react-privy/src/components/common/Motion/FadeInViewFromBottom.tsx similarity index 90% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/FadeInViewFromBottom.tsx rename to packages/dapp-kit-react-privy/src/components/common/Motion/FadeInViewFromBottom.tsx index 4133d7c3..810ca557 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/FadeInViewFromBottom.tsx +++ b/packages/dapp-kit-react-privy/src/components/common/Motion/FadeInViewFromBottom.tsx @@ -8,7 +8,7 @@ type Props = { export const FadeInViewFromBottom = ({ children }: Props) => { return ( diff --git a/packages/dapp-kit-react-privy/src/components/common/Motion/FadeInViewFromLeft.tsx b/packages/dapp-kit-react-privy/src/components/common/Motion/FadeInViewFromLeft.tsx new file mode 100644 index 00000000..8b7c7d89 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/common/Motion/FadeInViewFromLeft.tsx @@ -0,0 +1,18 @@ +import { motion } from 'framer-motion'; +import React, { ReactNode } from 'react'; + +type Props = { + children: ReactNode; +}; + +export const FadeInViewFromLeft = ({ children }: Props) => { + return ( + + {children} + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/FadeInViewFromRight.tsx b/packages/dapp-kit-react-privy/src/components/common/Motion/FadeInViewFromRight.tsx similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/FadeInViewFromRight.tsx rename to packages/dapp-kit-react-privy/src/components/common/Motion/FadeInViewFromRight.tsx diff --git a/packages/dapp-kit-react-privy/src/components/common/Motion/index.ts b/packages/dapp-kit-react-privy/src/components/common/Motion/index.ts new file mode 100644 index 00000000..8e744c80 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/common/Motion/index.ts @@ -0,0 +1,4 @@ +export * from './FadeInView'; +export * from './FadeInViewFromBottom'; +export * from './FadeInViewFromLeft'; +export * from './FadeInViewFromRight'; diff --git a/packages/dapp-kit-react-privy/src/components/common/StickyHeaderContainer.tsx b/packages/dapp-kit-react-privy/src/components/common/StickyHeaderContainer.tsx new file mode 100644 index 00000000..34c40645 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/common/StickyHeaderContainer.tsx @@ -0,0 +1,24 @@ +import { Box, useColorMode, useMediaQuery } from '@chakra-ui/react'; + +export const StickyHeaderContainer = ({ + children, +}: { + children: React.ReactNode; +}) => { + const [isDesktop] = useMediaQuery('(min-width: 768px)'); + const { colorMode } = useColorMode(); + const isDark = colorMode === 'dark'; + + return ( + + {children} + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/components/common/VersionFooter.tsx b/packages/dapp-kit-react-privy/src/components/common/VersionFooter.tsx new file mode 100644 index 00000000..b44f7d26 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/common/VersionFooter.tsx @@ -0,0 +1,33 @@ +import { HStack, Link, StackProps, useColorMode } from '@chakra-ui/react'; +import React from 'react'; +import { VechainLogoHorizontal } from '../../assets'; +import packageJson from '../../../package.json'; + +type Props = {} & Omit; + +export const VersionFooter = ({ ...props }: Props) => { + const { colorMode } = useColorMode(); + const isDark = colorMode === 'dark'; + + return ( + + + + v{packageJson.version} + + + ); +}; diff --git a/packages/dapp-kit-react-privy/src/components/common/index.ts b/packages/dapp-kit-react-privy/src/components/common/index.ts new file mode 100644 index 00000000..44bbdd26 --- /dev/null +++ b/packages/dapp-kit-react-privy/src/components/common/index.ts @@ -0,0 +1,5 @@ +export * from './Motion'; +export * from './ModalBackButton'; +export * from './AddressDisplay'; +export * from './VersionFooter'; +export * from './StickyHeaderContainer'; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/index.ts b/packages/dapp-kit-react-privy/src/components/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/index.ts rename to packages/dapp-kit-react-privy/src/components/index.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/index.ts b/packages/dapp-kit-react-privy/src/hooks/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/index.ts rename to packages/dapp-kit-react-privy/src/hooks/index.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useCachedVechainDomain.ts b/packages/dapp-kit-react-privy/src/hooks/useCachedVechainDomain.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useCachedVechainDomain.ts rename to packages/dapp-kit-react-privy/src/hooks/useCachedVechainDomain.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useFetchAppInfo.ts b/packages/dapp-kit-react-privy/src/hooks/useFetchAppInfo.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useFetchAppInfo.ts rename to packages/dapp-kit-react-privy/src/hooks/useFetchAppInfo.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useGetSmartAccountAddress.tsx b/packages/dapp-kit-react-privy/src/hooks/useGetSmartAccountAddress.tsx similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useGetSmartAccountAddress.tsx rename to packages/dapp-kit-react-privy/src/hooks/useGetSmartAccountAddress.tsx diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useSendTransaction.ts b/packages/dapp-kit-react-privy/src/hooks/useSendTransaction.ts similarity index 96% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useSendTransaction.ts rename to packages/dapp-kit-react-privy/src/hooks/useSendTransaction.ts index 2365fc91..4142cba7 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useSendTransaction.ts +++ b/packages/dapp-kit-react-privy/src/hooks/useSendTransaction.ts @@ -4,8 +4,8 @@ import { useTxReceipt } from './useTxReceipt'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { useConnex } from '@vechain/dapp-kit-react'; import { Transaction } from 'thor-devkit'; -import { useDAppKitPrivyConfig } from '../DAppKitPrivyProvider'; -import { useWallet, Wallet } from './useWallet'; +import { useDAppKitPrivyConfig } from '../providers/DAppKitPrivyProvider'; +import { useWallet } from './useWallet'; import { useSmartAccount } from './useSmartAccount'; import { EnhancedClause, @@ -62,14 +62,14 @@ const estimateTxGasWithNext = async ( /** * Props for the {@link useSendTransaction} hook - * @param signerAccount the signer account to use + * @param signerAccountAddress the signer account to use * @param clauses clauses to send in the transaction * @param onTxConfirmed callback to run when the tx is confirmed * @param onTxFailedOrCancelled callback to run when the tx fails or is cancelled * @param suggestedMaxGas the suggested max gas for the transaction */ type UseSendTransactionProps = { - signerAccount?: Wallet | null; + signerAccountAddress?: string | null; clauses?: | EnhancedClause[] | (() => EnhancedClause[]) @@ -118,7 +118,7 @@ export type UseSendTransactionReturnValue = { * @returns see {@link UseSendTransactionReturnValue} */ export const useSendTransaction = ({ - signerAccount, + signerAccountAddress, clauses, onTxConfirmed, onTxFailedOrCancelled, @@ -189,12 +189,12 @@ export const useSendTransaction = ({ ); } - if (signerAccount) { + if (signerAccountAddress) { let gasLimitNext; try { gasLimitNext = await estimateTxGasWithNext( [...clauses], - signerAccount.address, + signerAccountAddress, undefined, nodeUrl, ); @@ -209,14 +209,14 @@ export const useSendTransaction = ({ // specify gasLimit if we have a suggested or an estimation if (parsedGasLimit > 0) return transaction - .signer(signerAccount.address) + .signer(signerAccountAddress) .gas(parseInt(parsedGasLimit.toString())) .request(); - else return transaction.signer(signerAccount.address).request(); + else return transaction.signer(signerAccountAddress).request(); } return transaction.request(); }, - [vendor, signerAccount, suggestedMaxGas, nodeUrl, smartAccount], + [vendor, signerAccountAddress, suggestedMaxGas, nodeUrl, smartAccount], ); /** diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useSmartAccount.tsx b/packages/dapp-kit-react-privy/src/hooks/useSmartAccount.tsx similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useSmartAccount.tsx rename to packages/dapp-kit-react-privy/src/hooks/useSmartAccount.tsx diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useTxReceipt.ts b/packages/dapp-kit-react-privy/src/hooks/useTxReceipt.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useTxReceipt.ts rename to packages/dapp-kit-react-privy/src/hooks/useTxReceipt.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useWallet.ts b/packages/dapp-kit-react-privy/src/hooks/useWallet.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useWallet.ts rename to packages/dapp-kit-react-privy/src/hooks/useWallet.ts diff --git a/packages/dapp-kit-react-privy/src/index.ts b/packages/dapp-kit-react-privy/src/index.ts index a553082a..d662ddde 100644 --- a/packages/dapp-kit-react-privy/src/index.ts +++ b/packages/dapp-kit-react-privy/src/index.ts @@ -1 +1,5 @@ -export * from './DAppKitPrivyProvider'; +export * from './assets'; +export * from './components'; +export * from './hooks'; +export * from './providers'; +export * from './utils'; diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/DAppKitPrivyProvider.tsx b/packages/dapp-kit-react-privy/src/providers/DAppKitPrivyProvider.tsx similarity index 89% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/DAppKitPrivyProvider.tsx rename to packages/dapp-kit-react-privy/src/providers/DAppKitPrivyProvider.tsx index 80dc5627..0fac9696 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/DAppKitPrivyProvider.tsx +++ b/packages/dapp-kit-react-privy/src/providers/DAppKitPrivyProvider.tsx @@ -1,11 +1,13 @@ import { createContext, ReactNode, useContext } from 'react'; -import { PrivyProvider as BasePrivyProvider } from '@privy-io/react-auth'; -import { DAppKitProvider } from '@vechain/dapp-kit-react'; -import { SmartAccountProvider } from './hooks'; +import { + PrivyProvider as BasePrivyProvider, + WalletListEntry, +} from '@privy-io/react-auth'; +import { DAppKitProvider, DAppKitUIOptions } from '@vechain/dapp-kit-react'; +import { SmartAccountProvider } from '../hooks'; import { ChakraProvider } from '@chakra-ui/react'; -import { Theme } from './theme'; -import { PrivyLoginMethod } from './utils'; -import { DAppKitUIOptions } from '@vechain/dapp-kit-ui'; +import { Theme } from '../theme'; +import { PrivyLoginMethod } from '../utils'; type Props = { children: ReactNode; @@ -13,6 +15,7 @@ type Props = { appId: string; clientId: string; appearance: { + walletList: WalletListEntry[]; theme: 'dark' | 'light'; accentColor: `#${string}`; loginMessage: string; @@ -115,7 +118,9 @@ export const DAppKitPrivyProvider = ({ dappKitConfig.walletConnectOptions } themeMode={dappKitConfig.themeMode} - themeVariables={{}} + themeVariables={{ + '--vdk-modal-z-index': '1000000', + }} > ({ + bg: 'transparent', + border: `1px solid ${colorMode === 'dark' ? '#ffffff29' : '#ebebeb'}`, + _hover: { + borderColor: colorMode === 'dark' ? '#ffffff50' : '#dedede', + bg: colorMode === 'dark' ? 'whiteAlpha.50' : 'blackAlpha.50', + }, + _active: { + transform: 'scale(0.98)', + }, + transition: 'all 0.2s', + })), }; export const buttonTheme = defineStyleConfig({ diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/card.ts b/packages/dapp-kit-react-privy/src/theme/card.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/card.ts rename to packages/dapp-kit-react-privy/src/theme/card.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/index.ts b/packages/dapp-kit-react-privy/src/theme/index.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/index.ts rename to packages/dapp-kit-react-privy/src/theme/index.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/modal.ts b/packages/dapp-kit-react-privy/src/theme/modal.ts similarity index 91% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/modal.ts rename to packages/dapp-kit-react-privy/src/theme/modal.ts index 4409748f..0cc04cf7 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/modal.ts +++ b/packages/dapp-kit-react-privy/src/theme/modal.ts @@ -11,6 +11,10 @@ const variants = { base: (props: StyleFunctionProps) => definePartsStyle({ dialog: { + scrollbarWidth: 'none', + overflow: 'scroll', + overflowX: 'hidden', + maxHeight: '520px', borderRadius: '24px', backgroundColor: props.colorMode === 'dark' ? '#1f1f1e' : 'white', diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/theme.ts b/packages/dapp-kit-react-privy/src/theme/theme.ts similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/theme.ts rename to packages/dapp-kit-react-privy/src/theme/theme.ts diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/utils/Constants.tsx b/packages/dapp-kit-react-privy/src/utils/Constants.tsx similarity index 98% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/utils/Constants.tsx rename to packages/dapp-kit-react-privy/src/utils/Constants.tsx index fbc07fc5..aaed24b4 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/utils/Constants.tsx +++ b/packages/dapp-kit-react-privy/src/utils/Constants.tsx @@ -32,6 +32,8 @@ export const EXPLORER_URL = { 'https://explore-testnet.vechain.org/transactions', } as const; +export const VECHAIN_PRIVY_APP_ID = 'cm4wxxujb022fyujl7g0thb21'; + export const WALLET_INFOS: SocialInfo[] = [ { code: 'veworld', diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/utils/FormattingUtils.tsx b/packages/dapp-kit-react-privy/src/utils/FormattingUtils.tsx similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/utils/FormattingUtils.tsx rename to packages/dapp-kit-react-privy/src/utils/FormattingUtils.tsx diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/utils/SmartAccountTransactionForwarder.tsx b/packages/dapp-kit-react-privy/src/utils/RandomTxForwarder.tsx similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/utils/SmartAccountTransactionForwarder.tsx rename to packages/dapp-kit-react-privy/src/utils/RandomTxForwarder.tsx diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/utils/Types.tsx b/packages/dapp-kit-react-privy/src/utils/Types.tsx similarity index 100% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/utils/Types.tsx rename to packages/dapp-kit-react-privy/src/utils/Types.tsx diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/utils/index.ts b/packages/dapp-kit-react-privy/src/utils/index.ts similarity index 69% rename from packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/utils/index.ts rename to packages/dapp-kit-react-privy/src/utils/index.ts index 99cbe6d3..57b7b9ff 100644 --- a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/utils/index.ts +++ b/packages/dapp-kit-react-privy/src/utils/index.ts @@ -1,5 +1,5 @@ export * from './Constants'; export * from './FormattingUtils'; -export * from './SmartAccountTransactionForwarder'; +export * from './RandomTxForwarder'; export * from './Types'; export * from './Constants'; diff --git a/yarn.lock b/yarn.lock index b584f0e7..fccae3b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5764,10 +5764,10 @@ dependencies: zod "^3.21.4" -"@privy-io/js-sdk-core@0.36.0": - version "0.36.0" - resolved "https://registry.yarnpkg.com/@privy-io/js-sdk-core/-/js-sdk-core-0.36.0.tgz#4ff80437a23a831032336446cd0cab7e89610882" - integrity sha512-C3zoCzcBOOCm8zZBqz2MmPpZ/c5fyCAZbscIEGpiznHhP3916dbNNVhFUZm05UGpylaf7eJflJ3VmYgkyRJT5A== +"@privy-io/js-sdk-core@0.36.1": + version "0.36.1" + resolved "https://registry.yarnpkg.com/@privy-io/js-sdk-core/-/js-sdk-core-0.36.1.tgz#5cb24e8b977e747feeba1291ab901c47b003bf91" + integrity sha512-EPa8pYL+fh2Vj6s9ZvxowPiuNcqftXMydcAqGq974fz+ksjyB8kmTY0KHipifH7d8n6a+hqiOts9eE6ds3xyYg== dependencies: "@ethersproject/abstract-signer" "^5.7.0" "@ethersproject/bignumber" "^5.7.0" @@ -5796,10 +5796,10 @@ libphonenumber-js "^1.10.31" zod "^3.22.4" -"@privy-io/react-auth@1.98.2": - version "1.98.2" - resolved "https://registry.yarnpkg.com/@privy-io/react-auth/-/react-auth-1.98.2.tgz#8760ba78c5ef77085e18962feeae734d48ac9132" - integrity sha512-PWHs4GNHug3b5NO/qK9er/IbhK/QSXbuCB8X9YkpeVC0IHK6MTeGPBc6kCnUFaozfbiOBSJMuMIFQzSxAvBS/w== +"@privy-io/react-auth@1.98.4": + version "1.98.4" + resolved "https://registry.yarnpkg.com/@privy-io/react-auth/-/react-auth-1.98.4.tgz#7e4458b4866ec90a2a56b3f7a620f5be475ff72c" + integrity sha512-Uj91SnwqB0JORTIxy2SDqMB7f0vuGRmPTKftoC6N2tXGvOl0swMH/vWfawR+7jwFr+Y0VpPTRQOHzyjYfUHJLA== dependencies: "@coinbase/wallet-sdk" "4.0.3" "@ethersproject/abstract-signer" "^5.7.0" @@ -5817,7 +5817,7 @@ "@heroicons/react" "^2.1.1" "@marsidev/react-turnstile" "^0.4.1" "@metamask/eth-sig-util" "^6.0.0" - "@privy-io/js-sdk-core" "0.36.0" + "@privy-io/js-sdk-core" "0.36.1" "@simplewebauthn/browser" "^9.0.1" "@solana/wallet-adapter-base" "^0.9.23" "@solana/wallet-standard-wallet-adapter-base" "^1.1.2" @@ -10009,7 +10009,7 @@ buffer-from@^1.0.0: resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5" integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ== -"buffer-polyfill@npm:buffer@^6.0.3": +"buffer-polyfill@npm:buffer@^6.0.3", buffer@^6.0.3: version "6.0.3" resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6" integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA== @@ -10030,14 +10030,6 @@ buffer@5.7.1, buffer@^5.5.0, buffer@^5.7.1: base64-js "^1.3.1" ieee754 "^1.1.13" -buffer@^6.0.3: - version "6.0.3" - resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6" - integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA== - dependencies: - base64-js "^1.3.1" - ieee754 "^1.2.1" - bufferutil@^4.0.1: version "4.0.8" resolved "https://registry.yarnpkg.com/bufferutil/-/bufferutil-4.0.8.tgz#1de6a71092d65d7766c4d8a522b261a6e787e8ea" @@ -19889,16 +19881,7 @@ string-hash@^1.1.1: resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A== -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -20009,14 +19992,7 @@ stringify-entities@^4.0.0: character-entities-html4 "^2.0.0" character-entities-legacy "^3.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -21583,9 +21559,9 @@ viem@^2.21.45: ws "8.18.0" viem@^2.21.9: - version "2.21.55" - resolved "https://registry.yarnpkg.com/viem/-/viem-2.21.55.tgz#a57ad31fcf2a0f6c011b1909f02c94421ec4f781" - integrity sha512-PgXew7C11cAuEtOSgRyQx2kJxEOPUwIwZA9dMglRByqJuFVA7wSGZZOOo/93iylAA8E15bEdqy9xulU3oKZ70Q== + version "2.21.56" + resolved "https://registry.yarnpkg.com/viem/-/viem-2.21.56.tgz#2b5b60794e5c1162b3b440e457d777402ebd799d" + integrity sha512-lHcVd1sFDlVWu482Sb4j22a5+hXJWE8HwqLgXDH49L7mfdA5QHfkQgeyl7K2kKg6pBbPbxIwd9so/u3LcynKTg== dependencies: "@noble/curves" "1.7.0" "@noble/hashes" "1.6.1" @@ -22330,7 +22306,7 @@ wordwrapjs@^4.0.0: reduce-flatten "^2.0.0" typical "^5.2.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -22348,15 +22324,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"