hmm

common/src/envs/constants.ts

@@ -12,7 +12,7 @@ export const CONFIGS: { [env: string]: EnvConfig } = {
   DEV: DEV_CONFIG,
 }
 
-export const TWOMBA_ENABLED = false
+export const TWOMBA_ENABLED = true
 export const PRODUCT_MARKET_FIT_ENABLED = false
 export const SPICE_PRODUCTION_ENABLED = true
 export const SPICE_TO_MANA_CONVERSION_RATE = 1

web/components/add-funds-modal.tsx → web/components/add-funds/add-funds-modal.tsx

@@ -27,15 +27,16 @@ import { getNativePlatform } from 'web/lib/native/is-native'
 import { postMessageToNative } from 'web/lib/native/post-message'
 import { checkoutURL } from 'web/lib/service/stripe'
 import { db } from 'web/lib/supabase/db'
-import { Button } from './buttons/button'
-import { Modal } from './layout/modal'
-import { AlertBox } from './widgets/alert-box'
-import { AmountInput } from './widgets/amount-input'
-import { CoinNumber } from './widgets/manaCoinNumber'
-import { Col } from './layout/col'
+import { Button } from '../buttons/button'
+import { Modal } from '../layout/modal'
+import { AlertBox } from '../widgets/alert-box'
+import { AmountInput } from '../widgets/amount-input'
+import { CoinNumber } from '../widgets/manaCoinNumber'
+import { Col } from '../layout/col'
 import { shortenNumber } from 'web/lib/util/formatNumber'
 import { FaStore } from 'react-icons/fa6'
 import router from 'next/router'
