[Provenance QA] Carbon provenance implementation (#2006)

* API: adds record provenance route * api: Fixed records provenance path * api: Added Record type * Candid retirement provenance page * Fetch provenance records in UI * Added provenance renderer * Improvements to the retirement provenance renderer * WIP * WIP * Improved retirement provenance page * Improve retirement provenance page * Improve retirement provenance page * api: Adds a route for retirements * api: fixed retirement provenance records route * Added a query retirement provenance by transaction id * Rename RecordModel into ProvenanceRecordModel * Fix retirements by id route * fix provenance page * provenance page: Added retirement card * Added user profile to retirement information * Added carbonmark profile info * carbon provenance added callapse button * Adds link to carbon provenance in single retirement page * Added link to pdf to carbon provenance * Carbon provenance: minor fix on page * Fix imports * Deployment Fixes * css fixes * Extract locales * Fix fonts size * Fix account and index concatenation * Implement carbon provenance algorithm * Fixed provenance source algorithm * Fixes verra link * Increase used API version in UI * Fetch provenance records relying 100% on the API * Reverted change to usermodel * Use carbonmark api version 5.0.0 * Update carbonmark/lib/constants.ts Co-authored-by: Michael Collins <[email protected]> * Added animation when hiding/showing transfers * Adds tests to klima retirement endpoint * Added tests for provenance records route * Added tests for provenance records route * Added klima retirements postman tests * Code review * Linting * Fix retirement route test * fix minwidth on timeline item * Extract locales * WIP * Fix timeline item mi height * Revert "WIP" This reverts commit 7431e41. * Linting * Fix records time display on carbon provenance page * Change retirements API routes * Synchronize with api retirements routes * Fixes provenance page crashing when there is no bridge serial nnumber * Skipping mumbai tests * dynamic search for retirements * Fixes retirements routes * Fix retirement route tests * camelcase retirement_index * Update carbonmark vs retirement routes * Fix postman tests for retirements * Adds hasProvenanceDetails to retirement model * Remove provenance links for moss retirements * Fix single retirement page when no project is associated * Adds test to retirements route * Update API minor version * fix ENV for preview environments * Extract locales * Fix generated files and api version * Extract locales * Fix ts-jest path * Restored package-lock * Restore jest config for api * No more serialisation field * Adds responsive features * Update used API version * Update wait for API script * Update API version * api update * Fix user display in retirement provenance page * Fix retirement provenance css * Update carbonmark/lib/waitForApi.ts Co-authored-by: selim <[email protected]> * Update carbonmark/components/SocialLinks/index.tsx Co-authored-by: selim <[email protected]> * Fix mui components imports * Update carbonmark/components/pages/Retirements/RetirementProvenance/index.tsx Co-authored-by: selim <[email protected]> * Improved slider * Rounded copy button * Fix icon color * Fix styles of quantity cartridge and timeline dots * factorize is numeric function * Refactored provenance component * Refactored splitProvenance function * Update carbonmark/components/pages/Retirements/RetirementProvenance/RetirementCard/index.tsx Co-authored-by: Michael Collins <[email protected]> * Removed important tag on sociallinks css * Linting * Enable wrapping on provenance timeline --------- Co-authored-by: Michael Collins <[email protected]> Co-authored-by: selim <[email protected]>
KlimaDAO · Feb 2, 2024 · 45cf591 · 45cf591
1 parent 3bdcc00
commit 45cf591
Show file tree

Hide file tree

Showing 34 changed files with 1,212 additions and 67 deletions.
diff --git a/carbonmark/.generated/carbonmark-api-sdk/types/PostLogin.ts b/carbonmark/.generated/carbonmark-api-sdk/types/PostLogin.ts
@@ -0,0 +1,20 @@
+export type PostLoginMutationRequest = {
+  /**
+   * @type string
+   */
+  wallet: string;
+};
+
+/**
+ * @description Successful response
+ */
+export type PostLoginMutationResponse = {
+  /**
+   * @type string
+   */
+  nonce: string;
+};
+export type PostLoginMutation = {
+  Response: PostLoginMutationResponse;
+  Request: PostLoginMutationRequest;
+};
diff --git a/carbonmark/.generated/carbonmark-api-sdk/types/PostLoginVerify.ts b/carbonmark/.generated/carbonmark-api-sdk/types/PostLoginVerify.ts
@@ -0,0 +1,24 @@
+export type PostLoginVerifyMutationRequest = {
+  /**
+   * @type string
+   */
+  wallet: string;
+  /**
+   * @type string
+   */
+  signature: string;
+};
+
+/**
+ * @description Successful response
+ */
+export type PostLoginVerifyMutationResponse = {
+  /**
+   * @type string
+   */
+  token: string;
+};
+export type PostLoginVerifyMutation = {
+  Response: PostLoginVerifyMutationResponse;
+  Request: PostLoginVerifyMutationRequest;
+};
diff --git a/carbonmark/components/Quantity/index.tsx b/carbonmark/components/Quantity/index.tsx
@@ -0,0 +1,31 @@
+import { Trans } from "@lingui/macro";
+import { Text } from "components/Text";
+import { FC } from "react";
+
+import { formatTonnes } from "@klimadao/lib/utils";
+import * as styles from "./styles";
+
+type Props = {
+  quantity: number;
+  locale?: string;
+  className?: string;
+};
+
+/**
+ * Display a quantity of credits in a tagged form
+ * FIXME: There is factorization potential with tag components (Quantity/Vintage/Category)
+ * @param props
+ * @returns
+ */
+export const Quantity: FC<Props> = (props) => {
+  const formattedAmount = formatTonnes({
+    amount: props.quantity.toString(),
+    locale: props.locale || "en",
+  });
+
+  return (
+    <Text t="body3" className={`${styles.quantity} ${props.className} `}>
+      <Trans>{formattedAmount} tonnes</Trans>
+    </Text>
+  );
+};
diff --git a/carbonmark/components/Quantity/styles.ts b/carbonmark/components/Quantity/styles.ts
@@ -0,0 +1,13 @@
+import { css } from "@emotion/css";
+
+export const quantity = css`
+  display: flex;
+  gap: 0.4rem;
+  border-radius: var(--border-radius);
+  padding: 0.4rem 0.8rem;
+  background-color: var(--surface-02);
+  flex-direction: row;
+  align-items: center;
+  align-self: flex-start;
+  border: 1px solid var(--font-03);
+`;
diff --git a/carbonmark/components/SocialLinks/index.tsx b/carbonmark/components/SocialLinks/index.tsx
@@ -0,0 +1,28 @@
+import { CopyValueButton } from "@klimadao/lib/components";
+import { FacebookButton } from "components/FacebookButton";
+import { LinkedInButton } from "components/LinkedInButton";
+import { TweetButton } from "components/TweetButton";
+import { FC } from "react";
+import * as styles from "./styles";
+
+type Props = {
+  twitterTitle: string;
+  twitterTags: string[];
+};
+/**
+ * Displays links to share the current URL on X, Facebook, Linkedin, and a button to copy the current URL
+ * @param props
+ * @returns
+ */
+export const SocialLinks: FC<Props> = (props) => {
+  return (
+    <div className={styles.socialLinks}>
+      <div className="buttons">
+        <TweetButton title={props.twitterTitle} tags={props.twitterTags} />
+        <FacebookButton />
+        <LinkedInButton />
+        <CopyValueButton rounded={true} />
+      </div>
+    </div>
+  );
+};
diff --git a/carbonmark/components/SocialLinks/styles.ts b/carbonmark/components/SocialLinks/styles.ts
@@ -0,0 +1,38 @@
+import { css } from "@emotion/css";
+
+export const socialLinks = css`
+  display: grid;
+  gap: 2.4rem;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  grid-column: main;
+
+  .title {
+    text-align: center;
+    position: relative;
+    line-height: initial;
+    color: white;
+  }
+
+  .buttons {
+    display: flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    gap: 1.6rem;
+
+    button {
+      background-color: var(--font-02);
+      width: 5rem;
+      height: 5rem;
+      font-size: 2rem;
+      padding: 1.5rem;
+      svg {
+        color: white;
+        width: 2rem;
+        height: 2rem;
+      }
+    }
+  }
+`;
diff --git a/carbonmark/components/pages/Retirements/RetirementProvenance/ProvenanceComponent/index.tsx b/carbonmark/components/pages/Retirements/RetirementProvenance/ProvenanceComponent/index.tsx
@@ -0,0 +1,71 @@
+import {
+  ProvenanceRecord,
+  Retirement,
+} from ".generated/carbonmark-api-sdk/types";
+import { concatAddress, formatTonnes } from "@klimadao/lib/utils";
+import { Trans } from "@lingui/macro";
+import BalanceOutlined from "@mui/icons-material/BalanceOutlined";
+import Token from "@mui/icons-material/Token";
+import { Text } from "components/Text";
+import { useRouter } from "next/router";
+import { ProvenanceTimeline } from "../ProvenanceTimeline";
+import * as styles from "./styles";
+
+interface ProvenanceComponentProps {
+  records: ProvenanceRecord[];
+  retirement: Retirement;
+}
+
+/**
+ * Displays provenance records formatted as a timeline
+ * @param props
+ * @returns
+ */
+export const ProvenanceComponent = (props: ProvenanceComponentProps) => {
+  const { locale } = useRouter();
+
+  // Do not display anything if we do not have at least a record
+  const lastRecord = props.records[0];
+  if (!lastRecord) return <Trans>No records found</Trans>;
+
+  /** Formats tons */
+  const formattedAmount = formatTonnes({
+    amount: lastRecord.originalAmount.toString(),
+    locale: locale || "en",
+  });
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <div className={styles.headerItem}>
+          <Text
+            t="responsiveBody2"
+            color="lightest"
+            className={styles.iconAndText}
+          >
+            <Token fontSize="large" />
+            <Trans>Credit ID</Trans>
+          </Text>
+          <Text t="h5">
+            {props.retirement.credit?.id &&
+              concatAddress(props.retirement.credit?.id)}
+          </Text>
+        </div>
+        <div className={styles.headerItem}>
+          <Text
+            t="body2"
+            color="lightest"
+            className={`${styles.iconAndText} ${styles.right}`}
+          >
+            <BalanceOutlined fontSize="large" />
+            <Trans>Amount</Trans>
+          </Text>
+          <Text t="h5">
+            <Trans>{formattedAmount} Tonnes</Trans>
+          </Text>
+        </div>
+      </div>
+      <ProvenanceTimeline {...props} />
+    </div>
+  );
+};
diff --git a/carbonmark/components/pages/Retirements/RetirementProvenance/ProvenanceComponent/styles.ts b/carbonmark/components/pages/Retirements/RetirementProvenance/ProvenanceComponent/styles.ts
@@ -0,0 +1,26 @@
+import { css } from "@emotion/css";
+
+export const wrapper = css`
+  background-color: var(--surface-01);
+  width: 100%;
+  border-radius: 0.8rem;
+  padding: 2rem;
+  box-shadow: var(--shadow-01);
+`;
+export const header = css`
+  display: flex;
+  justify-content: space-between;
+`;
+export const headerItem = css`
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+`;
+export const iconAndText = css`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+`;
+export const right = css`
+  justify-content: right;
+`;