Merge pull request #2412 from fluidity-money/develop-leaderboard-project

Develop leaderboard page

.github/workflows/test-ci.yml

@@ -52,15 +52,15 @@ jobs:
           lfs: true
           submodules: recursive
       - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@v1-node16
+        uses: aws-actions/configure-aws-credentials@v4
         with:
           aws-region: ap-southeast-2
           role-to-assume: ${{ secrets.FLU_AWS_GITHUB_OIDC_ROLE }}
           role-duration-seconds: 7200 #seconds
       - name: Install nodejs
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: Install rust
         uses: actions-rust-lang/setup-rust-toolchain@v1
       - name: Install python
@@ -94,7 +94,7 @@ jobs:
           lfs: true
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
       - name: npm test
         working-directory: web
         run: |
@@ -117,7 +117,7 @@ jobs:
         with:
           lfs: true
       - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@v1-node16
+        uses: aws-actions/configure-aws-credentials@v4
         with:
           aws-region: ap-southeast-2
           role-to-assume: ${{ secrets.FLU_AWS_GITHUB_OIDC_ROLE }}

automation/fluidity/leaderboard/.templates/dev_appspec.yml.j2

@@ -0,0 +1,13 @@
+version: 0.0
+Resources:
+  - TargetService:
+      Type: AWS::ECS::Service
+      Properties:
+        TaskDefinition: {{ CONFIG.TASKDEFARN }}
+        LoadBalancerInfo:
+          ContainerName: {{ CONFIG.SERVICE_NAME }}
+          ContainerPort: 80
+        PlatformVersion: "LATEST"
+
+Hooks:
+  - AfterAllowTraffic: "arn:aws:lambda:ap-southeast-2:{{ CONFIG.AWS_ACCOUNT_ID }}:function:{{ CONFIG.CODEDEPLOY_CACHE_PURGE_LAMBDA }}"  

automation/fluidity/leaderboard/.templates/ecs-compose.yml.j2

@@ -0,0 +1,16 @@
+version: '3'
+services:
+  {{ CONFIG.SERVICE_NAME }}:
+    container_name: {{ CONFIG.SERVICE_NAME }}
+    image: {{ CONFIG.AWS_ACCOUNT_ID }}.dkr.ecr.{{ CONFIG.AWS_REGION }}.amazonaws.com/{{ CONFIG.DOCKER_IMAGE }}:{{ CONFIG.DOCKER_TAG }}
+    ports: 
+      - 80:80
+    logging:
+      driver: awslogs
+      options:
+        awslogs-group: {{ CONFIG.LOG_GROUP }}
+        awslogs-region: {{ CONFIG.AWS_REGION }}
+        awslogs-stream-prefix: {{ CONFIG.SERVICE_NAME }}
+    {% block environmentvariables %}
+
+    {% endblock %}

automation/fluidity/leaderboard/.templates/ecs-params.yml.j2

@@ -0,0 +1,31 @@
+version: 1
+task_definition:
+  ecs_network_mode: {{ CONFIG.NETWORK_MODE }}
+  task_role_arn: arn:aws:iam::{{ CONFIG.AWS_ACCOUNT_ID }}:role/{{ CONFIG.TASK_ROLE }}
+  task_execution_role: arn:aws:iam::{{ CONFIG.AWS_ACCOUNT_ID }}:role/{{ CONFIG.TASK_EXECUTION_ROLE }}
+  task_size:
+    cpu_limit: {{ CONFIG.CPU_LIMIT }}
+    mem_limit: {{ CONFIG.MEM_LIMIT }}
+  services:
+    {{ CONFIG.SERVICE_NAME }}:
+      essential: true
+      {% block secrets %}
+
+      {% endblock %}
+      {% block healthcheck %}
+
+      {% endblock %}
+run_params:
+  task_placement:
+    strategy:
+      - type: spread
+        field: attribute:ecs.availability-zone
+  network_configuration:
+    awsvpc_configuration:
+      subnets:
+        - {{ CONFIG.SUBNETA }}
+        - {{ CONFIG.SUBNETB }}
+        - {{ CONFIG.SUBNETC }}
+      security_groups:
+        - {{ CONFIG.SECURITY_GROUP }}
+      assign_public_ip: ENABLED

