|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; |
| 4 | +import { useToast } from "@/components/ui/use-toast"; |
| 5 | +import WalletAction from "@/components/wallet/Action"; |
| 6 | +import ActionBar from "@/components/wallet/ActionBar"; |
| 7 | +import TxRow from "@/components/wallet/TxRow"; |
| 8 | +import ReceiveModal from "@/containers/wallet/ReceiveModal"; |
| 9 | +import { useHash } from "@/hooks/hash"; |
| 10 | +import { useIsScrolled } from "@/hooks/scroll"; |
| 11 | +import { useThemeUpdater } from "@/hooks/theme"; |
| 12 | +import { useFocusEffect } from "@/hooks/useFocusEffect"; |
| 13 | +import { useScrollableWindowFetcher } from "@/hooks/useScrollableWindow"; |
| 14 | +import { cn, getAvatarUrl } from "@/lib/utils"; |
| 15 | +import WalletKitService from "@/services/walletkit"; |
| 16 | +import { AccountLogic, useAccount } from "@/state/account/actions"; |
| 17 | +import { selectOrderedLogs } from "@/state/account/selectors"; |
| 18 | +import { useProfiles } from "@/state/profiles/actions"; |
| 19 | +import { useSend } from "@/state/send/actions"; |
| 20 | +import { useVoucher } from "@/state/voucher/actions"; |
| 21 | +import { getBaseUrl, getFullUrl } from "@/utils/deeplink"; |
| 22 | +import { getWindow } from "@/utils/window"; |
| 23 | +import { |
| 24 | + CommunityConfig, |
| 25 | + Config, |
| 26 | + QRFormat, |
| 27 | + getAccountBalance, |
| 28 | + parseQRFormat, |
| 29 | +} from "@citizenwallet/sdk"; |
| 30 | +import { Box, Flex, Text } from "@radix-ui/themes"; |
| 31 | +import { ArrowDownIcon } from "lucide-react"; |
| 32 | +import Link from "next/link"; |
| 33 | +import { useCallback, useEffect } from "react"; |
| 34 | +interface ContainerProps { |
| 35 | + config: Config; |
| 36 | + accountAddress: string; |
| 37 | +} |
| 38 | + |
| 39 | +export default function ReadOnly({ config, accountAddress }: ContainerProps) { |
| 40 | + const { community } = config; |
| 41 | + |
| 42 | + const communityConfig = new CommunityConfig(config); |
| 43 | + |
| 44 | + const isScrolled = useIsScrolled(); |
| 45 | + |
| 46 | + const baseUrl = getBaseUrl(); |
| 47 | + |
| 48 | + const [state, actions] = useAccount(baseUrl, config); |
| 49 | + const [_, sendActions] = useSend(); |
| 50 | + const [profilesState, profilesActions] = useProfiles(config); |
| 51 | + const [voucherState, voucherActions] = useVoucher(config); |
| 52 | + const hash = useHash(); |
| 53 | + |
| 54 | + const { toast } = useToast(); |
| 55 | + |
| 56 | + useThemeUpdater(community); |
| 57 | + |
| 58 | + useEffect(() => { |
| 59 | + actions.getAccount(accountAddress); |
| 60 | + }, [accountAddress, actions]); |
| 61 | + |
| 62 | + const account = state((state) => state.account); |
| 63 | + |
| 64 | + useFocusEffect(() => { |
| 65 | + let unsubscribe: () => void | undefined; |
| 66 | + |
| 67 | + if (account) { |
| 68 | + profilesActions.loadProfile(account); |
| 69 | + actions.fetchBalance(); |
| 70 | + unsubscribe = actions.listen(account); |
| 71 | + } |
| 72 | + |
| 73 | + return () => { |
| 74 | + unsubscribe?.(); |
| 75 | + }; |
| 76 | + }, [account]); |
| 77 | + |
| 78 | + const fetchMoreTransfers = useCallback(async () => { |
| 79 | + if (!account) return false; |
| 80 | + return actions.getTransfers(account); |
| 81 | + }, [actions, account]); |
| 82 | + |
| 83 | + const scrollableRef = useScrollableWindowFetcher(fetchMoreTransfers); |
| 84 | + |
| 85 | + const balance = state((state) => state.balance); |
| 86 | + const logs = state(selectOrderedLogs); |
| 87 | + const profile = profilesState((state) => state.profiles[account]); |
| 88 | + const profiles = profilesState((state) => state.profiles); |
| 89 | + |
| 90 | + return ( |
| 91 | + <main |
| 92 | + ref={scrollableRef} |
| 93 | + className="relative flex min-h-screen w-full flex-col align-center p-4 max-w-xl" |
| 94 | + > |
| 95 | + <Link |
| 96 | + href={`/profile/${account}`} |
| 97 | + className="z-20 absolute right-0 top-0" |
| 98 | + > |
| 99 | + <Avatar className="h-11 w-11 m-4 border-2 border-primary"> |
| 100 | + <AvatarImage |
| 101 | + src={getAvatarUrl(profile?.image_small, account)} |
| 102 | + alt="profile image" |
| 103 | + /> |
| 104 | + <AvatarFallback>{!profile ? "PRF" : profile.username}</AvatarFallback> |
| 105 | + </Avatar> |
| 106 | + </Link> |
| 107 | + |
| 108 | + <ActionBar |
| 109 | + readonly |
| 110 | + account={account} |
| 111 | + balance={balance} |
| 112 | + config={config} |
| 113 | + accountActions={actions} |
| 114 | + /> |
| 115 | + |
| 116 | + <Flex direction="column" className="w-full pt-[420px]" gap="3"> |
| 117 | + {logs.map((tx) => ( |
| 118 | + <TxRow |
| 119 | + key={tx.hash} |
| 120 | + token={communityConfig.primaryToken} |
| 121 | + community={community} |
| 122 | + account={account} |
| 123 | + tx={tx} |
| 124 | + actions={profilesActions} |
| 125 | + profiles={profiles} |
| 126 | + /> |
| 127 | + ))} |
| 128 | + </Flex> |
| 129 | + </main> |
| 130 | + ); |
| 131 | +} |
0 commit comments