diff --git a/web/components/profile/loans-modal.tsx b/web/components/profile/loans-modal.tsx
new file mode 100644
index 00000000..72ba2f9e
--- /dev/null
+++ b/web/components/profile/loans-modal.tsx
@@ -0,0 +1,47 @@
+import { Modal } from 'web/components/layout/modal'
+import { Col } from 'web/components/layout/col'
+
+export function LoansModal(props: {
+ isOpen: boolean
+ setOpen: (open: boolean) => void
+}) {
+ const { isOpen, setOpen } = props
+
+ return (
+
+
+ 🏦
+ Loans are here!
+
+ • What are loans?
+
+ Every Monday, get 5% of your total bet amount back as a loan.
+
+
+ • Do I have to pay back a loan?
+
+
+ Yes, of course! You will automatically pay back loans when the
+ market resolves or you sell your bet.
+
+
+ • What is the purpose of loans?
+
+
+ Loans make it worthwhile to bet on markets that won't resolve for
+ months or years.
+
+ • What is an example?
+
+ For example, if you bet M$100 on "Will I become a millionare?" on
+ Sunday, you will get M$5 back on Monday.
+
+
+ Previous loans count against your total bet amount. So, the next
+ week, you would get back 5% of M$95 = M$4.75.
+
+
+
+
+ )
+}
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index 62f73bf8..dff98029 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -29,6 +29,7 @@ import { formatMoney } from 'common/util/format'
import { ShareIconButton } from 'web/components/share-icon-button'
import { ENV_CONFIG } from 'common/envs/constants'
import { BettingStreakModal } from 'web/components/profile/betting-streak-modal'
+import { LoansModal } from './profile/loans-modal'
export function UserLink(props: {
name: string
@@ -67,12 +68,16 @@ export function UserPage(props: { user: User }) {
const bannerUrl = user.bannerUrl ?? defaultBannerUrl(user.id)
const [showConfetti, setShowConfetti] = useState(false)
const [showBettingStreakModal, setShowBettingStreakModal] = useState(false)
+ const [showLoansModal, setShowLoansModal] = useState(false)
useEffect(() => {
const claimedMana = router.query['claimed-mana'] === 'yes'
setShowConfetti(claimedMana)
const showBettingStreak = router.query['show'] === 'betting-streak'
setShowBettingStreakModal(showBettingStreak)
+
+ const showLoansModel = router.query['show'] === 'loans'
+ setShowLoansModal(showLoansModel)
}, [router])
const profit = user.profitCached.allTime
@@ -92,6 +97,9 @@ export function UserPage(props: { user: User }) {
isOpen={showBettingStreakModal}
setOpen={setShowBettingStreakModal}
/>
+ {showLoansModal && (
+
+ )}
{/* Banner image up top, with an circle avatar overlaid */}
setShowBettingStreakModal(true)}
>
- 🔥{user.currentBettingStreak ?? 0}
+ 🔥 {user.currentBettingStreak ?? 0}
streak
+
setShowLoansModal(true)}
+ >
+ 🏦 {formatMoney(153)}
+ next loan
+
diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx
index 346681cd..81c78b4b 100644
--- a/web/pages/notifications.tsx
+++ b/web/pages/notifications.tsx
@@ -447,7 +447,7 @@ function IncomeNotificationItem(props: {
if (sourceType === 'challenge') return `${sourceSlug}`
if (sourceType === 'betting_streak_bonus')
return `/${sourceUserUsername}/?show=betting-streak`
- if (sourceType === 'loan') return `/${sourceUserUsername}/?show=loan`
+ if (sourceType === 'loan') return `/${sourceUserUsername}/?show=loans`
if (sourceContractCreatorUsername && sourceContractSlug)
return `/${sourceContractCreatorUsername}/${sourceContractSlug}#${getSourceIdForLinkComponent(
sourceId ?? '',