automation/fluidity/leaderboard/.templates/mainnet_appspec.yml.j2

@@ -0,0 +1,13 @@
+version: 0.0
+Resources:
+  - TargetService:
+      Type: AWS::ECS::Service
+      Properties:
+        TaskDefinition: {{ CONFIG.TASKDEFARN }}
+        LoadBalancerInfo:
+          ContainerName: {{ CONFIG.SERVICE_NAME }}
+          ContainerPort: 80
+        PlatformVersion: "LATEST"
+
+Hooks:
+  - AfterAllowTraffic: "arn:aws:lambda:ap-southeast-2:{{ CONFIG.AWS_ACCOUNT_ID }}:function:{{ CONFIG.CODEDEPLOY_CACHE_PURGE_LAMBDA }}"  

automation/fluidity/leaderboard/mainnet.yml

@@ -0,0 +1,16 @@
+SERVICES:
+  - FRONTEND:
+      SERVICE_NAME: leaderboard
+      DOCKER_IMAGE: leaderboard-frontend
+      DOCKERFILE_PATH: ./web/leaderboard
+      DEPLOYMENT_TYPE: CODEDEPLOY
+      CODEDEPLOY_WAIT_TIME: 60 #minutes
+      LOAD_BALANCER: flu-mainnet-fluidity-alb
+      TARGET_GROUP_01: flu-mainnet-leaderboard-fe-tg
+      TARGET_GROUP_02: flu-mainnet-leaderboard-fe-tg-1
+      CPU_LIMIT: 512
+      MEM_LIMIT: 1024
+
+      DOCKER_ARGS:
+        SECRET_FLU_SENTRY_DSN: /fluidity/frontend/sentryURL
+        SECRET_GITHUB_TOKEN: /fluidity/npm/github_token

web/leaderboard/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

web/leaderboard/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Sentry Config File
+.sentryclirc
+
+# Sentry Config File
+.sentryclirc

web/leaderboard/Dockerfile.frontend

@@ -0,0 +1,36 @@
+
+FROM fluidity/build-web-container:latest AS build
+
+WORKDIR /usr/local/src/fluidity/web
+
+ENV PRODUCTION ${PRODUCTION}
+
+ARG CI
+
+ARG GITHUB_TOKEN
+
+ENV CI $CI
+
+ENV PATH /app/node_modules.bin:$PATH
+
+COPY . ./
+
+RUN yarn
+
+ARG FLU_SENTRY_DSN
+
+WORKDIR /usr/local/src/fluidity/web/leaderboard
+
+RUN make frontend
+
+FROM fluidity/runtime-web-container:latest
+
+WORKDIR /usr/local/src/fluidity/web
+
+COPY --from=build /usr/local/src/fluidity/web .
+
+WORKDIR /usr/local/src/fluidity/web/leaderboard
+
+EXPOSE 3000
+
+CMD ["yarn", "start"]

web/leaderboard/Makefile

@@ -0,0 +1,39 @@
+
+REPO := leaderboard
+
+FRONTEND_SRC_DIR := src
+
+FRONTEND_SRC_TS_DIR := ${FRONTEND_SRC_DIR}
+FRONTEND_SRC_SASS_DIR := ${FRONTEND_SRC_DIR}/styles
+
+FRONTEND_SRC_TS := $(shell find ${FRONTEND_SRC_TS_DIR} -name '*ts*')
+FRONTEND_SRC_SASS := ${FRONTEND_SRC_SASS_DIR}/config.scss
+
+FRONTEND_SRC := ${FRONTEND_SRC_TS} ${FRONTEND_SRC_SASS}
+
+include ../../web.mk
+
+NEXTJS_BUILD := cd ..  && turbo build --filter website
+
+nextjs:
+	${NEXTJS_BUILD}
+
+${FRONTEND_BUILD}: nextjs
+	@touch ${FRONTEND_BUILD}
+
+# No the double dot is not a typo. Turbo builds are from the monorepo root.
+docker-frontend: ${FRONTEND_SRC}
+	@${DOCKER_BUILD} \
+		${DOCKERFLAGS} \
+		${DOCKER_BUILD_ARGS} \
+		-t "${ORG_ROOT}/${REPO}-frontend" \
+		-f Dockerfile.frontend \
+		..
+
+	@touch docker-frontend
+
+run-docker: ${FILES} docker
+	@${DOCKER} run ${DOCKERFLAGS} -i -p 80:80 ${REPO}
+
+clean:
+	rm -f docker-backend docker-frontend

