-
Notifications
You must be signed in to change notification settings - Fork 68
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
6,358 additions
and
5,863 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { createConfig, http } from 'wagmi' | ||
| import { arbitrumSepolia, base, mainnet, optimism } from 'wagmi/chains' | ||
| import { injected, metaMask, safe, walletConnect } from 'wagmi/connectors' | ||
|
|
||
| const projectId = '75879ee8d0e1f47758a4bb4577361f08' | ||
|
|
||
| export const config = createConfig({ | ||
| chains: [mainnet, base], | ||
| connectors: [walletConnect({ projectId: projectId })], | ||
| transports: { | ||
| [mainnet.id]: http(), | ||
| [base.id]: http(), | ||
| [arbitrumSepolia.id]: http(), | ||
| }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { Avatar, AvatarFallback } from 'uikit' | ||
|
|
||
| interface AccountAvatarProps { | ||
| size?: number | ||
| } | ||
| export function AccountAvatar({ size = 24 }: AccountAvatarProps) { | ||
| return ( | ||
| <Avatar size={size}> | ||
| <AvatarFallback | ||
| bgGradientX={['red500', 'orange500', 'yellow400']} | ||
| borderNone | ||
| ></AvatarFallback> | ||
| </Avatar> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { Box } from '@fower/react' | ||
| import { LogOut } from 'lucide-react' | ||
| import { useAccount, useDisconnect } from 'wagmi' | ||
| import { Button, Menu, MenuItem, Popover, PopoverContent, PopoverTrigger } from 'uikit' | ||
| import { AccountAvatar } from './AccountAvatar' | ||
| import { WalletInfo } from './WalletInfo' | ||
|
|
||
| export function AccountPopover() { | ||
| const { address = '' } = useAccount() | ||
|
|
||
| const name = address.slice(0, 3) + '...' + address.slice(-3) | ||
| return ( | ||
| <Popover placement="bottom-end"> | ||
| <PopoverTrigger asChild cursorPointer> | ||
| <Box cursorPointer toCenterY gap1 bgNeutral100 px2 py2 roundedLG> | ||
| <AccountAvatar /> | ||
| {address && <Box neutral500>{name}</Box>} | ||
| </Box> | ||
| </PopoverTrigger> | ||
| <PopoverContent w-300 p5 bgNeutral100--L20> | ||
| <WalletInfo /> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { Box } from '@fower/react' | ||
| import { useConnect } from 'wagmi' | ||
| import { Button } from 'uikit' | ||
| import { IconWalletConnect } from '@penx/icons' | ||
|
|
||
| export function ConnectButton() { | ||
| const { connectors, connect } = useConnect() | ||
|
|
||
| return connectors.map((connector) => ( | ||
| <Button | ||
| key={connector.uid} | ||
| colorScheme="neutral900" | ||
| textSM | ||
| variant="light" | ||
| onClick={() => connect({ connector })} | ||
| > | ||
| <IconWalletConnect sky500 /> | ||
| <Box>Connect Wallet</Box> | ||
| </Button> | ||
| )) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import { useEffect, useState } from 'react' | ||
| import { Box } from '@fower/react' | ||
| import { useAccount, useChainId, useDisconnect, useSignMessage } from 'wagmi' | ||
| import { Button, Modal, ModalContent, modalController, ModalOverlay, Spinner, toast } from 'uikit' | ||
| import { ModalNames } from '@penx/constants' | ||
| import { useHandleSignIn } from './hooks/useHandleSignIn' | ||
|
|
||
| export function SiweModal() { | ||
| const { isConnected, address = '' } = useAccount() | ||
| const { disconnect } = useDisconnect() | ||
| const [loading, setLoading] = useState(false) | ||
|
|
||
| const handleSignIn = useHandleSignIn() | ||
|
|
||
| useEffect(() => { | ||
| const token = localStorage.getItem('PENX_TOKEN') | ||
| if (isConnected && !token) { | ||
| modalController.open(ModalNames.SIWE) | ||
| } | ||
| }, [isConnected]) | ||
|
|
||
| const shortenAddress = `${address?.slice(0, 18)}...${address?.slice(-4)}` | ||
|
|
||
| return ( | ||
| <Modal name={ModalNames.SIWE} closeOnOverlayClick={false}> | ||
| <ModalOverlay /> | ||
| <ModalContent w={['96%', 360]} px={[20, 20]} py0 column gap4> | ||
| <Box column toCenterX> | ||
| <Box fontSemibold text2XL leadingNone> | ||
| Sign in to PenX | ||
| </Box> | ||
| </Box> | ||
|
|
||
| <Box toCenter> | ||
| <Box gray800 py1 px3 bgNeutral100 roundedFull inlineFlex> | ||
| {shortenAddress} | ||
| </Box> | ||
| </Box> | ||
|
|
||
| <Box textCenter neutral500 leadingTight textSM> | ||
| Sign this message to prove you own this wallet and proceed. Canceling will disconnect you. | ||
| </Box> | ||
|
|
||
| <Box textCenter green500 leadingTight textXS> | ||
| Please verify by signing in with mobile wallet. | ||
| </Box> | ||
|
|
||
| <Box toCenterY gap2 mt2> | ||
| <Button | ||
| type="button" | ||
| roundedFull | ||
| colorScheme="white" | ||
| flex-1 | ||
| onClick={() => { | ||
| modalController.close(ModalNames.SIWE) | ||
| disconnect() | ||
| }} | ||
| > | ||
| Cancel | ||
| </Button> | ||
|
|
||
| <Button | ||
| roundedFull | ||
| gap2 | ||
| flex-1 | ||
| disabled={loading} | ||
| onClick={async () => { | ||
| if (loading) return | ||
| try { | ||
| setLoading(true) | ||
| await handleSignIn() | ||
| modalController.close(ModalNames.SIWE) | ||
| setLoading(false) | ||
| } catch (error) { | ||
| setLoading(false) | ||
| toast.error((error as any)?.message || 'Something went wrong') | ||
| console.log('====error:', error) | ||
| } | ||
| }} | ||
| > | ||
| {loading && <Spinner white square5 />} | ||
| <Box>Sign in</Box> | ||
| </Button> | ||
| </Box> | ||
| </ModalContent> | ||
| </Modal> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { useAccount } from 'wagmi' | ||
| import { AccountPopover } from './AccountPopover' | ||
| import { ConnectButton } from './ConnectButton' | ||
|
|
||
| export function WalletConnect() { | ||
| const { isConnected } = useAccount() | ||
| if (isConnected) return <AccountPopover /> | ||
| return <ConnectButton /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { Box } from '@fower/react' | ||
| import { Copy, Power, Wallet } from 'lucide-react' | ||
| import { useAccount, useDisconnect } from 'wagmi' | ||
| import { Button, Skeleton, toast } from 'uikit' | ||
| import { precision } from '@penx/math' | ||
| import { useCopyToClipboard } from '@penx/shared' | ||
| import { AccountAvatar } from './AccountAvatar' | ||
| import { useEthBalance } from './hooks/useEthBalance' | ||
|
|
||
| export function WalletInfo() { | ||
| const { data, isLoading } = useEthBalance() | ||
| const { disconnect } = useDisconnect() | ||
| const { copy } = useCopyToClipboard() | ||
| const { address = '' } = useAccount() | ||
|
|
||
| const shortAddress = address.slice(0, 10) + '...' + address.slice(-4) | ||
| return ( | ||
| <Box column gap3> | ||
| <Box toBetween toCenterY> | ||
| <Box toCenterY gap2> | ||
| <AccountAvatar /> | ||
| <Box>{shortAddress}</Box> | ||
| </Box> | ||
| <Box toCenterY gap-1> | ||
| <Button | ||
| size={28} | ||
| colorScheme="neutral600" | ||
| variant="ghost" | ||
| isSquare | ||
| onClick={() => { | ||
| copy(address) | ||
| toast.success('Copied to clipboard') | ||
| }} | ||
| > | ||
| <Copy size={18} /> | ||
| </Button> | ||
|
|
||
| <Button | ||
| size={28} | ||
| colorScheme="neutral600" | ||
| variant="ghost" | ||
| isSquare | ||
| onClick={() => { | ||
| disconnect() | ||
| localStorage.removeItem('PENX_TOKEN') | ||
| }} | ||
| > | ||
| <Power size={18} /> | ||
| </Button> | ||
| </Box> | ||
| </Box> | ||
|
|
||
| <Box toCenter h-60> | ||
| {isLoading && <Skeleton h-40 w-80p roundedXL />} | ||
| <Box text4XL fontBold> | ||
| {typeof data !== 'undefined' && `${precision.toDecimal(data).toFixed(5)} ETH`} | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { useQuery } from '@tanstack/react-query' | ||
| import { createPublicClient, http } from 'viem' | ||
| import { arbitrumSepolia } from 'viem/chains' | ||
| import { useAccount } from 'wagmi' | ||
|
|
||
| export function useEthBalance() { | ||
| const { address } = useAccount() | ||
|
|
||
| return useQuery({ | ||
| queryKey: ['eth_balance', address], | ||
| queryFn: async () => { | ||
| const publicClient = createPublicClient({ | ||
| chain: arbitrumSepolia, | ||
| transport: http(), | ||
| }) | ||
| const data = await publicClient.getBalance({ | ||
| address: address!, | ||
| }) | ||
| return data | ||
| }, | ||
| }) | ||
| } |
Oops, something went wrong.