Loan modal!

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 (
+    <Modal open={isOpen} setOpen={setOpen}>
+      <Col className="items-center gap-4 rounded-md bg-white px-8 py-6">
+        <span className={'text-8xl'}>🏦</span>
+        <span>Loans are here!</span>
+        <Col className={'gap-2'}>
+          <span className={'text-indigo-700'}>• What are loans?</span>
+          <span className={'ml-2'}>
+            Every Monday, get 5% of your total bet amount back as a loan.
+          </span>
+          <span className={'text-indigo-700'}>
+            • Do I have to pay back a loan?
+          </span>
+          <span className={'ml-2'}>
+            Yes, of course! You will automatically pay back loans when the
+            market resolves or you sell your bet.
+          </span>
+          <span className={'text-indigo-700'}>
+            • What is the purpose of loans?
+          </span>
+          <span className={'ml-2'}>
+            Loans make it worthwhile to bet on markets that won't resolve for
+            months or years.
+          </span>
+          <span className={'text-indigo-700'}>• What is an example?</span>
+          <span className={'ml-2'}>
+            For example, if you bet M$100 on "Will I become a millionare?" on
+            Sunday, you will get M$5 back on Monday.
+          </span>
+          <span className={'ml-2'}>
+            Previous loans count against your total bet amount. So, the next
+            week, you would get back 5% of M$95 = M$4.75.
+          </span>
+        </Col>
+      </Col>
+    </Modal>
+  )
+}

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 && (
+        <LoansModal isOpen={showLoansModal} setOpen={setShowLoansModal} />
+      )}
       {/* Banner image up top, with an circle avatar overlaid */}
       <div
         className="h-32 w-full bg-cover bg-center sm:h-40"
@@ -148,6 +156,13 @@ export function UserPage(props: { user: User }) {
                 <span>🔥 {user.currentBettingStreak ?? 0}</span>
                 <span>streak</span>
               </Col>
+              <Col
+                className={'cursor-pointer items-center text-gray-500'}
+                onClick={() => setShowLoansModal(true)}
+              >
+                <span className="text-green-600">🏦 {formatMoney(153)}</span>
+                <span>next loan</span>
+              </Col>
             </Row>
           </Col>
         </Row>

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 ?? '',