web/leaderboard/README.md

@@ -0,0 +1,11 @@
+This is a fUSDC leaderboard ranking project. Receive diffretent data - 24Hours and AllTime.
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+yarn dev
+```
+
+Open [http://localhost:30001](http://localhost:3001) with your browser to see the result.

web/leaderboard/cypress.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "next",
+      bundler: "webpack",
+    },
+  },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

web/leaderboard/cypress/e2e/page.cy.ts

@@ -0,0 +1,76 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+type User = {
+  address: string;
+  number_of_transactions: number;
+  rank: number;
+  volume: number;
+  yield_earned: number;
+};
+
+const users = [
+  {
+    address: "0x21f2275f26611fba1d486153b5d2d78164568435",
+    number_of_transactions: 21898,
+    rank: 2388,
+    volume: 255.13345799999914,
+    yield_earned: 18.985949367059586,
+  },
+  {
+    address: "0x1cb94adfd3314d48ca8145b2c6983419257c0486",
+    number_of_transactions: 12520,
+    rank: 3682,
+    volume: 894699.873285003,
+    yield_earned: 482.0982366909158,
+  },
+  {
+    address: "0xe776ffdab7b40147fc0b8e93676eb444fb3650b6",
+    number_of_transactions: 7135,
+    rank: 4260,
+    volume: 240194.4372060101,
+    yield_earned: 920.81961067,
+  },
+];
+
+describe("Home Page Tests", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3001");
+  });
+
+  it("loads the main elements on the page", () => {
+    cy.get("main").should("exist");
+    cy.get('[class*="header"]').should("exist");
+    cy.contains("h1", "Fluidity Leaderboard").should("exist");
+  });
+
+  it("change filters on click all time", () => {
+    cy.get("[data-cy=all-btn]").click();
+    cy.get("[data-cy=title]").contains("ALL TIME");
+  });
+
+  it("open Connect Wallet Modal", () => {
+    cy.get('[class*="connected_wallet"]').should("exist");
+    cy.get('[class*="connected_wallet"]').click();
+    cy.wait(10000);
+    cy.get('[class*="connect-wallet-outer-container"]').should("exist");
+  });
+
+  it("Confirms the number of adresses in the table", () => {
+    expect(users).to.be.an("array");
+
+    users.forEach((user) => {
+      expect(user).to.have.all.keys(
+        "address",
+        "number_of_transactions",
+        "rank",
+        "volume",
+        "yield_earned"
+      );
+      expect(user.address).to.be.a("string");
+      expect(user.number_of_transactions).to.be.a("number");
+      expect(user.rank).to.be.a("number");
+      expect(user.volume).to.be.a("number");
+      expect(user.yield_earned).to.be.a("number");
+    });
+  });
+});

web/leaderboard/cypress/e2e/profile.cy.ts

@@ -0,0 +1,12 @@
+describe("Connect Wallet Modal Open Test", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3001");
+  });
+
+  it("open Connect Wallet Modal", () => {
+    cy.get('[class*="connected_wallet"]').should("exist");
+    cy.get('[class*="connected_wallet"]').click();
+    cy.wait(10000);
+    cy.get('[class*="connect-wallet-outer-container"]').should("exist");
+  });
+});