Skip to content

Commit eeab3f4

Browse files
divine-comediandivine-comedian
authored
Merge pull request #226 from CommonsBuild/develop
Develop
2 parents 02933f0 + 8962bc9 commit eeab3f4

File tree

11 files changed

+253
-65
lines changed

11 files changed

+253
-65
lines changed

‎src/components/Input.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ interface InputProps {
1717
tooltipText?: string;
1818
link?: string;
1919
value: string | number;
20+
isNumber?: boolean;
2021
changeParam?(): void;
2122
onChange: (
2223
event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
@@ -36,6 +37,7 @@ function Input({
3637
tooltipText,
3738
value,
3839
link,
40+
isNumber = true,
3941
changeParam,
4042
onChange,
4143
}: InputProps) {
@@ -90,6 +92,7 @@ function Input({
9092
/>
9193
) : (
9294
<input
95+
type={isNumber ? 'number' : 'text'}
9396
min={min}
9497
max={max}
9598
name={name}

‎src/components/SubmitSummary.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,12 +218,14 @@ const SubmitSummary = ({
218218
value: params.tokenName,
219219
param: 'Token Name',
220220
placeholder: '',
221+
isNumber: false,
221222
},
222223
{
223224
name: 'tokenSymbol',
224225
value: params.tokenSymbol,
225226
param: 'Token Symbol',
226227
placeholder: '',
228+
isNumber: false,
227229
},
228230
{
229231
name: 'proposalDeposit',

‎src/components/SummaryContainer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ function SummaryContainer({
3434
select={input.select}
3535
tooltipText={input.tooltipText}
3636
value={input.value}
37+
isNumber={input.isNumber}
3738
formatNumber={input.format}
3839
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
3940
onChange(event)

‎src/components/charts/ConvictionThreshold.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ function ConvictionThresholdChart({
101101
}
102102
rotate
103103
tooltipPosition="left"
104-
tooltipText="Effective Supply is the amount of tokens currently voting on all proposals in Conviction Voting. This percentage is the relative amount of TEC tokens staked on this proposal."
104+
tooltipText="Effective Supply is the amount of TEC tokens currently voting on all proposals in Conviction Voting. This percentage is the relative amount of TEC tokens staked on this proposal."
105105
/>
106106
}
107107
/>

‎src/components/charts/TokenFreezeThaw.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,11 @@ const TokenFreezeThawChart = ({
9292
xAxisLabel={<ChartAxisLabel label="time (weeks)" />}
9393
yAxisLabel={
9494
<ChartAxisLabel
95-
label={<span>price floor (wxdai)</span>}
95+
label={
96+
format
97+
? '% of Hatchers Tokens that are Liquid'
98+
: 'price floor (wxdai)'
99+
}
96100
rotate
97101
tooltipPosition="left"
98102
tooltipText="The price floor is the minimum possible price of the token. This is a result of tokens being frozen and is affected by the paramaters Token Freeze & Token Thaw."

‎src/components/modals/ABCAddStep.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ function ABCAddStepDialog({
7171
/>
7272
<div className="relative h-12 bg-black-200 my-3">
7373
<input
74+
type="number"
7475
className="font-bold text-neon-light text-xl w-full h-full pl-3 border-2 border-gray-500 focus:border-neon hover:border-gray-400 bg-transparent outline-none placeholder-right"
7576
name="value"
7677
value={stepData.value}

‎src/components/modals/AddProposal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function AddProposal({ isOpen, handleClose, onClick }: AddProposalProps) {
7777
<p className="font-inter text-neon-light pt-3">
7878
How many TEC tokens are Actively Voting in Conviction Voting?
7979
</p>
80-
<p className="font-inter text-gray-500 text-xs pt-2">
80+
<p className="font-inter text-gray-200 text-xs pt-3 pb-1">
8181
Hatchers will have ~2 million TEC tokens they can vote with.
8282
</p>
8383
<Input
@@ -87,7 +87,7 @@ function AddProposal({ isOpen, handleClose, onClick }: AddProposalProps) {
8787
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
8888
handleChange(event)
8989
}
90-
placeholder="wxDAI"
90+
placeholder="TEC"
9191
/>
9292
</div>
9393
</Modal>

‎src/components/tables/ConvictionVoting.tsx‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,32 @@ function ConvictionVotingTable({
1717
<Table
1818
header={
1919
<>
20-
<TableHeader headerText="Proposal" size="m" />
21-
<TableHeader headerText="requested amount (wxdai)" size="l" />
22-
<TableHeader headerText="common pool (wxdai)" size="l" />
23-
<TableHeader headerText="effective supply (tec)" size="l" />
20+
<TableHeader
21+
headerText="Proposal"
22+
size="m"
23+
tooltipText="A simluted funding request using Conviction Voting"
24+
/>
25+
<TableHeader
26+
headerText="requested amount (wxdai)"
27+
size="l"
28+
tooltipText="The amount of funds being asked for from the Common Pool"
29+
/>
30+
<TableHeader
31+
headerText="common pool (wxdai)"
32+
size="l"
33+
tooltipText="The amount of funds currently in the Common Pool"
34+
/>
35+
<TableHeader
36+
headerText="effective supply (tec)"
37+
size="l"
38+
tooltipText="The cumulative total of all TEC tokens staked on all proposals in Conviction Voting"
39+
/>
2440
<TableHeader
2541
headerText={`min tokens needed to pass in ${
2642
timePeriod || '2 weeks'
2743
} (tec)`}
2844
size="l"
45+
tooltipText="The minimum amount of tokens needed to pass this funding request in the given timeframe"
2946
/>
3047
</>
3148
}

‎src/pages/_app.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function App({ Component, pageProps }: AppPropsWithLayout) {
4343
animate={{ opacity: 1 }}
4444
exit={{ y: -50, opacity: 0 }}
4545
transition={{ duration: 1 }}
46-
className="fixed flex justify-center items-center bg-neon w-full h-8 z-100"
46+
className="fixed flex justify-center items-center bg-neon w-full h-12 z-100"
4747
>
4848
<a
4949
className="cursor-pointer"
@@ -52,38 +52,38 @@ function App({ Component, pageProps }: AppPropsWithLayout) {
5252
rel="noreferrer"
5353
>
5454
<div className="relative flex overflow-x-hidden">
55-
<div className="py-12 animate-marquee whitespace-nowrap">
56-
<span className="font-bj font-bold text-xs uppercase mx-4 cursor-pointer">
55+
<div className="animate-marquee whitespace-nowrap">
56+
<span className="font-bj font-bold text-sm uppercase mx-4 cursor-pointer">
5757
🎉🎉 Join our param parties to build some
5858
amazing economies with us! 🎉🎉
5959
</span>
60-
<span className="font-bj font-bold text-xs uppercase mx-4 cursor-pointer">
60+
<span className="font-bj font-bold text-sm uppercase mx-4 cursor-pointer">
6161
🎉🎉 Join our param parties to build some
6262
amazing economies with us! 🎉🎉
6363
</span>
64-
<span className="font-bj font-bold text-xs uppercase mx-4 cursor-pointer">
64+
<span className="font-bj font-bold text-sm uppercase mx-4 cursor-pointer">
6565
🎉🎉 Join our param parties to build some
6666
amazing economies with us! 🎉🎉
6767
</span>
68-
<span className="font-bj font-bold text-xs uppercase mx-4 cursor-pointer">
68+
<span className="font-bj font-bold text-sm uppercase mx-4 cursor-pointer">
6969
🎉🎉 Join our param parties to build some
7070
amazing economies with us! 🎉🎉
7171
</span>
7272
</div>
7373
<div className="absolute top-0 py-12 animate-marquee2 whitespace-nowrap">
74-
<span className="font-bj font-bold text-xs uppercase mx-4 cursor-pointer">
74+
<span className="font-bj font-bold text-sm uppercase mx-4 cursor-pointer">
7575
🎉🎉 Join our param parties to build some
7676
amazing economies with us! 🎉🎉
7777
</span>
78-
<span className="font-bj font-bold text-xs uppercase mx-4 cursor-pointer">
78+
<span className="font-bj font-bold text-sm uppercase mx-4 cursor-pointer">
7979
🎉🎉 Join our param parties to build some
8080
amazing economies with us! 🎉🎉
8181
</span>
82-
<span className="font-bj font-bold text-xs uppercase mx-4 cursor-pointer">
82+
<span className="font-bj font-bold text-sm uppercase mx-4 cursor-pointer">
8383
🎉🎉 Join our param parties to build some
8484
amazing economies with us! 🎉🎉
8585
</span>
86-
<span className="font-bj font-bold text-xs uppercase mx-4 cursor-pointer">
86+
<span className="font-bj font-bold text-sm uppercase mx-4 cursor-pointer">
8787
🎉🎉 Join our param parties to build some
8888
amazing economies with us! 🎉🎉
8989
</span>
@@ -102,7 +102,7 @@ function App({ Component, pageProps }: AppPropsWithLayout) {
102102
)}
103103
<motion.div
104104
key="navbar"
105-
initial={{ y: 32, paddingBottom: '1rem' }}
105+
initial={{ y: '3rem', paddingBottom: '1rem' }}
106106
animate={!banner && { y: 0, paddingBottom: 0 }}
107107
transition={{ duration: 1 }}
108108
>

‎src/templates/Intro.tsx‎

Lines changed: 102 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import Head from 'next/head';
22
import Link from 'next/link';
33
import { useRouter } from 'next/router';
44
import { useState, ReactNode } from 'react';
5-
import { motion, Variants } from 'framer-motion';
5+
import {
6+
AnimatePresence,
7+
AnimateSharedLayout,
8+
motion,
9+
Variants,
10+
} from 'framer-motion';
611

712
import { CustomNavbar as Navbar } from '@/components/_global/Navbar';
813
import { NeonButton } from '@/components/btns/';
@@ -32,6 +37,66 @@ const introFade: Variants = {
3237
},
3338
};
3439

40+
function animateNav(checkURL: boolean): Variants {
41+
const navControlHeader: Variants = {
42+
animate: {
43+
color: checkURL ? '#595959' : '#FFFFFF',
44+
opacity: 1,
45+
transition: {
46+
type: 'linear',
47+
duration: 0.8,
48+
},
49+
},
50+
initial: {
51+
transition: {
52+
type: 'linear',
53+
duration: 0.8,
54+
},
55+
},
56+
57+
exit: {
58+
transition: {
59+
type: 'linear',
60+
duration: 0.4,
61+
},
62+
},
63+
};
64+
return navControlHeader;
65+
}
66+
67+
const navBox: Variants = {
68+
animate: {
69+
opacity: 1,
70+
width: '7rem',
71+
transition: { duration: 0.6 },
72+
},
73+
initial: {
74+
opacity: 0,
75+
width: 0,
76+
transition: { duration: 0.6 },
77+
},
78+
exit: {
79+
opacity: 0,
80+
width: 0,
81+
transition: { duration: 0.6 },
82+
},
83+
};
84+
85+
const navSubtitle: Variants = {
86+
animate: {
87+
opacity: 1,
88+
transition: { duration: 0.1, delay: 0.6 },
89+
},
90+
initial: {
91+
opacity: 0,
92+
transition: { duration: 0.1, delay: 0.6 },
93+
},
94+
exit: {
95+
opacity: 0,
96+
transition: { duration: 0.1 },
97+
},
98+
};
99+
35100
const sections = [
36101
{
37102
slug: 1,
@@ -89,28 +154,43 @@ function Intro({
89154
<div className="col-span-2 text-white">
90155
<nav className="font-bj lg:mb-16">
91156
<ul className="flex gap-16">
92-
{sections.map(({ slug, subtitle }) => (
93-
<Link href={`/intro/${slug}`}>
94-
<li
95-
className={`cursor-pointer text-gray-50 text-8xl ${
96-
router.pathname !== `/intro/${slug}`
97-
? 'text-opacity-20'
98-
: ''
99-
}`}
100-
>
101-
{slug}
102-
<div
103-
className={`text-base ml-4 w-18 break-words ${
104-
router.pathname === `/intro/${slug}`
105-
? 'inline-block'
106-
: 'hidden'
107-
}`}
157+
<AnimateSharedLayout>
158+
{sections.map(({ slug, subtitle }) => (
159+
<Link href={`/intro/${slug}`}>
160+
<motion.li
161+
animate="animate"
162+
initial="initial"
163+
exit="exit"
164+
variants={animateNav(
165+
router.pathname !== `/intro/${slug}`
166+
)}
167+
className="cursor-pointer text-gray-50 text-8xl flex items-end"
108168
>
109-
{subtitle}
110-
</div>
111-
</li>
112-
</Link>
113-
))}
169+
{slug}
170+
<AnimatePresence>
171+
{router.pathname === `/intro/${slug}` && (
172+
<motion.div
173+
animate="animate"
174+
initial="initial"
175+
exit="exit"
176+
variants={navBox}
177+
className="text-base ml-4 inline-block"
178+
>
179+
<motion.span
180+
animate="animate"
181+
initial="initial"
182+
exit="exit"
183+
variants={navSubtitle}
184+
>
185+
{subtitle}
186+
</motion.span>
187+
</motion.div>
188+
)}
189+
</AnimatePresence>
190+
</motion.li>
191+
</Link>
192+
))}
193+
</AnimateSharedLayout>
114194
</ul>
115195
</nav>
116196
<motion.div

0 commit comments

Comments
 (0)