Skip to content

Commit

Permalink
Add referral page
Browse files Browse the repository at this point in the history
  • Loading branch information
@behrang
behrang committed Apr 15, 2024
1 parent 2eb1cfb commit 49a7335
Show file tree
Hide file tree
Showing 33 changed files with 410 additions and 21 deletions.
14 changes: 12 additions & 2 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Model } from './Model.ts'
import Header from './Header.tsx'
import OldWalletUpgrade from './OldWalletUpgrade.tsx'
import StakeUnstake from './StakeUnstake.tsx'
import Referral from './Referral.tsx'
import Wait from './Wait.tsx'
import Stats from './Stats.tsx'
import Footer from './Footer.tsx'
Expand All @@ -19,13 +20,22 @@ interface Props {
}

const App = observer(({ model }: Props) => {
return (
let page = (
<>
<Header model={model} />
<OldWalletUpgrade model={model} />
<StakeUnstake model={model} />
<Wait model={model} />
<Stats model={model} />
</>
)
if (model.activePage === 'referral') {
page = <Referral model={model} />
}

return (
<>
<Header model={model} />
{page}
<Footer model={model} />
<LoadingIndicator model={model} />
<ErrorDisplay model={model} />
Expand Down
2 changes: 1 addition & 1 deletion src/ErrorDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const ErrorDisplay = observer(({ model }: Props) => {
return (
<div
className={
'fixed bottom-2 left-6 flex max-w-screen-sm rounded-2xl bg-orange p-2 text-white drop-shadow dark:text-dark-600' +
'fixed bottom-20 left-6 flex max-w-screen-sm rounded-2xl bg-orange p-2 text-white drop-shadow dark:text-dark-600 sm:bottom-2' +
(model.errorMessage === '' ? ' hidden' : '')
}
>
Expand Down
12 changes: 6 additions & 6 deletions src/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ interface Props {

const Footer = observer(({ model }: Props) => {
return (
<div className='mt-auto bg-brown font-body text-white dark:bg-dark-900 dark:text-dark-50'>
<div className='mt-auto bg-milky font-body text-brown dark:bg-dark-900 dark:text-dark-50'>
<div className='mx-auto w-full max-w-screen-lg pb-16 pt-8'>
<div className='grid grid-cols-1 min-[480px]:grid-cols-2 lg:grid-cols-4'>
<div className='m-8'>
<h3 className='text-lg font-bold'>Social</h3>
<h3 className='text-lg font-bold text-orange dark:text-brown'>Social</h3>
<a className='my-4 block' href='https://t.me/HipoFinance' target='hipo_telegram'>
Telegram
</a>
Expand All @@ -21,7 +21,7 @@ const Footer = observer(({ model }: Props) => {
</div>

<div className='m-8'>
<h3 className='text-lg font-bold'>Community</h3>
<h3 className='text-lg font-bold text-orange dark:text-brown'>Community</h3>
<a className='my-4 block' href='https://t.me/hipo_chat' target='hipo_chat'>
Hipo Chat
</a>
Expand All @@ -31,7 +31,7 @@ const Footer = observer(({ model }: Props) => {
</div>

<div className='m-8'>
<h3 className='text-lg font-bold'>Docs</h3>
<h3 className='text-lg font-bold text-orange dark:text-brown'>Docs</h3>
<a className='my-4 block' href='https://github.com/HipoFinance' target='hipo_github'>
GitHub
</a>
Expand All @@ -41,7 +41,7 @@ const Footer = observer(({ model }: Props) => {
</div>

<div className='m-8'>
<h3 className='text-lg font-bold'>About</h3>
<h3 className='text-lg font-bold text-orange dark:text-brown'>About</h3>
<a className='my-4 block' href='https://hipo.finance/#HowHipoWorks' target='hipo_how'>
How Hipo Works?
</a>
Expand All @@ -63,7 +63,7 @@ const Footer = observer(({ model }: Props) => {

<div className='mx-8 my-4 h-1 rounded bg-orange'></div>

<p className='text-center text-xs opacity-40'>Copyright 2023, All Rights Reserved</p>
<p className='text-center text-xs opacity-70'>Copyright 2024, All Rights Reserved</p>
</div>
</div>
)
Expand Down
92 changes: 92 additions & 0 deletions src/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@ import logo from './assets/logo.svg'
import logoDark from './assets/logo-dark.svg'
import theme from './assets/theme.svg'
import themeDark from './assets/theme-dark.svg'
import pageStakeBrown from './assets/page-stake-brown.svg'
import pageStakeOrange from './assets/page-stake-orange.svg'
import pageStakeWhite from './assets/page-stake-white.svg'
import pageStakeBlack from './assets/page-stake-black.svg'
import pageReferralBrown from './assets/page-referral-brown.svg'
import pageReferralOrange from './assets/page-referral-orange.svg'
import pageReferralWhite from './assets/page-referral-white.svg'
import pageReferralBlack from './assets/page-referral-black.svg'

interface Props {
model: Model
Expand All @@ -19,6 +27,90 @@ const Header = observer(({ model }: Props) => {

<TestnetBadge model={model} />

<ul className='dark:bg-choco dark:border-c2 border-c1 sm:bg-transparent sm:dark:bg-transparent fixed bottom-0 left-0 z-10 flex w-full select-none flex-row border-t bg-milky text-sm font-thin sm:static sm:ml-4 sm:w-auto sm:border-0'>
<li
className={
'flex-1 cursor-pointer whitespace-nowrap pt-3 text-center sm:ml-4 sm:flex-none' +
(model.activePage === 'stake' ? ' text-dark-600' : ' text-brown')
}
onClick={() => {
model.setActivePage('stake')
}}
>
<div className='flex flex-col items-center sm:flex-row sm:pl-2'>
<img
src={pageStakeBrown}
className={'h-4 dark:!hidden' + (model.activePage !== 'stake' ? ' block' : ' hidden')}
/>
<img
src={pageStakeWhite}
className={
'hidden h-4' + (model.activePage !== 'stake' ? ' dark:!block' : ' sm:dark:!block')
}
/>
<img
src={pageStakeOrange}
className={'h-4 sm:hidden' + (model.activePage === 'stake' ? ' block' : ' hidden')}
/>
<img
src={pageStakeBlack}
className={
'hidden h-4' + (model.activePage === 'stake' ? ' dark:!hidden sm:block' : '')
}
/>
<span className='p-2 dark:text-white'>Stake</span>
</div>
<div
className={
'mt-1 hidden h-1 rounded-full bg-orange' +
(model.activePage === 'stake' ? ' sm:!block' : '')
}
></div>
</li>
<li
className={
'flex-1 cursor-pointer whitespace-nowrap pt-3 text-center sm:ml-4 sm:flex-none' +
(model.activePage === 'referral' ? ' text-dark-600' : ' text-brown')
}
onClick={() => {
model.setActivePage('referral')
}}
>
<div className='flex flex-col items-center sm:flex-row sm:pl-2'>
<img
src={pageReferralBrown}
className={
'h-4 dark:!hidden' + (model.activePage !== 'referral' ? ' block' : ' hidden')
}
/>
<img
src={pageReferralWhite}
className={
'hidden h-4' +
(model.activePage !== 'referral' ? ' dark:!block' : ' sm:dark:!block')
}
/>
<img
src={pageReferralOrange}
className={'h-4 sm:hidden' + (model.activePage === 'referral' ? ' block' : ' hidden')}
/>
<img
src={pageReferralBlack}
className={
'hidden h-4' + (model.activePage === 'referral' ? ' dark:!hidden sm:block' : '')
}
/>
<span className='p-2 dark:text-white'>Referral</span>
</div>
<div
className={
'mt-1 hidden h-1 rounded-full bg-orange' +
(model.activePage === 'referral' ? ' sm:!block' : '')
}
></div>
</li>
</ul>

<div className='ml-auto'>
<img
src={theme}
Expand Down
2 changes: 1 addition & 1 deletion src/LoadingIndicator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const LoadingIndicator = observer(({ model }: Props) => {
return (
<div
className={
'pointer-events-none fixed bottom-2 right-5 w-10 rounded-full bg-dark-950 bg-opacity-20 dark:bg-opacity-70' +
'pointer-events-none fixed bottom-20 right-5 z-50 w-10 rounded-full bg-dark-950 bg-opacity-20 dark:bg-opacity-70 sm:bottom-2' +
(model.ongoingRequests > 0 ? '' : ' hidden')
}
>
Expand Down
64 changes: 57 additions & 7 deletions src/Model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { ParticipationState, Times, Treasury, TreasuryConfig } from './wrappers/
import { Wallet } from './wrappers/Wallet'
import { Parent } from './wrappers/Parent'

type ActivePage = 'stake' | 'referral'

type ActiveTab = 'stake' | 'unstake'

type UnstakeOption = 'unstake' | 'swap'
Expand All @@ -15,6 +17,7 @@ type WaitForTransaction = 'no' | 'wait' | 'timeout' | 'done'
interface FragmentState {
network?: Network
referrer?: Address
activePage?: ActivePage
activeTab?: ActiveTab
}

Expand Down Expand Up @@ -45,6 +48,7 @@ const oldTreasuryAddresses: Record<Network, Address> = {
}

const defaultNetwork: Network = 'mainnet'
const defaultActivePage: ActivePage = 'stake'
const defaultActiveTab: ActiveTab = 'stake'

const tonConnectButtonRootId = 'ton-connect-button'
Expand All @@ -67,6 +71,7 @@ export class Model {
oldWalletAddress?: Address
oldWalletTokens?: bigint
newWalletTokens?: bigint
activePage: ActivePage = defaultActivePage
activeTab: ActiveTab = defaultActiveTab
amount = ''
unstakeOption: UnstakeOption = 'unstake'
Expand Down Expand Up @@ -101,6 +106,7 @@ export class Model {
oldWalletAddress: observable,
oldWalletTokens: observable,
newWalletTokens: observable,
activePage: observable,
activeTab: observable,
amount: observable,
unstakeOption: observable,
Expand Down Expand Up @@ -137,11 +143,13 @@ export class Model {
apyFormatted: computed,
protocolFee: computed,
currentlyStaked: computed,
referralUrl: computed,

setNetwork: action,
setTonClient: action,
setAddress: action,
setTimes: action,
setActivePage: action,
setActiveTab: action,
setUnstakeOption: action,
setAmount: action,
Expand All @@ -158,17 +166,13 @@ export class Model {
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)

document.onvisibilitychange = () => {
if (document.hidden) {
this.pause()
} else {
this.resume()
}
}
document.onvisibilitychange = this.controlBackgroundJobs
this.controlBackgroundJobs()

window.onhashchange = () => {
const fragmentState = this.readFragmentState()
runInAction(() => {
this.setActivePage(fragmentState.activePage ?? defaultActivePage)
this.setActiveTab(fragmentState.activeTab ?? defaultActiveTab)
this.setNetwork(fragmentState.network ?? defaultNetwork)
this.setReferrer(fragmentState.referrer)
Expand Down Expand Up @@ -461,6 +465,16 @@ export class Model {
}
}

get referralUrl() {
const currentUrl = new URL(document.URL)
let url = currentUrl.origin + '/#'
if (this.address != null) {
url += '/referrer=' + this.address.toString({ bounceable: false })
}
url += '/'
return url
}

setNetwork = (network: Network) => {
if (this.network !== network) {
this.network = network
Expand Down Expand Up @@ -524,6 +538,13 @@ export class Model {
this.times = times
}

setActivePage = (activePage: ActivePage) => {
if (this.activePage !== activePage) {
this.activePage = activePage
this.controlBackgroundJobs()
}
}

setActiveTab = (activeTab: ActiveTab) => {
if (this.activeTab !== activeTab) {
this.activeTab = activeTab
Expand Down Expand Up @@ -570,6 +591,9 @@ export class Model {
connectTonAccess = () => {
const network = this.network
clearTimeout(this.timeoutConnectTonAccess)
if (document.hidden || this.activePage !== 'stake') {
return
}
getHttpV4Endpoint({ network })
.then(this.setTonClient)
.catch(() => {
Expand All @@ -582,6 +606,9 @@ export class Model {
const tonClient = this.tonClient
const treasuryAddress = treasuryAddresses[this.network]
clearTimeout(this.timeoutReadTimes)
if (document.hidden || this.activePage !== 'stake') {
return
}
this.timeoutReadTimes = setTimeout(this.readTimes, updateTimesDelay)

if (tonClient == null) {
Expand All @@ -605,6 +632,9 @@ export class Model {
const treasuryAddress = treasuryAddresses[this.network]
const oldTreasuryAddress = oldTreasuryAddresses[this.network]
clearTimeout(this.timeoutReadLastBlock)
if (document.hidden || this.activePage !== 'stake') {
return
}
this.timeoutReadLastBlock = setTimeout(() => void this.readLastBlock(), updateLastBlockDelay)

if (tonClient == null) {
Expand Down Expand Up @@ -727,6 +757,14 @@ export class Model {
void this.readLastBlock()
}

controlBackgroundJobs = () => {
if (!document.hidden && this.activePage === 'stake') {
this.resume()
} else {
this.pause()
}
}

upgradeOldWallet = () => {
if (
this.address != null &&
Expand Down Expand Up @@ -1013,6 +1051,11 @@ export class Model {
// ignore
}
}
if (key === 'page') {
if (value === 'stake' || value === 'referral') {
fragmentState.activePage = value
}
}
if (key === 'tab') {
if (value === 'stake' || value === 'unstake') {
fragmentState.activeTab = value
Expand All @@ -1028,12 +1071,19 @@ export class Model {
if (this.network !== defaultNetwork) {
hash += '/network=' + this.network
}
if (this.activePage !== defaultActivePage) {
hash += '/page=' + this.activePage
}
if (this.activeTab !== defaultActiveTab) {
hash += '/tab=' + this.activeTab
}
hash += '/'
window.location.hash = hash
}

copyReferralUrl = () => {
void navigator.clipboard.writeText(this.referralUrl)
}
}

function formatNano(amount: bigint | number): string {
Expand Down
Loading

0 comments on commit 49a7335

Please sign in to comment.