[ECO-1749] Register market functionality (#83)

Co-authored-by: matt <[email protected]>

cfg/cspell-dictionary.txt

@@ -42,6 +42,7 @@ merperson
 moai
 mybuilder
 nazar
+nextjs
 nohup
 octa
 oden

src/typescript/.env.example

@@ -0,0 +1,18 @@
+
+# To run your own local node for e2e testing, set this to "false"
+START_LOCAL_NODE_FOR_TEST="true"
+
+# The Aptos network to use
+NEXT_PUBLIC_APTOS_NETWORK="local"
+
+# Randomly generated private key for tests
+PUBLISHER_PK="29479e9e5fe47ba9a8af509dd6da1f907510bcf8917bfb19b7079d8c63c0b720"
+
+# The address of the main `emojicoin_dot_fun` contract module
+NEXT_PUBLIC_MODULE_ADDRESS="0x4bab58978ec1b1bef032eeb285ad47a6a9b997d646c19b598c35f46b26ff9ece"
+
+# The default URL for a local inbox deployment. Do not add a slash to the end
+INBOX_URL="http://localhost:3000"
+
+## A `nextjs` setting to determine the query revalidation length
+SHORT_REVALIDATE="true"

src/typescript/.env.test

@@ -0,0 +1,10 @@
+START_LOCAL_NODE_FOR_TEST="false"
+SHORT_REVALIDATE="true"
+
+NEXT_PUBLIC_APTOS_NETWORK="local"
+NEXT_PUBLIC_INTEGRATOR_ADDRESS="0x4bab58978ec1b1bef032eeb285ad47a6a9b997d646c19b598c35f46b26ff9ece"
+NEXT_PUBLIC_MODULE_ADDRESS="0x4bab58978ec1b1bef032eeb285ad47a6a9b997d646c19b598c35f46b26ff9ece"
+
+PUBLISHER_PK="29479e9e5fe47ba9a8af509dd6da1f907510bcf8917bfb19b7079d8c63c0b720"
+
+INBOX_URL="http://localhost:3000"

src/typescript/.gitignore

@@ -3,3 +3,6 @@ build/**
 dist/**
 .next/**
 node_modules/
+.env*.local
+**/*.env*.local
+.env

src/typescript/README.md

@@ -0,0 +1,65 @@
+# How to build and deploy this application
+
+## Ensure the environment variables are loaded
+
+This repository loads environment variables in multiple ways.
+
+To load environment variables while running test scripts, each `package.json`
+file in the `sdk` folder specifies how to load these environment variables. Most
+scripts run the `dotenv-cli` package as a wrapper, like so:
+
+```shell
+# In sdk/package.json:
+"test": "dotenv -e ../.env.test -- pnpm jest",
+
+# I run this command
+pnpm run test
+
+# Which loads the env variables in `../.env.test` and runs `jest`
+```
+
+Where `../.env.test` is the environment file located in the `typescript` parent
+directory.
+
+To avoid having to define environment variables in multiple places, we've
+intentionally omitted environment variables from the `frontend` directory to
+enforce that the project be built and run in a certain order.
+
+## Copy the `.env.example` file to an `.env` or `.env.local` file
+
+Most commands load `.env.local` first then `.env`, so copy the environment
+example file to your own file.
+
+```shell
+# With the highest precedence.
+cp .env.example .env.local
+# or just `.env.`, which will be superseded by `.env.local` in loading order
+cp .env.example .env
+```
+
+## Run the `frontend` application
+
+```shell
+cd src/typescript
+pnpm i
+
+# to rebuild everything and run
+pnpm run build
+pnpm run start
+
+# or, for hot reloads (does not rebuild)
+pnpm run dev
+```
+
+Sometimes, `turbo` and `next` have build caches that persist and cause errors.
+This can be avoided with a clever build process, however, you can also just
+delete the `.next` and `.turbo` folders in each directory.
+
+You can also run:
+
+```shell
+pnpm run full-clean
+```
+
+Note this remove's each project's `node_modules`, although it does not remove
+the `pnpm-lock.yaml` file.

src/typescript/frontend/next.config.mjs

@@ -25,9 +25,6 @@ const debugConfigOptions = {
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  env: {
-    "INBOX_URL": process.env.INBOX_URL ?? "http://localhost:3000",
-  },
   crossOrigin: "use-credentials",
   typescript: {
     tsconfigPath: "tsconfig.json",
@@ -41,7 +38,7 @@ const nextConfig = {
     return [
       {
         source: "/emojicoin",
-        destination: "/emojicoin/0",
+        destination: "/emojicoin/1",
         permanent: true,
       },
     ];

src/typescript/frontend/package.json

@@ -12,7 +12,7 @@
     ]
   },
   "dependencies": {
-    "@aptos-labs/wallet-adapter-react": "^2.5.1",
+    "@aptos-labs/wallet-adapter-react": "^3.0.2",
     "@econia-labs/emojicoin-sdk": "workspace:*",
     "@emotion/is-prop-valid": "^1.2.2",
     "@headlessui/react": "^2.0.4",
@@ -37,6 +37,7 @@
     "react-toastify": "^9.1.3",
     "redux": "^5.0.1",
     "redux-logger": "^3.0.6",
+    "server-only": "^0.0.1",
     "socket.io-client": "^4.7.2",
     "styled-components": "^6.1.8",
     "styled-system": "^5.1.5",
@@ -70,8 +71,8 @@
   "scripts": {
     "_format": "prettier './**/*.{js,jsx,ts,tsx,css,md}' --config ./.prettierrc.js",
     "build": "next build",
-    "build:debug": "BUILD_DEBUG=true && pnpm clean && next build --no-lint --no-mangling --debug",
-    "clean": "rm -rf .next",
+    "build:debug": "BUILD_DEBUG=true && pnpm clean && pnpm i && next build --no-lint --no-mangling --debug",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf .next",
     "dev": "NODE_OPTIONS='--inspect' next dev --turbo",
     "format": "pnpm _format --write",
     "format:check": "pnpm _format --check",

src/typescript/frontend/src/app/emojicoin/[market]/page.tsx

@@ -1,12 +1,11 @@
-import Emojicoin from "components/pages/emojicoin";
-import { SHORT_REVALIDATE } from "lib/env";
 import getInitialChatData from "lib/queries/initial/chats";
 import { fetchTopMarkets } from "lib/queries/initial/markets";
 import { fetchLastMarketState } from "lib/queries/initial/state";
 import getInitialSwapData from "lib/queries/initial/swaps";
+import ClientEmojicoinPage from "components/pages/emojicoin/ClientEmojicoinPage";
 
 // We will revalidate the data cache every hour. This can be adjusted later based on how much data is fetched.
-export const revalidate = SHORT_REVALIDATE ? 10 : 3600;
+export const revalidate = process.env.SHORT_REVALIDATE === "true" ? 10 : 3600;
 
 type StaticParams = {
   market: string;
@@ -33,7 +32,7 @@ const EmojicoinPage = async (params: EmojicoinPageProps) => {
     const swapData = await getInitialSwapData(marketID);
 
     return (
-      <Emojicoin
+      <ClientEmojicoinPage
         data={{
           swaps: swapData,
           chats: chatData,
@@ -45,7 +44,7 @@ const EmojicoinPage = async (params: EmojicoinPageProps) => {
     );
   }
 
-  return <Emojicoin />;
+  return <ClientEmojicoinPage />;
 };
 
 export default EmojicoinPage;

src/typescript/frontend/src/app/global.css

@@ -4,6 +4,13 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  .Toastify__toast-container > * {
+    font-family: var(--font-forma) !important;
+    line-height: 1.4rem;
+  }
+}
+
 .med-pixel-text {
   font-size: 20px;
   line-height: 25px;

src/typescript/frontend/src/app/home/page.tsx

@@ -1,8 +1,8 @@
-import Home from "components/pages/home";
+import ClientHomePage from "components/pages/home/ClientHomePage";
 import { fetchTopMarkets } from "lib/queries/initial/markets";
 
 export default async function HomePage() {
   const data = await fetchTopMarkets();
 
-  return <Home data={data} />;
+  return <ClientHomePage data={data} />;
 }

src/typescript/frontend/src/app/launch-emojicoin/page.tsx

@@ -1,5 +1,5 @@
-import LaunchEmojicoin from "components/pages/launch-emojicoin";
+import ClientLaunchEmojicoinPage from "../../components/pages/launch-emojicoin/ClientLaunchEmojicoinPage";
 
 export default function LaunchEmojicoinPage() {
-  return <LaunchEmojicoin />;
+  return <ClientLaunchEmojicoinPage />;
 }

src/typescript/frontend/src/app/pools/page.tsx

@@ -1,5 +1,5 @@
-import Pools from "components/pages/pools";
+import ClientPoolsPage from "components/pages/pools/ClientPoolsPage";
 
 export default function PoolsPage() {
-  return <Pools />;
+  return <ClientPoolsPage />;
 }

src/typescript/frontend/src/components/header/components/mobile-menu/index.tsx

@@ -11,7 +11,7 @@ import { MobileMenuItem } from "../index";
 import { type MobileMenuProps } from "./types";
 
 import { slideVariants } from "./animations";
-import ConnectWalletButton from "components/header/wallet-button/ConnectWalletButton";
+import ButtonWithConnectWalletFallback from "components/header/wallet-button/ConnectWalletButton";
 
 export const MobileMenu: React.FC<MobileMenuProps> = ({
   isOpen,
@@ -42,7 +42,7 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({
             );
           })}
 
-          <ConnectWalletButton mobile={true} />
+          <ButtonWithConnectWalletFallback mobile={true} />
         </MobileMenuInner>
 
         <Flex position="absolute" bottom="60px" justifyContent="center" width="100%">

src/typescript/frontend/src/components/header/index.tsx

@@ -19,7 +19,7 @@ import { slideTopVariants } from "./animations";
 import { type HeaderProps } from "./types";
 import { translationFunction } from "context/language-context";
 
-import ConnectWalletButton from "./wallet-button/ConnectWalletButton";
+import ButtonWithConnectWalletFallback from "./wallet-button/ConnectWalletButton";
 
 const Header: React.FC<HeaderProps> = ({ isOpen, setIsOpen }) => {
   const { isDesktop } = useMatchBreakpoints();
@@ -68,7 +68,7 @@ const Header: React.FC<HeaderProps> = ({ isOpen, setIsOpen }) => {
                   </Link>
                 );
               })}
-              <ConnectWalletButton />
+              <ButtonWithConnectWalletFallback />
             </FlexGap>
           )}
 

src/typescript/frontend/src/components/header/wallet-button/ConnectWalletButton.tsx

@@ -12,7 +12,7 @@ export interface ConnectWalletProps extends PropsWithChildren<{ className?: stri
 
 const DEFAULT_TEXT = "Connect Wallet";
 
-export const ConnectWalletButton: React.FC<ConnectWalletProps> = ({
+export const ButtonWithConnectWalletFallback: React.FC<ConnectWalletProps> = ({
   mobile,
   children,
   className,
@@ -98,4 +98,4 @@ export const ConnectWalletButton: React.FC<ConnectWalletProps> = ({
   );
 };
 
-export default ConnectWalletButton;
+export default ButtonWithConnectWalletFallback;

src/typescript/frontend/src/components/pages/emojicoin/index.tsx → src/typescript/frontend/src/components/pages/emojicoin/ClientEmojicoinPage.tsx

@@ -13,7 +13,7 @@ import MobileGrid from "./components/mobile-grid";
 import { type EmojicoinProps } from "./types";
 import { EmojiNotFound } from "./components/emoji-not-found";
 
-const Emojicoin = (props: EmojicoinProps) => {
+const ClientEmojicoinPage = (props: EmojicoinProps) => {
   const { isLaptopL } = useMatchBreakpoints();
 
   return (
@@ -32,4 +32,4 @@ const Emojicoin = (props: EmojicoinProps) => {
   );
 };
 
-export default Emojicoin;
+export default ClientEmojicoinPage;

src/typescript/frontend/src/components/pages/home/index.tsx → src/typescript/frontend/src/components/pages/home/ClientHomePage.tsx

@@ -5,11 +5,11 @@ import MainCard from "./components/main-card";
 import { type MarketStateProps } from "./types";
 
 export interface HomeProps {
-  data: Array<MarketStateProps>;
+  data?: Array<MarketStateProps>;
 }
 
-const Home = async (props: HomeProps) => {
-  const data = props.data;
+const ClientHomePage = async (props: HomeProps) => {
+  const data = props.data ?? [];
 
   const featured = data.toReversed().pop();
   const gridMarkets = data.slice(1);
@@ -37,4 +37,4 @@ const Home = async (props: HomeProps) => {
   );
 };
 
-export default Home;
+export default ClientHomePage;

src/typescript/frontend/src/components/pages/index.ts

@@ -1,5 +1,4 @@
 export * from "./not-found";
-export * from "./connect-wallet";
-export * from "./emojicoin";
-export * from "./launch-emojicoin";
+export * from "./emojicoin/ClientEmojicoinPage";
+export * from "./launch-emojicoin/ClientLaunchEmojicoinPage";
 export * from "./pools/components";