+import { TwombaBuyManaTab } from './twomba-add-funds'
 
 export function AddFundsModal(props: {
   open: boolean
@@ -51,7 +52,11 @@ export function AddFundsModal(props: {
       setOpen={setOpen}
       className="bg-canvas-0 text-ink-1000 rounded-md p-8"
     >
-      <BuyManaTab onClose={() => setOpen(false)} />
+      {TWOMBA_ENABLED ? (
+        <TwombaBuyManaTab onClose={() => setOpen(false)} />
+      ) : (
+        <BuyManaTab onClose={() => setOpen(false)} />
+      )}
       {/* <Tabs
         trackingName="buy modal tabs"
         className="[&_svg]:hidden" // hide carousel switcher

web/pages/checkout.tsx → web/components/add-funds/twomba-add-funds.tsx

@@ -1,39 +1,40 @@
-import { useEffect, useState } from 'react'
-import { Page } from '../components/layout/page'
-import { Col } from '../components/layout/col'
-import { Row } from '../components/layout/row'
-import { Input } from '../components/widgets/input'
-import { Button } from 'web/components/buttons/button'
-import { useUser } from 'web/hooks/use-user'
-import { useNativeMessages } from 'web/hooks/use-native-messages'
-import { postMessageToNative } from 'web/lib/native/post-message'
-import { CheckoutSession, GPSData } from 'common/gidx/gidx'
-import { getNativePlatform } from 'web/lib/native/is-native'
-import { api, validateIapReceipt } from 'web/lib/api/api'
-import { MesageTypeMap, nativeToWebMessageType } from 'common/native-message'
-import { AlertBox } from 'web/components/widgets/alert-box'
-import { PriceTile, use24hrUsdPurchases } from 'web/components/add-funds-modal'
-import { getVerificationStatus } from 'common/user'
-import { CoinNumber } from 'web/components/widgets/manaCoinNumber'
-import { LogoIcon } from 'web/components/icons/logo-icon'
-import { FaStore } from 'react-icons/fa6'
 import clsx from 'clsx'
-import { TRADE_TERM, TWOMBA_ENABLED } from 'common/envs/constants'
 import {
   IOS_PRICES,
-  WebManaAmounts,
   MANA_WEB_PRICES,
   PaymentAmount,
+  WebManaAmounts,
 } from 'common/economy'
-import { FullscreenConfetti } from 'web/components/widgets/fullscreen-confetti'
+import { TRADE_TERM, TWOMBA_ENABLED } from 'common/envs/constants'
+import { CheckoutSession, GPSData } from 'common/gidx/gidx'
+import { MesageTypeMap, nativeToWebMessageType } from 'common/native-message'
+import { getVerificationStatus } from 'common/user'
+import { formatSweepsToUSD } from 'common/util/format'
+import { capitalize } from 'lodash'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
-import { LoadingIndicator } from 'web/components/widgets/loading-indicator'
+import { useEffect, useState } from 'react'
+import { FaStore } from 'react-icons/fa6'
+import { Button } from 'web/components/buttons/button'
 import { LocationPanel } from 'web/components/gidx/location-panel'
-import { formatSweepsToUSD } from 'common/util/format'
-import { capitalize } from 'lodash'
+import { LogoIcon } from 'web/components/icons/logo-icon'
+import { AlertBox } from 'web/components/widgets/alert-box'
+import { FullscreenConfetti } from 'web/components/widgets/fullscreen-confetti'
+import { LoadingIndicator } from 'web/components/widgets/loading-indicator'
+import { CoinNumber } from 'web/components/widgets/manaCoinNumber'
+import { useNativeMessages } from 'web/hooks/use-native-messages'
+import { useUser } from 'web/hooks/use-user'
+import { api, validateIapReceipt } from 'web/lib/api/api'
+import { getNativePlatform } from 'web/lib/native/is-native'
+import { postMessageToNative } from 'web/lib/native/post-message'
+import { Col } from '../layout/col'
+import { Page } from '../layout/page'
+import { Row } from '../layout/row'
+import { Input } from '../widgets/input'
+import { PriceTile, use24hrUsdPurchases } from './add-funds-modal'
 
-const CheckoutPage = () => {
+export const TwombaBuyManaTab = (props: { onClose: () => void }) => {
+  const { onClose } = props
   const user = useUser()
   const [locationError, setLocationError] = useState<string>()
   const { isNative, platform } = getNativePlatform()
@@ -62,10 +63,6 @@ const CheckoutPage = () => {
     }
   }, [manaAmount])
 
-  const goHome = () => {
-    router.push('/home')
-  }
-
   const checkIfRegistered = async (then: 'ios-native' | 'web') => {
     // if user is not registered, they must register first
     if (!user) return
@@ -92,7 +89,7 @@ const CheckoutPage = () => {
       try {
         await validateIapReceipt({ receipt: receipt })
         console.log('iap receipt validated')
-        goHome()
+        onClose()
       } catch (e) {
         console.log('iap receipt validation error', e)
         setError('Error validating receipt')
@@ -155,7 +152,7 @@ const CheckoutPage = () => {
   }
 
   return (
-    <Page className={'p-3'} trackPageView={'checkout page'}>
+    <>
       {page === 'checkout' && !amountSelected && !manaAmount ? (
         <Col>
           <FundsSelector prices={prices} onSelect={onSelectAmount} />
@@ -195,7 +192,7 @@ const CheckoutPage = () => {
         </Col>
       ) : null}
       <Row className="text-error mt-2">{error}</Row>
-    </Page>
+    </>
   )
 }
 
@@ -532,5 +529,3 @@ const PaymentSection = (props: {
     </Col>
   )
 }
-
-export default CheckoutPage

web/components/bet/quick-limit-order-buttons.tsx

@@ -12,7 +12,7 @@ import { DAY_MS } from 'common/util/time'
 import { useUser } from 'web/hooks/use-user'
 import { api } from 'web/lib/api/api'
 import { track } from 'web/lib/service/analytics'
-import { AddFundsModal } from '../add-funds-modal'
+import { AddFundsModal } from '../add-funds/add-funds-modal'
 import { Button } from '../buttons/button'
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'

web/components/contract/upgrade-tier-button.tsx

@@ -14,7 +14,7 @@ import { TierIcon, getPresentedTierName } from '../tiers/tier-tooltip'
 import { api } from 'web/lib/api/api'
 import { useUser } from 'web/hooks/use-user'
 import { ENV_CONFIG } from 'common/envs/constants'
-import { AddFundsModal } from '../add-funds-modal'
+import { AddFundsModal } from '../add-funds/add-funds-modal'
 import { track } from 'web/lib/service/analytics'
 import toast from 'react-hot-toast'
 

web/components/nav/profile-summary.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react'
 import { SPICE_PRODUCTION_ENABLED, TWOMBA_ENABLED } from 'common/envs/constants'
 import { User } from 'web/lib/firebase/users'
 import { trackCallback } from 'web/lib/service/analytics'
-import { AddFundsModal } from '../add-funds-modal'
+import { AddFundsModal } from '../add-funds/add-funds-modal'
 import { Avatar } from '../widgets/avatar'
 import { CoinNumber } from '../widgets/manaCoinNumber'
 

web/components/nav/sidebar.tsx

@@ -1,45 +1,45 @@
 import {
-  CashIcon,
   DeviceMobileIcon,
+  GlobeAltIcon,
+  LightningBoltIcon,
+  LoginIcon,
   LogoutIcon,
   MoonIcon,
-  SunIcon,
-  StarIcon,
-  QuestionMarkCircleIcon,
   NewspaperIcon,
-  LightningBoltIcon,
-  LoginIcon,
-  TemplateIcon,
-  GlobeAltIcon,
+  QuestionMarkCircleIcon,
   SearchIcon,
+  StarIcon,
+  SunIcon,
+  TemplateIcon,
 } from '@heroicons/react/outline'
-import TrophyIcon from 'web/lib/icons/trophy-icon.svg'
-import { GiCapitol } from 'react-icons/gi'
 import clsx from 'clsx'
 import { useState } from 'react'
+import { GiCapitol } from 'react-icons/gi'
+import TrophyIcon from 'web/lib/icons/trophy-icon.svg'
 
 import { buildArray } from 'common/util/array'
+import { DAY_MS } from 'common/util/time'
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'
 import { usePathname, useRouter } from 'next/navigation'
-import { AddFundsModal } from 'web/components/add-funds-modal'
+import { PiRobotBold, PiTelevisionSimpleBold } from 'react-icons/pi'
 import { AppBadgesOrGetAppButton } from 'web/components/buttons/app-badges-or-get-app-button'
 import { CreateQuestionButton } from 'web/components/buttons/create-question-button'
+import { PrivateMessagesIcon } from 'web/components/messaging/messages-icon'
 import { NotificationsIcon } from 'web/components/notifications-icon'
+import { useAdminOrMod } from 'web/hooks/use-admin'
 import { useTheme } from 'web/hooks/use-theme'
 import { useUser } from 'web/hooks/use-user'
 import { firebaseLogin, firebaseLogout } from 'web/lib/firebase/users'
 import { withTracking } from 'web/lib/service/analytics'
 import { MobileAppsQRCodeDialog } from '../buttons/mobile-apps-qr-code-button'
 import { SidebarSignUpButton } from '../buttons/sign-up-button'
+import { Col } from '../layout/col'
+import { AddFundsButton } from '../profile/add-funds-button'
+import { ReportsIcon } from '../reports-icon'
+import { LiveTVIcon } from '../tv-icon'
 import { ManifoldLogo } from './manifold-logo'
 import { ProfileSummary } from './profile-summary'
 import { NavItem, SidebarItem } from './sidebar-item'
-import { PrivateMessagesIcon } from 'web/components/messaging/messages-icon'
-import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'
-import { DAY_MS } from 'common/util/time'
-import { LiveTVIcon } from '../tv-icon'
-import { PiRobotBold, PiTelevisionSimpleBold } from 'react-icons/pi'
-import { useAdminOrMod } from 'web/hooks/use-admin'
-import { ReportsIcon } from '../reports-icon'
 
 export default function Sidebar(props: {
   className?: string
@@ -86,6 +86,14 @@ export default function Sidebar(props: {
     />
   )
 
+  const addFundsButton = user && (
+    <AddFundsButton
+      userId={user.id}
+      className="w-full whitespace-nowrap"
+      size="xl"
+    />
+  )
+
   return (
     <nav
       aria-label="Sidebar"
@@ -110,7 +118,10 @@ export default function Sidebar(props: {
 
         {user === null && <SidebarSignUpButton />}
 
-        {createMarketButton}
+        <Col className="gap-2">
+          {createMarketButton}
+          {addFundsButton}
+        </Col>
       </div>
       <div
         className={clsx('mb-6 mt-auto flex flex-col gap-1', isMobile && 'pb-8')}
@@ -122,10 +133,10 @@ export default function Sidebar(props: {
           <SidebarItem key={item.name} item={item} currentPage={currentPage} />
         ))}
       </div>
-      <AddFundsModal
+      {/* <AddFundsModal
         open={isAddFundsModalOpen}
         setOpen={setIsAddFundsModalOpen}
-      />
+      /> */}
     </nav>
   )
 }
@@ -194,7 +205,6 @@ const getMobileNav = (
   const { isNewUser, isLiveTV, isAdminOrMod } = options
 
   return buildArray<NavItem>(
-    { name: 'Get mana', icon: CashIcon, onClick: toggleModal },
     {
       name: 'US Election',
       href: '/election',

web/components/new-contract/cost-section.tsx

@@ -8,22 +8,22 @@ import { Col } from 'web/components/layout/col'
 import clsx from 'clsx'
 import { getTieredCost } from 'common/economy'
 import { ENV_CONFIG } from 'common/envs/constants'
-import { AddFundsModal } from 'web/components/add-funds-modal'
+import { MarketTierType } from 'common/tier'
+import { capitalize } from 'lodash'
 import { Button } from 'web/components/buttons/button'
+import { ManaCoin } from 'web/public/custom-components/manaCoin'
 import {
   CrystalTier,
   PlayTier,
   PlusTier,
   PremiumTier,
 } from 'web/public/custom-components/tiers'
 import { LogoIcon } from '../icons/logo-icon'
-import { CoinNumber } from '../widgets/manaCoinNumber'
-import { MarketTierType } from 'common/tier'
 import { getPresentedTierName } from '../tiers/tier-tooltip'
-import { ManaCoin } from 'web/public/custom-components/manaCoin'
-import { getContractTypeFromValue } from './create-contract-types'
 import { InfoTooltip } from '../widgets/info-tooltip'
-import { capitalize } from 'lodash'
+import { CoinNumber } from '../widgets/manaCoinNumber'
+import { getContractTypeFromValue } from './create-contract-types'
+import { AddFundsModal } from '../add-funds/add-funds-modal'
 
 type TIER_TYPE = { name: MarketTierType; icon: ReactNode }
 

web/components/profile/add-funds-button.tsx

@@ -1,24 +1,24 @@
-import { AddFundsModal } from '../add-funds-modal'
-import { useUser } from 'web/hooks/use-user'
-import { useState } from 'react'
 import { PlusIcon } from '@heroicons/react/solid'
-import { Button } from '../buttons/button'
-import router from 'next/router'
-import { TWOMBA_ENABLED } from 'common/envs/constants'
+import { useState } from 'react'
+import { useUser } from 'web/hooks/use-user'
+import { Button, SizeType } from '../buttons/button'
+import { AddFundsModal } from '../add-funds/add-funds-modal'
 
-export function AddFundsButton(props: { userId?: string; className?: string }) {
-  const { userId, className } = props
+export function AddFundsButton(props: {
+  userId?: string
+  className?: string
+  size?: SizeType
+}) {
+  const { userId, className, size } = props
   const [open, setOpen] = useState(false)
   const user = useUser()
 
   if (!userId || user?.id !== userId) return null
   return (
     <>
       <Button
-        onClick={() =>
-          TWOMBA_ENABLED ? router.push('/checkout') : setOpen(true)
-        }
-        size="md"
+        onClick={() => setOpen(true)}
+        size={size ?? 'md'}
         color="gradient-pink"
         className={className}
       >

web/components/redeem-spice-modal.tsx

@@ -17,8 +17,8 @@ import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { APIError, api } from 'web/lib/api/api'
 import { ManaCoin } from 'web/public/custom-components/manaCoin'
-import { SpiceToManaForm } from './add-funds-modal'
 import { CoinNumber } from './widgets/manaCoinNumber'
+import { SpiceToManaForm } from './add-funds/add-funds-modal'
 
 export type RedeemSpicePageType = 'main' | 'customMana'
 

web/components/widgets/amount-input.tsx

@@ -16,7 +16,6 @@ import { useCurrentPortfolio } from 'web/hooks/use-portfolio-history'
 import { useUser } from 'web/hooks/use-user'
 import { ManaCoin } from 'web/public/custom-components/manaCoin'
 import { SpiceCoin } from 'web/public/custom-components/spiceCoin'
-import { AddFundsModal } from '../add-funds-modal'
 import { BetSlider } from '../bet/bet-slider'
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
@@ -27,6 +26,7 @@ import {
 import { Input } from './input'
 import { MarketTierType } from 'common/tier'
 import { SweepiesCoin } from 'web/public/custom-components/sweepiesCoin'
+import { AddFundsModal } from '../add-funds/add-funds-modal'
 
 export function AmountInput(
   props: {