-
- Join the community in an experiment to collectively align on the
- values at the core of Ethereum.
-
+
{hero.description}
diff --git a/src/components/hero/hero.png b/src/components/hero/hero.png
deleted file mode 100644
index 522075b..0000000
Binary files a/src/components/hero/hero.png and /dev/null differ
diff --git a/src/components/icons/ArrowIcon.js b/src/components/icons/ArrowIcon.tsx
similarity index 100%
rename from src/components/icons/ArrowIcon.js
rename to src/components/icons/ArrowIcon.tsx
diff --git a/src/components/icons/CaretDownIcon.js b/src/components/icons/CaretDownIcon.tsx
similarity index 100%
rename from src/components/icons/CaretDownIcon.js
rename to src/components/icons/CaretDownIcon.tsx
diff --git a/src/components/icons/CloseIcon.js b/src/components/icons/CloseIcon.tsx
similarity index 100%
rename from src/components/icons/CloseIcon.js
rename to src/components/icons/CloseIcon.tsx
diff --git a/src/components/icons/ConnectWalletIcon.js b/src/components/icons/ConnectWalletIcon.tsx
similarity index 100%
rename from src/components/icons/ConnectWalletIcon.js
rename to src/components/icons/ConnectWalletIcon.tsx
diff --git a/src/components/icons/ExternalLinkIcon.js b/src/components/icons/ExternalLinkIcon.tsx
similarity index 100%
rename from src/components/icons/ExternalLinkIcon.js
rename to src/components/icons/ExternalLinkIcon.tsx
diff --git a/src/components/icons/PlusIcon.js b/src/components/icons/PlusIcon.tsx
similarity index 100%
rename from src/components/icons/PlusIcon.js
rename to src/components/icons/PlusIcon.tsx
diff --git a/src/components/icons/ShareIcon.js b/src/components/icons/ShareIcon.tsx
similarity index 100%
rename from src/components/icons/ShareIcon.js
rename to src/components/icons/ShareIcon.tsx
diff --git a/src/components/icons/UserIcon.js b/src/components/icons/UserIcon.tsx
similarity index 100%
rename from src/components/icons/UserIcon.js
rename to src/components/icons/UserIcon.tsx
diff --git a/src/components/icons/VoteAgainstIcon.js b/src/components/icons/VoteAgainstIcon.tsx
similarity index 100%
rename from src/components/icons/VoteAgainstIcon.js
rename to src/components/icons/VoteAgainstIcon.tsx
diff --git a/src/components/icons/VoteForIcon.js b/src/components/icons/VoteForIcon.tsx
similarity index 100%
rename from src/components/icons/VoteForIcon.js
rename to src/components/icons/VoteForIcon.tsx
diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.tsx
similarity index 100%
rename from src/components/modal/Modal.js
rename to src/components/modal/Modal.tsx
diff --git a/src/components/propose-value-button/ProposeValueButton.js b/src/components/propose-value-button/ProposeValueButton.tsx
similarity index 91%
rename from src/components/propose-value-button/ProposeValueButton.js
rename to src/components/propose-value-button/ProposeValueButton.tsx
index aa6501b..1486943 100644
--- a/src/components/propose-value-button/ProposeValueButton.js
+++ b/src/components/propose-value-button/ProposeValueButton.tsx
@@ -6,13 +6,14 @@ import PlusIcon from "../icons/PlusIcon";
import styles from "./propose-value-button.module.scss";
import Modal from "../modal/Modal";
import ProposeValueForm from "../forms/ProposeValueForm";
-import { useAccount, useConnect } from "wagmi";
-import { linea, baseSepolia } from "viem/chains";
+import { usePrivyAdapter } from "@/hooks/usePrivyAuth";
+import { base, baseSepolia } from "viem/chains";
export const DEFAULT_CHAIN_ID =
- process.env.NEXT_PUBLIC_ENV === "development" ? baseSepolia.id : linea.id;
+ process.env.NEXT_PUBLIC_ENV === "development" ? baseSepolia.id : base.id;
const ProposeValueButton = ({ onSuccess }) => {
+ const { useAccount, useConnect } = usePrivyAdapter();
const { isConnected } = useAccount();
const { connectors, connect } = useConnect();
diff --git a/src/components/scroll-indicator/ScrollIndicator.js b/src/components/scroll-indicator/ScrollIndicator.tsx
similarity index 100%
rename from src/components/scroll-indicator/ScrollIndicator.js
rename to src/components/scroll-indicator/ScrollIndicator.tsx
diff --git a/src/components/search-controls/SearchControls.js b/src/components/search-controls/SearchControls.tsx
similarity index 66%
rename from src/components/search-controls/SearchControls.js
rename to src/components/search-controls/SearchControls.tsx
index b6bbe52..025111c 100644
--- a/src/components/search-controls/SearchControls.js
+++ b/src/components/search-controls/SearchControls.tsx
@@ -13,12 +13,14 @@ const SearchControls = ({ sortValue, setSortValue, involved, setInvolved }) => {
Ranked by
-
- Most Upvoted
- Most Downvoted
- Most Recent
- Least Recent
-
+
+
+ Most Upvoted
+ Most Downvoted
+ Most Recent
+ Least Recent
+
+
diff --git a/src/components/search-controls/search-controls.module.scss b/src/components/search-controls/search-controls.module.scss
index bfbb4ff..f92301f 100644
--- a/src/components/search-controls/search-controls.module.scss
+++ b/src/components/search-controls/search-controls.module.scss
@@ -15,6 +15,23 @@
gap: 1.6rem;
padding-right: 2.4rem;
+ .selectWrapper {
+ position: relative;
+ }
+
+ .selectWrapper::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 10px;
+ width: 8px;
+ height: 8px;
+ border-right: 2px solid var(--color-light);
+ border-bottom: 2px solid var(--color-light);
+ transform: translateY(-50%) rotate(45deg);
+ pointer-events: none;
+ }
+
select {
font-family: var(--font-atyp-text);
font-size: 2rem;
@@ -23,12 +40,13 @@
border: none;
background-color: transparent;
appearance: none;
- background-image: url("/images/select/chevron.svg");
- background-repeat: no-repeat;
- background-position: right center;
- background-size: 1.6rem auto;
padding-right: 2.5rem;
- min-width: 12rem; /* Add minimum width to prevent chevron from moving */
+ min-width: 12rem;
+ width: 100%;
+ }
+
+ option {
+ color:black;
}
}
diff --git a/src/components/step-list/StepList.js b/src/components/step-list/StepList.js
deleted file mode 100644
index 2ba56f1..0000000
--- a/src/components/step-list/StepList.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { formatCompactNumber } from "@/utils/formatCompactNumber";
-import Step from "../step/Step";
-import styles from "./step-list.module.scss";
-import Carousel from "../carousel/Carousel";
-
-const STEPS = [
- {
- number: 1,
- title: "Propose Values",
- description:
- "Propose a value that you feel is important and / or view the values others have explored",
- statImageSrc: "/images/steps/propose.svg",
- getStats: (valuesCount) => `${valuesCount} Values Proposed`,
- },
- {
- number: 2,
- title: "Vote with ETH",
- description:
- "Vote on proposed values by depositing ETH For or Against, and pay a small fee to the value pool",
- statImageSrc: "/images/steps/vote.svg",
- getStats: (_, totalStakedEth) => `${totalStakedEth} ETH in votes`,
- },
- {
- number: 3,
- title: "Earn Rewards",
- description:
- "As more people vote on the same value, your shares accrue a portion of their fees",
- statImageSrc: "/images/steps/earn.svg",
- getStats: (_, __, totalRewards) =>
- `${formatCompactNumber(totalRewards)} in Rewards`,
- },
- {
- number: 4,
- title: "Shape the Future",
- description:
- "Values are ranked by total ETH voted for. You can withdraw your ETH at any time",
- statImageSrc: "/images/steps/shape.svg",
- getStats: (_, __, ___, totalUsers) =>
- `${formatCompactNumber(totalUsers)}+ Contributors`,
- },
-];
-
-const StepList = ({
- valuesCount,
- totalStakedEth,
- totalRewards,
- totalUsers,
-}) => {
- return (
- <>
-
- {STEPS.map((step) => (
-
-
- ))}
-
-
- {STEPS.map((step) => (
-
-
- ))}
-
-
- );
-};
-
-export default StepList;
diff --git a/src/components/step-list/StepList.tsx b/src/components/step-list/StepList.tsx
new file mode 100644
index 0000000..4f61859
--- /dev/null
+++ b/src/components/step-list/StepList.tsx
@@ -0,0 +1,63 @@
+import { formatCompactNumber } from "@/utils/formatCompactNumber";
+import Step from "../step/Step";
+import styles from "./step-list.module.scss";
+import Carousel from "../carousel/Carousel";
+import { organizationConfig } from "@/config/organization-config";
+
+const StepList = ({
+ valuesCount,
+ totalStakedEth,
+ totalRewards,
+ totalUsers,
+}) => {
+ // Get steps from configuration
+ const STEPS = organizationConfig.sections.steps;
+
+ // Function to get the appropriate statistical value for each step
+ const getStepStat = (step, index) => {
+ const statValues = [
+ valuesCount,
+ totalStakedEth,
+ totalRewards,
+ totalUsers
+ ];
+
+ // Use the getStatText function or a default value
+ return step.getStatText ?
+ step.getStatText(statValues[index] || 0) :
+ `${statValues[index] || 0}`;
+ };
+
+ return (
+ <>
+
+ {STEPS.map((step, index) => (
+
+
+ ))}
+
+
+ {STEPS.map((step, index) => (
+
+
+ ))}
+
+
+ );
+};
+
+export default StepList;
diff --git a/src/components/step/Step.js b/src/components/step/Step.tsx
similarity index 100%
rename from src/components/step/Step.js
rename to src/components/step/Step.tsx
diff --git a/src/components/text-box/TextBox.js b/src/components/text-box/TextBox.tsx
similarity index 100%
rename from src/components/text-box/TextBox.js
rename to src/components/text-box/TextBox.tsx
diff --git a/src/components/value-actions/ValueActions.js b/src/components/value-actions/ValueActions.tsx
similarity index 96%
rename from src/components/value-actions/ValueActions.js
rename to src/components/value-actions/ValueActions.tsx
index e3f6b4c..7cab414 100644
--- a/src/components/value-actions/ValueActions.js
+++ b/src/components/value-actions/ValueActions.tsx
@@ -1,7 +1,7 @@
"use client";
import { useState, useEffect, useContext } from "react";
-import { useAccount, useConnect } from "wagmi";
+import { usePrivyAdapter } from "@/hooks/usePrivyAuth";
import { createPortal } from "react-dom";
import StakeForm from "../forms/StakeForm";
import WithdrawForm from "../forms/WithdrawForm";
@@ -12,10 +12,10 @@ import Modal from "../modal/Modal";
import styles from "./value-actions.module.scss";
import { UserContext } from "../../contexts/UserContext";
import { formatEther } from "viem";
-import { linea, baseSepolia } from "viem/chains";
+import { base, baseSepolia } from "viem/chains";
export const DEFAULT_CHAIN_ID =
- process.env.NEXT_PUBLIC_ENV === "development" ? baseSepolia.id : linea.id;
+ process.env.NEXT_PUBLIC_ENV === "development" ? baseSepolia.id : base.id;
// Supports dark and accent hover colors
const ValueActions = ({
@@ -28,6 +28,7 @@ const ValueActions = ({
const hoverColorClass = styles[hoverColor] ? styles[hoverColor] : "";
const { user } = useContext(UserContext);
+ const { useAccount, useConnect } = usePrivyAdapter();
const { isConnected } = useAccount();
const { connectors, connect } = useConnect();
@@ -56,7 +57,7 @@ const ValueActions = ({
useEffect(() => {
setShareUrl(
`https://x.com/intent/tweet?text=${encodeURIComponent(
- `${name} is important to Ethereum, do you agree? Join the discussion here:`
+ `${name} is important to our organization, do you agree? Join the discussion here:`
)}&url=${encodeURIComponent(
window.location.origin + window.location.pathname
)}`
diff --git a/src/components/value-card/ValueCard.js b/src/components/value-card/ValueCard.tsx
similarity index 100%
rename from src/components/value-card/ValueCard.js
rename to src/components/value-card/ValueCard.tsx
diff --git a/src/components/value-listing/ValueListing.js b/src/components/value-listing/ValueListing.tsx
similarity index 98%
rename from src/components/value-listing/ValueListing.js
rename to src/components/value-listing/ValueListing.tsx
index 117397b..f08244e 100644
--- a/src/components/value-listing/ValueListing.js
+++ b/src/components/value-listing/ValueListing.tsx
@@ -7,11 +7,12 @@ import SearchControls from "../search-controls/SearchControls";
import ValueCard from "../value-card/ValueCard";
import styles from "./value-listing.module.scss";
import Carousel from "../carousel/Carousel";
-import { useAccount } from "wagmi";
+import { usePrivyAdapter } from "@/hooks/usePrivyAuth";
import { useGetValuesListing } from "@/hooks/useGetValuesListing";
import { formatEther } from "viem";
const ValueListing = () => {
+ const { useAccount } = usePrivyAdapter();
const { address, isConnected } = useAccount();
const { getValuesData } = useGetValuesListing();
diff --git a/src/components/value-stats/ValueStats.js b/src/components/value-stats/ValueStats.tsx
similarity index 100%
rename from src/components/value-stats/ValueStats.js
rename to src/components/value-stats/ValueStats.tsx
diff --git a/src/config/organization-config.tsx b/src/config/organization-config.tsx
new file mode 100644
index 0000000..5231c88
--- /dev/null
+++ b/src/config/organization-config.tsx
@@ -0,0 +1,279 @@
+/**
+ * Organization Values Configuration
+ *
+ * This file contains all the configuration for your organization's values platform.
+ * Each section can be customized to match your organization's branding, content, and needs.
+ *
+ * INSTRUCTIONS:
+ * 1. Replace all placeholder values with your organization's information
+ * 2. For images, place them in the public/images folder and reference them with paths like "/images/your-image.png"
+ */
+
+export const organizationConfig = {
+ /**
+ * General information about your organization
+ * These values are used throughout the site, including meta tags
+ *
+ * Used in: Header component, SEO metadata, and various page titles
+ *
+ * Example:
+ * name: "Acme Corporation"
+ * tagline: "Building a Better Tomorrow"
+ */
+ name: "Organization Name",
+ tagline: "Organization Slogan",
+ description: "Detailed description of the organization and its mission...",
+
+ /**
+ * Hero section content
+ * This is the main banner section at the top of the landing page
+ *
+ * Used in: Hero.tsx component on the homepage
+ *
+ * Impact: Defines the first impression visitors get of your platform
+ *
+ * Example:
+ * title: "Acme Values"
+ * description: "Join us in shaping our collective future through shared values and principles."
+ */
+ hero: {
+ title: "Organization",
+ description: "An organization is more than a structure, it's a cultural movement..."
+ },
+
+ /**
+ * All content sections of the platform
+ * Customize the text for each section to align with your organization's voice
+ *
+ * Used in: Various components across the landing page
+ */
+ sections: {
+ /**
+ * The introductory section explaining the purpose of the platform
+ *
+ * Used in: TextBox component displaying the mission statement
+ *
+ * Impact: Sets the context for why values matter to your organization
+ *
+ * Example:
+ * title: "Our Collective Future"
+ * paragraphs: ["At Acme, we believe in the power of...", "Together, we can..."]
+ */
+ definingFuture: {
+ title: "Defining Our Future",
+ paragraphs: [
+ "An organization is more than its structure—it's a cultural movement built on deeply held values which help guide decision-making and enable sustainable growth into a thriving community with shared purpose.",
+ "But as organizations continue to evolve, so too do the interpretations and applications of these core values. As they grow and mature, we need to collectively define the values that are important to us as a community."
+ ]
+ },
+ /**
+ * Title for the section where users can propose and vote on values
+ *
+ * Used in: ValueListing component section header
+ *
+ * Impact: Labels the interactive part of your platform
+ */
+ proposeVote: {
+ title: "Propose / Vote on Values"
+ },
+ /**
+ * Title for the section where users can join discussions about values
+ *
+ * Used in: Discussion section component
+ *
+ * Impact: Encourages community engagement beyond just voting
+ */
+ joinDiscussion: {
+ title: "Join the Discussion"
+ },
+ /**
+ * Title for the FAQ section
+ *
+ * Used in: Accordion FAQ component
+ *
+ * Impact: Helps users find answers to common questions
+ */
+ faqSection: {
+ title: "Frequently Asked Questions"
+ },
+ /**
+ * The steps that explain how the platform works
+ * Each step includes a number, title, description, image, and a function to format statistics
+ *
+ * Used in: StepList component that displays the workflow steps
+ *
+ * Impact: Guides users through the core functionality of the platform
+ *
+ * Example:
+ * number: 1
+ * title: "Submit Ideas"
+ * description: "Share your thoughts on values that matter to our organization"
+ * statImageSrc: "/images/steps/submit.svg"
+ * getStatText: (count) => `${count} Ideas Shared`
+ */
+ steps: [
+ {
+ number: 1,
+ title: "Propose Values",
+ description: "Propose a value that you feel is important and / or view the values others have explored",
+ statImageSrc: "/images/steps/propose.svg",
+ getStatText: (count) => `${count} Values Proposed`
+ },
+ {
+ number: 2,
+ title: "Vote with ETH",
+ description: "Vote on proposed values by depositing ETH For or Against, and pay a small fee to the value pool",
+ statImageSrc: "/images/steps/vote.svg",
+ getStatText: (count) => `${count} ETH in votes`
+ },
+ {
+ number: 3,
+ title: "Earn Rewards",
+ description: "As more people vote on the same value, your shares accrue a portion of their fees",
+ statImageSrc: "/images/steps/earn.svg",
+ getStatText: (count) => `${count} in Rewards`
+ },
+ {
+ number: 4,
+ title: "Shape the Future",
+ description: "Values are ranked by total ETH voted for. You can withdraw your ETH at any time",
+ statImageSrc: "/images/steps/shape.svg",
+ getStatText: (count) => `${count}+ Contributors`
+ }
+ ]
+ },
+
+ /**
+ * Frequently Asked Questions
+ * Each FAQ item includes a question, answer, and optional links
+ * The answers will be transformed into JSX in the component
+ *
+ * Used in: Accordion component that displays FAQ items
+ * Data is processed in src/data/faq-items.js
+ *
+ * Impact: Helps users understand how the platform works and addresses common concerns
+ *
+ * Example:
+ * question: "How can I participate?"
+ * answer: "You can participate by proposing values, voting on existing proposals..."
+ * links: [{ text: "Learn more", url: "https://example.com/learn-more" }]
+ */
+ faq: [
+ {
+ question: "What's this all about?",
+ answer: `This platform allows people to propose, discuss, and vote on values they feel are important to the organization.
+
+The objective is to see how certain mechanisms and forums can be used to encourage honest dialogue and a synthesis of diverse perspectives as a means to establish a community-created values system. While the outcome is unforeseen, we are hoping that the community will converge on values that are important to them.`,
+ links: [
+ {
+ text: "Intuition Systems",
+ url: "https://www.intuition.systems/"
+ }
+ ]
+ },
+ {
+ question: "How does it work?",
+ answer: `Anyone can propose a value, which includes a name and a description. When you propose a value, you must pay a small fee. This fee goes into a pool for that proposed value, and these fees are shared pro-rata between everyone that votes on the value.
+
+You can vote for or against a value that you propose. The amount you deposit to vote can be as little or as much as you want. Other users can subsequently vote 'for' or 'against' the value you proposed by depositing ETH. You don't need to propose a value to participate, as you can deposit ETH to vote 'for' or 'against' existing values, or simply participate in the discussion on the forum if there is a linked forum thread.
+
+The values that are proposed by the community will be stack-ranked according to the total ETH deposit for, less the total ETH deposited against, for each respective value.`
+ },
+ {
+ question: "What sort of values can I propose?",
+ answer: `You are free to propose any sort of values that you wish. These can be serious proposals to which you've given thought and consideration, or they can be frivolous. Be aware that frivolous proposals are less likely to see serious engagement and may end up dropping to the bottom of the rank (and therefore wasting your proposed fee and limiting any potential earnings).`
+ },
+ {
+ question: "Why is there a fee to participate?",
+ answer: `When you deposit ETH in a value, voting either "for" or "against", there is a small fee that is paid into the pool for that value. When you withdraw ETH, there is a small withdrawal fee. The fees paid into the pool are shared between participants that have some ETH in the pool at that time.
+
+This means that if you deposit some ETH into the pool for a specific value, you will get a percentage of all deposit and withdrawal fees that are paid by participants that deposit and withdraw after you deposit, and before you withdraw.`
+ },
+
+ ],
+
+ /**
+ * External links and resources
+ * All URLs for your organization's external presence
+ *
+ * Used in: Footer component, social links, and various CTAs throughout the site
+ *
+ * Impact: Connects your values platform with your broader community and resources
+ *
+ * Example:
+ * community: "https://discord.com/invite/acme-community"
+ * contactEmail: "values@acme-corp.com"
+ */
+ externalLinks: {
+ community: "https://discord.com/invite/your-organization",
+ documentation: "https://docs.your-organization.com",
+ contactEmail: "contact@organization-values.com",
+ social: {
+ twitter: "https://twitter.com/organization",
+ youtube: "https://youtube.com/organization",
+ discord: "https://discord.com/invite/organization",
+ instagram: "https://instagram.com/organization"
+ },
+ legal: {
+ privacy: "https://organization-values.com/privacy",
+ terms: "https://organization-values.com/terms"
+ },
+ discussion: {
+ kialo: "https://www.kialo.com/p/dd0be798-fae9-407e-b30c-a6392b59dea5/67726"
+ }
+ },
+
+ /**
+ * Footer content
+ * Text that appears at the bottom of all pages
+ *
+ * Used in: Footer.tsx component on all pages
+ *
+ * Impact: Reinforces your organization's mission and provides key links
+ *
+ * Example:
+ * title: "Join us in building a values-driven organization."
+ * description: ["Our platform enables transparent...", "Together we can..."]
+ */
+ footer: {
+ title: "Values are the foundation of any thriving community.",
+ description: [
+ "This platform is a collaborative experiment in collective intelligence, enabling communities to surface, discuss and align on shared values through transparent and inclusive participation.",
+ "By making values explicit and measurable, we create a framework for better decision-making and stronger collective identity."
+ ],
+ connectTitle: "Connect With Us",
+ copyright: "Organization Values. All rights reserved."
+ },
+
+
+
+ /**
+ * Extended branding configuration
+ * Define visual elements that create your brand identity across the platform
+ *
+ * Used in: Layout components, theme providers, and various UI elements
+ * Logo used in Header.tsx and favicon in app metadata
+ * Typography applied via CSS variables
+ *
+ * Impact: Creates visual consistency and reinforces your brand
+ *
+ * Example:
+ * logo: { main: "/images/acme-logo.svg" }
+ * typography: { headingFont: "'Raleway', sans-serif" }
+ * put your images in public/images
+ */
+ branding: {
+ logo: {
+ main: "/images/logo.svg", // Main logo used in header and key locations
+ alternative: "/images/logo-alt.svg", // Alternative version (e.g., for dark backgrounds)
+ favicon: "/images/favicon.ico", // Browser tab icon
+ },
+ typography: {
+ headingFont: "'Montserrat', sans-serif", // Font for headings
+ bodyFont: "'Open Sans', sans-serif", // Font for body text
+ },
+ hero: {
+ backgroundImage: "/images/hero.png", // Hero section background image
+ },
+ },
+};
diff --git a/src/contexts/UserContext.js b/src/contexts/UserContext.tsx
similarity index 89%
rename from src/contexts/UserContext.js
rename to src/contexts/UserContext.tsx
index 0c94e4b..2e773c0 100644
--- a/src/contexts/UserContext.js
+++ b/src/contexts/UserContext.tsx
@@ -1,12 +1,14 @@
+"use client";
+
import { createContext, useState, useEffect, useCallback } from "react";
-import { useAccount } from "wagmi";
import { useGetUserPositions } from "@/hooks/useGetUserPositionsData";
-import { set } from "zod";
+import { usePrivyAdapter } from "@/hooks/usePrivyAuth";
export const UserContext = createContext();
export const UserProvider = ({ children }) => {
const [user, setUser] = useState(null);
+ const { useAccount } = usePrivyAdapter();
const { address, isConnected } = useAccount();
const { getUserPositionsData } = useGetUserPositions();
diff --git a/src/contexts/providers.js b/src/contexts/providers.js
deleted file mode 100644
index 52ea36d..0000000
--- a/src/contexts/providers.js
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { http, WagmiProvider, createConfig } from "wagmi";
-import { metaMask } from "wagmi/connectors";
-import { linea, baseSepolia } from "wagmi/chains";
-import { UserProvider } from "./UserContext";
-import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
-
-const targetChain =
- process.env.NEXT_PUBLIC_ENV === "development" ? baseSepolia : linea;
-
-export const wagmiConfig = createConfig({
- chains: [targetChain],
- connectors: [
- metaMask({
- chains: [targetChain],
- defaultChainId: targetChain.id,
- shimDisconnect: true,
- shimChainChangedNavigate: true,
- }),
- ],
- transports: {
- [targetChain.id]: http(),
- },
- ssr: true,
-});
-
-export const apolloClient = new ApolloClient({
- uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
- cache: new InMemoryCache(),
-});
-
-const client = new QueryClient();
-
-const Providers = ({ children }) => {
- return (
- <>
-
-
-
- {children}
-
-
-
-
- );
-};
-
-export default Providers;
diff --git a/src/contexts/providers.tsx b/src/contexts/providers.tsx
new file mode 100644
index 0000000..867b669
--- /dev/null
+++ b/src/contexts/providers.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
+import { UserProvider } from "./UserContext";
+import { PrivyProvider } from '@privy-io/react-auth';
+import { useEffect, useState } from "react";
+
+export const apolloClient = new ApolloClient({
+ uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
+ cache: new InMemoryCache(),
+});
+
+const client = new QueryClient();
+
+const Providers = ({ children }) => {
+ const [isMounted, setIsMounted] = useState(false);
+
+ useEffect(() => {
+ setIsMounted(true);
+ }, []);
+
+ if (!isMounted) {
+ return null; // Ne rend rien côté serveur
+ }
+
+ return (
+
+
+
+ {children}
+
+
+
+ );
+};
+
+export default Providers;
diff --git a/src/data/faq-items.js b/src/data/faq-items.js
index ca6815a..ac1411c 100644
--- a/src/data/faq-items.js
+++ b/src/data/faq-items.js
@@ -1,378 +1,93 @@
+import React from "react";
import Link from "next/link";
+import { organizationConfig } from "@/config/organization-config";
-export const FAQ_ITEMS = [
- {
- question: "What's this all about?",
- answer: (
- <>
- Consensys is partnering with{" "}
- 0.0004 ETH and a minimum stake of{" "}
- 0.001 ETH . The purpose of this fee is to discourage
- spam. The fees are shared between everyone who votes on the proposed
- value by depositing ETH.
- 0.3% percent of the amount of ETH you deposit or
- withdraw (i.e. it applies to both deposits and withdrawals). That means
- that you pay 0.3% percent of the amount of ETH that you deposit, and you
- also pay 0.3% percent of whatever amount of that ETH
- you withdraw.
- Information Markets and a novel identity and data
- interoperability protocol.
- intuition to all of our interactions by providing people
- and machines with the data they need, when they need it, from the
- sources they trust.
-
-
- Click on the{" "}
-
-
- Click on the + button on the right hand side of the
- section in the middle of the page that contains "x
- Theses". ('theses' ={" "}
- 'proposed values' in this instance).
-
-
- A box will appear that reads "Please enter a thesis".
- Enter the name of the proposed value followed by a description. The
- description should be exactly the same as the description that you
- will enter on the Ethereum values website. There is a max. limit of
- 500 characters.
-
- Click on the Save button to save your proposed value.
-
- The proposed value will be added to the existing list of values.
-
-
-
- ),
- },
- {
- question:
- "How do I participate in a conversation for an existing value in Kialo?",
- answer: (
- <>
-
-
- Click on a value (called a "thesis" in Kialo), which will
- load the discussion for that value.
-
-
- To participate in the discussion, click on the + {" "}
- button in either the Pros column or the{" "}
- + button in either the Cons {" "}
- column, depending on your point of view.
-
-
- Write your contribution in the input box that appears and click on
- "Save".
-
-
- Rules for posting:
-
-
- Conversation must be respectful and civil and relevant. Any posts
- that are deemed inappropriate or disrespectful will be removed.
- Similarly, any shilling or scamming will be deleted and authors will
- be reported to Kialo.
-
+// Function to transform text into JSX with appropriate formatting
+const processAnswer = (faqItem) => {
+ if (!faqItem.answer) return null;
+
+ // Split text into paragraphs
+ const paragraphs = faqItem.answer.split("\n\n");
+
+ // Function to highlight terms
+ const emphasize = (text, termsToEmphasize) => {
+ if (!termsToEmphasize || !termsToEmphasize.length) return text;
+
+ // Process each term to highlight
+ let result = text;
+ termsToEmphasize.forEach(term => {
+ result = result.replace(
+ new RegExp(term, 'g'),
+ `${term} `
+ );
+ });
+
+ return result;
+ };
+
+ // Transform paragraphs into JSX
+ const processedParagraphs = paragraphs.map((para, index) => {
+ // Check if it's a bullet list
+ if (para.startsWith('- ')) {
+ const listItems = para.split('\n- ').map(item => item.replace(/^- /, ''));
+ return (
+
+ {listItems.map((item, i) => (
+
-
- ),
- },
- {
- question: "Disclaimer",
- answer: (
- <>
- This software is provided for use at the user's own risk. ConsenSys
- Software Inc. and Intuition Systems are not liable for any unforeseen
- circumstances that may result in the loss of funds. As this is
- experimental software, users acknowledge the possibility of bugs or
- unexpected issues. It is strongly recommended that users only deposit
- amounts they are prepared to lose.
-
+ );
+ });
+
+ // Add links if they exist
+ if (faqItem.links && faqItem.links.length) {
+ const firstPara = processedParagraphs[0];
+
+ // Create a new paragraph with links
+ const paraWithLinks = (
+
+ {firstPara.props.dangerouslySetInnerHTML.__html}
+ {faqItem.links.map((link, idx) => (
+
+ {" "}
+
+ ))}
+
+ );
+
+ // Replace the first paragraph
+ processedParagraphs[0] = paraWithLinks;
+ }
+
+ // Return a fragment with all paragraphs
+ return (
+ <>
+ {processedParagraphs.map((para, idx) => (
+
+ {para}
+ {idx < processedParagraphs.length - 1 &&
+ ))}
+
+ );
+};
+
+// Transform the configuration into usable FAQ items
+export const FAQ_ITEMS = organizationConfig.faq.map(item => ({
+ question: item.question,
+ answer: processAnswer(item)
+}));
diff --git a/src/hooks/useCreateAtom.js b/src/hooks/useCreateAtom.ts
similarity index 85%
rename from src/hooks/useCreateAtom.js
rename to src/hooks/useCreateAtom.ts
index 3296188..f6ae138 100644
--- a/src/hooks/useCreateAtom.js
+++ b/src/hooks/useCreateAtom.ts
@@ -1,8 +1,9 @@
-import { useWriteContract } from "wagmi";
+import { usePrivyAdapter } from "./usePrivyAuth";
import { toHex } from "viem";
import { abi } from "@/backend/abi";
export function useCreateAtom() {
+ const { useWriteContract } = usePrivyAdapter();
const { writeContractAsync } = useWriteContract();
const createAtom = async (uri, initialDeposit = 0n) => {
diff --git a/src/hooks/useCreateTriple.js b/src/hooks/useCreateTriple.ts
similarity index 87%
rename from src/hooks/useCreateTriple.js
rename to src/hooks/useCreateTriple.ts
index d3ec679..1a574b8 100644
--- a/src/hooks/useCreateTriple.js
+++ b/src/hooks/useCreateTriple.ts
@@ -1,7 +1,8 @@
-import { useWriteContract } from "wagmi";
+import { usePrivyAdapter } from "./usePrivyAuth";
import { abi } from "@/backend/abi";
export function useCreateTriple() {
+ const { useWriteContract } = usePrivyAdapter();
const { writeContractAsync } = useWriteContract();
const createTriple = async (
diff --git a/src/hooks/useDepositTriple.js b/src/hooks/useDepositTriple.ts
similarity index 85%
rename from src/hooks/useDepositTriple.js
rename to src/hooks/useDepositTriple.ts
index 8f91453..1e14e93 100644
--- a/src/hooks/useDepositTriple.js
+++ b/src/hooks/useDepositTriple.ts
@@ -1,7 +1,8 @@
-import { useWriteContract } from "wagmi";
+import { usePrivyAdapter } from "./usePrivyAuth";
import { abi } from "@/backend/abi";
export function useDepositTriple() {
+ const { useWriteContract } = usePrivyAdapter();
const { writeContractAsync } = useWriteContract();
const depositTriple = async (vaultId, address, value = 0n) => {
diff --git a/src/hooks/useFormValidation.js b/src/hooks/useFormValidation.ts
similarity index 100%
rename from src/hooks/useFormValidation.js
rename to src/hooks/useFormValidation.ts
diff --git a/src/hooks/useGetAtomId.js b/src/hooks/useGetAtomId.ts
similarity index 100%
rename from src/hooks/useGetAtomId.js
rename to src/hooks/useGetAtomId.ts
diff --git a/src/hooks/useGetUserPositionsData.js b/src/hooks/useGetUserPositionsData.ts
similarity index 98%
rename from src/hooks/useGetUserPositionsData.js
rename to src/hooks/useGetUserPositionsData.ts
index ce5dee8..029a385 100644
--- a/src/hooks/useGetUserPositionsData.js
+++ b/src/hooks/useGetUserPositionsData.ts
@@ -18,7 +18,7 @@ export function useGetUserPositions() {
variables: {
where: {
predicate_id: { _eq: process.env.NEXT_PUBLIC_PREDICATE_ID }, // has value
- subject_id: { _eq: process.env.NEXT_PUBLIC_SUBJECT_ID }, // Ethereum
+ subject_id: { _eq: process.env.NEXT_PUBLIC_SUBJECT_ID }, // Organization ID
},
address: address.toLowerCase(),
limit: batchSize,
diff --git a/src/hooks/useGetValuesListing.js b/src/hooks/useGetValuesListing.ts
similarity index 97%
rename from src/hooks/useGetValuesListing.js
rename to src/hooks/useGetValuesListing.ts
index e6a6387..2a84988 100644
--- a/src/hooks/useGetValuesListing.js
+++ b/src/hooks/useGetValuesListing.ts
@@ -38,7 +38,7 @@ export function useGetValuesListing() {
// Build where clause
const where = {
predicate_id: { _eq: process.env.NEXT_PUBLIC_PREDICATE_ID }, // has value
- subject_id: { _eq: process.env.NEXT_PUBLIC_SUBJECT_ID }, // Ethereum
+ subject_id: { _eq: process.env.NEXT_PUBLIC_SUBJECT_ID }, // Organization ID
};
// Add filter for user's positions if onlyVoted is true
@@ -109,7 +109,8 @@ export function useGetValuesListing() {
totalUsers:
Number(triple.vault.position_count || 0) +
Number(triple.counter_vault.position_count || 0),
- }));
+ }))
+ .filter(value => value.totalUsers > 0);
return {
values,
diff --git a/src/hooks/usePrivyAuth.ts b/src/hooks/usePrivyAuth.ts
new file mode 100644
index 0000000..26f5ad1
--- /dev/null
+++ b/src/hooks/usePrivyAuth.ts
@@ -0,0 +1,316 @@
+"use client";
+
+import { usePrivy } from '@privy-io/react-auth';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { baseSepolia, base } from 'viem/chains';
+import { encodeFunctionData, createPublicClient, http } from 'viem';
+
+export const DEFAULT_CHAIN_ID =
+ process.env.NEXT_PUBLIC_ENV === "development" ? baseSepolia.id : base.id;
+
+// Create a Viem public client to interact with the blockchain
+const publicClient = createPublicClient({
+ chain: DEFAULT_CHAIN_ID === baseSepolia.id ? baseSepolia : base,
+ transport: http(),
+});
+
+// Function to convert BigInt to strings for serialization
+const stringifyArgs = (args) => {
+ if (!args) return '';
+ return args.map(arg =>
+ typeof arg === 'bigint' ? arg.toString() : arg
+ ).join(',');
+};
+
+// Simplify the function to directly use the wallet API
+const switchToRequiredNetwork = async () => {
+ if (!window.ethereum) return false;
+
+ try {
+ // This method automatically triggers confirmation in the wallet
+ await window.ethereum.request({
+ method: 'wallet_switchEthereumChain',
+ params: [{ chainId: `0x${DEFAULT_CHAIN_ID.toString(16)}` }],
+ });
+ return true;
+ } catch (switchError) {
+ // If the network is not added to the wallet
+ if (switchError.code === 4902) {
+ const networkParams = DEFAULT_CHAIN_ID === baseSepolia.id
+ ? {
+ chainId: `0x${baseSepolia.id.toString(16)}`,
+ chainName: 'Base Sepolia',
+ nativeCurrency: {
+ name: 'Sepolia Ether',
+ symbol: 'ETH',
+ decimals: 18,
+ },
+ rpcUrls: ['https://sepolia.base.org'],
+ blockExplorerUrls: ['https://sepolia.basescan.org'],
+ }
+ : {
+ chainId: `0x${base.id.toString(16)}`,
+ chainName: 'base Mainnet',
+ nativeCurrency: {
+ name: 'Ether',
+ symbol: 'ETH',
+ decimals: 18,
+ },
+ rpcUrls: ['https://rpc.base.build'],
+ blockExplorerUrls: ['https://basescan.build'],
+ };
+
+ // This method also triggers a confirmation in the wallet
+ await window.ethereum.request({
+ method: 'wallet_addEthereumChain',
+ params: [networkParams],
+ });
+ return true;
+ }
+ console.error("Error switching chain:", switchError);
+ return false;
+ }
+};
+
+// This hook adapts the Privy interface to the one used by Wagmi in your codebase
+export function usePrivyAdapter() {
+ const privy = usePrivy();
+ const [currentChainId, setCurrentChainId] = useState(null);
+
+ // Check and request network change if necessary
+ useEffect(() => {
+ const checkAndSwitchChain = async () => {
+ if (privy.authenticated && privy.user?.wallet?.address && window.ethereum) {
+ try {
+ // Get the current chain
+ const chainIdHex = await window.ethereum.request({ method: 'eth_chainId' });
+ const chainId = parseInt(chainIdHex, 16);
+
+ // If the user is not on the correct chain, ask to change
+ if (chainId !== DEFAULT_CHAIN_ID) {
+ console.log(`User on chain ${chainId}, need to switch to ${DEFAULT_CHAIN_ID}`);
+ try {
+ // Try to switch networks
+ await window.ethereum.request({
+ method: 'wallet_switchEthereumChain',
+ params: [{ chainId: `0x${DEFAULT_CHAIN_ID.toString(16)}` }],
+ });
+ console.log("Switched to required network");
+ } catch (switchError) {
+ // If the network is not configured, offer to add it
+ if (switchError.code === 4902) {
+ const networkParams = DEFAULT_CHAIN_ID === baseSepolia.id
+ ? {
+ chainId: `0x${baseSepolia.id.toString(16)}`,
+ chainName: 'Base Sepolia',
+ nativeCurrency: {
+ name: 'Sepolia Ether',
+ symbol: 'ETH',
+ decimals: 18,
+ },
+ rpcUrls: ['https://sepolia.base.org'],
+ blockExplorerUrls: ['https://sepolia.basescan.org'],
+ }
+ : {
+ chainId: `0x${base.id.toString(16)}`,
+ chainName: 'base Mainnet',
+ nativeCurrency: {
+ name: 'Ether',
+ symbol: 'ETH',
+ decimals: 18,
+ },
+ rpcUrls: ['https://rpc.base.build'],
+ blockExplorerUrls: ['https://basescan.build'],
+ };
+
+ await window.ethereum.request({
+ method: 'wallet_addEthereumChain',
+ params: [networkParams],
+ });
+ }
+ }
+ }
+ } catch (error) {
+ console.error("Error checking/switching chain:", error);
+ }
+ }
+ };
+
+ checkAndSwitchChain();
+ }, [privy.authenticated, privy.user?.wallet?.address]);
+
+ // Adapter for useAccount
+ const account = useMemo(() => ({
+ isConnected: privy.authenticated && !!privy.user?.wallet?.address,
+ address: privy.user?.wallet?.address,
+ chain: { id: DEFAULT_CHAIN_ID },
+ }), [privy.authenticated, privy.user?.wallet?.address]);
+
+ // Adapter for useConnect
+ const connectAdapter = useMemo(() => ({
+ connectors: privy.authenticated ? [] : [{ id: 'privy' }],
+ connect: async ({ chainId }) => {
+ setCurrentChainId(chainId);
+ try {
+ // Connect the user with their external wallet
+ await privy.login();
+ return true;
+ } catch (err) {
+ console.error("Error connecting:", err);
+ return false;
+ }
+ },
+ isPending: privy.authenticated === null || privy.isLoading,
+ }), [privy.authenticated, privy.isLoading, privy.login]);
+
+ // Adapter for useDisconnect
+ const disconnectAdapter = useMemo(() => ({
+ disconnect: privy.logout,
+ }), [privy.logout]);
+
+ // Adapter for useSwitchChain
+ const switchChainAdapter = useMemo(() => ({
+ switchChain: async ({ chainId }) => {
+ // For external wallets, use the native wallet methods
+ if (window.ethereum) {
+ try {
+ await window.ethereum.request({
+ method: 'wallet_switchEthereumChain',
+ params: [{ chainId: `0x${chainId.toString(16)}` }],
+ });
+ setCurrentChainId(chainId);
+ return { id: chainId };
+ } catch (error) {
+ // If the network is not configured, offer to add it
+ if (error.code === 4902) {
+ const networkParams = chainId === baseSepolia.id
+ ? {
+ chainId: `0x${baseSepolia.id.toString(16)}`,
+ chainName: 'Base Sepolia',
+ nativeCurrency: {
+ name: 'Sepolia Ether',
+ symbol: 'ETH',
+ decimals: 18,
+ },
+ rpcUrls: ['https://sepolia.base.org'],
+ blockExplorerUrls: ['https://sepolia.basescan.org'],
+ }
+ : {
+ chainId: `0x${base.id.toString(16)}`,
+ chainName: 'Base Mainnet',
+ nativeCurrency: {
+ name: 'Ether',
+ symbol: 'ETH',
+ decimals: 18,
+ },
+ rpcUrls: ['https://rpc.base.build'],
+ blockExplorerUrls: ['https://basescan.build'],
+ };
+
+ await window.ethereum.request({
+ method: 'wallet_addEthereumChain',
+ params: [networkParams],
+ });
+ return { id: chainId };
+ }
+ console.error("Error switching chain:", error);
+ throw error;
+ }
+ }
+
+ setCurrentChainId(chainId);
+ return { id: chainId };
+ },
+ chains: [baseSepolia, base],
+ }), []);
+
+ // Adapter for useReadContract
+ const readContractAdapter = useCallback(({ abi, address, functionName, args }) => {
+ const [data, setData] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const fetchData = async () => {
+ try {
+ setIsLoading(true);
+ const result = await publicClient.readContract({
+ abi,
+ address,
+ functionName,
+ args,
+ });
+ setData(result);
+ setIsLoading(false);
+ } catch (err) {
+ console.error('Error reading contract:', err);
+ setError(err);
+ setIsLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchData();
+ }, [address, functionName, stringifyArgs(args)]);
+
+ return { data, isLoading, error };
+ }, []);
+
+ // Adapter for useWriteContract
+ const writeContractAdapter = useMemo(() => ({
+ writeContractAsync: async (params) => {
+ if (!privy.authenticated) throw new Error("User not authenticated");
+ if (!privy.user?.wallet?.address) throw new Error("No wallet connected");
+
+ // Encode function data with viem
+ const data = encodeFunctionData({
+ abi: params.abi,
+ functionName: params.functionName,
+ args: params.args,
+ });
+
+ try {
+ // For external wallets (like MetaMask), use the ethereum interface
+ if (window.ethereum) {
+ // Convert value to hex
+ let valueHex = '0x0';
+ if (params.value) {
+ // Ensure value is handled correctly, whether it's a BigInt or a number
+ const valueBigInt = typeof params.value === 'bigint'
+ ? params.value
+ : BigInt(params.value.toString());
+ valueHex = `0x${valueBigInt.toString(16)}`;
+ }
+
+ const txHash = await window.ethereum.request({
+ method: 'eth_sendTransaction',
+ params: [{
+ from: privy.user.wallet.address,
+ to: params.address,
+ data,
+ value: valueHex,
+ }],
+ });
+ return txHash;
+ } else {
+ throw new Error("No Ethereum provider found");
+ }
+ } catch (error) {
+ console.error("Error sending transaction:", error);
+ throw error;
+ }
+ }
+ }), [privy.authenticated, privy.user?.wallet?.address]);
+
+ return {
+ // Exports corresponding to the hooks Wagmi that you use
+ useAccount: () => account,
+ useConnect: () => connectAdapter,
+ useDisconnect: () => disconnectAdapter,
+ useSwitchChain: () => switchChainAdapter,
+ useWriteContract: () => writeContractAdapter,
+ useReadContract: readContractAdapter,
+
+ // Direct access to Privy for specific features
+ privy,
+ };
+}
diff --git a/src/hooks/useRedeemTriple.js b/src/hooks/useRedeemTriple.js
deleted file mode 100644
index 264722e..0000000
--- a/src/hooks/useRedeemTriple.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useWriteContract } from "wagmi";
-import { abi } from "@/backend/abi";
-
-export function useRedeemTriple() {
- const { writeContractAsync } = useWriteContract();
-
- const redeemTriple = async (vaultId, address, shares = 0n) => {
- try {
- const hash = await writeContractAsync({
- abi: abi,
- address: process.env.NEXT_PUBLIC_CONTRACT_ADDRESS,
- functionName: "redeemTriple",
- args: [shares, address.toLowerCase(), BigInt(vaultId)],
- });
- return hash;
- } catch (err) {
- console.error("Error redeeming triple:", err);
- throw err;
- }
- };
-
- return { redeemTriple };
-}
diff --git a/src/hooks/useRedeemTriple.ts b/src/hooks/useRedeemTriple.ts
new file mode 100644
index 0000000..10e40fc
--- /dev/null
+++ b/src/hooks/useRedeemTriple.ts
@@ -0,0 +1,35 @@
+import { usePrivyAdapter } from "./usePrivyAuth";
+import { abi } from "@/backend/abi";
+
+export function useRedeemTriple() {
+ const { useWriteContract } = usePrivyAdapter();
+ const { writeContractAsync } = useWriteContract();
+
+ const redeemTriple = async (vaultId, address, shares = 0n) => {
+ try {
+ // Convert to BigInt carefully
+ const sharesBigInt = BigInt(shares || 0);
+ const vaultIdBigInt = BigInt(vaultId);
+
+ console.log("Redeeming triple with params:", {
+ shares: sharesBigInt,
+ receiver: address,
+ vaultId: vaultIdBigInt
+ });
+
+ // Pass arguments in the correct order according to the ABI
+ const hash = await writeContractAsync({
+ abi: abi,
+ address: process.env.NEXT_PUBLIC_CONTRACT_ADDRESS,
+ functionName: "redeemTriple",
+ args: [sharesBigInt, address.toLowerCase(), vaultIdBigInt],
+ });
+ return hash;
+ } catch (err) {
+ console.error("Error redeeming triple:", err);
+ throw err;
+ }
+ };
+
+ return { redeemTriple };
+}
diff --git a/src/hooks/useWaitForTxEvents.js b/src/hooks/useWaitForTxEvents.ts
similarity index 100%
rename from src/hooks/useWaitForTxEvents.js
rename to src/hooks/useWaitForTxEvents.ts
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index ef2066c..9fc33c0 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -3,7 +3,7 @@ $color-dark-gray: #1c1c1c;
$color-light-gray: #f2f2f2;
$color-light: #ffffff;
$color-light-border: rgba(255, 255, 255, 0.2);
-$color-accent: #c1ff14;
+$color-accent: #f1eae8;
$color-error: #ff0000;
$color-green: #008837;
$color-green-dark: #003014;
diff --git a/src/utils/formatCompactNumber.js b/src/utils/formatCompactNumber.ts
similarity index 100%
rename from src/utils/formatCompactNumber.js
rename to src/utils/formatCompactNumber.ts
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..b74066a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,41 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"]
+ },
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ]
+ },
+ "include": [
+ "**/*.js",
+ "**/*.ts",
+ "**/*.tsx",
+ "next-env.d.ts",
+ ".next/types/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+}