diff --git a/web/components/charity/charity-card.tsx b/web/components/charity/charity-card.tsx
index 113a58ff..bd95db73 100644
--- a/web/components/charity/charity-card.tsx
+++ b/web/components/charity/charity-card.tsx
@@ -3,6 +3,7 @@ import _ from 'lodash'
import Link from 'next/link'
import { Charity } from '../../../common/charity'
import { useCharityTxns } from '../../hooks/use-charity-txns'
+import { manaToUSD } from '../../pages/charity/[charitySlug]'
import { Row } from '../layout/row'
export function CharityCard(props: { charity: Charity }) {
@@ -31,7 +32,9 @@ export function CharityCard(props: { charity: Charity }) {
{raised > 0 && (
- ${Math.floor((raised ?? 0) / 100)}
+ {raised < 100
+ ? manaToUSD(raised)
+ : '$' + Math.floor(raised / 100)}
raised
diff --git a/web/components/charity/feed-items.tsx b/web/components/charity/feed-items.tsx
new file mode 100644
index 00000000..9216e776
--- /dev/null
+++ b/web/components/charity/feed-items.tsx
@@ -0,0 +1,34 @@
+import { Txn } from '../../../common/txn'
+import { Avatar } from '../avatar'
+import { useUserById } from '../../hooks/use-users'
+import { UserLink } from '../user-page'
+import { manaToUSD } from '../../pages/charity/[charitySlug]'
+import { RelativeTimestamp } from '../feed/feed-items'
+
+export function Donation(props: { txn: Txn }) {
+ const { txn } = props
+ const user = useUserById(txn.fromId)
+
+ if (!user) {
+ return <>Loading...>
+ }
+
+ return (
+
+
+
+
+
+ {' '}
+ donated {manaToUSD(txn.amount)}
+
+
+
+
+
+ )
+}
diff --git a/web/components/feed/feed-items.tsx b/web/components/feed/feed-items.tsx
index 8d09b677..e21db3e5 100644
--- a/web/components/feed/feed-items.tsx
+++ b/web/components/feed/feed-items.tsx
@@ -310,7 +310,7 @@ export function CommentInput(props: {
)
}
-function RelativeTimestamp(props: { time: number }) {
+export function RelativeTimestamp(props: { time: number }) {
const { time } = props
return (
diff --git a/web/pages/charity/[charitySlug].tsx b/web/pages/charity/[charitySlug].tsx
index b01f19e1..6c3505fb 100644
--- a/web/pages/charity/[charitySlug].tsx
+++ b/web/pages/charity/[charitySlug].tsx
@@ -17,8 +17,9 @@ import Custom404 from '../404'
import { useCharityTxns } from '../../hooks/use-charity-txns'
import { useWindowSize } from '../../hooks/use-window-size'
import Confetti from 'react-confetti'
+import { Donation } from '../../components/charity/feed-items'
-const manaToUSD = (mana: number) =>
+export const manaToUSD = (mana: number) =>
(mana / 100).toLocaleString('en-US', { style: 'currency', currency: 'USD' })
export default function CharityPageWrapper() {
@@ -91,6 +92,9 @@ function CharityPage(props: { charity: Charity }) {
About
+ {txns.map((txn) => (
+
+ ))}
@@ -98,8 +102,7 @@ function CharityPage(props: { charity: Charity }) {
}
function Blurb({ text }: { text: string }) {
- // Default to open for now (aka don't actually hide any text yet.)
- const [open, setOpen] = useState(true)
+ const [open, setOpen] = useState(false)
// Calculate whether the full blurb is already shown
const ref = useRef(null)
@@ -125,7 +128,7 @@ function Blurb({ text }: { text: string }) {
onClick={() => setOpen(!open)}
className={clsx(
'btn btn-link capitalize-none my-3 normal-case text-indigo-700',
- hideExpander && 'hidden'
+ hideExpander && 'invisible'
)}
>
{open ? 'Hide' : 'Read more'}