tokenomics

README.md

@@ -1,4 +1,5 @@
-# Next.js + Tailwind CSS Example
+# 🌎 TinyTerra Front End
+## Next.js + Tailwind CSS 
 
 This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v2.2)](https://blog.tailwindcss.com/tailwindcss-2-2) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
 

components/creator-token-chart.js

@@ -0,0 +1,120 @@
+import { useState, useEffect } from 'react';
+import Chart from 'react-apexcharts';
+
+export default function CreatorTokenChart() {
+  var circulatingTokens = [];
+  var dataPoints = [];
+
+  for (var i = 0; i < 201; i += 1) {
+    if (i === 0) {
+      circulatingTokens.push(0.01);
+    } else {
+      circulatingTokens.push(i * 50);
+    }
+  }
+
+  circulatingTokens.forEach(function (item) {
+    var num = 0.3 * (item / 666) ** 3;
+    dataPoints.push(num.toFixed(2));
+  });
+
+  const [chartData, setChartData] = useState({
+    series: [
+      {
+        name: 'Creator Token Price',
+        data: dataPoints,
+      },
+    ],
+    options: {
+      chart: {
+        type: 'area',
+        height: 350,
+        zoom: {
+          enabled: false,
+        },
+        dropShadow: {
+          enabled: true,
+          top: 0,
+          left: 0,
+          blur: 2,
+          opacity: 0.5,
+          color: '#3f3fc2',
+        },
+      },
+      colors: ['#4c4edc'],
+      stroke: {
+        curve: 'smooth',
+      },
+      grid: {
+        show: false,
+      },
+      fill: {
+        colors: ['#4c4edc', '#4c4edc', '#4c4edc'],
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      title: {
+        text: 'Price Demand Curve',
+        align: 'left',
+        style: {
+          color: '#FFFFFF',
+        },
+      },
+      subtitle: {
+        text: 'Circulating Tokens x Price',
+        align: 'left',
+        style: {
+          color: '#FFFFFF',
+        },
+      },
+      labels: circulatingTokens,
+      xaxis: {
+        type: 'number',
+        tickAmount: 25,
+        labels: {
+          formatter: function (value) {
+            return value;
+          },
+          style: { colors: '#FFF' },
+        },
+        axisTicks: {
+          show: false,
+        },
+        crosshairs: {
+          show: false,
+          dropShadow: {
+            enabled: false,
+            top: 0,
+            left: 0,
+            blur: 1,
+            opacity: 0.4,
+          },
+        },
+      },
+      yaxis: {
+        opposite: true,
+        labels: {
+          formatter: function (value) {
+            return '$' + value;
+          },
+          style: { colors: '#FFF' },
+        },
+      },
+      legend: {
+        horizontalAlign: 'left',
+      },
+    },
+  });
+
+  return (
+    <div id='chart'>
+      <Chart
+        options={chartData.options}
+        series={chartData.series}
+        type='area'
+        height={350}
+      />
+    </div>
+  );
+}

components/mint-input.js

@@ -1,11 +1,9 @@
 import { useState, useContext } from 'react';
 import { useRouter } from 'next/router';
 import { TokensContext } from '../contexts/tokensContext';
-
+import Link from 'next/link';
 import { storeFiles } from '../utils/storage';
 
-import ReactDOM from 'react-dom';
-
 // Import React FilePond
 import { FilePond, File, registerPlugin } from 'react-filepond';
 
@@ -76,12 +74,20 @@ export default function CreateInput({ setSelected }) {
               </h3>
               <p className='mt-3 text-md font-light text-gray-50'>
                 Minted tokens have a fixed supply of 10,000 tokens. As a
-                creator, you'll receive 1,000 tokens, and 1,000 tokens will be
-                held in the community treasury. Token issuance and price is
-                based on a <span className='underline'>price demand curve</span>
+                creator, you'll receive 10% of sale proceeds & 10% will be go to
+                the community treasury. Token issuance and price is based on a{' '}
+                <span className='underline hover:font-semibold'>
+                  <Link href='/tokenomics'>
+                    <a> price demand curve</a>
+                  </Link>
+                </span>
                 . Creator tokens can be{' '}
-                <span className='underline'>backed by TNY tokens</span> to help
-                drive demand 🚀
+                <span className='underline hover:font-semibold'>
+                  <Link href='/stake'>
+                    <a>backed by TNY tokens</a>
+                  </Link>
+                </span>{' '}
+                to help drive demand 🚀
               </p>
             </div>
 

components/navbar.js

@@ -4,11 +4,29 @@ import { CashIcon } from '@heroicons/react/solid';
 import ChangeArrow from './change-arrow';
 import { randomChangeType, randomNumber } from '../utils/misc';
 
-import { useContext } from 'react';
-import { UserContext } from '../contexts/userContext';
+import { useMemo } from 'react';
+import { useConnectedWallet, useWallet, WalletStatus } from "@terra-money/wallet-provider";
 
 export default function Navbar() {
-  const [user, setUser] = useContext(UserContext);
+  const {
+    status,
+    availableInstallTypes, install, // TODO: implement terra station install
+    connect,
+    disconnect,
+  } = useWallet();
+
+  const connectedWallet = useConnectedWallet();
+
+  const addressInfo = useMemo(() => {
+    if (connectedWallet) {
+      const address = connectedWallet.terraAddress;
+      const networkName = connectedWallet.network.name !== 'mainnet' ? `${connectedWallet.network.name} ` : '';
+      return `${networkName}${address.substring(0, 6)}...${address.substring(address.length - 6)}`;
+    }
+    return '';
+  }, [connectedWallet]);
+
+
   return (
     <div className='bg-gradient-to-b from-black/70 via-black/50 to-transparent'>
       <div className='max-w-5xl mx-auto px-8'>
@@ -34,40 +52,48 @@ export default function Navbar() {
               />
             </a>
             <Link href='/'>
-              <a className='hover:border-indigo-500 text-white inline-flex items-center px-1 pt-1 hover:border-b-2 text-sm font-medium'>
+              <a
+                className='hover:border-indigo-500 text-white inline-flex items-center px-1 pt-1 hover:border-b-2 text-sm font-medium'>
                 🚀 Leaderboard
               </a>
             </Link>
 
             <Link href='/stake'>
-              <a className='hover:border-indigo-500 text-white inline-flex items-center px-1 pt-1 hover:border-b-2 text-sm font-medium'>
+              <a
+                className='hover:border-indigo-500 text-white inline-flex items-center px-1 pt-1 hover:border-b-2 text-sm font-medium'>
                 🧑‍🌾 Stake
               </a>
             </Link>
 
             <Link href='/mint'>
-              <a className='hover:border-indigo-500 text-white inline-flex items-center px-1 pt-1 hover:border-b-2 text-sm font-medium'>
+              <a
+                className='hover:border-indigo-500 text-white inline-flex items-center px-1 pt-1 hover:border-b-2 text-sm font-medium'>
                 🏦 Mint
               </a>
             </Link>
           </div>
           <div className='hidden sm:flex items-center '>
-            {user === null ? (
+            {status === WalletStatus.WALLET_NOT_CONNECTED ? (
               <button
                 type='button'
-                onClick={() => setUser('luna..2X74')}
+                onClick={() => connect('CHROME_EXTENSION')}
                 className='relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'>
                 <CashIcon className='-ml-1 mr-2 h-5 w-5' aria-hidden='true' />
                 <span>Connect</span>
               </button>
             ) : (
-              <button
-                onClick={() => setUser(null)}
-                type='button'
-                className='relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'>
-                <CashIcon className='-ml-1 mr-2 h-5 w-5' aria-hidden='true' />
-                <span>{user}</span>
-              </button>
+              <>
+                <label htmlFor="disconnectButton">Disconnect</label>
+                <button
+                  id='disconnectButton'
+                  onClick={() => disconnect()}
+                  type='button'
+                  title={"Disconnect from: " + addressInfo}
+                  className='relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'>
+                  <CashIcon className='-ml-1 mr-2 h-5 w-5' aria-hidden='true' />
+                  <span>{addressInfo}</span>
+                </button>
+              </>
             )}
           </div>
         </div>

components/stake-stats.js

@@ -27,7 +27,7 @@ export default function Example() {
                   <dt className='order-2 mt-2 text-lg leading-6 font-light text-gray-200'>
                     🌎 TNY Rewards <br />
                     <span className='underline font-medium cursor-pointer hover:no-underline mr-2 text-sm'>
-                      Claim
+                      Claim to wallet
                     </span>
                     💰
                     <br />

components/token-chart.js

@@ -1,11 +1,10 @@
 import React from 'react';
+import Link from 'next/link';
 import { Sparklines, SparklinesLine, SparklinesSpots } from 'react-sparklines';
 
-function randomArray() {
-  return Array.from({ length: 20 }, () => Math.floor(Math.random() * 40));
-}
+import { randomArray, randomNumberRange } from '../utils/misc';
 
-export default function TokenChart() {
+export default function TokenChart({ token }) {
   return (
     <div className='backdrop-filter backdrop-blur-md bg-gray-800/50 shadow rounded-lg py-3 px-5'>
       <div className='text-center'>
@@ -29,37 +28,39 @@ export default function TokenChart() {
           </Sparklines>
 
           <div className='text-left mt-6 mb-2 font-light text-lg text-white'>
-            Tokenomics
+            Tokenomics{' '}
+            <span className='hover:font-bold underline text-sm font-medium'>
+              <Link href='/tokenomics'>
+                <a>Price Curve</a>
+              </Link>
+            </span>
           </div>
 
-          <ProgressBar progressPercentage={70} />
+          <ProgressBar progressPercentage={70} token={token} />
         </div>
       </div>
     </div>
   );
 }
 
-const ProgressBar = ({ progressPercentage }) => {
+const ProgressBar = ({ progressPercentage, token }) => {
   return (
     <div className='h-10 w-full bg-gray-800/50 rounded-lg'>
       <div
         style={{ marginLeft: '90%' }}
         className='absolute mt-1 text-white font-semibold text-xs'>
-        10,000 FIR
+        10,000 {token.symbol}
       </div>
       <div
         style={{ marginLeft: `${progressPercentage - 6.5}%` }}
         className='text-white
         absolute mt-12'>
         <div className='h-8 pt-1 px-1 w-30 rounded-lg bg-indigo-600 relative'>
-          🔥 3,700 left
-          <div className='absolute -top-2 left-6 h-0 w-0 border-8 bg-indigo-600 transform border-b-transparent border-r-transparent rotate-45'></div>
+          🔥 {randomNumberRange(100) + 3500} left
         </div>
       </div>
-      <div
-        style={{ marginLeft: `${progressPercentage / 3}%` }}
-        className='text-white text-xs absolute mt-12'>
-        💰 Backed by $343 in TNY
+      <div className='text-white text-sm absolute mt-12'>
+        💰 Backed by ${randomNumberRange(2500)} in TNY
       </div>
 
       <div

components/token-header.js

@@ -1,8 +1,4 @@
-import {
-  StopIcon,
-  CalendarIcon,
-  CubeTransparentIcon,
-} from '@heroicons/react/solid';
+import { StopIcon } from '@heroicons/react/solid';
 
 export default function TokenHeader({ token }) {
   return (

components/token-leaderboard.js

@@ -7,9 +7,12 @@ import { randomArray } from '../utils/misc';
 import { TokensContext } from '../contexts/tokensContext';
 
 import { randomNumber, randomChangeType } from '../utils/misc';
+import useContractTokens from "../hooks/useContractTokens";
 
 export default function TokenLeaderboard() {
   const [tokens, setTokens] = useContext(TokensContext);
+  const contractTokens = useContractTokens()
+
   return (
     <div className='flex flex-col max-w-4xl px-4 mx-auto'>
       <h3 className='text-2xl leading-6 mt-10 mb-4 drop-shadow-md font-medium text-white'>