29 |
30 |
Poll Results
31 |
32 |
33 |
34 | {/* Results Summary */}
35 |
36 |
37 |
38 | {totalVotes >= 0 ? totalVotes : '0'}
39 |
40 | Total Votes
41 |
42 |
43 |
44 | {totalUniqueVotes >= 0 ? totalUniqueVotes : '0'}
45 |
46 | Voters
47 |
48 |
49 |
50 | {pollObject?.options?.length || 0}
51 |
52 | Options
53 |
54 |
55 |
56 | {/* Results Options */}
57 |
58 | {resultsData.length > 0 ? (
59 | resultsData.map((result, index) => (
60 |
61 |
62 |
63 | {result.name}
64 |
65 |
66 | {result.percentage}%
67 |
68 | ({result.votes} votes)
69 |
70 |
71 |
72 |
73 | {/* Progress Bar */}
74 |
75 |
0 ?
80 | 'linear-gradient(90deg, #059669 0%, #047857 100%)' :
81 | 'linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%)'
82 | }}
83 | />
84 |
85 |
86 | {/* Winner Badge */}
87 | {index === 0 && result.votes > 0 && (
88 |
97 |
100 | Leading Option
101 |
102 | )}
103 |
104 | ))
105 | ) : (
106 |
107 | No votes cast yet. Be the first to vote!
108 |
109 | )}
110 |
111 |
112 | {/* Voting System Info */}
113 |
121 |
122 | About this poll:
123 |
124 |
125 | Voting System: {getVotingSystemName(pollObject?.votingSystem)}
126 | {pollObject?.votingStrategyFlag && pollObject?.strategyTokenName && (
127 | <>
128 |
129 | Token Requirement: {pollObject.strategyTokenName}
130 |
131 | )}
132 |
133 |
134 |
135 |
136 | );
137 | }
138 |
139 | function getVotingSystemName(systemId) {
140 | const systems = {
141 | 'fptp': 'First Past The Post',
142 | 'block': 'Block Voting',
143 | 'quadratic': 'Quadratic Voting',
144 | 'weighted': 'Weighted Voting'
145 | };
146 | return systems[systemId] || 'Unknown System';
147 | }
--------------------------------------------------------------------------------
/common/constants.js:
--------------------------------------------------------------------------------
1 | export const Constants = {
2 | // Stacks mainnet network flag
3 | STACKS_MAINNET_FLAG: process.env.NEXT_PUBLIC_STACKS_MAINNET_FLAG === "false" ? false : true,
4 |
5 | // Stacks API key
6 | STACKS_API_KEY: "2365259f8e90c60f79725805e5ed1832",
7 |
8 | GAIA_HUB_PREFIX: "https://storage.ballot.gg/",
9 |
10 | // Stacks API URLs
11 | STACKS_MAINNET_API_URL: "https://api.mainnet.hiro.so",
12 | STACKS_TESTNET_API_URL: "https://api.testnet.hiro.so",
13 |
14 | // IPFS gateway
15 | IPFS_GATEWAY: "https://cloudflare-ipfs.com/ipfs/",
16 |
17 | VOTING_SYSTEMS: [
18 | {
19 | "id": "fptp",
20 | "name": "First-past-the-post"
21 | }, {
22 | "id": "block",
23 | "name": "Block Voting"
24 | }, {
25 | "id": "quadratic",
26 | "name": "Quadratic Voting"
27 | }, {
28 | "id": "weighted",
29 | "name": "Weighted Voting"
30 | }
31 | ],
32 |
33 | STRATEGY_TEMPLATES: [
34 | {
35 | "id": "stx",
36 | "name": "STX",
37 | "strategyTokenType": "ft",
38 | "strategyTokenName": "STX",
39 | "strategyContractName": "",
40 | "strategyTokenDecimals": "6"
41 | }, {
42 | "id": "alex",
43 | "name": "ALEX",
44 | "strategyTokenType": "ft",
45 | "strategyTokenName": "alex",
46 | "strategyContractName": "SP3K8BC0PPEVCV7NZ6QSRWPQ2JE9E5B6N3PA0KBR9.age000-governance-token",
47 | "strategyTokenDecimals": "8"
48 | }, {
49 | "id": "blocksurvey",
50 | "name": "BlockSurvey",
51 | "strategyTokenType": "nft",
52 | "strategyTokenName": "blocksurvey",
53 | "strategyContractName": "SPNWZ5V2TPWGQGVDR6T7B6RQ4XMGZ4PXTEE0VQ0S.blocksurvey"
54 | }, {
55 | "id": "btcholders",
56 | "name": ".btc Namespace",
57 | "strategyTokenType": "nft",
58 | "strategyTokenName": ".btc Namespace",
59 | "strategyContractName": ""
60 | }, {
61 | "id": "crashpunks",
62 | "name": "CrashPunks",
63 | "strategyTokenType": "nft",
64 | "strategyTokenName": "crashpunks-v2",
65 | "strategyContractName": "SP3QSAJQ4EA8WXEDSRRKMZZ29NH91VZ6C5X88FGZQ.crashpunks-v2"
66 | }, {
67 | "id": "miamicoin",
68 | "name": "MIA",
69 | "strategyTokenType": "ft",
70 | "strategyTokenName": "miamicoin",
71 | "strategyContractName": "SP1H1733V5MZ3SZ9XRW9FKYGEZT0JDGEB8Y634C7R.miamicoin-token-v2",
72 | "strategyTokenDecimals": "6"
73 | }, {
74 | "id": "newyorkcitycoin",
75 | "name": "NYC",
76 | "strategyTokenType": "ft",
77 | "strategyTokenName": "newyorkcitycoin",
78 | "strategyContractName": "SP2H8PY27SEZ03MWRKS5XABZYQN17ETGQS3527SA5.newyorkcitycoin-token",
79 | "strategyTokenDecimals": "0"
80 | }, {
81 | "id": "satoshibles",
82 | "name": "Satoshibles",
83 | "strategyTokenType": "nft",
84 | "strategyTokenName": "Satoshibles",
85 | "strategyContractName": "SP6P4EJF0VG8V0RB3TQQKJBHDQKEF6NVRD1KZE3C.satoshibles"
86 | }, {
87 | "id": "stacksparrots",
88 | "name": "Stacks Parrots",
89 | "strategyTokenType": "nft",
90 | "strategyTokenName": "stacks-parrots",
91 | "strategyContractName": "SP2KAF9RF86PVX3NEE27DFV1CQX0T4WGR41X3S45C.byzantion-stacks-parrots"
92 | }, {
93 | "id": "theexplorerguild",
94 | "name": "The Explorer Guild",
95 | "strategyTokenType": "nft",
96 | "strategyTokenName": "The-Explorer-Guild",
97 | "strategyContractName": "SP2X0TZ59D5SZ8ACQ6YMCHHNR2ZN51Z32E2CJ173.the-explorer-guild"
98 | }
99 | ],
100 |
101 | TOKEN_TYPES: [{ id: "ft", name: "Fungible Token" }, { id: "nft", name: "Non Fungible Token" }],
102 |
103 | // FAQs
104 | FAQ: [
105 | {
106 | question: "What is Ballot.gg?",
107 | answer: `The Ballot is a decentralized polling app for DAO, NFT, DeFi, and Web 3 projects that puts community members at the center to come to a consensus on important decisions. Polls will be gated based on holdings of tokens, .BTC namespaces, and NFTs.`,
108 | },
109 | {
110 | question: "How does Ballot.gg help?",
111 | answer: `Ballot.gg will help projects in the Stacks community to utilize tokens to govern decision-making on their platform. It will allow DAOs, NFTs, and DeFi's to get broad community consensus regarding proposed changes or ideas in a transparent and verifiable way.`,
112 | },
113 | {
114 | question: "How does Ballot.gg help Stacks community?",
115 | answer: `Polling for consensus has been around for years and is today used in politics to make decisions (eg. Brexit in the UK). Ballot makes it easy to deploy or integrate a poll into your project. Stacks community members can create polls for almost anything they want to know as a collective. Ballot will open up Stacks community members to be actively engaged and get to know how other community members think about things.`,
116 | },
117 | {
118 | question: "Is Ballot.gg open source?",
119 | answer: `Yes. The source of the
UI and Smart Contract ↗ is available here.`,
120 | },
121 | {
122 | question: "Is Ballot.gg free?",
123 | answer: `Yes. There are no charges for creating polls in Ballot.`,
124 | },
125 | {
126 | question: "Which wallets are supported?",
127 | answer: `Ballot.gg supports all major Stacks wallets including
Leather Wallet ↗,
Xverse ↗, and
Asigna ↗. Connect with your preferred wallet to start creating and participating in polls.`,
128 | },
129 | {
130 | question: "Do I need STX to use Ballot.gg?",
131 | answer: `Yes, you'll need a small amount of STX in your wallet to pay for transaction fees when creating polls and casting votes. The platform itself is free to use, but blockchain transactions require gas fees.`,
132 | },
133 | {
134 | question: "Who are the developers of Ballot.gg?",
135 | answer: `We are developers from Team
BlockSurvey ↗ ,
136 |
Owl Link ↗ ,
137 |
Checklist ↗.`,
138 | }
139 | ],
140 |
141 | // Voting system document links
142 | VOTING_SYSTEM_DOCUMENTATION: {
143 | "fptp": {
144 | "id": "fptp",
145 | "name": "First-past-the-post",
146 | "link": "https://docs.ballot.gg/ballot.gg/voting-system/first-past-the-post"
147 | }, "block": {
148 | "id": "block",
149 | "name": "Block Voting",
150 | "link": "https://docs.ballot.gg/ballot.gg/voting-system/block-voting"
151 | }, "quadratic": {
152 | "id": "quadratic",
153 | "name": "Quadratic Voting",
154 | "link": "https://docs.ballot.gg/ballot.gg/voting-system/quadratic-voting"
155 | }, "weighted": {
156 | "id": "weighted",
157 | "name": "Weighted Voting",
158 | "link": "https://docs.ballot.gg/ballot.gg/voting-system/weighted-voting"
159 | }
160 | },
161 |
162 | // Ballot.gg wallet address for donations
163 | MAINNET_DONATION_ADDRESS: "SP1FQ3G3MYSXW68CWPY4GW342T3Y9HQCCXXCKENPH",
164 | TESTNET_DONATION_ADDRESS: "ST2FYE64JK2NMRS1640FE9SKJS37CYYJ3B1EHB6AR",
165 | };
166 |
--------------------------------------------------------------------------------
/utils/htmlSanitizer.js:
--------------------------------------------------------------------------------
1 | // Server-side compatible sanitization
2 | let DOMPurify;
3 | let isClientSide = false;
4 |
5 | if (typeof window !== 'undefined') {
6 | // Client-side: dynamically import DOMPurify
7 | isClientSide = true;
8 | DOMPurify = require('dompurify');
9 | }
10 |
11 | /**
12 | * Fallback server-side sanitization using regex patterns
13 | * This is a basic fallback for server-side rendering
14 | */
15 | const serverSideSanitize = (html, config = {}) => {
16 | if (!html || typeof html !== 'string') {
17 | return '';
18 | }
19 |
20 | let sanitized = html;
21 |
22 | // Remove script tags and their content
23 | sanitized = sanitized.replace(/
]*>[\s\S]*?<\/script>/gi, '');
24 | sanitized = sanitized.replace(/]*\/?>/gi, '');
25 |
26 | // Remove dangerous elements
27 | const dangerousTags = ['iframe', 'object', 'embed', 'form', 'input', 'button', 'textarea', 'select', 'option', 'meta', 'link', 'style', 'base', 'applet', 'frame', 'frameset', 'noframes', 'noscript'];
28 | dangerousTags.forEach(tag => {
29 | const regex = new RegExp(`<${tag}[^>]*>[\\s\\S]*?<\\/${tag}>`, 'gi');
30 | sanitized = sanitized.replace(regex, '');
31 | const selfClosingRegex = new RegExp(`<${tag}[^>]*\/?>`, 'gi');
32 | sanitized = sanitized.replace(selfClosingRegex, '');
33 | });
34 |
35 | // Remove all event handlers (on* attributes)
36 | sanitized = sanitized.replace(/\son\w+\s*=\s*["'][^"']*["']/gi, '');
37 | sanitized = sanitized.replace(/\son\w+\s*=\s*[^\s>]+/gi, '');
38 |
39 | // Remove javascript: and data: URLs
40 | sanitized = sanitized.replace(/href\s*=\s*["']javascript:[^"']*["']/gi, 'href="#"');
41 | sanitized = sanitized.replace(/src\s*=\s*["']javascript:[^"']*["']/gi, 'src=""');
42 | sanitized = sanitized.replace(/href\s*=\s*["']data:[^"']*["']/gi, 'href="#"');
43 | sanitized = sanitized.replace(/src\s*=\s*["']data:[^"']*["']/gi, 'src=""');
44 |
45 | // Additional cleanup for javascript: and data: without quotes
46 | sanitized = sanitized.replace(/javascript:/gi, '');
47 | sanitized = sanitized.replace(/data:/gi, '');
48 |
49 | return sanitized;
50 | };
51 |
52 | /**
53 | * Safely sanitizes HTML content to prevent XSS attacks while preserving legitimate formatting
54 | * @param {string} html - The HTML content to sanitize
55 | * @param {Object} options - Sanitization options
56 | * @returns {string} - Sanitized HTML content
57 | */
58 | export const sanitizeHtml = (html, options = {}) => {
59 | if (!html || typeof html !== 'string') {
60 | return '';
61 | }
62 |
63 | // Default configuration - allows most formatting tags but blocks dangerous elements
64 | const defaultConfig = {
65 | ALLOWED_TAGS: [
66 | 'p', 'br', 'strong', 'b', 'em', 'i', 'u', 's', 'strike',
67 | 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
68 | 'ul', 'ol', 'li',
69 | 'blockquote', 'code', 'pre',
70 | 'a', 'sub', 'sup',
71 | 'div', 'span'
72 | ],
73 | ALLOWED_ATTR: [
74 | 'href', 'target', 'rel',
75 | 'class', // Allow class for styling (Quill editor classes)
76 | 'style' // Allow limited inline styles
77 | ],
78 | ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
79 | // Block all script-related attributes and events
80 | FORBID_ATTR: [
81 | 'onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout',
82 | 'onkeydown', 'onkeyup', 'onkeypress', 'onfocus', 'onblur',
83 | 'onchange', 'onsubmit', 'onreset', 'onselect', 'onresize',
84 | 'onscroll', 'onunload', 'onbeforeunload', 'ondrag', 'ondrop',
85 | 'ondragstart', 'ondragend', 'ondragover', 'ondragenter',
86 | 'ondragleave', 'oncontextmenu', 'onwheel', 'ontouchstart',
87 | 'ontouchend', 'ontouchmove', 'ontouchcancel'
88 | ],
89 | // Remove script tags entirely
90 | FORBID_TAGS: [
91 | 'script', 'object', 'embed', 'applet', 'iframe', 'frame',
92 | 'frameset', 'noframes', 'noscript', 'form', 'input', 'button',
93 | 'textarea', 'select', 'option', 'meta', 'link', 'style', 'base'
94 | ]
95 | };
96 |
97 | // Merge with custom options
98 | const config = { ...defaultConfig, ...options };
99 |
100 | let sanitized;
101 |
102 | if (isClientSide && DOMPurify) {
103 | // Use DOMPurify on client-side
104 | sanitized = DOMPurify.sanitize(html, config);
105 | } else {
106 | // Use fallback sanitization on server-side
107 | sanitized = serverSideSanitize(html, config);
108 | }
109 |
110 | // Extra layer of protection: ensure no javascript: or data: URLs slip through
111 | return sanitized.replace(/javascript:/gi, '').replace(/data:/gi, '');
112 | };
113 |
114 | /**
115 | * Sanitizes plain text and converts URLs to safe links
116 | * @param {string} text - Plain text content
117 | * @param {boolean} convertLinks - Whether to convert URLs to clickable links
118 | * @returns {string} - Sanitized HTML content
119 | */
120 | export const sanitizeTextWithLinks = (text, convertLinks = true) => {
121 | if (!text || typeof text !== 'string') {
122 | return '';
123 | }
124 |
125 | // First escape HTML entities to prevent injection
126 | const escaped = text
127 | .replace(/&/g, '&')
128 | .replace(//g, '>')
130 | .replace(/"/g, '"')
131 | .replace(/'/g, ''');
132 |
133 | if (!convertLinks) {
134 | return escaped;
135 | }
136 |
137 | // Convert URLs to safe links with strict validation
138 | const urlRegex = /https?:\/\/[^\s<>\"{}|\\^`\[\]]*/gi;
139 |
140 | const withLinks = escaped.replace(urlRegex, function (url) {
141 | // Additional URL validation
142 | try {
143 | const urlObj = new URL(url);
144 | // Only allow http and https protocols
145 | if (urlObj.protocol === 'http:' || urlObj.protocol === 'https:') {
146 | // Escape the URL for HTML attribute use
147 | const safeUrl = url.replace(/"/g, '"').replace(/'/g, ''');
148 | return `${url}`;
149 | }
150 | } catch (e) {
151 | // Invalid URL, return as plain text
152 | }
153 | return url;
154 | });
155 |
156 | return withLinks;
157 | };
158 |
159 | /**
160 | * Strips all HTML tags and returns plain text
161 | * @param {string} html - HTML content to strip
162 | * @returns {string} - Plain text content
163 | */
164 | export const stripHtml = (html) => {
165 | if (!html || typeof html !== 'string') {
166 | return '';
167 | }
168 |
169 | if (isClientSide && DOMPurify) {
170 | return DOMPurify.sanitize(html, { ALLOWED_TAGS: [] });
171 | } else {
172 | // Server-side: simple HTML tag removal
173 | return html.replace(/<[^>]*>/g, '');
174 | }
175 | };
176 |
177 | /**
178 | * Configuration for different security levels
179 | */
180 | export const SANITIZE_CONFIGS = {
181 | // Strictest - only basic text formatting
182 | STRICT: {
183 | ALLOWED_TAGS: ['p', 'br', 'strong', 'b', 'em', 'i'],
184 | ALLOWED_ATTR: []
185 | },
186 | // Moderate - includes headings and lists
187 | MODERATE: {
188 | ALLOWED_TAGS: [
189 | 'p', 'br', 'strong', 'b', 'em', 'i', 'u',
190 | 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
191 | 'ul', 'ol', 'li', 'blockquote'
192 | ],
193 | ALLOWED_ATTR: []
194 | },
195 | // Permissive - includes links and styling (default)
196 | PERMISSIVE: {
197 | // Uses the default configuration from sanitizeHtml function
198 | }
199 | };
200 |
201 | export default sanitizeHtml;
--------------------------------------------------------------------------------
/styles/VotingMethodSelection.module.css:
--------------------------------------------------------------------------------
1 | /* Voting Method Selection Styles */
2 | .voting_methods_container {
3 | margin-bottom: var(--space-6);
4 | }
5 |
6 | .voting_methods_title {
7 | font-size: 1.25rem;
8 | font-weight: 700;
9 | color: var(--color-primary);
10 | margin: 0 0 var(--space-4) 0;
11 | text-align: center;
12 | }
13 |
14 | .voting_methods_subtitle {
15 | font-size: 0.875rem;
16 | color: var(--color-secondary);
17 | margin: 0 0 var(--space-5) 0;
18 | text-align: center;
19 | line-height: 1.5;
20 | }
21 |
22 | .voting_methods_grid {
23 | display: grid;
24 | grid-template-columns: 1fr 1fr;
25 | gap: var(--space-4);
26 | margin-bottom: var(--space-5);
27 | }
28 |
29 | @media (max-width: 768px) {
30 | .voting_methods_grid {
31 | grid-template-columns: 1fr;
32 | gap: var(--space-3);
33 | }
34 | }
35 |
36 | .voting_method_card {
37 | background: white;
38 | border: 2px solid var(--color-border);
39 | border-radius: var(--radius-lg);
40 | padding: var(--space-5);
41 | cursor: pointer;
42 | transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
43 | position: relative;
44 | overflow: hidden;
45 | }
46 |
47 | .voting_method_card::before {
48 | content: '';
49 | position: absolute;
50 | top: 0;
51 | left: 0;
52 | right: 0;
53 | height: 4px;
54 | background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
55 | transform: scaleX(0);
56 | transition: transform 0.3s ease;
57 | }
58 |
59 | .voting_method_card:hover {
60 | border-color: #3b82f6;
61 | box-shadow: 0 8px 25px -8px rgba(59, 130, 246, 0.3);
62 | transform: translateY(-2px);
63 | }
64 |
65 | .voting_method_card:hover::before {
66 | transform: scaleX(1);
67 | }
68 |
69 | .voting_method_card.selected {
70 | border-color: #3b82f6;
71 | background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
72 | box-shadow: 0 8px 25px -8px rgba(59, 130, 246, 0.4);
73 | }
74 |
75 | .voting_method_card.selected::before {
76 | transform: scaleX(1);
77 | }
78 |
79 | .voting_method_card.disabled {
80 | opacity: 0.6;
81 | cursor: not-allowed;
82 | background: #f9fafb;
83 | }
84 |
85 | .voting_method_card.disabled:hover {
86 | transform: none;
87 | border-color: var(--color-border);
88 | box-shadow: none;
89 | }
90 |
91 | .voting_method_header {
92 | display: flex;
93 | align-items: center;
94 | gap: var(--space-3);
95 | margin-bottom: var(--space-3);
96 | }
97 |
98 | .voting_method_icon {
99 | width: 48px;
100 | height: 48px;
101 | border-radius: var(--radius-lg);
102 | display: flex;
103 | align-items: center;
104 | justify-content: center;
105 | flex-shrink: 0;
106 | transition: all 0.3s ease;
107 | }
108 |
109 | .voting_method_icon.regular {
110 | background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
111 | color: white;
112 | }
113 |
114 | .voting_method_icon.dust {
115 | background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
116 | color: white;
117 | }
118 |
119 | .voting_method_card:hover .voting_method_icon {
120 | transform: scale(1.1);
121 | }
122 |
123 | .voting_method_title {
124 | font-size: 1.125rem;
125 | font-weight: 700;
126 | color: var(--color-primary);
127 | margin: 0;
128 | line-height: 1.2;
129 | }
130 |
131 | .voting_method_description {
132 | font-size: 0.875rem;
133 | color: var(--color-secondary);
134 | line-height: 1.5;
135 | margin-bottom: var(--space-3);
136 | }
137 |
138 | .voting_method_features {
139 | list-style: none;
140 | margin: 0;
141 | padding: 0;
142 | }
143 |
144 | .voting_method_feature {
145 | display: flex;
146 | align-items: center;
147 | gap: var(--space-2);
148 | font-size: 0.8125rem;
149 | color: var(--color-tertiary);
150 | margin-bottom: var(--space-1);
151 | }
152 |
153 | .voting_method_feature:last-child {
154 | margin-bottom: 0;
155 | }
156 |
157 | .voting_method_feature svg {
158 | color: #10b981;
159 | flex-shrink: 0;
160 | }
161 |
162 | .voting_method_badge {
163 | position: absolute;
164 | top: var(--space-3);
165 | right: var(--space-3);
166 | background: linear-gradient(135deg, #10b981 0%, #059669 100%);
167 | color: white;
168 | font-size: 0.6875rem;
169 | font-weight: 700;
170 | padding: 4px 8px;
171 | border-radius: 12px;
172 | text-transform: uppercase;
173 | letter-spacing: 0.025em;
174 | }
175 |
176 | .voting_method_badge.dust_available {
177 | background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
178 | }
179 |
180 | .voting_method_selector {
181 | position: absolute;
182 | top: var(--space-3);
183 | left: var(--space-3);
184 | width: 20px;
185 | height: 20px;
186 | border: 2px solid var(--color-border);
187 | border-radius: 50%;
188 | background: white;
189 | transition: all 0.3s ease;
190 | }
191 |
192 | .voting_method_card.selected .voting_method_selector {
193 | border-color: #3b82f6;
194 | background: #3b82f6;
195 | }
196 |
197 | .voting_method_card.selected .voting_method_selector::after {
198 | content: '';
199 | position: absolute;
200 | top: 50%;
201 | left: 50%;
202 | transform: translate(-50%, -50%);
203 | width: 8px;
204 | height: 8px;
205 | background: white;
206 | border-radius: 50%;
207 | }
208 |
209 | .voting_options_preview {
210 | background: var(--color-surface);
211 | border: 1px solid var(--color-border);
212 | border-radius: var(--radius-md);
213 | padding: var(--space-4);
214 | margin-top: var(--space-4);
215 | }
216 |
217 | .voting_options_preview_title {
218 | font-size: 0.875rem;
219 | font-weight: 600;
220 | color: var(--color-primary);
221 | margin: 0 0 var(--space-3) 0;
222 | }
223 |
224 | .dust_options_list {
225 | display: flex;
226 | flex-direction: column;
227 | gap: var(--space-2);
228 | }
229 |
230 | .dust_option_item {
231 | display: flex;
232 | justify-content: space-between;
233 | align-items: center;
234 | padding: var(--space-2);
235 | background: white;
236 | border: 1px solid var(--color-border);
237 | border-radius: var(--radius-sm);
238 | font-size: 0.8125rem;
239 | }
240 |
241 | .dust_option_name {
242 | font-weight: 600;
243 | color: var(--color-primary);
244 | }
245 |
246 | .dust_option_amount {
247 | font-weight: 700;
248 | color: #f59e0b;
249 | }
250 |
251 | .no_dust_message {
252 | font-size: 0.8125rem;
253 | color: var(--color-tertiary);
254 | font-style: italic;
255 | }
256 |
257 | .continue_button {
258 | background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
259 | color: white;
260 | border: none;
261 | border-radius: var(--radius-lg);
262 | padding: var(--space-4) var(--space-6);
263 | font-size: 1rem;
264 | font-weight: 600;
265 | cursor: pointer;
266 | transition: all 0.3s ease;
267 | display: flex;
268 | align-items: center;
269 | justify-content: center;
270 | gap: var(--space-2);
271 | width: 100%;
272 | min-height: 48px;
273 | }
274 |
275 | .continue_button:hover:not(:disabled) {
276 | transform: translateY(-2px);
277 | box-shadow: 0 8px 25px -8px rgba(59, 130, 246, 0.5);
278 | }
279 |
280 | .continue_button:active:not(:disabled) {
281 | transform: translateY(0);
282 | }
283 |
284 | .continue_button:disabled {
285 | opacity: 0.5;
286 | cursor: not-allowed;
287 | transform: none;
288 | box-shadow: none;
289 | }
290 |
291 | .back_button {
292 | background: white;
293 | color: var(--color-primary);
294 | border: 2px solid var(--color-border);
295 | border-radius: var(--radius-lg);
296 | padding: var(--space-3) var(--space-5);
297 | font-size: 0.875rem;
298 | font-weight: 600;
299 | cursor: pointer;
300 | transition: all 0.3s ease;
301 | display: flex;
302 | align-items: center;
303 | justify-content: center;
304 | gap: var(--space-2);
305 | }
306 |
307 | .back_button:hover {
308 | border-color: var(--color-primary);
309 | background: var(--color-surface);
310 | transform: translateY(-1px);
311 | }
312 |
313 | .buttons_container {
314 | display: flex;
315 | gap: var(--space-3);
316 | margin-top: var(--space-5);
317 | }
318 |
319 | .buttons_container .back_button {
320 | flex: 0 0 auto;
321 | }
322 |
323 | .buttons_container .continue_button {
324 | flex: 1;
325 | }
--------------------------------------------------------------------------------
/components/common/MyVotesPopup.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { Modal, Spinner, Table } from "react-bootstrap";
3 | import { getFileFromGaia } from "../../services/auth";
4 | import { convertToDisplayDateFormat, formStacksExplorerUrl } from "../../services/utils";
5 | import styles from "../../styles/Dashboard.module.css";
6 |
7 | export default function MyVotePopup(props) {
8 | const { showMyVotesPopup, handleCloseMyVotesPopup } = props;
9 |
10 | // List of votes
11 | const [votes, setVotes] = useState();
12 |
13 | // Loading
14 | const [isLoading, setIsLoading] = useState(false);
15 |
16 | useEffect(() => {
17 | if (showMyVotesPopup) {
18 | getMyVotes();
19 | }
20 | }, [showMyVotesPopup]);
21 |
22 | // Show my polls
23 | const getMyVotes = () => {
24 | // Start loading
25 | setIsLoading(true);
26 |
27 | // Store transaction to Gaia
28 | getFileFromGaia("my_votes_ballot.json").then(
29 | (response) => {
30 | if (response) {
31 | const myVotesObj = JSON.parse(response);
32 |
33 | if (
34 | myVotesObj &&
35 | myVotesObj.votes &&
36 | myVotesObj.votes.length > 0
37 | ) {
38 | setVotes(myVotesObj.votes.reverse());
39 | } else {
40 | // Show empty list
41 | setVotes([]);
42 | }
43 | } else {
44 | // Show empty list
45 | setVotes([]);
46 | }
47 |
48 | // Stop loading
49 | setIsLoading(false);
50 | },
51 | (error) => {
52 | // File does not exit in gaia
53 | if (error && error.code == "does_not_exist") {
54 | // Show empty list
55 | setVotes([]);
56 | }
57 |
58 | // Stop loading
59 | setIsLoading(false);
60 | }
61 | );
62 | };
63 |
64 | const getEachRow = (vote) => {
65 | if (vote?.voteObject && vote?.optionsMap) {
66 | return (
67 | Object.keys(vote?.voteObject).map((optionId, optionIndex) => (
68 |
69 | {vote?.optionsMap[optionId]}
70 |
71 | ))
72 | );
73 | }
74 |
75 | return (<>);
76 | }
77 |
78 | return (
79 | <>
80 | {/* My transactions popup */}
81 |
88 | {/* Header */}
89 |
90 |
My votes
91 |
110 |
121 | {
122 | // Loading
123 | isLoading ? (
124 |
125 |
126 |
127 | ) : // Once data found
128 | votes && votes.length > 0 ? (
129 |
130 |
131 |
132 |
133 | | Title |
134 | Voted option |
135 | Voting power |
136 | Voted at |
137 | Transaction |
138 |
139 |
140 |
141 | {
142 | votes && votes.length > 0 ? (
143 | votes.map((vote, index) => (
144 |
145 | |
146 |
151 | {vote?.title}
152 |
153 | |
154 | {getEachRow(vote)} |
155 | {Object.values(vote?.voteObject)?.[0]} |
156 | {convertToDisplayDateFormat(vote.votedAt)} |
157 |
158 |
163 | {vote?.txId?.substr(0, 10) + "..."}
164 |
165 | |
166 |
167 | ))
168 | ) : ""
169 | }
170 |
171 |
172 |
173 | ) : (
174 |
175 | You have not cast your vote yet.
176 |
177 | )
178 | }
179 |
7 |
8 |
Connect with your preferred wallet
9 |
Choose from leading Stacks ecosystem wallets
10 |
11 |
12 |
13 | {/* Leather Wallet */}
14 |
15 |
16 |
17 |
18 |
19 |
Leather
20 |
The modern Stacks wallet with full ecosystem support
21 |
22 | Web Extension
23 | Desktop
24 |
25 |
26 |
27 |
28 | {/* Xverse Wallet */}
29 |
30 |
31 |
32 |
33 |
34 |
Xverse
35 |
Mobile-first wallet with Bitcoin and Stacks integration
36 |
37 | Mobile
38 | Bitcoin
39 | NFTs
40 |
41 |
42 |
43 |
44 | {/* Asigna Wallet */}
45 |
46 |
47 |
48 |
49 |
50 |
Asigna
51 |
Multi-signature wallet for DAOs and teams
52 |
53 | Multi-sig
54 | DAO
55 | Team
56 |
57 |
58 |
59 |
60 |
61 |
66 |
62 | {/* Title */}
63 |
64 |
65 | {pollIndexObject?.title ? pollIndexObject?.title : "..."}
66 |
67 | {/* Status */}
68 |
69 | {
70 | pollIndexObject?.status == "draft" ? "Draft" :
71 | ((pollIndexObject?.endAt && (new Date(pollIndexObject?.endAt) < new Date())) ?
72 | "Closed" : "Active")
73 | }
74 |
75 |
76 |
77 | {/* Description */}
78 | {
79 | pollIndexObject?.description ?
80 |
81 | {pollIndexObject?.description ? pollIndexObject?.description : "..."}
82 |
83 | : <>
84 | }
85 |
86 |
87 |
88 | Last Modified : {convertToDisplayDateFormat(pollIndexObject?.updatedAt)}
89 |
90 |
91 |
138 |
Choose polls
139 |
158 |
162 | {
163 | // Loading
164 | isLoading ? (
165 |
166 |
167 |
168 | ) : // Once data found
169 | (allPolls && allPolls?.list?.length > 0) ? (
170 |
171 | {allPolls?.list.map(
172 | (pollId, i) => (
173 | (allPolls?.ref?.[pollId] && allPolls?.ref?.[pollId]?.status != "draft") &&
174 |
{ onClickOfPolls(pollId) }}>
175 |
176 |
177 |
184 |
185 |
186 |
187 | {getEachRow(allPolls.ref[pollId])}
188 |
189 |
190 |
191 | )
192 | )}
193 |
194 | ) : (
195 |
196 | Only published polls will be listed here.
197 |
198 | )
199 | }
200 |
110 | {/* Header */}
111 |
112 |
Edit Poll Description
113 |
122 |
123 |
124 | {/* Body */}
125 |
126 | {poll && (
127 |
128 |
129 |
{poll.title}
130 |
131 | ID: {poll.id}
132 |
133 | {getPollStatusLabel(poll)}
134 |
135 |
136 |
137 |
138 | )}
139 |
140 |
141 |
144 |
145 |
153 |
154 | {error && (
155 |
156 | {error}
157 |
158 | )}
159 |
160 |
161 |
162 | {/* Footer */}
163 |
164 |
165 |
166 |
174 |
Changes are saved instantly and visible to all voters
175 |
176 |
177 |
184 |
207 |
208 |
209 |
210 |