SNS

.eslintrc.json

@@ -23,6 +23,7 @@
         ".git/",
         ".mops/",
         "dist/",
+        "dao-frontend/",
         "cli-releases/dist/",
         "cli-releases/frontend/dist/",
         "bundle/"

backend/dao/main.mo

@@ -0,0 +1,15 @@
+import Types "./types";
+
+actor class Main() = this {
+	public query func getCirculationChange30Days() : async Types.CirculationChange {
+		return {
+			minted = 6857;
+			burned = 2854;
+			votingRewards = 1857392;
+			transferFees = 1752;
+			gameFees = 2947;
+			daoFees = 1094;
+			unknownFees = 213;
+		};
+	}
+}

backend/dao/types.mo

@@ -0,0 +1,11 @@
+module {
+	public type CirculationChange = {
+		minted: Nat;
+		burned: Nat;
+		votingRewards: Nat;
+		transferFees: Nat;
+		gameFees: Nat;
+		daoFees: Nat;
+		unknownFees: Nat;
+	};
+};

dao-frontend/components/App.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import Header from './Header.svelte';
+	import Token from './Token.svelte';
+</script>
+
+<div class="app">
+	<Header></Header>
+	<div class="content">
+		<Token></Token>
+	</div>
+</div>
+
+<style>
+	:root {
+		--color-primary: hsl(73deg 20% 44%);
+		--color-primary-light: hsl(72deg 24% 55%);
+		--color-secondary: rgb(213 217 208);
+	}
+
+	:global(body) {
+		margin: 0;
+		font-family: sans-serif;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	}
+
+	.content {
+		margin: auto;
+		max-width: 900px;
+		padding: 24px;
+	}
+</style>

dao-frontend/components/Header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import '../../ui-kit/index';
+</script>
+
+<header>
+	<mops-navbar></mops-navbar>
+</header>
+
+<style>
+	header {
+		position: relative;
+		z-index: 100;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 20px;
+		padding: 14px 30px;
+		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+	}
+</style>

dao-frontend/components/Token.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import TokenCard from './TokenCard.svelte';
+	import TokenTransactions from './TokenTransactions.svelte';
+	import TokenCirculation from './TokenCirculation.svelte';
+</script>
+
+<TokenCard></TokenCard>
+<TokenCirculation></TokenCirculation>
+<TokenTransactions></TokenTransactions>

dao-frontend/components/TokenCard.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import { getKongswapTokenInfo, type KongswapTokenInfo } from '../logic/kongswap';
+	import { onMount } from 'svelte';
+
+	let canister = 'mxzaz-hqaaa-aaaar-qaada-cai';
+	let tokenInfo = $state<KongswapTokenInfo | null>(null);
+
+	onMount(async () => {
+		tokenInfo = await getKongswapTokenInfo(canister);
+	});
+
+	function formatPriceChange(priceChange: number) {
+		return priceChange > 0 ? `+${priceChange.toFixed(2)}%` : `${priceChange.toFixed(2)}%`;
+	}
+</script>
+
+<div class="token-card">
+	<div class="token">
+		<div class="header title">
+			<div class="header-icon">
+				<img src="/static/mops.svg" alt="MOPS token" />
+			</div>
+			<div>MOPS token</div>
+		</div>
+
+		{#if tokenInfo}
+			<div class="token-info">
+				<div class="detail">Canister: <span class="value">{canister}</span></div>
+				<div class="detail">Symbol: <span class="value">{tokenInfo.symbol}</span></div>
+				<div class="detail">Decimals: <span class="value">{tokenInfo.decimals}</span></div>
+				<!-- <div class="detail">Transaction Fee: <span class="value">{new Intl.NumberFormat('en-US', { maximumSignificantDigits: 1 }).format(tokenInfo.fee)} MOPS</span></div> -->
+				<div class="detail">Supply: <span class="value">{parseFloat(tokenInfo.metrics.total_supply).toLocaleString('en-US', { maximumFractionDigits: 0 })} MOPS</span></div>
+				<div class="detail market-cap">Market Cap: <span class="value">${parseFloat(tokenInfo.metrics.market_cap).toLocaleString('en-US', { maximumFractionDigits: 0 })}</span></div>
+				<div class="detail">Price: <span class="value">${parseFloat(tokenInfo.metrics.price).toLocaleString('en-US', { minimumFractionDigits: 2, maximumSignificantDigits: 2, })} ({formatPriceChange(parseFloat(tokenInfo.metrics.price_change_24h))})</span></div>
+				<!-- <div class="detail">Volume 24h: <span class="value">${parseFloat(tokenInfo.metrics.volume_24h).toLocaleString('en-US', { maximumFractionDigits: 0 })}</span></div> -->
+				<!-- <div class="detail">TVL: <span class="value">${parseFloat(tokenInfo.metrics.tvl).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span></div> -->
+			</div>
+		{/if}
+	</div>
+
+	<div class="exchanges">
+		<div class="title">Exchanges</div>
+		<div class="list">
+			<a class="exchange" href="https://kongswap.io/stats/mxzaz-hqaaa-aaaar-qaada-cai" target="_blank">
+				<img src="/static/kongswap.svg" alt="KongSwap" />
+				Trade on KongSwap
+			</a>
+			<a class="exchange" href="https://app.icpswap.com/swap?input=ryjl3-tyaaa-aaaaa-aaaba-cai&output=mxzaz-hqaaa-aaaar-qaada-cai" target="_blank">
+				<img src="/static/icpswap.svg" alt="ICP Swap" />
+				Trade on ICPSwap
+			</a>
+		</div>
+	</div>
+</div>
+
+<style>
+	.token-card {
+		background-color: #fff;
+		border-radius: 16px;
+		display: flex;
+	}
+
+	.token {
+		padding-top: 6px;
+		flex: 10;
+	}
+
+	.token .header {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+	}
+
+	.title {
+		font-size: 24px;
+		font-weight: bold;
+		margin-bottom: 16px;
+	}
+
+	.token img {
+		width: 48px;
+		height: 48px;
+	}
+
+	img {
+		width: 32px;
+		height: 32px;
+	}
+
+	a {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		text-decoration: none;
+		color: #000;
+	}
+
+	.token-info {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		font-size: 18px;
+	}
+
+	.token-info .detail {
+		display: flex;
+		justify-content: space-between;
+		gap: 10px;
+	}
+
+	.token-info .detail.market-cap {
+		margin-top: 20px;
+	}
+
+	.token-info .value {
+		font-family: monospace;
+	}
+
+	.exchanges {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		border-left: 1px solid #e0e0e0;
+		padding-top: 16px;
+		padding-left: 42px;
+		margin-left: 42px;
+		flex: 6;
+	}
+
+	.exchange {
+		padding: 12px 16px;
+		border: 1px solid #e0e0e0;
+		border-radius: 8px;
+		background-color: #ffffff;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+		transition: all 0.2s ease-in-out;
+		cursor: pointer;
+		flex: 1;
+	}
+
+	.exchange:hover {
+		background-color: #f9f9f9;
+	}
+
+	.exchanges .list {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	@media (width < 768px) {
+		.token-card {
+			flex-direction: column;
+		}
+
+		.exchanges {
+			border-left: none;
+			padding-left: 0;
+			margin-left: 0;
+
+			border-top: 1px solid #e0e0e0;
+			padding-top: 42px;
+			margin-top: 42px;
+		}
+	}
+</style>