├── .env.development
├── .env.production
├── .gitignore
├── LICENSE
├── README.md
├── clarity
    ├── ballot.clar
    └── nft.clar
├── common
    └── constants.js
├── components
    ├── builder
    │   ├── BuilderComponent.js
    │   └── Preview.component.js
    ├── common
    │   ├── DashboardNavBarComponent.js
    │   ├── HeaderComponent.js
    │   ├── InformationComponent.js
    │   └── MyVotesPopup.js
    ├── dashboard
    │   └── DashboardAllPollsComponent.js
    ├── home
    │   └── accordion.js
    ├── poll
    │   ├── PollComponent.js
    │   ├── PollService.js
    │   └── QRCodePopup.js
    └── summary
    │   ├── BuilderComponent.js
    │   ├── ChoosePollsPopup.js
    │   └── SummaryComponent.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── [...id].js
    ├── [param].js
    ├── _app.js
    ├── all-polls.js
    ├── api
    │   └── hello.js
    ├── builder
    │   └── [[...id]].js
    ├── index.js
    └── summary
    │   └── index.js
├── public
    ├── favicon.ico
    ├── images
    │   ├── ballot-meta.png
    │   └── logo
    │   │   └── ballot.png
    └── vercel.svg
├── services
    ├── auth.js
    ├── contract.js
    └── utils.js
├── styles
    ├── Accordion.module.css
    ├── Builder.module.css
    ├── ChoosePollsPopup.module.css
    ├── Dashboard.module.css
    ├── Home.module.css
    ├── Poll.module.css
    ├── QRCodePopup.module.css
    └── globals.css
└── yarn.lock


/.env.development:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_STACKS_MAINNET_FLAG=false
2 | 


--------------------------------------------------------------------------------
/.env.production:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_STACKS_MAINNET_FLAG=true


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 | 
34 | # vercel
35 | .vercel
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 BlockSurvey
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Ballot.gg
 2 | 
 3 | Decentralized Polls on Stacks
 4 | 
 5 | ## FAQ
 6 | 
 7 | 1. What is Ballot.gg?
 8 | 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.
 9 | 
10 | 2. How does Ballot.gg help?
11 | 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.
12 | 
13 | 3. How does Ballot.gg help Stacks community?
14 | 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.
15 | 
16 | 4. Is Ballot.gg open source?
17 | Yes. The source of the smart contact is available here.
18 | 
19 | 5. Is Ballot.gg free?
20 | Yes. There are no charges for creating polls in Ballot.
21 | 
22 | 6. Who is the team behind Ballot.gg?
23 | We are developers from Team [BlockSurvey ↗](https://blocksurvey.io/?ref=ballot).
24 | 
25 | ## Getting Started
26 | 
27 | Ballot.gg is built using Next.js and interacts with Stacks Blockchain.
28 | 
29 | Run the development server:
30 | 
31 | ```bash
32 | npm run dev
33 | # or
34 | yarn dev
35 | ```
36 | 
37 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
38 | 
39 | ## License
40 | 
41 | [MIT License](LICENSE)
42 | 


--------------------------------------------------------------------------------
/clarity/ballot.clar:
--------------------------------------------------------------------------------
  1 | 
  2 | ;; ballot
  3 | 
  4 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
  5 | ;; Constants
  6 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
  7 | (define-constant CONTRACT-OWNER tx-sender)
  8 | ;; Errors
  9 | (define-constant ERR-NOT-STARTED (err u1001))
 10 | (define-constant ERR-ENDED (err u1002))
 11 | (define-constant ERR-ALREADY-VOTED (err u1003))
 12 | (define-constant ERR-FAILED-STRATEGY (err u1004))
 13 | (define-constant ERR-NOT-VOTED (err u1005))
 14 | 
 15 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 16 | ;; data maps and vars
 17 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 18 | (define-data-var title (string-utf8 512) u"")
 19 | (define-data-var description (string-utf8 512) u"")
 20 | (define-data-var voting-system (string-ascii 512) "")
 21 | (define-data-var start uint u0)
 22 | (define-data-var end uint u0)
 23 | (define-map token-ids-map {token-id: uint} {user: principal, vote-id: uint})
 24 | (define-map btc-holder-map {domain: (buff 20), namespace: (buff 48)} {user: principal, vote-id: uint})
 25 | (define-map results {id: (string-ascii 36)} {count: uint, name: (string-utf8 256)} )
 26 | (define-map users {id: principal} {id: uint, vote: (list 2 (string-ascii 36)), volume: (list 2 uint), voting-power: uint})
 27 | (define-map register {id: uint} {user: principal, vote: (list 2 (string-ascii 36)), volume: (list 2 uint), voting-power: uint})
 28 | (define-data-var total uint u0)
 29 | (define-data-var total-votes uint u0)
 30 | (define-data-var options (list 2 (string-ascii 36)) (list))
 31 | (define-data-var temp-voting-power uint u0)
 32 | 
 33 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 34 | ;; private functions
 35 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 36 | (define-private (get-voting-power-by-bns-holder (domain (buff 20)) (namespace (buff 48)))
 37 |     (let
 38 |         (
 39 |             (bns-owner (get owner (unwrap-panic (contract-call? 'SP000000000000000000002Q6VF78.bns name-resolve domain namespace))))
 40 |         )
 41 | 
 42 |         (if (is-eq tx-sender bns-owner)
 43 |             (match (map-get? btc-holder-map {domain: domain, namespace: namespace})
 44 |                 result
 45 |                     u0
 46 |                 u1
 47 |             )
 48 |             u0
 49 |         )
 50 |     )
 51 | )
 52 | 
 53 | (define-private (validate-nft-ownership (token-id uint))
 54 |     (let
 55 |         (
 56 |             (vote-id (+ u1 (var-get total)))
 57 |             (nft-owner-optional (unwrap-panic (contract-call? 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.contract get-owner token-id)))
 58 |         )
 59 | 
 60 |         (match nft-owner-optional
 61 |             nft-owner 
 62 |                 (if (is-eq tx-sender nft-owner)
 63 |                     (match (map-get? token-ids-map {token-id: token-id})
 64 |                         result
 65 |                             u0
 66 |                         (if (map-set token-ids-map {token-id: token-id} {user: tx-sender, vote-id: vote-id})                        
 67 |                             u1
 68 |                             u0
 69 |                         )
 70 |                     )
 71 |                     u0
 72 |                 )
 73 |             u0
 74 |         )
 75 |     )
 76 | )
 77 | 
 78 | (define-private (get-voting-power-by-nft-holdings (token-ids (list 60000 uint)))
 79 |     (fold + (map validate-nft-ownership token-ids) u0)
 80 | )
 81 | 
 82 | (define-private (get-voting-power-by-stx-holdings)
 83 |     (let
 84 |         (
 85 |             (stx-balance (stx-get-balance tx-sender))
 86 |         )
 87 |         (if (> stx-balance u0)
 88 |             (/ stx-balance u1000000)
 89 |             stx-balance
 90 |         )
 91 |     )    
 92 | )
 93 | 
 94 | (define-read-only (get-voting-power-by-ft-holdings)
 95 |     (let
 96 |         (
 97 |             (ft-balance (unwrap-panic (contract-call? 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.contract get-balance tx-sender)))
 98 |             (ft-decimals (unwrap-panic (contract-call? 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM.contract get-decimals)))
 99 |         )
100 | 
101 |         (if (> ft-balance u0)
102 |             (if (> ft-decimals u0)
103 |                 (/ ft-balance (pow u10 ft-decimals))
104 |                 ft-balance
105 |             )
106 |             ft-balance
107 |         )
108 |     )
109 | )
110 | 
111 | (define-private (have-i-voted)
112 |     (match (map-get? users {id: tx-sender})
113 |         success true
114 |         false
115 |     )
116 | )
117 | 
118 | (define-private (fold-boolean (left bool) (right bool))
119 |     (and (is-eq left true) (is-eq right true))
120 | )
121 | 
122 | (define-private (check-volume (each-volume uint))
123 |     (> each-volume u0)
124 | )
125 | 
126 | (define-private (validate-vote-volume (volume (list 2 uint)))
127 |     (begin
128 |         (fold fold-boolean (map check-volume volume) true)
129 |     )
130 | )
131 | 
132 | (define-private (get-volume-by-voting-power (volume uint))
133 |     (var-get temp-voting-power)
134 | )
135 | 
136 | (define-private (get-pow-value (volume uint))
137 |     (pow volume u2)
138 | )
139 | 
140 | (define-private (process-my-vote (option-id (string-ascii 36)) (volume uint))
141 |     (match (map-get? results {id: option-id})
142 |         result (let
143 |                 (
144 |                     (new-count-tuple {count: (+ volume (get count result))})
145 |                 )
146 | 
147 |                 ;; Capture the vote
148 |                 (map-set results {id: option-id} (merge result new-count-tuple))
149 | 
150 |                 ;; Return
151 |                 true
152 |             )
153 |         false
154 |     )
155 | )
156 | 
157 | (define-private (get-single-result (option-id (string-ascii 36)))
158 |     (let 
159 |         (
160 |             (volume (default-to u0 (get count (map-get? results {id: option-id}))))
161 |         )
162 | 
163 |         ;; Return volume
164 |         volume
165 |     )
166 | )
167 | 
168 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
169 | ;; public functions for all
170 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
171 | (define-public (cast-my-vote (vote (list 2 (string-ascii 36))) (volume (list 2 uint))
172 |     (bns (string-ascii 256)) (domain (buff 20)) (namespace (buff 48)) (token-ids (list 60000 uint))
173 |     )
174 |     (let
175 |         (
176 |             (vote-id (+ u1 (var-get total)))
177 |             ;; Strategy applied
178 |             ;; (voting-power (get-voting-power-by-bns-holder domain namespace))
179 |             ;; (voting-power (get-voting-power-by-nft-holdings token-ids))
180 |             ;; (voting-power (get-voting-power-by-stx-holdings))
181 |             ;; (voting-power (get-voting-power-by-ft-holdings))
182 | 
183 |             ;; No strategy
184 |             ;; FPTP and Block voting - No strategy
185 |             ;; (voting-power u1)
186 | 
187 |             ;; Quadratic - No strategy
188 |             ;; (voting-power (fold + (map get-pow-value volume) u0))
189 | 
190 |             ;; Weighted voting - No strategy
191 |             (voting-power (fold + volume u0))
192 | 
193 |             ;; FPTP and Block voting
194 |             ;; (temp (var-set temp-voting-power voting-power))
195 |             ;; (volume-by-voting-power (map get-volume-by-voting-power volume))
196 |             ;; FPTP and Block voting - Number of votes
197 |             ;; (my-votes voting-power)
198 | 
199 |             ;; Quadratic or Weighted voting
200 |             (volume-by-voting-power volume)
201 |             ;; Quadratic or Weighted voting - Number of votes
202 |             (my-votes (fold + volume u0))
203 |         )
204 |         ;; Validation
205 |         (asserts! (and (> (len vote) u0) (is-eq (len vote) (len volume-by-voting-power)) (validate-vote-volume volume-by-voting-power)) ERR-NOT-VOTED)
206 |         (asserts! (>= tenure-height (var-get start)) ERR-NOT-STARTED)
207 |         (asserts! (<= tenure-height (var-get end)) ERR-ENDED)        
208 |         (asserts! (not (have-i-voted)) ERR-ALREADY-VOTED)
209 | 
210 |         ;; FPTP and Block voting
211 |         ;; (asserts! (> voting-power u0) ERR-FAILED-STRATEGY)
212 | 
213 |         ;; Quadratic voting
214 |         ;; (asserts! (>= voting-power (fold + (map get-pow-value volume-by-voting-power) u0)) ERR-FAILED-STRATEGY)
215 | 
216 |         ;; Weigted voting
217 |         (asserts! (>= voting-power (fold + volume-by-voting-power u0)) ERR-FAILED-STRATEGY)
218 | 
219 |         ;; Business logic
220 |         ;; Process my vote
221 |         (map process-my-vote vote volume-by-voting-power)
222 | 
223 |         ;; Register for reference
224 |         (map-set users {id: tx-sender} {id: vote-id, vote: vote, volume: volume-by-voting-power, voting-power: voting-power})
225 |         (map-set register {id: vote-id} {user: tx-sender, vote: vote, volume: volume-by-voting-power, voting-power: voting-power})
226 | 
227 |         ;; Increase the total votes
228 |         (var-set total-votes (+ my-votes (var-get total-votes)))
229 | 
230 |         ;; Increase the total
231 |         (var-set total vote-id)
232 | 
233 |         ;; Return
234 |         (ok true)
235 |     )
236 | )
237 | 
238 | (define-read-only (get-results)
239 |     (begin
240 |         (ok {
241 |                 total: (var-get total), 
242 |                 total-votes: (var-get total-votes), 
243 |                 options: (var-get options), 
244 |                 results: (map get-single-result (var-get options))
245 |             })
246 |     )
247 | )
248 | 
249 | (define-read-only (get-result-at-position (position uint))
250 |     (ok (map-get? register {id: position}))
251 | )
252 |     
253 | (define-read-only (get-result-by-user (user principal))
254 |     (ok (map-get? users {id: user}))
255 | )
256 | 
257 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
258 | ;; Default assignments
259 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
260 | (var-set title u"BlockSurvey Poll")
261 | (var-set description u"Description")
262 | (var-set voting-system "First past the post")
263 | (var-set options (list "option1" "option2"))
264 | (var-set start u1)
265 | (var-set end u1)
266 | (map-set results {id: "option1"} {count: u0, name: u"Yes"})
267 | (map-set results {id: "option2"} {count: u0, name: u"No"})


--------------------------------------------------------------------------------
/clarity/nft.clar:
--------------------------------------------------------------------------------
 1 | ;; (impl-trait 'SP2PABAF9FTAJYNFZH93XENAJ8FVY99RRM50D2JG9.nft-trait.nft-trait)
 2 | 
 3 | (define-constant contract-owner tx-sender)
 4 | (define-constant err-owner-only (err u100))
 5 | (define-constant err-not-token-owner (err u101))
 6 | 
 7 | (define-non-fungible-token stacksies uint)
 8 | 
 9 | (define-data-var last-token-id uint u0)
10 | 
11 | (define-read-only (get-last-token-id)
12 |     (ok (var-get last-token-id))
13 | )
14 | 
15 | (define-read-only (get-token-uri (token-id uint))
16 |     (ok none)
17 | )
18 | 
19 | (define-read-only (get-owner (token-id uint))
20 |     (ok (nft-get-owner? stacksies token-id))
21 | )
22 | 
23 | (define-public (transfer (token-id uint) (sender principal) (recipient principal))
24 |     (begin
25 |         (asserts! (is-eq tx-sender sender) err-not-token-owner)
26 |         (nft-transfer? stacksies token-id sender recipient)
27 |     )
28 | )
29 | 
30 | (define-public (mint (recipient principal))
31 |     (let
32 |         (
33 |             (token-id (+ (var-get last-token-id) u1))
34 |         )
35 |         (asserts! (is-eq tx-sender contract-owner) err-owner-only)
36 |         (try! (nft-mint? stacksies token-id recipient))
37 |         (var-set last-token-id token-id)
38 |         (ok token-id)
39 |     )
40 | )


--------------------------------------------------------------------------------
/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 |   GAIA_HUB_PREFIX: "https://gaia.blockstack.org/hub/",
  6 | 
  7 |   // Stacks API URLs
  8 |   STACKS_MAINNET_API_URL: "https://api.mainnet.hiro.so",
  9 |   STACKS_TESTNET_API_URL: "https://api.testnet.hiro.so",
 10 | 
 11 |   // IPFS gateway
 12 |   IPFS_GATEWAY: "https://cloudflare-ipfs.com/ipfs/",
 13 | 
 14 |   VOTING_SYSTEMS: [
 15 |     {
 16 |       "id": "fptp",
 17 |       "name": "First-past-the-post"
 18 |     }, {
 19 |       "id": "block",
 20 |       "name": "Block Voting"
 21 |     }, {
 22 |       "id": "quadratic",
 23 |       "name": "Quadratic Voting"
 24 |     }, {
 25 |       "id": "weighted",
 26 |       "name": "Weighted Voting"
 27 |     }
 28 |   ],
 29 | 
 30 |   STRATEGY_TEMPLATES: [
 31 |     {
 32 |       "id": "alex",
 33 |       "name": "ALEX",
 34 |       "strategyTokenType": "ft",
 35 |       "strategyTokenName": "alex",
 36 |       "strategyContractName": "SP3K8BC0PPEVCV7NZ6QSRWPQ2JE9E5B6N3PA0KBR9.age000-governance-token",
 37 |       "strategyTokenDecimals": "8"
 38 |     }, {
 39 |       "id": "blocksurvey",
 40 |       "name": "BlockSurvey",
 41 |       "strategyTokenType": "nft",
 42 |       "strategyTokenName": "blocksurvey",
 43 |       "strategyContractName": "SPNWZ5V2TPWGQGVDR6T7B6RQ4XMGZ4PXTEE0VQ0S.blocksurvey"
 44 |     }, {
 45 |       "id": "btcholders",
 46 |       "name": ".btc Namespace",
 47 |       "strategyTokenType": "nft",
 48 |       "strategyTokenName": ".btc Namespace",
 49 |       "strategyContractName": ""
 50 |     }, {
 51 |       "id": "crashpunks",
 52 |       "name": "CrashPunks",
 53 |       "strategyTokenType": "nft",
 54 |       "strategyTokenName": "crashpunks-v2",
 55 |       "strategyContractName": "SP3QSAJQ4EA8WXEDSRRKMZZ29NH91VZ6C5X88FGZQ.crashpunks-v2"
 56 |     }, {
 57 |       "id": "miamicoin",
 58 |       "name": "MIA",
 59 |       "strategyTokenType": "ft",
 60 |       "strategyTokenName": "miamicoin",
 61 |       "strategyContractName": "SP1H1733V5MZ3SZ9XRW9FKYGEZT0JDGEB8Y634C7R.miamicoin-token-v2",
 62 |       "strategyTokenDecimals": "6"
 63 |     }, {
 64 |       "id": "newyorkcitycoin",
 65 |       "name": "NYC",
 66 |       "strategyTokenType": "ft",
 67 |       "strategyTokenName": "newyorkcitycoin",
 68 |       "strategyContractName": "SP2H8PY27SEZ03MWRKS5XABZYQN17ETGQS3527SA5.newyorkcitycoin-token",
 69 |       "strategyTokenDecimals": "0"
 70 |     }, {
 71 |       "id": "satoshibles",
 72 |       "name": "Satoshibles",
 73 |       "strategyTokenType": "nft",
 74 |       "strategyTokenName": "Satoshibles",
 75 |       "strategyContractName": "SP6P4EJF0VG8V0RB3TQQKJBHDQKEF6NVRD1KZE3C.satoshibles"
 76 |     }, {
 77 |       "id": "stacksparrots",
 78 |       "name": "Stacks Parrots",
 79 |       "strategyTokenType": "nft",
 80 |       "strategyTokenName": "stacks-parrots",
 81 |       "strategyContractName": "SP2KAF9RF86PVX3NEE27DFV1CQX0T4WGR41X3S45C.byzantion-stacks-parrots"
 82 |     }, {
 83 |       "id": "stx",
 84 |       "name": "STX",
 85 |       "strategyTokenType": "ft",
 86 |       "strategyTokenName": "STX",
 87 |       "strategyContractName": "",
 88 |       "strategyTokenDecimals": "6"
 89 |     }, {
 90 |       "id": "theexplorerguild",
 91 |       "name": "The Explorer Guild",
 92 |       "strategyTokenType": "nft",
 93 |       "strategyTokenName": "The-Explorer-Guild",
 94 |       "strategyContractName": "SP2X0TZ59D5SZ8ACQ6YMCHHNR2ZN51Z32E2CJ173.the-explorer-guild"
 95 |     }
 96 |   ],
 97 | 
 98 |   TOKEN_TYPES: [{ id: "nft", name: "Non Fungible Token" }, { id: "ft", name: "Fungible Token" }],
 99 | 
100 |   // FAQs
101 |   FAQ: [
102 |     {
103 |       question: "What is Ballot.gg?",
104 |       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.`,
105 |     },
106 |     {
107 |       question: "How does Ballot.gg help?",
108 |       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.`,
109 |     },
110 |     {
111 |       question: "How does Ballot.gg help Stacks community?",
112 |       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.`,
113 |     },
114 |     {
115 |       question: "Is Ballot.gg open source?",
116 |       answer: `Yes. The source of the <a href="https://github.com/BlockSurvey/ballot" target="_blank" rel="noreferrer">UI and Smart Contract ↗</a> is available here.`,
117 |     },
118 |     {
119 |       question: "Is Ballot.gg free?",
120 |       answer: `Yes. There are no charges for creating polls in Ballot.`,
121 |     },
122 |     {
123 |       question: "Who are the developers of Ballot.gg?",
124 |       answer: `We are developers from Team <a href="https://blocksurvey.io?ref=ballot" target="_blank" rel="noreferrer">BlockSurvey ↗</a> , 
125 |       <a href="https://owl.link?ref=ballot" target="_blank" rel="noreferrer">Owl Link ↗</a> , 
126 |       <a href="https://checklist.gg?ref=ballot" target="_blank" rel="noreferrer">Checklist ↗</a>.`,
127 |     }
128 |   ],
129 | 
130 |   // Voting system document links
131 |   VOTING_SYSTEM_DOCUMENTATION: {
132 |     "fptp": {
133 |       "id": "fptp",
134 |       "name": "First-past-the-post",
135 |       "link": "https://docs.ballot.gg/ballot.gg/voting-system/first-past-the-post"
136 |     }, "block": {
137 |       "id": "block",
138 |       "name": "Block Voting",
139 |       "link": "https://docs.ballot.gg/ballot.gg/voting-system/block-voting"
140 |     }, "quadratic": {
141 |       "id": "quadratic",
142 |       "name": "Quadratic Voting",
143 |       "link": "https://docs.ballot.gg/ballot.gg/voting-system/quadratic-voting"
144 |     }, "weighted": {
145 |       "id": "weighted",
146 |       "name": "Weighted Voting",
147 |       "link": "https://docs.ballot.gg/ballot.gg/voting-system/weighted-voting"
148 |     }
149 |   },
150 | 
151 |   // Ballot.gg wallet address for donations
152 |   MAINNET_DONATION_ADDRESS: "SP1FQ3G3MYSXW68CWPY4GW342T3Y9HQCCXXCKENPH",
153 |   TESTNET_DONATION_ADDRESS: "ST2FYE64JK2NMRS1640FE9SKJS37CYYJ3B1EHB6AR",
154 | };
155 | 


--------------------------------------------------------------------------------
/components/builder/Preview.component.js:
--------------------------------------------------------------------------------
 1 | import { Modal } from "react-bootstrap";
 2 | import PollComponent from "../poll/PollComponent";
 3 | 
 4 | export default function PreviewComponent(props) {
 5 |     const { show, handleClose, pollObject } = props;
 6 | 
 7 |     return (
 8 |         <>
 9 |             <Modal size="xl" show={show} onHide={handleClose}>
10 |                 <Modal.Header closeButton>
11 |                     <Modal.Title>Preview</Modal.Title>
12 |                 </Modal.Header>
13 |                 <Modal.Body>
14 |                     <PollComponent isPreview="true" pollObject={pollObject} resultsByPosition={{}} />
15 |                 </Modal.Body>
16 |             </Modal>
17 |         </>
18 |     )
19 | }


--------------------------------------------------------------------------------
/components/common/DashboardNavBarComponent.js:
--------------------------------------------------------------------------------
  1 | import Link from "next/link";
  2 | import { useEffect, useRef, useState } from "react";
  3 | import { Button } from "react-bootstrap";
  4 | import Dropdown from 'react-bootstrap/Dropdown';
  5 | import DropdownButton from 'react-bootstrap/DropdownButton';
  6 | import { authenticate, signOut, switchAccount, userSession } from "../../services/auth";
  7 | import { getDomainNamesFromBlockchain } from "../../services/utils";
  8 | import MyVotePopup from "./MyVotesPopup";
  9 | 
 10 | export function DashboardNavBarComponent() {
 11 |     // Variables
 12 |     const [displayUsername, setDisplayUsername] = useState();
 13 |     const [isUserSignedIn, setIsUserSignedIn] = useState(false);
 14 | 
 15 |     // My votes popup
 16 |     const [showMyVotesPopup, setShowMyVotesPopup] = useState(false);
 17 |     const handleCloseMyVotesPopup = () =>
 18 |         setShowMyVotesPopup(false);
 19 |     const handleShowMyVotesPopup = () => setShowMyVotesPopup(true);
 20 | 
 21 |     // Feedback hidden button
 22 |     const feedbackButton = useRef(null);
 23 | 
 24 |     // Functions
 25 |     useEffect(() => {
 26 |         getDisplayUsername();
 27 | 
 28 |         if (userSession && userSession.isUserSignedIn()) {
 29 |             setIsUserSignedIn(true)
 30 |         }
 31 |     }, []);
 32 | 
 33 |     const getDisplayUsername = async () => {
 34 |         const _username = await getDomainNamesFromBlockchain();
 35 |         setDisplayUsername(_username);
 36 |     }
 37 | 
 38 |     // UI
 39 |     return (
 40 |         <>
 41 |             <div style={{
 42 |                 padding: "30px 0", display: "flex", justifyContent: "space-between", alignItems: "center",
 43 |                 minHeight: "118px", position: "sticky", top: "0px", backgroundColor: "white", zIndex: "999"
 44 |             }}>
 45 |                 <div>
 46 |                     <a href={isUserSignedIn ? "/all-polls" : "/"}>
 47 |                         <svg width="68" height="19" viewBox="0 0 68 19" fill="none" xmlns="http://www.w3.org/2000/svg">
 48 |                             <path d="M10.16 9.408C11.104 9.584 11.88 10.056 12.488 10.824C13.096 11.592 13.4 12.472 13.4 13.464C13.4 14.36 13.176 15.152 12.728 15.84C12.296 16.512 11.664 17.04 10.832 17.424C10 17.808 9.016 18 7.88 18H0.656V1.248H7.568C8.704 1.248 9.68 1.432 10.496 1.8C11.328 2.168 11.952 2.68 12.368 3.336C12.8 3.992 13.016 4.736 13.016 5.568C13.016 6.544 12.752 7.36 12.224 8.016C11.712 8.672 11.024 9.136 10.16 9.408ZM4.016 8.16H7.088C7.888 8.16 8.504 7.984 8.936 7.632C9.368 7.264 9.584 6.744 9.584 6.072C9.584 5.4 9.368 4.88 8.936 4.512C8.504 4.144 7.888 3.96 7.088 3.96H4.016V8.16ZM7.4 15.264C8.216 15.264 8.848 15.072 9.296 14.688C9.76 14.304 9.992 13.76 9.992 13.056C9.992 12.336 9.752 11.776 9.272 11.376C8.792 10.96 8.144 10.752 7.328 10.752H4.016V15.264H7.4ZM15.2139 11.304C15.2139 9.96 15.4779 8.768 16.0059 7.728C16.5499 6.688 17.2779 5.888 18.1899 5.328C19.1179 4.768 20.1499 4.488 21.2859 4.488C22.2779 4.488 23.1419 4.688 23.8779 5.088C24.6299 5.488 25.2299 5.992 25.6779 6.6V4.704H29.0619V18H25.6779V16.056C25.2459 16.68 24.6459 17.2 23.8779 17.616C23.1259 18.016 22.2539 18.216 21.2619 18.216C20.1419 18.216 19.1179 17.928 18.1899 17.352C17.2779 16.776 16.5499 15.968 16.0059 14.928C15.4779 13.872 15.2139 12.664 15.2139 11.304ZM25.6779 11.352C25.6779 10.536 25.5179 9.84 25.1979 9.264C24.8779 8.672 24.4459 8.224 23.9019 7.92C23.3579 7.6 22.7739 7.44 22.1499 7.44C21.5259 7.44 20.9499 7.592 20.4219 7.896C19.8939 8.2 19.4619 8.648 19.1259 9.24C18.8059 9.816 18.6459 10.504 18.6459 11.304C18.6459 12.104 18.8059 12.808 19.1259 13.416C19.4619 14.008 19.8939 14.464 20.4219 14.784C20.9659 15.104 21.5419 15.264 22.1499 15.264C22.7739 15.264 23.3579 15.112 23.9019 14.808C24.4459 14.488 24.8779 14.04 25.1979 13.464C25.5179 12.872 25.6779 12.168 25.6779 11.352ZM35.7035 0.24V18H32.3435V0.24H35.7035ZM42.3832 0.24V18H39.0232V0.24H42.3832ZM51.6069 18.216C50.3269 18.216 49.1749 17.936 48.1509 17.376C47.1269 16.8 46.3189 15.992 45.7269 14.952C45.1509 13.912 44.8629 12.712 44.8629 11.352C44.8629 9.992 45.1589 8.792 45.7509 7.752C46.3589 6.712 47.1829 5.912 48.2229 5.352C49.2629 4.776 50.4229 4.488 51.7029 4.488C52.9829 4.488 54.1429 4.776 55.1829 5.352C56.2229 5.912 57.0389 6.712 57.6309 7.752C58.2389 8.792 58.5429 9.992 58.5429 11.352C58.5429 12.712 58.2309 13.912 57.6069 14.952C56.9989 15.992 56.1669 16.8 55.1109 17.376C54.0709 17.936 52.9029 18.216 51.6069 18.216ZM51.6069 15.288C52.2149 15.288 52.7829 15.144 53.3109 14.856C53.8549 14.552 54.2869 14.104 54.6069 13.512C54.9269 12.92 55.0869 12.2 55.0869 11.352C55.0869 10.088 54.7509 9.12 54.0789 8.448C53.4229 7.76 52.6149 7.416 51.6549 7.416C50.6949 7.416 49.8869 7.76 49.2309 8.448C48.5909 9.12 48.2709 10.088 48.2709 11.352C48.2709 12.616 48.5829 13.592 49.2069 14.28C49.8469 14.952 50.6469 15.288 51.6069 15.288ZM64.9196 7.464V13.896C64.9196 14.344 65.0236 14.672 65.2316 14.88C65.4556 15.072 65.8236 15.168 66.3356 15.168H67.8956V18H65.7836C62.9516 18 61.5356 16.624 61.5356 13.872V7.464H59.9516V4.704H61.5356V1.416H64.9196V4.704H67.8956V7.464H64.9196Z" fill="black" />
 49 |                         </svg>
 50 |                     </a>
 51 |                 </div>
 52 |                 {
 53 |                     isUserSignedIn ?
 54 |                         <div style={{ display: "flex", gap: "20px", alignItems: "center" }}>
 55 |                             <div style={{ margin: "10px 0" }}>
 56 |                                 <Link href="/builder/new">
 57 |                                     <Button className="action_secondary_btn">
 58 |                                         <svg style={{ width: "12px" }} viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
 59 |                                             <path fillRule="evenodd" clipRule="evenodd" d="M5.30005 0.299988C5.63917 0.299988 5.91408 0.574901 5.91408 0.914023V4.68595H9.68601C10.0251 4.68595 10.3 4.96087 10.3 5.29999C10.3 5.63911 10.0251 5.91402 9.68601 5.91402H5.91408V9.68595C5.91408 10.0251 5.63917 10.3 5.30005 10.3C4.96093 10.3 4.68601 10.0251 4.68601 9.68595V5.91402H0.914084C0.574962 5.91402 0.300049 5.63911 0.300049 5.29999C0.300049 4.96087 0.574962 4.68595 0.914084 4.68595H4.68601V0.914023C4.68601 0.574901 4.96093 0.299988 5.30005 0.299988Z" fill="black" />
 60 |                                         </svg>
 61 |                                         New Poll
 62 |                                     </Button>
 63 |                                 </Link>
 64 |                             </div>
 65 | 
 66 |                             {/* <div className="d-none d-md-block" style={{ margin: "10px 0" }}>
 67 |                                 <Link href="/all-polls">
 68 |                                     <Button variant="secondary">
 69 |                                         All Polls
 70 |                                     </Button>
 71 |                                 </Link>
 72 |                             </div> */}
 73 | 
 74 |                             {/* Profile */}
 75 |                             <div>
 76 |                                 <DropdownButton
 77 |                                     align="end"
 78 |                                     title={displayUsername ? (displayUsername.length < 16 ? displayUsername : (displayUsername.substr(0, 8) + "...")) : "..."}
 79 |                                     id="dropdown-menu-align-end"
 80 |                                     style={{ maxWidth: "120px" }}
 81 |                                 >
 82 |                                     <Dropdown.Item
 83 |                                         onClick={() => {
 84 |                                             handleShowMyVotesPopup();
 85 |                                         }}
 86 |                                     >
 87 |                                         My votes
 88 |                                     </Dropdown.Item>
 89 |                                     <Dropdown.Item
 90 |                                         href="/summary">
 91 |                                         Summary page
 92 |                                     </Dropdown.Item>
 93 |                                     <Dropdown.Item
 94 |                                         onClick={() => {
 95 |                                             switchAccount(window?.location?.href);
 96 |                                         }}
 97 |                                     >
 98 |                                         Switch account
 99 |                                     </Dropdown.Item>
100 |                                     <Dropdown.Divider />
101 |                                     <Dropdown.Item
102 |                                         href="https://github.com/BlockSurvey/ballot/issues"
103 |                                         target="_blank">
104 |                                         Share feedback
105 |                                     </Dropdown.Item>
106 |                                     <Dropdown.Item eventKey="1" onClick={() => { signOut() }}>Logout</Dropdown.Item>
107 |                                 </DropdownButton>
108 |                             </div>
109 |                         </div>
110 |                         :
111 |                         <div>
112 |                             <Button variant="dark"
113 |                                 onClick={() => { authenticate(window?.location?.href) }}>
114 |                                 Sign up
115 |                             </Button>
116 |                         </div>
117 |                 }
118 |             </div>
119 | 
120 |             {/* My votes popup */}
121 |             <MyVotePopup showMyVotesPopup={showMyVotesPopup}
122 |                 handleCloseMyVotesPopup={handleCloseMyVotesPopup}
123 |                 handleShowMyVotesPopup={handleShowMyVotesPopup}
124 |             />
125 |         </>
126 |     );
127 | }


--------------------------------------------------------------------------------
/components/common/HeaderComponent.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |     formStacksExplorerUrl,
  3 |     openFacebookUrl,
  4 |     openLinkedinUrl,
  5 |     openRedditUrl,
  6 |     openTelegramUrl,
  7 |     openTwitterUrl,
  8 |     openWhatsappUrl
  9 | } from "../../services/utils";
 10 | import Tooltip from "react-bootstrap/Tooltip";
 11 | import { useState } from "react";
 12 | import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 13 | import QRCodePopup from "../poll/QRCodePopup";
 14 | import { Dropdown } from "react-bootstrap";
 15 | import styles from "../../styles/Dashboard.module.css";
 16 | 
 17 | export default function HeaderComponent(props) {
 18 |     // Variables
 19 |     const { pollObject, publicUrl, txStatus } = props;
 20 | 
 21 |     const [copyText, setCopyText] = useState("Copy");
 22 |     const [showQRCodePopupFlag, setShowQRCodePopupFlag] = useState(false);
 23 | 
 24 |     // Function
 25 |     const copyToClipBoard = () => {
 26 |         if (pollObject?.id) {
 27 |             // Update tooltip message
 28 |             setCopyText("Copied");
 29 | 
 30 |             navigator.clipboard.writeText(publicUrl);
 31 |         }
 32 |     };
 33 | 
 34 |     const convertToHrefLink = (text) => {
 35 |         const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
 36 |         return text.replace(urlRegex, function (url) {
 37 |             return '<a href="' + url + '" target="_blank">' + url + '</a>';
 38 |         });
 39 |     }
 40 | 
 41 |     // Design
 42 |     return (
 43 |         <>
 44 |             {pollObject && pollObject.id &&
 45 |                 <>
 46 |                     {/* Title */}
 47 |                     <h1 style={{ fontSize: "24px", fontWeight: "600" }}>{pollObject?.title}</h1>
 48 | 
 49 |                     {/* Info Bar */}
 50 |                     <div style={{
 51 |                         display: "flex", alignItems: "center", justifyContent: "space-between", columnGap: "20px",
 52 |                         rowGap: "6px", fontSize: "14px", marginBottom: "24px", flexWrap: "wrap"
 53 |                     }}>
 54 |                         <div className="d-flex align-items-center" style={{ columnGap: "10px" }}>
 55 |                             {/* Created by */}
 56 |                             <div>
 57 |                                 <span style={{ color: "rgba(0,0,0, 0.7)" }}>Created by</span> {' '}
 58 |                                 {pollObject?.userStxAddress &&
 59 |                                     <a className="ballot_link" target="_blank" rel="noreferrer" href={formStacksExplorerUrl(pollObject?.userStxAddress, 'address')}>
 60 |                                         <span>
 61 |                                             {pollObject?.userStxAddress?.substring(0, 10)} { }
 62 |                                             <svg
 63 |                                                 width="10"
 64 |                                                 height="10"
 65 |                                                 viewBox="0 0 12 12"
 66 |                                                 fill="none"
 67 |                                                 xmlns="http://www.w3.org/2000/svg"
 68 |                                             >
 69 |                                                 <path
 70 |                                                     fillRule="evenodd"
 71 |                                                     clipRule="evenodd"
 72 |                                                     d="M3.5044 0.743397C3.5044 0.33283 3.83723 -6.71395e-08 4.2478 0L11.2566 6.60206e-07C11.6672 6.60206e-07 12 0.33283 12 0.743397L12 7.7522C12 8.16277 11.6672 8.4956 11.2566 8.4956C10.846 8.4956 10.5132 8.16277 10.5132 7.7522V2.53811L1.26906 11.7823C0.978742 12.0726 0.50805 12.0726 0.217736 11.7823C-0.0725787 11.4919 -0.0725784 11.0213 0.217736 10.7309L9.46189 1.48679L4.2478 1.48679C3.83723 1.48679 3.5044 1.15396 3.5044 0.743397Z"
 73 |                                                     fill="initial"
 74 |                                                 />
 75 |                                             </svg>
 76 |                                         </span>
 77 |                                     </a>
 78 |                                 }
 79 |                             </div>
 80 | 
 81 |                             {/* Status */}
 82 |                             {(txStatus && txStatus == "success") &&
 83 |                                 <div className={pollObject?.status == "draft" ? styles.all_polls_status_box_draft : ((pollObject?.endAtDate && (new Date(pollObject?.endAtDate) < new Date()))) ? styles.all_polls_status_box_closed : styles.all_polls_status_box_active}>
 84 |                                     {
 85 |                                         pollObject?.status == "draft" ? "Draft" :
 86 |                                             ((pollObject?.endAtDate && (new Date(pollObject?.endAtDate) < new Date())) ? "Closed" : "Active")
 87 |                                     }
 88 |                                 </div>
 89 |                             }
 90 |                             {(txStatus && txStatus == "pending") &&
 91 |                                 <div className={styles.all_polls_status_box_draft}>
 92 |                                     Contract pending
 93 |                                 </div>
 94 |                             }
 95 |                             {(txStatus && txStatus != "success" && txStatus != "pending") &&
 96 |                                 <div className={styles.all_polls_status_box_closed}>
 97 |                                     Contract failed
 98 |                                 </div>
 99 |                             }
100 |                         </div>
101 | 
102 |                         <div className="d-flex align-items-center" style={{ columnGap: "10px" }}>
103 |                             {/* Copy link */}
104 |                             <OverlayTrigger
105 |                                 placement="top"
106 |                                 overlay={<Tooltip>{copyText}</Tooltip>}>
107 |                                 <button style={{ padding: "0px", border: "0px", background: "none" }}
108 |                                     onClick={copyToClipBoard}
109 |                                     onMouseEnter={() => setCopyText("Copy")}
110 |                                     disabled={!publicUrl}>
111 |                                     <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
112 |                                         <path d="M14.0625 21.25H8.75C7.02083 21.25 5.54688 20.6406 4.32813 19.4219C3.10938 18.2031 2.5 16.7292 2.5 15C2.5 13.2708 3.10938 11.7969 4.32813 10.5781C5.54688 9.35937 7.02083 8.75 8.75 8.75H14.0625V10.625H8.75C7.54167 10.625 6.51042 11.0521 5.65625 11.9062C4.80208 12.7604 4.375 13.7917 4.375 15C4.375 16.2083 4.80208 17.2396 5.65625 18.0938C6.51042 18.9479 7.54167 19.375 8.75 19.375H14.0625V21.25ZM10.1562 15.9375V14.0625H19.8438V15.9375H10.1562ZM15.9375 21.25V19.375H21.25C22.4583 19.375 23.4896 18.9479 24.3438 18.0938C25.1979 17.2396 25.625 16.2083 25.625 15C25.625 13.7917 25.1979 12.7604 24.3438 11.9062C23.4896 11.0521 22.4583 10.625 21.25 10.625H15.9375V8.75H21.25C22.9792 8.75 24.4531 9.35937 25.6719 10.5781C26.8906 11.7969 27.5 13.2708 27.5 15C27.5 16.7292 26.8906 18.2031 25.6719 19.4219C24.4531 20.6406 22.9792 21.25 21.25 21.25H15.9375Z" fill="black" />
113 |                                     </svg>
114 |                                 </button>
115 |                             </OverlayTrigger>
116 | 
117 |                             {/* QR code */}
118 |                             <OverlayTrigger
119 |                                 placement="top"
120 |                                 overlay={<Tooltip>QR code</Tooltip>}>
121 |                                 <button style={{ padding: "0px", border: "0px", background: "none" }}
122 |                                     disabled={!publicUrl} onClick={() => { setShowQRCodePopupFlag(true) }}>
123 |                                     <svg width="26" height="26" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
124 |                                         <path d="M3.75 14.0625V3.75H14.0625V14.0625H3.75ZM5.625 12.1875H12.1875V5.625H5.625V12.1875ZM3.75 26.25V15.9375H14.0625V26.25H3.75ZM5.625 24.375H12.1875V17.8125H5.625V24.375ZM15.9375 14.0625V3.75H26.25V14.0625H15.9375ZM17.8125 12.1875H24.375V5.625H17.8125V12.1875ZM23.6875 26.25V23.6875H26.25V26.25H23.6875ZM15.9375 18.5312V15.9375H18.5V18.5312H15.9375ZM18.5 21.0938V18.5312H21.0938V21.0938H18.5ZM15.9375 23.6875V21.0938H18.5V23.6875H15.9375ZM18.5 26.25V23.6875H21.0938V26.25H18.5ZM21.0938 23.6875V21.0938H23.6875V23.6875H21.0938ZM21.0938 18.5312V15.9375H23.6875V18.5312H21.0938ZM23.6875 21.0938V18.5312H26.25V21.0938H23.6875Z" fill="black" />
125 |                                     </svg>
126 |                                 </button>
127 |                             </OverlayTrigger>
128 | 
129 |                             {/* Share icon */}
130 |                             <Dropdown>
131 |                                 <Dropdown.Toggle
132 |                                     id="user-account-dropdown"
133 |                                     className={styles.share_dropdown}
134 |                                     variant="light">
135 |                                     <OverlayTrigger
136 |                                         placement="auto"
137 |                                         overlay={<Tooltip>Share</Tooltip>}>
138 |                                         <div>
139 |                                             <svg width="28" height="28" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
140 |                                                 <path d="M21.3 3.29999C19.1568 3.29999 17.4 5.05673 17.4 7.19999C17.4 7.61541 17.4655 8.02359 17.5875 8.39999L11.1469 11.9812C10.4759 11.4363 9.62566 11.1 8.70005 11.1C6.55681 11.1 4.80005 12.8567 4.80005 15C4.80005 17.1432 6.55681 18.9 8.70005 18.9C9.62566 18.9 10.4759 18.573 11.1469 18.0281L17.5969 21.6094C17.4743 21.9867 17.4 22.3834 17.4 22.8C17.4 24.9432 19.1568 26.7 21.3 26.7C23.4433 26.7 25.2 24.9432 25.2 22.8C25.2 20.6567 23.4433 18.9 21.3 18.9C20.2237 18.9 19.2423 19.3498 18.5344 20.0625L12.2625 16.575C12.4768 16.0933 12.6 15.5583 12.6 15C12.6 14.4385 12.479 13.9087 12.2625 13.425L18.525 9.93749C19.2336 10.6557 20.2189 11.1 21.3 11.1C23.4433 11.1 25.2 9.34324 25.2 7.19999C25.2 5.05673 23.4433 3.29999 21.3 3.29999ZM21.3 5.09999C22.4705 5.09999 23.4 6.02953 23.4 7.19999C23.4 8.37044 22.4705 9.29999 21.3 9.29999C20.1296 9.29999 19.2 8.37044 19.2 7.19999C19.2 6.02953 20.1296 5.09999 21.3 5.09999ZM8.70005 12.9C9.87049 12.9 10.8 13.8295 10.8 15C10.8 16.1704 9.87049 17.1 8.70005 17.1C7.52961 17.1 6.60005 16.1704 6.60005 15C6.60005 13.8295 7.52961 12.9 8.70005 12.9ZM21.3 20.7C22.4705 20.7 23.4 21.6295 23.4 22.8C23.4 23.9704 22.4705 24.9 21.3 24.9C20.1296 24.9 19.2 23.9704 19.2 22.8C19.2 21.6295 20.1296 20.7 21.3 20.7Z" fill="black" />
141 |                                             </svg>
142 |                                         </div>
143 |                                     </OverlayTrigger>
144 |                                 </Dropdown.Toggle>
145 | 
146 |                                 <Dropdown.Menu>
147 |                                     <Dropdown.Item
148 |                                         onClick={() => {
149 |                                             openTwitterUrl(
150 |                                                 publicUrl,
151 |                                                 pollObject?.title
152 |                                             );
153 |                                         }}
154 |                                     >
155 |                                         Twitter
156 |                                     </Dropdown.Item>
157 |                                     <Dropdown.Item
158 |                                         onClick={() => {
159 |                                             openFacebookUrl(
160 |                                                 publicUrl,
161 |                                                 pollObject?.title
162 |                                             );
163 |                                         }}
164 |                                     >
165 |                                         Facebook
166 |                                     </Dropdown.Item>
167 |                                     <Dropdown.Item
168 |                                         onClick={() => {
169 |                                             openLinkedinUrl(
170 |                                                 publicUrl,
171 |                                                 pollObject?.title
172 |                                             );
173 |                                         }}
174 |                                     >
175 |                                         LinkedIn
176 |                                     </Dropdown.Item>
177 |                                     <Dropdown.Item
178 |                                         onClick={() => {
179 |                                             openWhatsappUrl(
180 |                                                 publicUrl,
181 |                                                 pollObject?.title
182 |                                             );
183 |                                         }}
184 |                                     >
185 |                                         WhatsApp
186 |                                     </Dropdown.Item>
187 |                                     <Dropdown.Item
188 |                                         onClick={() => {
189 |                                             openTelegramUrl(
190 |                                                 publicUrl,
191 |                                                 pollObject?.title
192 |                                             );
193 |                                         }}
194 |                                     >
195 |                                         Telegram
196 |                                     </Dropdown.Item>
197 |                                     <Dropdown.Item
198 |                                         onClick={() => {
199 |                                             openRedditUrl(
200 |                                                 publicUrl,
201 |                                                 pollObject?.title
202 |                                             );
203 |                                         }}
204 |                                     >
205 |                                         Reddit
206 |                                     </Dropdown.Item>
207 |                                 </Dropdown.Menu>
208 |                             </Dropdown>
209 |                         </div>
210 |                     </div>
211 | 
212 |                     {/* Description */}
213 |                     <div style={{ marginBottom: "24px", whiteSpace: "pre-wrap" }}>
214 |                         <p style={{ lineHeight: "1.7", wordWrap: "break-word" }}
215 |                             dangerouslySetInnerHTML={{ __html: pollObject?.description ? convertToHrefLink(pollObject?.description) : "" }}>
216 |                         </p>
217 |                     </div>
218 |                 </>
219 |             }
220 | 
221 |             <QRCodePopup pollObject={pollObject} publicUrl={publicUrl}
222 |                 showQRCodePopupFlag={showQRCodePopupFlag} setShowQRCodePopupFlag={setShowQRCodePopupFlag} />
223 |         </>
224 |     );
225 | }


--------------------------------------------------------------------------------
/components/common/InformationComponent.js:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import { Table } from "react-bootstrap";
  3 | import { Constants } from "../../common/constants";
  4 | import { calculateDateByBlockHeight, convertToDisplayDateFormat, formStacksExplorerUrl, formatUtcDateTime } from "../../services/utils";
  5 | 
  6 | 
  7 | export default function InformationComponent(props) {
  8 |     // Variables
  9 |     const { pollObject, resultsByOption, currentBlockHeight } = props;
 10 |     const [votingSystemInfo, setVotingSystemInfo] = useState();
 11 | 
 12 |     // Function
 13 |     useEffect(() => {
 14 |         setVotingSystemInfo(Constants.VOTING_SYSTEMS.find(system => system.id == pollObject?.votingSystem));
 15 |     }, [pollObject]);
 16 | 
 17 |     // Design
 18 |     return (
 19 |         <>
 20 |             {pollObject && pollObject.id &&
 21 |                 <>
 22 |                     <div style={{ padding: "16px", backgroundColor: "rgba(236, 239, 241, 0.3)", width: "100%", overflow: "auto" }}>
 23 |                         {/* Title */}
 24 |                         <h6 style={{ fontWeight: "600" }}>Information</h6>
 25 | 
 26 |                         <div style={{ marginTop: "10px", display: "flex", flexDirection: "column", rowGap: "6px" }}>
 27 |                             {
 28 |                                 pollObject?.publishedInfo?.contractAddress && pollObject?.publishedInfo?.contractName &&
 29 |                                 pollObject?.publishedInfo?.txId &&
 30 |                                 <div>
 31 |                                     Contract
 32 |                                     <span style={{ float: "right", fontWeight: "bold" }}>
 33 |                                         <a className="ballot_link" target="_blank" rel="noreferrer" href={formStacksExplorerUrl(pollObject?.publishedInfo?.txId)}>
 34 |                                             {pollObject?.publishedInfo?.contractName.substring(0, 10)} { }
 35 |                                             <svg
 36 |                                                 width="10"
 37 |                                                 height="10"
 38 |                                                 viewBox="0 0 12 12"
 39 |                                                 fill="none"
 40 |                                                 xmlns="http://www.w3.org/2000/svg"
 41 |                                             >
 42 |                                                 <path
 43 |                                                     fillRule="evenodd"
 44 |                                                     clipRule="evenodd"
 45 |                                                     d="M3.5044 0.743397C3.5044 0.33283 3.83723 -6.71395e-08 4.2478 0L11.2566 6.60206e-07C11.6672 6.60206e-07 12 0.33283 12 0.743397L12 7.7522C12 8.16277 11.6672 8.4956 11.2566 8.4956C10.846 8.4956 10.5132 8.16277 10.5132 7.7522V2.53811L1.26906 11.7823C0.978742 12.0726 0.50805 12.0726 0.217736 11.7823C-0.0725787 11.4919 -0.0725784 11.0213 0.217736 10.7309L9.46189 1.48679L4.2478 1.48679C3.83723 1.48679 3.5044 1.15396 3.5044 0.743397Z"
 46 |                                                     fill="initial"
 47 |                                                 />
 48 |                                             </svg>
 49 |                                         </a>
 50 |                                     </span>
 51 |                                 </div>
 52 |                             }
 53 |                             {
 54 |                                 pollObject?.ipfsLocation &&
 55 |                                 <div>
 56 |                                     IPFS
 57 |                                     <span style={{ float: "right", fontWeight: "bold" }}>
 58 |                                         <a className="ballot_link" target="_blank" rel="noreferrer" href={`${Constants.IPFS_GATEWAY}${pollObject?.ipfsLocation}`}>
 59 |                                             #{pollObject?.ipfsLocation.substring(0, 8)} { }
 60 |                                             <svg
 61 |                                                 width="10"
 62 |                                                 height="10"
 63 |                                                 viewBox="0 0 12 12"
 64 |                                                 fill="none"
 65 |                                                 xmlns="http://www.w3.org/2000/svg"
 66 |                                             >
 67 |                                                 <path
 68 |                                                     fillRule="evenodd"
 69 |                                                     clipRule="evenodd"
 70 |                                                     d="M3.5044 0.743397C3.5044 0.33283 3.83723 -6.71395e-08 4.2478 0L11.2566 6.60206e-07C11.6672 6.60206e-07 12 0.33283 12 0.743397L12 7.7522C12 8.16277 11.6672 8.4956 11.2566 8.4956C10.846 8.4956 10.5132 8.16277 10.5132 7.7522V2.53811L1.26906 11.7823C0.978742 12.0726 0.50805 12.0726 0.217736 11.7823C-0.0725787 11.4919 -0.0725784 11.0213 0.217736 10.7309L9.46189 1.48679L4.2478 1.48679C3.83723 1.48679 3.5044 1.15396 3.5044 0.743397Z"
 71 |                                                     fill="initial"
 72 |                                                 />
 73 |                                             </svg>
 74 |                                         </a>
 75 |                                     </span>
 76 |                                 </div>
 77 |                             }
 78 |                             {
 79 |                                 pollObject?.strategyContractName &&
 80 |                                 <div>
 81 |                                     Strategy
 82 |                                     <span style={{ float: "right", fontWeight: "bold" }}>
 83 |                                         <a className="ballot_link" target="_blank" rel="noreferrer" href={formStacksExplorerUrl(pollObject?.strategyContractName)}>
 84 |                                             {pollObject?.strategyContractName.substring(0, 10)} { }
 85 |                                             <svg
 86 |                                                 width="10"
 87 |                                                 height="10"
 88 |                                                 viewBox="0 0 12 12"
 89 |                                                 fill="none"
 90 |                                                 xmlns="http://www.w3.org/2000/svg"
 91 |                                             >
 92 |                                                 <path
 93 |                                                     fillRule="evenodd"
 94 |                                                     clipRule="evenodd"
 95 |                                                     d="M3.5044 0.743397C3.5044 0.33283 3.83723 -6.71395e-08 4.2478 0L11.2566 6.60206e-07C11.6672 6.60206e-07 12 0.33283 12 0.743397L12 7.7522C12 8.16277 11.6672 8.4956 11.2566 8.4956C10.846 8.4956 10.5132 8.16277 10.5132 7.7522V2.53811L1.26906 11.7823C0.978742 12.0726 0.50805 12.0726 0.217736 11.7823C-0.0725787 11.4919 -0.0725784 11.0213 0.217736 10.7309L9.46189 1.48679L4.2478 1.48679C3.83723 1.48679 3.5044 1.15396 3.5044 0.743397Z"
 96 |                                                     fill="initial"
 97 |                                                 />
 98 |                                             </svg>
 99 |                                         </a>
100 |                                     </span>
101 |                                 </div>
102 |                             }
103 |                             <div>
104 |                                 Voting System <span style={{ float: "right", fontWeight: "bold", textTransform: "capitalize" }}>{votingSystemInfo?.name}</span>
105 |                             </div>
106 |                             <div>
107 |                                 Start Date
108 |                                 <span style={{ float: "right", fontWeight: "bold" }}>
109 |                                     {pollObject?.startAtDateUTC ? (formatUtcDateTime(pollObject?.startAtDateUTC) + " UTC") : convertToDisplayDateFormat(pollObject?.startAtDate)}
110 |                                 </span>
111 |                             </div>
112 |                             <div>
113 |                                 End Date
114 |                                 <span style={{ float: "right", fontWeight: "bold" }}>
115 |                                     {pollObject?.endAtBlock && currentBlockHeight < pollObject?.endAtBlock ?
116 |                                         <>
117 |                                             {formatUtcDateTime(calculateDateByBlockHeight(currentBlockHeight, pollObject?.endAtBlock))} UTC
118 |                                         </> :
119 |                                         <>
120 |                                             {pollObject?.endAtDateUTC ? (formatUtcDateTime(pollObject?.endAtDateUTC) + " UTC") : convertToDisplayDateFormat(pollObject?.endAtDate)}
121 |                                         </>
122 |                                     }
123 |                                 </span>
124 |                             </div>
125 |                             <div>
126 |                                 Start Tenure Block <span style={{ float: "right", fontWeight: "bold" }}>{pollObject?.startAtBlock}</span>
127 |                             </div>
128 |                             <div>
129 |                                 End Tenure Block <span style={{ float: "right", fontWeight: "bold" }}>{pollObject?.endAtBlock}</span>
130 |                             </div>
131 |                             <div>
132 |                                 Current Tenure Block <span style={{ float: "right", fontWeight: "bold" }}>{currentBlockHeight}</span>
133 |                             </div>
134 |                             {pollObject?.contractAddress &&
135 |                                 <div>
136 |                                     Contract Address <span style={{ float: "right", fontWeight: "bold" }}>{pollObject?.contractAddress}</span>
137 |                                 </div>
138 |                             }
139 |                         </div>
140 |                     </div>
141 | 
142 |                     <div style={{ padding: "16px", marginTop: "10px", backgroundColor: "rgba(236, 239, 241, 0.3)", width: "100%" }}>
143 |                         {/* Title */}
144 |                         <h6 style={{ fontWeight: "600" }}>Current results</h6>
145 | 
146 |                         <div style={{ marginTop: "10px" }}>
147 |                             <Table striped bordered>
148 |                                 <tbody>
149 |                                     {pollObject?.options?.map((option, index) => (
150 |                                         <tr key={index}>
151 |                                             <td style={{ width: "70%" }}>
152 |                                                 {option?.value}
153 |                                             </td>
154 |                                             <td>
155 |                                                 <span style={{ float: "right", fontWeight: "bold", textTransform: "capitalize" }}>
156 |                                                     {resultsByOption && resultsByOption[option.id] ?
157 |                                                         <>
158 |                                                             {resultsByOption[option.id]["percentage"]}% ({resultsByOption[option.id]["total"]})
159 |                                                         </>
160 |                                                         : "-"}
161 |                                                 </span>
162 |                                             </td>
163 |                                         </tr>
164 |                                     ))}
165 |                                 </tbody>
166 |                             </Table>
167 |                         </div>
168 |                     </div>
169 |                 </>
170 |             }
171 |         </>
172 |     );
173 | }


--------------------------------------------------------------------------------
/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 |                     <div key={optionId}>
 69 |                         {vote?.optionsMap[optionId]}
 70 |                     </div>
 71 |                 ))
 72 |             );
 73 |         }
 74 | 
 75 |         return (<></>);
 76 |     }
 77 | 
 78 |     return (
 79 |         <>
 80 |             {/* My transactions popup */}
 81 |             <Modal
 82 |                 show={showMyVotesPopup}
 83 |                 onHide={handleCloseMyVotesPopup}
 84 |                 keyboard={false}
 85 |                 centered
 86 |                 size="xl"
 87 |             >
 88 |                 {/* Header */}
 89 |                 <div className={styles.dashboard_modal_header_box}>
 90 |                     <div>My votes</div>
 91 |                     <button
 92 |                         className={styles.dashboard_modal_close_icon_btn_box}
 93 |                         onClick={handleCloseMyVotesPopup}
 94 |                     >
 95 |                         <svg
 96 |                             width="10"
 97 |                             height="10"
 98 |                             viewBox="0 0 10 10"
 99 |                             fill="none"
100 |                             xmlns="http://www.w3.org/2000/svg"
101 |                         >
102 |                             <path
103 |                                 fillRule="evenodd"
104 |                                 clipRule="evenodd"
105 |                                 d="M0.898377 0.898804C1.2108 0.586385 1.71733 0.586385 2.02975 0.898804L4.9996 3.86865L7.96945 0.898804C8.28186 0.586385 8.7884 0.586385 9.10082 0.898804C9.41324 1.21122 9.41324 1.71776 9.10082 2.03018L6.13097 5.00002L9.10082 7.96987C9.41324 8.28229 9.41324 8.78882 9.10082 9.10124C8.7884 9.41366 8.28186 9.41366 7.96945 9.10124L4.9996 6.13139L2.02975 9.10124C1.71733 9.41366 1.2108 9.41366 0.898377 9.10124C0.585958 8.78882 0.585958 8.28229 0.898377 7.96987L3.86823 5.00002L0.898377 2.03018C0.585958 1.71776 0.585958 1.21122 0.898377 0.898804Z"
106 |                                 fill="black"
107 |                             />
108 |                         </svg>
109 |                     </button>
110 |                 </div>
111 | 
112 |                 {/* Body */}
113 |                 <div
114 |                     className={
115 |                         styles.dashboard_modal_body_box +
116 |                         " " +
117 |                         styles.dashboard_transactions_modal_body_box
118 |                     }
119 |                     style={{ padding: "0px", marginBottom: "20px" }}
120 |                 >
121 |                     {
122 |                         // Loading
123 |                         isLoading ? (
124 |                             <div style={{ textAlign: "center", padding: "10px" }}>
125 |                                 <Spinner animation="border" variant="secondary" size="md" />
126 |                             </div>
127 |                         ) : // Once data found
128 |                             votes && votes.length > 0 ? (
129 |                                 <div style={{ padding: "0px 20px 10px", fontSize: "14px" }}>
130 |                                     <Table striped bordered>
131 |                                         <thead>
132 |                                             <tr>
133 |                                                 <th>Title</th>
134 |                                                 <th>Voted option</th>
135 |                                                 <th>Voting power</th>
136 |                                                 <th>Voted at</th>
137 |                                                 <th>Transaction</th>
138 |                                             </tr>
139 |                                         </thead>
140 |                                         <tbody>
141 |                                             {
142 |                                                 votes && votes.length > 0 ? (
143 |                                                     votes.map((vote, index) => (
144 |                                                         <tr key={index}>
145 |                                                             <td>
146 |                                                                 <a
147 |                                                                     className="ballot_link"
148 |                                                                     href={vote?.url}
149 |                                                                     target="_blank"
150 |                                                                     rel="noreferrer">
151 |                                                                     {vote?.title}
152 |                                                                 </a>
153 |                                                             </td>
154 |                                                             <td>{getEachRow(vote)}</td>
155 |                                                             <td>{Object.values(vote?.voteObject)?.[0]}</td>
156 |                                                             <td>{convertToDisplayDateFormat(vote.votedAt)}</td>
157 |                                                             <td>
158 |                                                                 <a
159 |                                                                     className="ballot_link"
160 |                                                                     href={formStacksExplorerUrl(vote?.txId)}
161 |                                                                     target="_blank"
162 |                                                                     rel="noreferrer">
163 |                                                                     {vote?.txId?.substr(0, 10) + "..."}
164 |                                                                 </a>
165 |                                                             </td>
166 |                                                         </tr>
167 |                                                     ))
168 |                                                 ) : ""
169 |                                             }
170 |                                         </tbody>
171 |                                     </Table>
172 |                                 </div>
173 |                             ) : (
174 |                                 <div style={{ padding: "0px 20px 10px", fontSize: "14px" }}>
175 |                                     You have not cast your vote yet.
176 |                                 </div>
177 |                             )
178 |                     }
179 |                 </div>
180 |             </Modal>
181 |         </>);
182 | }


--------------------------------------------------------------------------------
/components/home/accordion.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { Constants } from "../../common/constants";
 3 | import styles from "../../styles/Accordion.module.css";
 4 | 
 5 | function AccordionFAQ() {
 6 |   const [selected, setSelected] = useState(null);
 7 |   const toggle = (i) => {
 8 |     if (selected == i) {
 9 |       return setSelected(null);
10 |     }
11 |     setSelected(i);
12 |   };
13 | 
14 |   // Get faq's from constant.js
15 |   const faq = Constants.FAQ;
16 | 
17 |   return (
18 |     <div>
19 |       {faq.map((item, i) => (
20 |         <div className={styles.items} key={item.question}>
21 |           <div className={styles.faq_question} onClick={() => toggle(i)}>
22 |             <h2 style={{ margin: 0, fontSize: "18px" }}>{item.question}</h2>
23 |             <span>
24 |               {selected == i ? (
25 |                 <svg
26 |                   width="18"
27 |                   height="10"
28 |                   viewBox="0 0 18 10"
29 |                   fill="none"
30 |                   xmlns="http://www.w3.org/2000/svg"
31 |                 >
32 |                   <path
33 |                     d="M1 9L9 1L17 9"
34 |                     stroke="black"
35 |                     strokeWidth="2"
36 |                     strokeLinecap="round"
37 |                     strokeLinejoin="round"
38 |                   />
39 |                 </svg>
40 |               ) : (
41 |                 <svg
42 |                   width="18"
43 |                   height="10"
44 |                   viewBox="0 0 18 10"
45 |                   fill="none"
46 |                   xmlns="http://www.w3.org/2000/svg"
47 |                 >
48 |                   <path
49 |                     d="M1 1L9 9L17 1"
50 |                     stroke="black"
51 |                     strokeWidth="2"
52 |                     strokeLinecap="round"
53 |                     strokeLinejoin="round"
54 |                   />
55 |                 </svg>
56 |               )}
57 |             </span>
58 |           </div>
59 |           <div
60 |             className={
61 |               selected == i ? styles.faq_answer_show : styles.faq_answer
62 |             }
63 |           >
64 |             <div className={styles.faq_answer_content}>
65 |               <p style={{fontSize: "16px"}} dangerouslySetInnerHTML={{ __html: item.answer }}></p>
66 |             </div>
67 |           </div>
68 |           <hr style={{ margin: 0 }}></hr>
69 |         </div>
70 |       ))}
71 |     </div>
72 |   );
73 | }
74 | 
75 | export default AccordionFAQ;
76 | 


--------------------------------------------------------------------------------
/components/poll/PollComponent.js:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import { Button, Form, Modal, Table } from "react-bootstrap";
  3 | import { authenticate, getFileFromGaia, putFileToGaia, userSession } from "../../services/auth";
  4 | import { castMyVoteContractCall } from "../../services/contract";
  5 | import { formStacksExplorerUrl } from "../../services/utils";
  6 | import styles from "../../styles/Poll.module.css";
  7 | import HeaderComponent from "../common/HeaderComponent";
  8 | import InformationComponent from "../common/InformationComponent";
  9 | import { getIndividualResultByStartAndEndPosition } from "./PollService";
 10 | 
 11 | export default function PollComponent(props) {
 12 |     // Variables
 13 |     const {
 14 |         pollObject,
 15 |         isPreview,
 16 |         optionsMap,
 17 |         resultsByOption,
 18 |         resultsByPosition,
 19 |         setResultsByPosition,
 20 |         totalVotes,
 21 |         totalUniqueVotes,
 22 |         dns,
 23 |         alreadyVoted,
 24 |         noHoldingToken,
 25 |         holdingTokenIdsArray,
 26 |         votingPower,
 27 |         publicUrl,
 28 |         txStatus,
 29 |         noOfResultsLoaded,
 30 |         setNoOfResultsLoaded,
 31 |         currentBlockHeight } = props;
 32 |     const [voteObject, setVoteObject] = useState({});
 33 |     const [errorMessage, setErrorMessage] = useState();
 34 |     const [txId, setTxId] = useState();
 35 |     const [isUserSignedIn, setIsUserSignedIn] = useState(false);
 36 |     const [isProcessing, setIsProcessing] = useState(false);
 37 | 
 38 |     // Show popup
 39 |     const [show, setShow] = useState(false);
 40 |     const handleShow = () => setShow(true);
 41 |     const handleClose = () => setShow(false);
 42 | 
 43 |     // Functions
 44 |     useEffect(() => {
 45 |         if (userSession && userSession.isUserSignedIn()) {
 46 |             setIsUserSignedIn(true)
 47 |         }
 48 |     }, []);
 49 | 
 50 |     const handleChange = e => {
 51 |         const { name, value } = e.target;
 52 | 
 53 |         if (pollObject?.votingSystem == "fptp") {
 54 |             voteObject = {
 55 |                 [value]: votingPower
 56 |             };
 57 |         } else {
 58 |             if (voteObject?.[value]) {
 59 |                 delete voteObject[value];
 60 |             } else {
 61 |                 voteObject[value] = votingPower;
 62 |             }
 63 |         }
 64 |         setVoteObject(voteObject);
 65 |     };
 66 | 
 67 |     const handleChangeVote = (e) => {
 68 |         const { name, value } = e.target;
 69 | 
 70 |         if (value <= 0) {
 71 |             delete voteObject[name];
 72 |         } else {
 73 |             voteObject[name] = value;
 74 |         }
 75 |     }
 76 | 
 77 |     const callbackFunction = (data) => {
 78 |         if (data?.txId) {
 79 |             setTxId(data.txId);
 80 | 
 81 |             // Store my vote to Gaia
 82 |             processMyVote(data);
 83 | 
 84 |             // Show information popup
 85 |             handleShow();
 86 |         }
 87 |     }
 88 | 
 89 |     const processMyVote = (data) => {
 90 |         // Store my vote to Gaia
 91 |         getFileFromGaia("my_votes_ballot.json").then(
 92 |             (response) => {
 93 |                 if (response) {
 94 |                     const myVotesObj = JSON.parse(response);
 95 | 
 96 |                     if (myVotesObj && myVotesObj.votes) {
 97 |                         saveMyVoteToGaia(myVotesObj, data);
 98 |                     }
 99 |                 }
100 |             },
101 |             (error) => {
102 |                 // File does not exit in gaia
103 |                 if (error && error.code == "does_not_exist") {
104 |                     const myVotesObj = {
105 |                         votes: [
106 |                         ],
107 |                     };
108 | 
109 |                     saveMyVoteToGaia(myVotesObj, data);
110 |                 }
111 |             }
112 |         );
113 |     }
114 | 
115 |     const saveMyVoteToGaia = (myVotesObj, data) => {
116 |         myVotesObj.votes.push({
117 |             title: pollObject?.title,
118 |             url: publicUrl,
119 | 
120 |             voteObject: voteObject,
121 |             optionsMap: optionsMap,
122 | 
123 |             votedAt: Date.now(),
124 |             txId: data.txId,
125 |             txRaw: data.txRaw
126 |         });
127 | 
128 |         // Store on gaia
129 |         putFileToGaia(
130 |             "my_votes_ballot.json",
131 |             JSON.stringify(myVotesObj),
132 |             { dangerouslyIgnoreEtag: true }
133 |         );
134 |     }
135 | 
136 |     const validate = () => {
137 |         // Reset the error message
138 |         errorMessage = "";
139 | 
140 |         // Not voted
141 |         if (!voteObject || Object.keys(voteObject)?.length == 0) {
142 |             errorMessage = "Please select option to vote";
143 |         }
144 | 
145 |         setErrorMessage(errorMessage);
146 |     }
147 | 
148 |     const castMyVote = () => {
149 |         if (pollObject?.publishedInfo?.contractAddress && pollObject?.publishedInfo?.contractName) {
150 |             // Validation
151 |             validate();
152 |             if (errorMessage) {
153 |                 return;
154 |             }
155 | 
156 |             // Start processing
157 |             setIsProcessing(true);
158 | 
159 |             const contractAddress = pollObject?.publishedInfo?.contractAddress;
160 |             const contractName = pollObject?.publishedInfo?.contractName;
161 |             castMyVoteContractCall(contractAddress, contractName, voteObject, dns, holdingTokenIdsArray, callbackFunction);
162 |         }
163 |     }
164 | 
165 |     const loadMore = () => {
166 |         if (pollObject?.publishedInfo?.contractAddress && pollObject?.publishedInfo?.contractName) {
167 |             const contractAddress = pollObject?.publishedInfo?.contractAddress;
168 |             const contractName = pollObject?.publishedInfo?.contractName;
169 | 
170 |             // Find start and end position
171 |             const start = totalUniqueVotes - noOfResultsLoaded;
172 |             let end = start - 10;
173 | 
174 |             // If end is greater than totalUniqueVotes
175 |             if (end < 0) {
176 |                 end = 0;
177 |             }
178 | 
179 |             // Load next ten results
180 |             getIndividualResultByStartAndEndPosition(start, end, totalUniqueVotes, contractAddress, contractName,
181 |                 resultsByPosition, setResultsByPosition, noOfResultsLoaded, setNoOfResultsLoaded);
182 |         }
183 |     }
184 | 
185 |     return (
186 |         <>
187 |             <div className={styles.poll_container}>
188 |                 {pollObject && pollObject.id ?
189 |                     <>
190 |                         <div style={{ margin: "0px 0 100px 0" }}>
191 |                             <div className="row">
192 |                                 {/* Left Side */}
193 |                                 <div className="col-sm-12 col-md-8">
194 |                                     {/* Header */}
195 |                                     <HeaderComponent pollObject={pollObject} publicUrl={publicUrl} txStatus={txStatus} />
196 | 
197 |                                     {/* Cast your vote */}
198 |                                     <div style={{ marginBottom: "24px" }}>
199 |                                         <h5 style={{ fontSize: "18px", fontWeight: "600" }}>Cast your vote</h5>
200 |                                         <div>
201 |                                             <Form>
202 |                                                 <Form.Group className="mb-3">
203 |                                                     {/* Title */}
204 |                                                     <Form.Label>{pollObject?.title}</Form.Label>
205 | 
206 |                                                     {/* FPTP or Block Voting */}
207 |                                                     {(pollObject?.votingSystem == "fptp" || pollObject?.votingSystem == "block") &&
208 |                                                         pollObject?.options.map((option, index) => (
209 |                                                             <Form.Check
210 |                                                                 key={index}
211 |                                                                 type={pollObject?.votingSystem == "fptp" ? "radio" : "checkbox"}
212 |                                                                 name="vote"
213 |                                                                 value={option.id}
214 |                                                                 label={option.value}
215 |                                                                 id={option.id}
216 |                                                                 onChange={handleChange}
217 |                                                                 disabled={(isPreview || !holdingTokenIdsArray || alreadyVoted || isProcessing ||
218 |                                                                     ((pollObject?.startAtDate || pollObject?.startAtDateUTC) && (new Date(pollObject?.startAtDateUTC ? pollObject?.startAtDateUTC : pollObject?.startAtDate) > new Date())) ||
219 |                                                                     ((pollObject?.endAtDate || pollObject?.endAtDateUTC) && (new Date(pollObject?.endAtDateUTC ? pollObject?.endAtDateUTC : pollObject?.endAtDate) < new Date()))
220 |                                                                 )}
221 |                                                             />
222 | 
223 |                                                             // <div>
224 |                                                             //     <input key={index} id={option.id} value={option.id} name="vote"
225 |                                                             //         type={pollObject?.votingSystem == "fptp" ? "radio" : "checkbox"} onChange={handleChange}
226 |                                                             //         disabled={(isPreview || !holdingTokenIdsArray || alreadyVoted || isProcessing ||
227 |                                                             //             (pollObject?.endAtDate && (new Date(pollObject?.endAtDate) < new Date())))} />
228 |                                                             //     <label for={option.id}>{option.value}</label>
229 |                                                             // </div>
230 |                                                         ))
231 |                                                     }
232 | 
233 |                                                     {/* Quadratic or Weighted Voting */}
234 |                                                     {(pollObject?.votingSystem == "quadratic" || pollObject?.votingSystem == "weighted") &&
235 | 
236 |                                                         <Table striped bordered>
237 |                                                             <tbody>
238 |                                                                 {pollObject?.options.map((option, index) => (
239 |                                                                     <tr key={index}>
240 |                                                                         <td style={{ width: "80%" }}>
241 |                                                                             <Form.Label>{option.value}</Form.Label>
242 |                                                                         </td>
243 |                                                                         <td>
244 |                                                                             <Form.Control type="number" name={option.id}
245 |                                                                                 min="0"
246 |                                                                                 onChange={handleChangeVote}
247 |                                                                                 style={{ marginLeft: "10px", width: "100px" }} placeholder="0" />
248 |                                                                         </td>
249 |                                                                     </tr>
250 |                                                                 ))
251 |                                                                 }
252 |                                                             </tbody>
253 |                                                         </Table>
254 |                                                     }
255 | 
256 |                                                     {/* Voting Criteria */}
257 |                                                     {(pollObject?.votingStrategyFlag && pollObject?.strategyTokenName) &&
258 |                                                         <div style={{ marginTop: "30px" }}>
259 |                                                             <h5 style={{ fontSize: "18px", fontWeight: "600" }}>Voting Criteria</h5>
260 |                                                             <span>
261 |                                                                 {`You should hold ${pollObject?.strategyTokenName} to vote.`}
262 |                                                             </span>
263 |                                                         </div>
264 |                                                     }
265 | 
266 |                                                     {/* Vote button */}
267 |                                                     {isUserSignedIn ?
268 |                                                         <div style={{ display: "flex", alignItems: "center", marginTop: "30px" }}>
269 |                                                             <Button variant="dark"
270 |                                                                 disabled={(isPreview || !holdingTokenIdsArray || alreadyVoted || isProcessing ||
271 |                                                                     (!currentBlockHeight || currentBlockHeight < pollObject?.startAtBlock) ||
272 |                                                                     (!currentBlockHeight || currentBlockHeight > pollObject?.endAtBlock)
273 |                                                                 ) ? true : false}
274 |                                                                 onClick={() => { castMyVote() }}>
275 |                                                                 Vote
276 |                                                             </Button>
277 |                                                             {errorMessage &&
278 |                                                                 <span style={{ marginLeft: "10px" }}>
279 |                                                                     {errorMessage}
280 |                                                                 </span>
281 |                                                             }
282 |                                                         </div>
283 |                                                         :
284 |                                                         <Button variant="dark" style={{ marginTop: "30px" }}
285 |                                                             onClick={() => { authenticate(window?.location?.href) }}>
286 |                                                             Login to Vote
287 |                                                         </Button>
288 |                                                     }
289 | 
290 |                                                     {/* Holdings Required */}
291 |                                                     {noHoldingToken &&
292 |                                                         <div style={{ fontSize: "14px", color: "red", marginTop: "10px" }}>
293 |                                                             You should have the {" "}
294 |                                                             {pollObject?.strategyTokenName ? pollObject?.strategyTokenName : "strategy token"}
295 |                                                             {" "} to vote.
296 |                                                         </div>
297 |                                                     }
298 | 
299 |                                                     {/* Already voted */}
300 |                                                     {alreadyVoted &&
301 |                                                         <div style={{ fontSize: "14px", color: "red", marginTop: "10px" }}>
302 |                                                             Your vote has already been cast.
303 |                                                         </div>
304 |                                                     }
305 |                                                 </Form.Group>
306 |                                             </Form>
307 |                                         </div>
308 |                                     </div>
309 | 
310 |                                     {/* Results */}
311 |                                     <div style={{ marginTop: "20px" }}>
312 |                                         <h5 style={{ fontSize: "18px", fontWeight: "600" }}>Votes {totalVotes >= 0 ? <>({totalVotes})</> : ""}</h5>
313 |                                         <div style={{ overflow: "scroll" }}>
314 |                                             <Table striped bordered style={{ height: "100%", width: "100%" }}>
315 |                                                 <thead>
316 |                                                     <tr style={{ position: "sticky", top: "0", backgroundColor: "white" }}>
317 |                                                         <th style={{ width: "40%" }}>User name</th>
318 |                                                         <th style={{ width: "30%" }}>Option</th>
319 |                                                         <th style={{ width: "15%" }}>No. of votes</th>
320 |                                                         <th style={{ width: "15%" }}>Voting power</th>
321 |                                                     </tr>
322 |                                                 </thead>
323 |                                                 <tbody>
324 |                                                     {totalUniqueVotes >= 0 &&
325 |                                                         (totalUniqueVotes > 0 ?
326 |                                                             Object.keys(resultsByPosition)?.reverse().map((position, index) => (
327 |                                                                 <tr key={index}>
328 |                                                                     <td style={{ wordBreak: "break-all" }}>{resultsByPosition[position]?.address &&
329 |                                                                         <a className="ballot_link" target="_blank" rel="noreferrer" href={formStacksExplorerUrl(resultsByPosition[position]?.address, 'address')}>
330 |                                                                             <span>
331 |                                                                                 {resultsByPosition[position]?.username ? resultsByPosition[position]?.username : resultsByPosition[position]?.address} { }
332 |                                                                                 <svg
333 |                                                                                     width="10"
334 |                                                                                     height="10"
335 |                                                                                     viewBox="0 0 12 12"
336 |                                                                                     fill="none"
337 |                                                                                     xmlns="http://www.w3.org/2000/svg"
338 |                                                                                 >
339 |                                                                                     <path
340 |                                                                                         fillRule="evenodd"
341 |                                                                                         clipRule="evenodd"
342 |                                                                                         d="M3.5044 0.743397C3.5044 0.33283 3.83723 -6.71395e-08 4.2478 0L11.2566 6.60206e-07C11.6672 6.60206e-07 12 0.33283 12 0.743397L12 7.7522C12 8.16277 11.6672 8.4956 11.2566 8.4956C10.846 8.4956 10.5132 8.16277 10.5132 7.7522V2.53811L1.26906 11.7823C0.978742 12.0726 0.50805 12.0726 0.217736 11.7823C-0.0725787 11.4919 -0.0725784 11.0213 0.217736 10.7309L9.46189 1.48679L4.2478 1.48679C3.83723 1.48679 3.5044 1.15396 3.5044 0.743397Z"
343 |                                                                                         fill="initial"
344 |                                                                                     />
345 |                                                                                 </svg>
346 |                                                                             </span>
347 |                                                                         </a>
348 |                                                                     }</td>
349 |                                                                     <td>
350 |                                                                         {Object.keys(resultsByPosition[position]?.vote).map((optionId, voteIndex) => (
351 |                                                                             <div key={voteIndex}>
352 |                                                                                 {optionsMap[optionId] ? optionsMap[optionId] : "-"}
353 |                                                                             </div>
354 |                                                                         ))}
355 |                                                                     </td>
356 |                                                                     <td>
357 |                                                                         {Object.values(resultsByPosition[position]?.vote).map((value, voteIndex) => (
358 |                                                                             <div key={voteIndex}>
359 |                                                                                 {value}
360 |                                                                             </div>
361 |                                                                         ))}
362 |                                                                     </td>
363 |                                                                     <td>
364 |                                                                         {resultsByPosition[position]?.votingPower}
365 |                                                                     </td>
366 |                                                                 </tr>
367 |                                                             ))
368 |                                                             :
369 |                                                             <tr>
370 |                                                                 <td style={{ textAlign: "center" }} colSpan={4}>
371 |                                                                     No data found
372 |                                                                 </td>
373 |                                                             </tr>
374 |                                                         )
375 |                                                     }
376 | 
377 |                                                     {/* Loading */}
378 |                                                     {noOfResultsLoaded != Object.keys(resultsByPosition).length &&
379 |                                                         <tr>
380 |                                                             <td style={{ textAlign: "center" }} colSpan={4}>
381 |                                                                 Loading...
382 |                                                             </td>
383 |                                                         </tr>
384 |                                                     }
385 | 
386 |                                                     {/* Load more */}
387 |                                                     {(noOfResultsLoaded == Object.keys(resultsByPosition).length &&
388 |                                                         totalUniqueVotes != Object.keys(resultsByPosition).length) &&
389 |                                                         <tr>
390 |                                                             <td style={{ textAlign: "center" }} colSpan={4}>
391 |                                                                 <a style={{ textDecoration: "underline", cursor: "pointer" }} onClick={() => { loadMore(); }}>
392 |                                                                     Load more
393 |                                                                 </a>
394 |                                                             </td>
395 |                                                         </tr>
396 |                                                     }
397 |                                                 </tbody>
398 |                                             </Table>
399 |                                         </div>
400 |                                     </div>
401 |                                 </div>
402 | 
403 |                                 {/* Right Side */}
404 |                                 <div className="col-sm-12 col-md-4">
405 |                                     {/* Information */}
406 |                                     <InformationComponent pollObject={pollObject} resultsByOption={resultsByOption} currentBlockHeight={currentBlockHeight} />
407 |                                 </div>
408 |                             </div>
409 |                         </div>
410 |                     </>
411 |                     :
412 |                     <>Loading...</>
413 |                 }
414 |             </div>
415 | 
416 |             {/* Success message popup */}
417 |             <Modal show={show} onHide={handleClose}>
418 |                 <Modal.Header closeButton>
419 |                     <Modal.Title>Information</Modal.Title>
420 |                 </Modal.Header>
421 |                 <Modal.Body>
422 |                     Voted successfully! Your vote has been cast. Here is a link to your transaction status{" "}
423 |                     <a
424 |                         style={{ textDecoration: "underline", color: "#000" }}
425 |                         href={formStacksExplorerUrl(txId)}
426 |                         target="_blank"
427 |                         rel="noreferrer"
428 |                     >
429 |                         {"here"}
430 |                         <svg
431 |                             width="10"
432 |                             height="10"
433 |                             viewBox="0 0 12 12"
434 |                             fill="none"
435 |                             xmlns="http://www.w3.org/2000/svg"
436 |                         >
437 |                             <path
438 |                                 fillRule="evenodd"
439 |                                 clipRule="evenodd"
440 |                                 d="M3.5044 0.743397C3.5044 0.33283 3.83723 -6.71395e-08 4.2478 0L11.2566 6.60206e-07C11.6672 6.60206e-07 12 0.33283 12 0.743397L12 7.7522C12 8.16277 11.6672 8.4956 11.2566 8.4956C10.846 8.4956 10.5132 8.16277 10.5132 7.7522V2.53811L1.26906 11.7823C0.978742 12.0726 0.50805 12.0726 0.217736 11.7823C-0.0725787 11.4919 -0.0725784 11.0213 0.217736 10.7309L9.46189 1.48679L4.2478 1.48679C3.83723 1.48679 3.5044 1.15396 3.5044 0.743397Z"
441 |                                 fill="#000"
442 |                             />
443 |                         </svg>
444 |                     </a>
445 |                 </Modal.Body>
446 |             </Modal>
447 |         </>
448 |     );
449 | }


--------------------------------------------------------------------------------
/components/poll/PollService.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     cvToHex, cvToValue, parseReadOnlyResponse, uintCV
 3 | } from "@stacks/transactions";
 4 | import { Constants } from "../../common/constants";
 5 | import { getStacksAPIPrefix } from "../../services/auth";
 6 | 
 7 | const getIndividualResultByStartAndEndPosition = (start, end, totalUniqueVotes, contractAddress, contractName,
 8 |     resultsByPosition, setResultsByPosition, noOfResultsLoaded, setNoOfResultsLoaded) => {
 9 |     // Store, "end" as number of results loaded
10 |     if (!noOfResultsLoaded) {
11 |         noOfResultsLoaded = (start - end);
12 |         setNoOfResultsLoaded(noOfResultsLoaded);
13 |     } else {
14 |         noOfResultsLoaded = noOfResultsLoaded + (start - end);
15 |         setNoOfResultsLoaded(noOfResultsLoaded);
16 |     }
17 | 
18 |     for (let i = start; i > end; i--) {
19 |         if (i >= 1) {
20 |             getResultAtPosition(i, contractAddress, contractName, resultsByPosition, setResultsByPosition);
21 |         }
22 |     }
23 | }
24 | 
25 | const getResultAtPosition = async (position, contractAddress, contractName,
26 |     resultsByPosition, setResultsByPosition) => {
27 |     let url = getStacksAPIPrefix() +
28 |         "/v2/contracts/call-read/" +
29 |         contractAddress +
30 |         "/" +
31 |         contractName +
32 |         "/get-result-at-position";
33 | 
34 |     // Fetch gaia URL from stacks blockchain
35 |     const rawResponse = await fetch(url, {
36 |         method: "POST",
37 |         headers: {
38 |             Accept: "application/json",
39 |             "Content-Type": "application/json",
40 |         },
41 |         body: JSON.stringify({
42 |             sender: contractAddress,
43 |             arguments: [cvToHex(uintCV(position))]
44 |         }),
45 |     });
46 |     const content = await rawResponse.json();
47 | 
48 |     // If data found on stacks blockchain
49 |     if (content && content.okay) {
50 |         const results = cvToValue(parseReadOnlyResponse(content))?.value?.value;
51 | 
52 |         let resultsObj = {};
53 |         results?.vote?.value.forEach((option, index) => {
54 |             resultsObj[option?.value] = results?.volume?.value?.[index]?.value;
55 |         });
56 | 
57 |         resultsByPosition[position] = {
58 |             "dns": results?.bns?.value,
59 |             "address": results?.user?.value,
60 |             "vote": resultsObj,
61 |             "votingPower": results?.["voting-power"]?.value
62 |         }
63 | 
64 |         // Testnet code
65 |         if (Constants.STACKS_MAINNET_FLAG == true && results?.user?.value) {
66 |             // Get btc domain for logged in user
67 |             const response = await fetch(
68 |                 getStacksAPIPrefix() + "/v1/addresses/stacks/" + results?.user?.value
69 |             );
70 |             const responseObject = await response.json();
71 | 
72 |             // Get btc dns
73 |             if (responseObject?.names?.length > 0) {
74 |                 const btcDNS = responseObject.names.filter((bns) =>
75 |                     bns.endsWith(".btc")
76 |                 );
77 | 
78 |                 // Check does BTC dns is available
79 |                 if (btcDNS && btcDNS.length > 0) {
80 |                     // BTC holder
81 |                     const btcNamespace = btcDNS[0];
82 |                     resultsByPosition[position]["username"] = btcNamespace;
83 |                 }
84 |             }
85 |         } else if (Constants.STACKS_MAINNET_FLAG == false) {
86 |             // Testnet
87 |             const btcNamespace = results?.user?.value?.substr(-5) + ".btc";
88 |             resultsByPosition[position]["username"] = btcNamespace;
89 |         }
90 | 
91 |         setResultsByPosition({ ...resultsByPosition });
92 |     }
93 | }
94 | 
95 | export {
96 |     getIndividualResultByStartAndEndPosition
97 | };
98 | 


--------------------------------------------------------------------------------
/components/poll/QRCodePopup.js:
--------------------------------------------------------------------------------
  1 | import QRCode from "qrcode.react";
  2 | import { Modal } from "react-bootstrap";
  3 | import styles from "../../styles/QRCodePopup.module.css";
  4 | 
  5 | export default function QRCodePopup(props) {
  6 |     // Parent parameters
  7 |     const { pollObject, showQRCodePopupFlag, publicUrl } = props;
  8 | 
  9 |     // Variables
 10 |     // Handle close popup
 11 |     const handleCloseQrCodePopup = () => {
 12 |         props.setShowQRCodePopupFlag(false);
 13 |     };
 14 | 
 15 |     // Functions
 16 |     // Download QR code
 17 |     const downloadQRCode = () => {
 18 |         const qrCodeURL = document
 19 |             .getElementById("qrCodeEl")
 20 |             .toDataURL("image/png")
 21 |             .replace("image/png", "image/octet-stream");
 22 |         let aEl = document.createElement("a");
 23 |         aEl.href = qrCodeURL;
 24 |         aEl.download = "Ballot_" + (pollObject?.title ? pollObject?.title.replaceAll(".", "_") : "") + ".png";
 25 |         document.body.appendChild(aEl);
 26 |         aEl.click();
 27 |         document.body.removeChild(aEl);
 28 |     };
 29 | 
 30 |     // View
 31 |     return (
 32 |         <>
 33 |             {/* QR code */}
 34 |             <Modal
 35 |                 show={showQRCodePopupFlag}
 36 |                 onHide={handleCloseQrCodePopup}
 37 |                 keyboard={false}
 38 |                 centered
 39 |                 size="md"
 40 |             >
 41 |                 {/* Header */}
 42 |                 <div className={styles.dashboard_modal_header_box}>
 43 |                     <div>Ballot QR code</div>
 44 |                     <button
 45 |                         className={styles.dashboard_modal_close_icon_btn_box}
 46 |                         onClick={handleCloseQrCodePopup}
 47 |                     >
 48 |                         <svg
 49 |                             width="10"
 50 |                             height="10"
 51 |                             viewBox="0 0 10 10"
 52 |                             fill="none"
 53 |                             xmlns="http://www.w3.org/2000/svg"
 54 |                         >
 55 |                             <path
 56 |                                 fillRule="evenodd"
 57 |                                 clipRule="evenodd"
 58 |                                 d="M0.898377 0.898804C1.2108 0.586385 1.71733 0.586385 2.02975 0.898804L4.9996 3.86865L7.96945 0.898804C8.28186 0.586385 8.7884 0.586385 9.10082 0.898804C9.41324 1.21122 9.41324 1.71776 9.10082 2.03018L6.13097 5.00002L9.10082 7.96987C9.41324 8.28229 9.41324 8.78882 9.10082 9.10124C8.7884 9.41366 8.28186 9.41366 7.96945 9.10124L4.9996 6.13139L2.02975 9.10124C1.71733 9.41366 1.2108 9.41366 0.898377 9.10124C0.585958 8.78882 0.585958 8.28229 0.898377 7.96987L3.86823 5.00002L0.898377 2.03018C0.585958 1.71776 0.585958 1.21122 0.898377 0.898804Z"
 59 |                                 fill="black"
 60 |                             />
 61 |                         </svg>
 62 |                     </button>
 63 |                 </div>
 64 | 
 65 |                 {/* Body */}
 66 |                 <div
 67 |                     className={
 68 |                         styles.dashboard_modal_body_box +
 69 |                         " " +
 70 |                         styles.dashboard_transactions_modal_body_box
 71 |                     }
 72 |                     style={{ padding: "0px", marginBottom: "20px" }}
 73 |                 >
 74 |                     {/* QR code */}
 75 |                     <div style={{ padding: "20px", textAlign: "center" }}>
 76 |                         {/* QR code */}
 77 |                         <QRCode size={220} value={publicUrl} />
 78 | 
 79 |                         <div style={{ display: "none" }}>
 80 |                             <QRCode
 81 |                                 id="qrCodeEl"
 82 |                                 size={600}
 83 |                                 includeMargin={true}
 84 |                                 value={publicUrl}
 85 |                             />
 86 |                         </div>
 87 | 
 88 |                         {/* Download button */}
 89 |                         <div style={{ margin: "30px 0 0 0" }}>
 90 |                             <a style={{ cursor: "pointer" }} onClick={downloadQRCode}>
 91 |                                 <svg
 92 |                                     data-v-2381e482=""
 93 |                                     width="16"
 94 |                                     height="16"
 95 |                                     viewBox="0 0 16 16"
 96 |                                     fill="none"
 97 |                                     xmlns="http://www.w3.org/2000/svg"
 98 |                                 >
 99 |                                     <path
100 |                                         data-v-2381e482=""
101 |                                         d="M12.6668 6H10.0002V2H6.00016V6H3.3335L8.00016 10.6667L12.6668 6ZM3.3335 12V13.3333H12.6668V12H3.3335Z"
102 |                                         fill="#394147"
103 |                                     ></path>
104 |                                 </svg>
105 |                                 Download
106 |                             </a>
107 |                         </div>
108 |                     </div>
109 |                 </div>
110 |             </Modal>
111 |         </>
112 |     );
113 | }
114 | 


--------------------------------------------------------------------------------
/components/summary/BuilderComponent.js:
--------------------------------------------------------------------------------
  1 | import Link from "next/link";
  2 | import { useEffect, useState } from "react";
  3 | import { Button, Form } from "react-bootstrap";
  4 | import { Constants } from "../../common/constants";
  5 | import { getFileFromGaia, getMyStxAddress, getStacksAPIPrefix, getUserData, putFileToGaia, userSession } from "../../services/auth";
  6 | import { convertToDisplayDateFormat } from "../../services/utils";
  7 | import styles from "../../styles/Builder.module.css";
  8 | import dashboardStyles from "../../styles/Dashboard.module.css";
  9 | import ChoosePollsPopup from "./ChoosePollsPopup";
 10 | 
 11 | export default function SummaryBuilderComponent(props) {
 12 |     // Variables
 13 | 
 14 |     // Gaia address
 15 |     const [gaiaAddress, setGaiaAddress] = useState();
 16 | 
 17 |     // Summary object
 18 |     const [summaryObject, setSummaryObject] = useState();
 19 | 
 20 |     // Processing flag
 21 |     const [isProcessing, setIsProcessing] = useState(false);
 22 | 
 23 |     // Error message
 24 |     const [errorMessage, setErrorMessage] = useState("");
 25 | 
 26 |     // Show/Hide ChoosePolls Popup
 27 |     const [showChoosePollsPopupFlag, setShowChoosePollsPopupFlag] = useState(false);
 28 | 
 29 |     const [urlSuffix, setUrlSuffix] = useState();
 30 | 
 31 |     // Functions
 32 |     useEffect(() => {
 33 |         let isCancelled = false;
 34 | 
 35 |         // Get Summary object
 36 |         getFileFromGaia("summary.json", { decrypt: false }).then(
 37 |             (response) => {
 38 |                 if (response && !isCancelled) {
 39 |                     setSummaryObject(JSON.parse(response));
 40 |                 }
 41 |             },
 42 |             (error) => {
 43 |                 // File does not exit in gaia
 44 |                 if (error && error.code == "does_not_exist" && !isCancelled) {
 45 |                     // Initialize new poll
 46 |                     setSummaryObject(initializeNewSummary());
 47 |                 }
 48 |             });
 49 | 
 50 |         // Get gaia address
 51 |         if (userSession && userSession.isUserSignedIn()) {
 52 |             setGaiaAddress(getUserData()?.gaiaHubConfig?.address);
 53 |         }
 54 | 
 55 |         // Get .btc address
 56 |         getBTCDomainFromBlockchain();
 57 | 
 58 |         return () => {
 59 |             isCancelled = true;
 60 |         }
 61 |     }, []);
 62 | 
 63 |     const getBTCDomainFromBlockchain = async () => {
 64 |         // Get btc domain for logged in user
 65 |         const response = await fetch(
 66 |             getStacksAPIPrefix() + "/v1/addresses/stacks/" + getMyStxAddress()
 67 |         );
 68 |         const responseObject = await response.json();
 69 | 
 70 |         // Testnet code
 71 |         if (Constants.STACKS_MAINNET_FLAG == false) {
 72 |             setUrlSuffix(getUserData()?.gaiaHubConfig?.address);
 73 |             return;
 74 |         }
 75 | 
 76 |         // Get btc dns
 77 |         if (responseObject?.names?.length > 0) {
 78 |             const btcDNS = responseObject.names.filter((bns) =>
 79 |                 bns.endsWith(".btc")
 80 |             );
 81 | 
 82 |             // Check does BTC dns is available
 83 |             if (btcDNS && btcDNS.length > 0) {
 84 |                 const _dns = btcDNS[0];
 85 | 
 86 |                 setUrlSuffix(_dns);
 87 |             } else {
 88 |                 setUrlSuffix(getUserData()?.gaiaHubConfig?.address);
 89 |             }
 90 |         } else {
 91 |             setUrlSuffix(getUserData()?.gaiaHubConfig?.address);
 92 |         }
 93 |     };
 94 | 
 95 |     function initializeNewSummary() {
 96 |         return {
 97 |             "title": "",
 98 |             "description": "",
 99 |             "polls": {
100 |                 "list": [],
101 |                 "ref": {}
102 |             }
103 |         }
104 |     }
105 | 
106 |     const handleChange = e => {
107 |         const { name, value } = e.target;
108 | 
109 |         // If value is empty, then delete key from previous state
110 |         if (!value && summaryObject) {
111 |             // Delete key from JSON
112 |             delete summaryObject[name];
113 |         } else {
114 |             // Update the value
115 |             summaryObject[name] = value;
116 |         }
117 | 
118 |         setSummaryObject({ ...summaryObject });
119 |     };
120 | 
121 |     function openChoosePollsPopup() {
122 |         setShowChoosePollsPopupFlag(true);
123 |     }
124 | 
125 |     function publishSummary() {
126 |         // Start processing
127 |         setIsProcessing(true);
128 | 
129 |         // Clear message
130 |         setErrorMessage("");
131 | 
132 |         // Save to gaia
133 |         putFileToGaia("summary.json", JSON.stringify(summaryObject), { "encrypt": false }).then(response => {
134 |             // Saved successfully message
135 |             setErrorMessage("Summary page is published.");
136 | 
137 |             // Stop processing
138 |             setIsProcessing(false);
139 |         });
140 |     }
141 | 
142 |     function getEachRow(pollIndexObject) {
143 |         const gaiaAddress = getUserData()?.gaiaHubConfig?.address;
144 | 
145 |         return (
146 |             <div>
147 |                 {/* Title */}
148 |                 <div className="d-flex align-items-center" style={{ marginBottom: "10px", columnGap: "10px", width: "100%" }}>
149 |                     <div className="text-truncate" style={{ fontSize: "18px", fontWeight: 600 }}>
150 |                         {pollIndexObject?.title ? pollIndexObject?.title : "..."}
151 |                     </div>
152 | 
153 |                     {/* Status */}
154 |                     <div className={pollIndexObject?.status == "draft" ? dashboardStyles.all_polls_status_box_draft : ((pollIndexObject?.endAt && (new Date(pollIndexObject?.endAt) < new Date()))) ? dashboardStyles.all_polls_status_box_closed : dashboardStyles.all_polls_status_box_active}>
155 |                         {
156 |                             pollIndexObject?.status == "draft" ? "Draft" :
157 |                                 ((pollIndexObject?.endAt && (new Date(pollIndexObject?.endAt) < new Date())) ?
158 |                                     "Closed" : "Active")
159 |                         }
160 |                     </div>
161 |                 </div>
162 | 
163 |                 {/* Description */}
164 |                 {
165 |                     pollIndexObject?.description ?
166 |                         <p className={"text_truncate_2" + ' ' + dashboardStyles.all_polls_description}>
167 |                             {pollIndexObject?.description ? pollIndexObject?.description : "..."}
168 |                         </p>
169 |                         : <></>
170 |                 }
171 | 
172 |                 <div style={{ fontSize: "14px", color: "#737373" }}>
173 |                     <span>
174 |                         Last Modified : {convertToDisplayDateFormat(pollIndexObject?.updatedAt)}
175 |                     </span>
176 |                 </div>
177 | 
178 |                 {/* <div>
179 |                             <Button variant="danger" onClick={(event) => { event.stopPropagation(); deletePoll(pollIndexObject, setAllPolls) }}
180 |                                 disabled={isDeleting}>
181 |                                 Delete
182 |                             </Button>
183 |                         </div> */}
184 |             </div>
185 |         )
186 |     }
187 | 
188 |     // Design
189 |     return (
190 |         <>
191 |             {summaryObject ?
192 |                 <>
193 |                     <div className={styles.builder_container}>
194 |                         {/* Left side */}
195 |                         <div className={styles.builder_left} style={{ marginBottom: "100px" }}>
196 |                             {/* Title */}
197 |                             <h5 style={{ fontSize: "20px", fontWeight: "600" }}>Summary</h5>
198 | 
199 |                             {/* Fields */}
200 |                             <Form style={{ margin: "20px 0 20px 0" }}>
201 |                                 <Form.Group className="mb-3">
202 |                                     <Form.Label className='ballot_labels'>Title</Form.Label>
203 |                                     <Form.Control type="text" name="title" value={summaryObject.title} onChange={handleChange}
204 |                                         className="ballot_input" />
205 |                                 </Form.Group>
206 | 
207 |                                 <Form.Group className="mb-3">
208 |                                     <Form.Label className='ballot_labels'>Description</Form.Label>
209 |                                     <Form.Control as="textarea" name="description" value={summaryObject.description} rows={5} onChange={handleChange} className="ballot_input" />
210 |                                 </Form.Group>
211 | 
212 |                                 <Form.Group>
213 |                                     <div style={{ display: "flex", marginTop: "10px" }}>
214 |                                         <Button style={{ width: "100%" }} className="action_dashed_btn" onClick={() => { openChoosePollsPopup(); }}>
215 |                                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
216 |                                                 <circle cx="12" cy="12" r="12" fill="#ECEFF1" />
217 |                                                 <path d="M12 8V12M12 16V12M12 12H16M12 12H8" stroke="black" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
218 |                                             </svg>
219 | 
220 |                                             Choose polls
221 |                                         </Button>
222 |                                     </div>
223 |                                 </Form.Group>
224 |                             </Form>
225 | 
226 |                             {/* List of polls */}
227 |                             <div className={dashboardStyles.all_polls_list_outline_box}>
228 |                                 {summaryObject?.polls?.list.map(
229 |                                     (pollId, i) => (
230 |                                         <div key={i} className={dashboardStyles.all_polls_list_box}>
231 |                                             {getEachRow(summaryObject?.polls?.ref[pollId])}
232 |                                         </div>
233 |                                     )
234 |                                 )}
235 |                             </div>
236 |                         </div>
237 | 
238 |                         {/* Right side */}
239 |                         <div className={styles.builder_right}>
240 |                             <div style={{ position: "sticky", top: "119px" }}>
241 |                                 <div className={styles.builder_right_section}>
242 | 
243 |                                     <a href={"/" + urlSuffix} target="_blank" style={{ textDecoration: "none" }}>
244 |                                         <Button style={{ width: "100%", marginBottom: "10px" }} className="action_secondary_btn">
245 |                                             Open summary
246 |                                             <svg style={{ marginLeft: "6px" }}
247 |                                                 width="8"
248 |                                                 height="8"
249 |                                                 viewBox="0 0 12 12"
250 |                                                 fill="none"
251 |                                                 xmlns="http://www.w3.org/2000/svg">
252 |                                                 <path
253 |                                                     fillRule="evenodd"
254 |                                                     clipRule="evenodd"
255 |                                                     d="M3.5044 0.743397C3.5044 0.33283 3.83723 -6.71395e-08 4.2478 0L11.2566 6.60206e-07C11.6672 6.60206e-07 12 0.33283 12 0.743397L12 7.7522C12 8.16277 11.6672 8.4956 11.2566 8.4956C10.846 8.4956 10.5132 8.16277 10.5132 7.7522V2.53811L1.26906 11.7823C0.978742 12.0726 0.50805 12.0726 0.217736 11.7823C-0.0725787 11.4919 -0.0725784 11.0213 0.217736 10.7309L9.46189 1.48679L4.2478 1.48679C3.83723 1.48679 3.5044 1.15396 3.5044 0.743397Z"
256 |                                                     fill="initial"
257 |                                                 />
258 |                                             </svg>
259 |                                         </Button>
260 |                                     </a>
261 | 
262 |                                     <Button variant="dark" style={{ width: "100%" }}
263 |                                         onClick={() => { publishSummary() }} disabled={isProcessing}>
264 |                                         Publish
265 |                                     </Button>
266 | 
267 |                                     {/* Error Message */}
268 |                                     {errorMessage &&
269 |                                         <div style={{ marginTop: "10px" }}>
270 |                                             <span style={{ fontSize: "14px" }}>{errorMessage}</span>
271 |                                         </div>
272 |                                     }
273 |                                 </div>
274 |                             </div>
275 |                         </div>
276 |                     </div>
277 |                 </>
278 |                 :
279 |                 <>
280 |                     <div style={{ width: "100%", maxWidth: "52px", height: "17px", marginBottom: "20px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
281 | 
282 |                     <div style={{ width: "100px", height: "22px", marginBottom: "8px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
283 |                     <div style={{ width: "100%", height: "36px", marginBottom: "16px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
284 | 
285 |                     <div style={{ width: "130px", height: "22px", marginBottom: "8px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
286 |                     <div style={{ width: "100%", height: "132px", marginBottom: "16px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
287 | 
288 |                     <div style={{ width: "150px", height: "22px", marginBottom: "8px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
289 |                     <div style={{ width: "100%", height: "36px", marginBottom: "16px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
290 | 
291 |                     <div style={{ width: "170px", height: "22px", marginBottom: "8px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
292 |                     <div style={{ width: "100%", height: "36px", marginBottom: "16px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
293 | 
294 |                 </>
295 |             }
296 | 
297 |             {/* Choose polls popup */}
298 |             <ChoosePollsPopup summaryObject={summaryObject} handleSummaryChange={handleChange}
299 |                 showChoosePollsPopupFlag={showChoosePollsPopupFlag} setShowChoosePollsPopupFlag={setShowChoosePollsPopupFlag} />
300 |         </>
301 |     );
302 | }


--------------------------------------------------------------------------------
/components/summary/ChoosePollsPopup.js:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import { Modal, Spinner, Form, Button } from "react-bootstrap";
  3 | import { getFileFromGaia } from "../../services/auth";
  4 | import { convertToDisplayDateFormat } from "../../services/utils";
  5 | import styles from "../../styles/ChoosePollsPopup.module.css";
  6 | 
  7 | export default function ChoosePollsPopup(props) {
  8 |     // Parent parameters
  9 |     const { showChoosePollsPopupFlag, summaryObject, handleSummaryChange } = props;
 10 | 
 11 |     // Variables
 12 |     // Handle close popup
 13 |     const handleCloseChoosePollsPopup = () => {
 14 |         props.setShowChoosePollsPopupFlag(false);
 15 |     };
 16 | 
 17 |     // Summary polls
 18 |     const [summaryPolls, setSummaryPolls] = useState();
 19 | 
 20 |     // All polls
 21 |     const [allPolls, setAllPolls] = useState();
 22 | 
 23 |     // Loading
 24 |     const [isLoading, setIsLoading] = useState(false);
 25 | 
 26 |     // Functions
 27 |     useEffect(() => {
 28 |         if (showChoosePollsPopupFlag) {
 29 |             // Take summary polls
 30 |             setSummaryPolls(JSON.parse(JSON.stringify(summaryObject?.polls)));
 31 | 
 32 |             // Start loading
 33 |             setIsLoading(true);
 34 | 
 35 |             getFileFromGaia("pollIndex.json", {}).then(
 36 |                 (response) => {
 37 |                     if (response) {
 38 |                         setAllPolls(JSON.parse(response));
 39 |                     }
 40 | 
 41 |                     // Stop loading
 42 |                     setIsLoading(false);
 43 |                 },
 44 |                 (error) => {
 45 |                     // File does not exit in gaia
 46 |                     if (error && error.code == "does_not_exist") {
 47 |                         setAllPolls({
 48 |                             list: [],
 49 |                             ref: {}
 50 |                         });
 51 |                     }
 52 | 
 53 |                     // Stop loading
 54 |                     setIsLoading(false);
 55 |                 });
 56 |         }
 57 |     }, [showChoosePollsPopupFlag]);
 58 | 
 59 |     function getEachRow(pollIndexObject) {
 60 |         return (
 61 |             <div>
 62 |                 {/* Title */}
 63 |                 <div className="d-flex align-items-center" style={{ marginBottom: "10px", columnGap: "10px", width: "100%" }}>
 64 |                     <div className="text-truncate" style={{ fontSize: "18px", fontWeight: 600 }}>
 65 |                         {pollIndexObject?.title ? pollIndexObject?.title : "..."}
 66 |                     </div>
 67 |                     {/* Status */}
 68 |                     <div className={pollIndexObject?.status == "draft" ? styles.all_polls_status_box_draft : ((pollIndexObject?.endAt && (new Date(pollIndexObject?.endAt) < new Date()))) ? styles.all_polls_status_box_closed : styles.all_polls_status_box_active}>
 69 |                         {
 70 |                             pollIndexObject?.status == "draft" ? "Draft" :
 71 |                                 ((pollIndexObject?.endAt && (new Date(pollIndexObject?.endAt) < new Date())) ?
 72 |                                     "Closed" : "Active")
 73 |                         }
 74 |                     </div>
 75 |                 </div>
 76 | 
 77 |                 {/* Description */}
 78 |                 {
 79 |                     pollIndexObject?.description ?
 80 |                         <p className={"text_truncate_2" + ' ' + styles.all_polls_description}>
 81 |                             {pollIndexObject?.description ? pollIndexObject?.description : "..."}
 82 |                         </p>
 83 |                         : <></>
 84 |                 }
 85 | 
 86 |                 <div style={{ fontSize: "14px", color: "#737373" }}>
 87 |                     <span>
 88 |                         Last Modified : {convertToDisplayDateFormat(pollIndexObject?.updatedAt)}
 89 |                     </span>
 90 |                 </div>
 91 |             </div>
 92 |         )
 93 |     }
 94 | 
 95 |     function onClickOfPolls(pollId) {
 96 |         if (!summaryPolls?.ref[pollId]) {
 97 |             summaryPolls.list.push(pollId);
 98 |             summaryPolls.ref[pollId] = allPolls?.ref?.[pollId];
 99 |         } else {
100 |             const summaryIndex = summaryPolls.list.findIndex(item => item == pollId);
101 |             if (summaryIndex >= 0) {
102 |                 summaryPolls.list.splice(summaryIndex, 1);
103 |             }
104 |             delete summaryPolls.ref[pollId];
105 |         }
106 | 
107 |         setSummaryPolls({ ...summaryPolls });
108 |     }
109 | 
110 |     function saveSummaryPolls() {
111 |         handleSummaryChange({
112 |             target: {
113 |                 name: "polls",
114 |                 value: { ...summaryPolls }
115 |             }
116 |         });
117 | 
118 |         handleCloseChoosePollsPopup();
119 |     }
120 | 
121 |     const handleChange = e => {
122 |         const { name, value } = e.target;
123 |     }
124 | 
125 |     // View
126 |     return (
127 |         <>
128 |             {/* QR code */}
129 |             <Modal
130 |                 show={showChoosePollsPopupFlag}
131 |                 onHide={handleCloseChoosePollsPopup}
132 |                 keyboard={false}
133 |                 centered
134 |                 size="xl"
135 |             >
136 |                 {/* Header */}
137 |                 <div className={styles.summary_modal_header_box}>
138 |                     <div>Choose polls</div>
139 |                     <button
140 |                         className={styles.summary_modal_close_icon_btn_box}
141 |                         onClick={handleCloseChoosePollsPopup}
142 |                     >
143 |                         <svg
144 |                             width="10"
145 |                             height="10"
146 |                             viewBox="0 0 10 10"
147 |                             fill="none"
148 |                             xmlns="http://www.w3.org/2000/svg"
149 |                         >
150 |                             <path
151 |                                 fillRule="evenodd"
152 |                                 clipRule="evenodd"
153 |                                 d="M0.898377 0.898804C1.2108 0.586385 1.71733 0.586385 2.02975 0.898804L4.9996 3.86865L7.96945 0.898804C8.28186 0.586385 8.7884 0.586385 9.10082 0.898804C9.41324 1.21122 9.41324 1.71776 9.10082 2.03018L6.13097 5.00002L9.10082 7.96987C9.41324 8.28229 9.41324 8.78882 9.10082 9.10124C8.7884 9.41366 8.28186 9.41366 7.96945 9.10124L4.9996 6.13139L2.02975 9.10124C1.71733 9.41366 1.2108 9.41366 0.898377 9.10124C0.585958 8.78882 0.585958 8.28229 0.898377 7.96987L3.86823 5.00002L0.898377 2.03018C0.585958 1.71776 0.585958 1.21122 0.898377 0.898804Z"
154 |                                 fill="black"
155 |                             />
156 |                         </svg>
157 |                     </button>
158 |                 </div>
159 | 
160 |                 {/* Body */}
161 |                 <div className={styles.summary_modal_body_box} >
162 |                     {
163 |                         // Loading
164 |                         isLoading ? (
165 |                             <div style={{ textAlign: "center", padding: "10px" }}>
166 |                                 <Spinner animation="border" variant="secondary" size="md" />
167 |                             </div>
168 |                         ) : // Once data found
169 |                             (allPolls && allPolls?.list?.length > 0) ? (
170 |                                 <div className={styles.all_polls_list_outline_box}>
171 |                                     {allPolls?.list.map(
172 |                                         (pollId, i) => (
173 |                                             (allPolls?.ref?.[pollId] && allPolls?.ref?.[pollId]?.status != "draft") &&
174 |                                             <div key={i} style={{ display: "flex" }} className={styles.all_polls_list_box} onClick={() => { onClickOfPolls(pollId) }}>
175 |                                                 <div>
176 |                                                     <Form.Group className="mb-3">
177 |                                                         <Form.Check
178 |                                                             inline
179 |                                                             type="checkbox"
180 |                                                             name={pollId}
181 |                                                             onChange={handleChange}
182 |                                                             checked={summaryPolls?.ref?.[pollId] ? true : false}
183 |                                                         />
184 |                                                     </Form.Group>
185 |                                                 </div>
186 |                                                 <div >
187 |                                                     {getEachRow(allPolls.ref[pollId])}
188 |                                                 </div>
189 |                                             </div>
190 | 
191 |                                         )
192 |                                     )}
193 |                                 </div>
194 |                             ) : (
195 |                                 <div style={{ padding: "0px 20px 10px", fontSize: "14px" }}>
196 |                                     Only published polls will be listed here.
197 |                                 </div>
198 |                             )
199 |                     }
200 |                 </div>
201 | 
202 |                 {/* Footer */}
203 |                 <Modal.Footer>
204 |                     <Button className="action_secondary_btn" onClick={handleCloseChoosePollsPopup}>Close</Button>
205 |                     <Button variant="dark" onClick={() => { saveSummaryPolls() }} disabled={isLoading}>Done</Button>
206 |                 </Modal.Footer>
207 |             </Modal>
208 |         </>
209 |     );
210 | }
211 | 


--------------------------------------------------------------------------------
/components/summary/SummaryComponent.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import Link from "next/link";
  3 | import { convertToDisplayDateFormat } from "../../services/utils";
  4 | import styles from "../../styles/Dashboard.module.css";
  5 | 
  6 | export default function SummaryComponent(props) {
  7 |     // Variables
  8 |     const {
  9 |         summaryObject,
 10 |         gaiaAddress,
 11 |         allPolls } = props;
 12 | 
 13 |     // Function
 14 |     function getEachRow(pollIndexObject) {
 15 |         return (
 16 |             <a href={pollIndexObject?.status == "draft" ? `/builder/${pollIndexObject.id}/draft` : `/${pollIndexObject.id}/${gaiaAddress}`} target="_blank"
 17 |                 style={{ textDecoration: "none", color: "#212529" }}>
 18 |                 <div>
 19 |                     {/* Title */}
 20 |                     <div className="d-flex align-items-center" style={{ marginBottom: "10px", columnGap: "10px", width: "100%" }}>
 21 |                         <div className="text-truncate" style={{ fontSize: "18px", fontWeight: 600 }}>
 22 |                             {pollIndexObject?.title ? pollIndexObject?.title : "..."}
 23 |                         </div>
 24 |                         {/* Status */}
 25 |                         <div className={pollIndexObject?.status == "draft" ? styles.all_polls_status_box_draft : ((pollIndexObject?.endAt && (new Date(pollIndexObject?.endAt) < new Date()))) ? styles.all_polls_status_box_closed : styles.all_polls_status_box_active}>
 26 |                             {
 27 |                                 pollIndexObject?.status == "draft" ? "Draft" :
 28 |                                     ((pollIndexObject?.endAt && (new Date(pollIndexObject?.endAt) < new Date())) ?
 29 |                                         "Closed" : "Active")
 30 |                             }
 31 |                         </div>
 32 |                     </div>
 33 | 
 34 |                     {/* Description */}
 35 |                     {
 36 |                         pollIndexObject?.description ?
 37 |                             <p className={"text_truncate_2" + ' ' + styles.all_polls_description}>
 38 |                                 {pollIndexObject?.description ? pollIndexObject?.description : "..."}
 39 |                             </p>
 40 |                             : <></>
 41 |                     }
 42 | 
 43 |                     <div style={{ fontSize: "14px", color: "#737373" }}>
 44 |                         <span>
 45 |                             Last Modified : {convertToDisplayDateFormat(pollIndexObject?.updatedAt)}
 46 |                         </span>
 47 |                     </div>
 48 |                 </div>
 49 |             </a>
 50 |         )
 51 |     }
 52 | 
 53 |     // Design
 54 |     return (
 55 |         <>
 56 |             {summaryObject &&
 57 |                 <section>
 58 |                     <div className={styles.dashboard_container}>
 59 |                         <div style={{ padding: "10px 0 100px 0", maxWidth: "700px", width: "100%" }}>
 60 | 
 61 |                             {/* Title */}
 62 |                             <h1 style={{ fontSize: "24px", fontWeight: "600" }}>{summaryObject?.title}</h1>
 63 | 
 64 |                             {/* Description */}
 65 |                             <div style={{ marginBottom: "24px", whiteSpace: "pre-wrap" }}>
 66 |                                 <p style={{ lineHeight: "1.7" }}
 67 |                                     dangerouslySetInnerHTML={{ __html: summaryObject?.description }}>
 68 |                                 </p>
 69 |                             </div>
 70 | 
 71 |                             {/* List of all polls */}
 72 |                             {allPolls?.list && allPolls?.ref ?
 73 |                                 (allPolls?.list?.length > 0) &&
 74 |                                 <>
 75 |                                     {/* List of polls */}
 76 |                                     <div className={styles.all_polls_list_outline_box}>
 77 |                                         {allPolls?.list.map(
 78 |                                             (pollId, i) => (
 79 |                                                 <div key={i} className={styles.all_polls_list_box}>
 80 |                                                     {getEachRow(allPolls.ref[pollId])}
 81 |                                                 </div>
 82 |                                             )
 83 |                                         )}
 84 |                                     </div>
 85 |                                 </>
 86 |                                 :
 87 |                                 <>
 88 |                                     {/* Loading */}
 89 |                                     <div style={{ width: "100%", maxWidth: "100px", height: "24px", marginBottom: "40px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
 90 | 
 91 |                                     <div style={{ width: "100%", height: "110px", marginBottom: "10px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
 92 |                                     <div style={{ width: "100%", height: "110px", marginBottom: "10px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
 93 |                                     <div style={{ width: "100%", height: "110px", backgroundColor: "#eceff1", borderRadius: "4px" }}></div>
 94 |                                 </>
 95 |                             }
 96 |                         </div>
 97 |                     </div>
 98 |                 </section>
 99 |             }
100 |         </>
101 |     );
102 | }


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 |   swcMinify: true,
5 | }
6 | 
7 | module.exports = nextConfig
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ballot",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@stacks/connect": "^7.8.0",
13 |     "@stacks/network": "^6.17.0",
14 |     "@stacks/storage": "^6.17.0",
15 |     "@stacks/transactions": "^6.17.0",
16 |     "bootstrap": "^5.2.0",
17 |     "lodash": "^4.17.21",
18 |     "nanoid": "^4.0.0",
19 |     "next": "12.2.5",
20 |     "qrcode.react": "^3.1.0",
21 |     "react": "18.2.0",
22 |     "react-bootstrap": "^2.5.0",
23 |     "react-dom": "18.2.0",
24 |     "uuid": "^8.3.2"
25 |   },
26 |   "devDependencies": {
27 |     "eslint": "8.22.0",
28 |     "eslint-config-next": "12.2.5"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/pages/[...id].js:
--------------------------------------------------------------------------------
  1 | import {
  2 |     cvToHex, cvToValue, hexToCV, parseReadOnlyResponse, standardPrincipalCV
  3 | } from "@stacks/transactions";
  4 | import Head from "next/head";
  5 | import { useEffect, useState } from "react";
  6 | import { Col, Container, Row } from "react-bootstrap";
  7 | import { Constants } from "../common/constants";
  8 | import { DashboardNavBarComponent } from "../components/common/DashboardNavBarComponent";
  9 | import PollComponent from "../components/poll/PollComponent";
 10 | import { getIndividualResultByStartAndEndPosition } from "../components/poll/PollService";
 11 | import { getMyStxAddress, getStacksAPIPrefix, userSession } from "../services/auth";
 12 | import { getRecentBlock } from "../services/utils";
 13 | 
 14 | export default function Poll(props) {
 15 |     // Variables
 16 |     const { pollObject, pollId, gaiaAddress, currentBlockHeight } = props;
 17 | 
 18 |     // Contract transaction status
 19 |     const [txStatus, setTxStatus] = useState();
 20 | 
 21 |     const [publicUrl, setPublicUrl] = useState();
 22 |     const [optionsMap, setOptionsMap] = useState({});
 23 |     const [resultsByOption, setResultsByOption] = useState({});
 24 |     const [resultsByPosition, setResultsByPosition] = useState({});
 25 |     const [totalVotes, setTotalVotes] = useState();
 26 |     const [totalUniqueVotes, setTotalUniqueVotes] = useState();
 27 |     const [noOfResultsLoaded, setNoOfResultsLoaded] = useState();
 28 | 
 29 |     // BTC dns name
 30 |     const [dns, setDns] = useState();
 31 | 
 32 |     // TokenIds
 33 |     const [alreadyVoted, setAlreadyVoted] = useState(false);
 34 |     const [noHoldingToken, setNoHoldingToken] = useState(false);
 35 |     const [holdingTokenIdsArray, setHoldingTokenIdsArray] = useState();
 36 | 
 37 |     // Voting power
 38 |     const [votingPower, setVotingPower] = useState();
 39 | 
 40 |     const title = `${pollObject?.title} | Ballot`;
 41 |     const description = pollObject?.description?.substr(0, 160);
 42 |     const metaImage = "https://ballot.gg/images/ballot-meta.png";
 43 |     const displayURL = "";
 44 | 
 45 |     // Functions
 46 |     useEffect(() => {
 47 |         // Set shareable public URL
 48 |         setPublicUrl(`https://ballot.gg/${pollId}/${gaiaAddress}`);
 49 | 
 50 |         if (pollObject) {
 51 |             // Parse poll options
 52 |             pollObject?.options.forEach(option => {
 53 |                 optionsMap[option.id] = option.value;
 54 |             });
 55 |             setOptionsMap(optionsMap);
 56 | 
 57 |             // Get contract transaction status
 58 |             getContractTransactionStatus(pollObject);
 59 | 
 60 |             // Fetch token holdings
 61 |             fetchTokenHoldings(pollObject);
 62 | 
 63 |             // Fetch results
 64 |             getPollResults(pollObject);
 65 | 
 66 |             // Fetch result by user
 67 |             getResultByUser(pollObject);
 68 |         }
 69 |     }, [pollObject, pollId, gaiaAddress]);
 70 | 
 71 |     const getContractTransactionStatus = async (pollObject) => {
 72 |         if (!pollObject?.publishedInfo?.txId) {
 73 |             return;
 74 |         }
 75 | 
 76 |         // Get btc domain for logged in user
 77 |         const response = await fetch(
 78 |             getStacksAPIPrefix() + "/extended/v1/tx/" + pollObject?.publishedInfo?.txId
 79 |         );
 80 |         const responseObject = await response.json();
 81 |         setTxStatus(responseObject?.tx_status);
 82 |     }
 83 | 
 84 |     const fetchTokenHoldings = (pollObject) => {
 85 |         // If user is not signed in, just return
 86 |         if (!userSession.isUserSignedIn()) {
 87 |             return;
 88 |         }
 89 | 
 90 |         // Strategy
 91 |         if (pollObject?.votingStrategyFlag) {
 92 |             if (pollObject?.strategyTokenType == "nft") {
 93 |                 // Fetch NFT holdings
 94 |                 getNFTHolding(pollObject);
 95 |             } else if (pollObject?.strategyTokenType == "ft") {
 96 |                 // Fetch FT holdings
 97 |                 getFTHolding(pollObject);
 98 |             }
 99 |         } else {
100 |             // No strategy
101 | 
102 |             // Allow anybody to vote
103 |             setHoldingTokenIdsArray([]);
104 |             setVotingPower(1);
105 |         }
106 |     }
107 | 
108 |     const getNFTHolding = async (pollObject) => {
109 |         if (pollObject?.votingStrategyTemplate) {
110 |             // BTC holders check
111 |             if (pollObject?.votingStrategyTemplate === "btcholders") {
112 |                 // Fetch BTC domain
113 |                 getBTCDomainFromBlockchain(pollObject);
114 |             } else if (pollObject?.strategyContractName && pollObject?.strategyTokenName) {
115 |                 const limit = 200;
116 |                 // Get NFT holdings
117 |                 const responseObject = await makeFetchCall(getStacksAPIPrefix() + "/extended/v1/tokens/nft/holdings?principal=" + getMyStxAddress() +
118 |                     "&asset_identifiers=" + pollObject?.strategyContractName + "::" + pollObject?.strategyTokenName + "&offset=0&limit=" + limit);
119 |                 if (responseObject?.total > 0) {
120 |                     // Set voting power
121 |                     setVotingPower(responseObject?.total);
122 | 
123 |                     const _holdingTokenIdsArray = [];
124 |                     responseObject?.results.forEach(eachNFT => {
125 |                         _holdingTokenIdsArray.push(cvToValue(hexToCV(eachNFT.value.hex)));
126 |                     });
127 | 
128 |                     // If there are more than 200, then fetch all
129 |                     if (responseObject?.total > limit) {
130 |                         const remainingTotal = (responseObject?.total - limit);
131 |                         const noOfFetchCallsToBeMade = Math.ceil(remainingTotal / limit);
132 | 
133 |                         let listOfPromises = [];
134 |                         for (let i = 1; i <= noOfFetchCallsToBeMade; i++) {
135 |                             const offset = i * limit;
136 | 
137 |                             listOfPromises.push(makeFetchCall(getStacksAPIPrefix() + "/extended/v1/tokens/nft/holdings?principal=" + getMyStxAddress() +
138 |                                 "&asset_identifiers=" + pollObject?.strategyContractName + "::" + pollObject?.strategyTokenName + "&offset=" + offset + "&limit=" + limit));
139 |                         }
140 | 
141 |                         await Promise.all(listOfPromises).then(results => {
142 |                             results?.forEach(responseObject => {
143 |                                 responseObject?.results.forEach(eachNFT => {
144 |                                     _holdingTokenIdsArray.push(cvToValue(hexToCV(eachNFT.value.hex)));
145 |                                 });
146 |                             });
147 |                         });
148 |                     }
149 | 
150 |                     holdingTokenIdsArray = _holdingTokenIdsArray;
151 |                     setHoldingTokenIdsArray(holdingTokenIdsArray);
152 |                 } else {
153 |                     // No holdings to vote
154 |                     setNoHoldingToken(true);
155 |                 }
156 |             }
157 |         }
158 |     }
159 | 
160 |     const makeFetchCall = (url) => {
161 |         return new Promise(async (resolve, reject) => {
162 |             const response = await fetch(url);
163 |             const responseObject = await response.json();
164 |             resolve(responseObject);
165 |         })
166 |     }
167 | 
168 |     const getBTCDomainFromBlockchain = async (pollObject) => {
169 |         // If user is not signed in, just return
170 |         if (!userSession.isUserSignedIn()) {
171 |             return;
172 |         }
173 | 
174 |         // Get btc domain for logged in user
175 |         const response = await fetch(
176 |             getStacksAPIPrefix() + "/v1/addresses/stacks/" + getMyStxAddress()
177 |         );
178 |         const responseObject = await response.json();
179 | 
180 |         // Testnet code
181 |         if (Constants.STACKS_MAINNET_FLAG == false) {
182 |             const _dns = getMyStxAddress().substr(-5) + ".btc";
183 |             setDns(_dns);
184 |             return;
185 |         }
186 | 
187 |         // Get btc dns
188 |         if (responseObject?.names?.length > 0) {
189 |             const btcDNS = responseObject.names.filter((bns) =>
190 |                 bns.endsWith(".btc")
191 |             );
192 | 
193 |             // Check does BTC dns is available
194 |             if (btcDNS && btcDNS.length > 0) {
195 |                 // BTC holder
196 |                 const _dns = btcDNS[0];
197 | 
198 |                 // Take the btc dns name
199 |                 setDns(_dns);
200 | 
201 |                 // Allow to vote
202 |                 if (pollObject?.votingStrategyFlag && pollObject?.votingStrategyTemplate === "btcholders") {
203 |                     setHoldingTokenIdsArray([]);
204 |                     setVotingPower(1);
205 |                 }
206 |             } else {
207 |                 // Not a BTC holder
208 | 
209 |                 // Turn flag on
210 |                 if (pollObject?.votingStrategyFlag && pollObject?.votingStrategyTemplate === "btcholders") {
211 |                     // No holdings to vote
212 |                     setNoHoldingToken(true);
213 |                 }
214 |             }
215 |         } else {
216 |             // Not a BTC holder
217 | 
218 |             // Turn flag on
219 |             if (pollObject?.votingStrategyFlag && pollObject?.votingStrategyTemplate === "btcholders") {
220 |                 // No holdings to vote
221 |                 setNoHoldingToken(true);
222 |             }
223 |         }
224 |     }
225 | 
226 |     const getFTHolding = async (pollObject) => {
227 |         if (pollObject?.votingStrategyTemplate) {
228 |             // BTC holders check
229 |             if (pollObject?.votingStrategyTemplate === "stx") {
230 |                 // Fetch STX holdings
231 |                 getSTXHolding();
232 |             } else if (pollObject?.strategyContractName && pollObject?.strategyTokenName) {
233 |                 const response = await fetch(`${getStacksAPIPrefix()}/extended/v1/address/${getMyStxAddress()}/balances` +
234 |                     (pollObject?.snapshotBlockHeight ? "?until_block=" + pollObject?.snapshotBlockHeight : ""));
235 |                 const responseObject = await response.json();
236 | 
237 |                 if (responseObject?.fungible_tokens && responseObject?.fungible_tokens?.[pollObject?.strategyContractName + "::" + pollObject?.strategyTokenName]) {
238 |                     const tokenInfo = responseObject?.fungible_tokens?.[pollObject?.strategyContractName + "::" + pollObject?.strategyTokenName];
239 | 
240 |                     if (tokenInfo?.balance !== "0") {
241 |                         // Default value
242 |                         let tokenDecimalsPowerOfTen = 1000000;
243 |                         if (pollObject?.strategyTokenDecimals && parseInt(pollObject?.strategyTokenDecimals) >= 0) {
244 |                             tokenDecimalsPowerOfTen = Math.pow(10, parseInt(pollObject?.strategyTokenDecimals));
245 |                         } else if (pollObject?.strategyTokenDecimals && parseInt(pollObject?.strategyTokenDecimals) === 0) {
246 |                             tokenDecimalsPowerOfTen = 1;
247 |                         }
248 | 
249 |                         const tokenBalance = Math.floor((parseInt(tokenInfo?.balance) / tokenDecimalsPowerOfTen));
250 |                         setHoldingTokenIdsArray([]);
251 |                         setVotingPower(tokenBalance);
252 |                     } else {
253 |                         // No holdings to vote
254 |                         setNoHoldingToken(true);
255 |                     }
256 |                 } else {
257 |                     // No holdings to vote
258 |                     setNoHoldingToken(true);
259 |                 }
260 |             }
261 |         }
262 |     }
263 | 
264 |     const getSTXHolding = async () => {
265 |         const response = await fetch(`${getStacksAPIPrefix()}/extended/v1/address/${getMyStxAddress()}/stx` +
266 |             (pollObject?.snapshotBlockHeight ? "?until_block=" + pollObject?.snapshotBlockHeight : ""));
267 |         const responseObject = await response.json();
268 | 
269 |         if (responseObject?.balance !== "0") {
270 |             const stxBalance = Math.floor((parseInt(responseObject?.balance) / 1000000));
271 |             setHoldingTokenIdsArray([]);
272 |             setVotingPower(stxBalance);
273 |         } else {
274 |             // No holdings to vote
275 |             setNoHoldingToken(true);
276 |         }
277 |     }
278 | 
279 |     const getPollResults = async (pollObject) => {
280 |         if (pollObject?.publishedInfo?.contractAddress && pollObject?.publishedInfo?.contractName) {
281 |             const contractAddress = pollObject?.publishedInfo?.contractAddress;
282 |             const contractName = pollObject?.publishedInfo?.contractName;
283 |             let url = getStacksAPIPrefix() +
284 |                 "/v2/contracts/call-read/" +
285 |                 contractAddress +
286 |                 "/" +
287 |                 contractName +
288 |                 "/get-results";
289 | 
290 |             // Fetch gaia URL from stacks blockchain
291 |             const rawResponse = await fetch(url, {
292 |                 method: "POST",
293 |                 headers: {
294 |                     Accept: "application/json",
295 |                     "Content-Type": "application/json",
296 |                 },
297 |                 body: JSON.stringify({
298 |                     sender: contractAddress,
299 |                     arguments: []
300 |                 }),
301 |             });
302 |             const content = await rawResponse.json();
303 | 
304 |             // If data found on stacks blockchain
305 |             if (content && content.okay) {
306 |                 const results = cvToValue(parseReadOnlyResponse(content)).value;
307 | 
308 |                 const total = parseInt(results?.["total-votes"]?.value ? (results?.["total-votes"]?.value) : (results?.total?.value));
309 |                 setTotalVotes(total);
310 | 
311 |                 // Total unique vote
312 |                 totalUniqueVotes = results?.total?.value;
313 |                 setTotalUniqueVotes(results?.total?.value);
314 | 
315 |                 let resultsObj = {};
316 |                 results?.options?.value.forEach((option, index) => {
317 |                     resultsObj[option?.value] = {
318 |                         total: results?.results?.value?.[index]?.value,
319 |                         percentage: results?.results?.value?.[index]?.value == 0 ? 0 : ((results?.results?.value?.[index]?.value / total) * 100).toFixed(2)
320 |                     };
321 |                 });
322 |                 setResultsByOption(resultsObj);
323 | 
324 |                 // Get list of individual vote
325 |                 getIndividualResultByStartAndEndPosition(results?.total?.value, (results?.total?.value > 10 ? (results?.total?.value - 10) : 0), totalUniqueVotes,
326 |                     contractAddress, contractName, resultsByPosition, setResultsByPosition, noOfResultsLoaded, setNoOfResultsLoaded);
327 |             } else {
328 |                 setTotalVotes(0);
329 |                 setTotalUniqueVotes(0);
330 |                 setNoOfResultsLoaded(0);
331 |             }
332 |         }
333 |     };
334 | 
335 |     const getResultByUser = async (pollObject) => {
336 |         if (userSession.isUserSignedIn() &&
337 |             pollObject?.publishedInfo?.contractAddress && pollObject?.publishedInfo?.contractName) {
338 |             const contractAddress = pollObject?.publishedInfo?.contractAddress;
339 |             const contractName = pollObject?.publishedInfo?.contractName;
340 |             let url = getStacksAPIPrefix() +
341 |                 "/v2/contracts/call-read/" +
342 |                 contractAddress +
343 |                 "/" +
344 |                 contractName +
345 |                 "/get-result-by-user";
346 | 
347 |             // Fetch gaia URL from stacks blockchain
348 |             const rawResponse = await fetch(url, {
349 |                 method: "POST",
350 |                 headers: {
351 |                     Accept: "application/json",
352 |                     "Content-Type": "application/json",
353 |                 },
354 |                 body: JSON.stringify({
355 |                     sender: contractAddress,
356 |                     arguments: [cvToHex(standardPrincipalCV(getMyStxAddress()))]
357 |                 }),
358 |             });
359 |             const content = await rawResponse.json();
360 | 
361 |             // If data found on stacks blockchain
362 |             if (content && content.okay) {
363 |                 const results = cvToValue(parseReadOnlyResponse(content)).value;
364 | 
365 |                 if (results) {
366 |                     setAlreadyVoted(true);
367 |                 }
368 |             }
369 |         }
370 |     };
371 | 
372 |     // Return
373 |     return (
374 |         <>
375 |             <Head>
376 |                 <title>{title}</title>
377 |                 <meta name="description" content={description} />
378 | 
379 |                 <meta name="robots" content="index,follow" />
380 | 
381 |                 {/* Favicon */}
382 |                 <link rel="icon" href={"/favicon.ico"} />
383 | 
384 |                 {/* Facebook Meta Tags */}
385 |                 <meta property="og:type" content="website" />
386 |                 <meta property="og:title" content={title} />
387 |                 <meta property="og:description" content={description} />
388 |                 <meta property="og:url" content={displayURL} />
389 |                 <meta property="og:image" content={metaImage} />
390 |                 <meta property="og:site_name" content="ballot.gg" />
391 |                 <meta property="og:image:width" content="1200" />
392 |                 <meta property="og:image:height" content="630" />
393 | 
394 |                 {/* Twitter Meta Tags */}
395 |                 <meta name="twitter:card" content="summary_large_image" />
396 |                 <meta name="twitter:title" content={title} />
397 |                 <meta name="twitter:description" content={description} />
398 |                 <meta name="twitter:url" content={displayURL} />
399 |                 <meta name="twitter:image" content={metaImage} />
400 |                 {/* <meta name="twitter:site" content="@ballot_gg" /> */}
401 |             </Head>
402 | 
403 |             {/* Outer layer */}
404 |             <Container className="ballot_container">
405 |                 <Row>
406 |                     <Col md={12}>
407 |                         {/* Nav bar */}
408 |                         <DashboardNavBarComponent />
409 | 
410 |                         {/* Body */}
411 |                         <PollComponent pollObject={pollObject} optionsMap={optionsMap} resultsByOption={resultsByOption}
412 |                             resultsByPosition={resultsByPosition} setResultsByPosition={setResultsByPosition}
413 |                             totalVotes={totalVotes} totalUniqueVotes={totalUniqueVotes}
414 |                             dns={dns} alreadyVoted={alreadyVoted} noHoldingToken={noHoldingToken}
415 |                             holdingTokenIdsArray={holdingTokenIdsArray}
416 |                             votingPower={votingPower} publicUrl={publicUrl} txStatus={txStatus}
417 |                             noOfResultsLoaded={noOfResultsLoaded} setNoOfResultsLoaded={setNoOfResultsLoaded}
418 |                             currentBlockHeight={currentBlockHeight} />
419 |                     </Col>
420 |                 </Row>
421 |             </Container>
422 |         </>
423 |     );
424 | }
425 | 
426 | // This gets called on every request
427 | export async function getServerSideProps(context) {
428 |     // Get path param
429 |     const { params } = context;
430 |     const { id: pathParams } = params;
431 |     let pollObject;
432 |     let pollId, gaiaAddress;
433 | 
434 |     if (pathParams && pathParams?.[0]) {
435 |         pollId = pathParams[0];
436 |     }
437 |     if (pathParams && pathParams?.[1]) {
438 |         gaiaAddress = pathParams[1];
439 |     }
440 | 
441 |     // Fetch from Gaia
442 |     if (pollId && gaiaAddress) {
443 |         // Form gaia url            
444 |         const pollGaiaUrl = Constants.GAIA_HUB_PREFIX + gaiaAddress + "/" + pollId + ".json";
445 | 
446 |         const response = await fetch(pollGaiaUrl);
447 |         pollObject = await response.json();
448 |     }
449 | 
450 |     // Get current block height
451 |     const currentBlock = await getRecentBlock();
452 |     const currentBlockHeight = currentBlock?.tenure_height || 0;
453 | 
454 |     // Pass data to the page via props
455 |     return {
456 |         props: {
457 |             pollObject,
458 |             pollId,
459 |             gaiaAddress,
460 |             currentBlockHeight
461 |         },
462 |     };
463 | }


--------------------------------------------------------------------------------
/pages/[param].js:
--------------------------------------------------------------------------------
  1 | import Head from "next/head";
  2 | import { Col, Container, Row } from "react-bootstrap";
  3 | import { Constants } from "../common/constants";
  4 | import SummaryComponent from "../components/summary/SummaryComponent";
  5 | import { getStacksAPIPrefix } from "../services/auth";
  6 | 
  7 | export default function SummaryPage(props) {
  8 |     // Variables
  9 |     const { summaryObject, gaiaAddress, allPolls } = props;
 10 |     const title = `${summaryObject?.title} | Ballot`;
 11 |     const description = summaryObject?.description?.substr(0, 160);
 12 |     const metaImage = "https://ballot.gg/images/ballot-meta.png";
 13 |     const displayURL = "";
 14 | 
 15 |     // Functions
 16 | 
 17 |     // Design
 18 |     return (
 19 |         <>
 20 |             <Head>
 21 |                 <title>{title}</title>
 22 |                 <meta name="description" content={description} />
 23 | 
 24 |                 <meta name="robots" content="index,follow" />
 25 | 
 26 |                 {/* Favicon */}
 27 |                 <link rel="icon" href={"/favicon.ico"} />
 28 | 
 29 |                 {/* Facebook Meta Tags */}
 30 |                 <meta property="og:type" content="website" />
 31 |                 <meta property="og:title" content={title} />
 32 |                 <meta property="og:description" content={description} />
 33 |                 <meta property="og:url" content={displayURL} />
 34 |                 <meta property="og:image" content={metaImage} />
 35 |                 <meta property="og:site_name" content="ballot.gg" />
 36 |                 <meta property="og:image:width" content="1200" />
 37 |                 <meta property="og:image:height" content="630" />
 38 | 
 39 |                 {/* Twitter Meta Tags */}
 40 |                 <meta name="twitter:card" content="summary_large_image" />
 41 |                 <meta name="twitter:title" content={title} />
 42 |                 <meta name="twitter:description" content={description} />
 43 |                 <meta name="twitter:url" content={displayURL} />
 44 |                 <meta name="twitter:image" content={metaImage} />
 45 |                 {/* <meta name="twitter:site" content="@ballot_gg" /> */}
 46 |             </Head>
 47 | 
 48 |             {/* Outer layer */}
 49 |             <Container className="ballot_container">
 50 |                 <Row>
 51 |                     <Col md={12}>
 52 |                         {/* Body */}
 53 |                         <SummaryComponent summaryObject={summaryObject} gaiaAddress={gaiaAddress} allPolls={allPolls} />
 54 |                     </Col>
 55 |                 </Row>
 56 |             </Container>
 57 |         </>
 58 |     );
 59 | }
 60 | 
 61 | // This gets called on every request
 62 | export async function getServerSideProps(context) {
 63 |     // Get path param
 64 |     const { params } = context;
 65 |     const { param } = params;
 66 |     let summaryObject = null;
 67 |     let gaiaAddress = null;
 68 |     let allPolls = null;
 69 | 
 70 |     // If it is .btc address
 71 |     if (param?.toString().endsWith(".btc")) {
 72 |         try {
 73 |             // Get name details
 74 |             const getZoneFileUrl = `${getStacksAPIPrefix()}/v1/names/${param}/zonefile`;
 75 |             const response = await fetch(getZoneFileUrl);
 76 |             const zoneFile = await response.json();
 77 | 
 78 |             // Get profile details
 79 |             if (zoneFile && zoneFile["zonefile"]) {
 80 |                 const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
 81 |                 const profileUrl = zoneFile["zonefile"].match(urlRegex)[0];
 82 |                 const response = await fetch(profileUrl);
 83 |                 const profileObject = await response.json();
 84 | 
 85 |                 // Get gaia address
 86 |                 if (profileObject[0]['decodedToken']?.['payload']?.["claim"]?.['apps']?.["https://ballot.gg"]) {
 87 |                     const gaiaPrefixUrl = profileObject[0]['decodedToken']?.['payload']?.["claim"]?.['apps']?.["https://ballot.gg"];
 88 |                     const splittedArray = gaiaPrefixUrl.split("/");
 89 | 
 90 |                     gaiaAddress = splittedArray.pop();
 91 |                     while (splittedArray.length > 0 && !gaiaAddress) {
 92 |                         gaiaAddress = splittedArray.pop();
 93 |                     }
 94 |                 }
 95 |             }
 96 |         } catch (error) {
 97 |         }
 98 |     } else if (param) {
 99 |         gaiaAddress = param;
100 |     }
101 | 
102 |     if (gaiaAddress) {
103 |         // Form gaia url            
104 |         let summaryGaiaUrl = Constants.GAIA_HUB_PREFIX + gaiaAddress + "/summary.json";
105 | 
106 |         try {
107 |             const response = await fetch(summaryGaiaUrl);
108 |             summaryObject = await response.json();
109 |             allPolls = summaryObject?.polls ? summaryObject?.polls : null;
110 |         } catch (error) {
111 |             // Summary not found
112 |             summaryObject = null;
113 |             allPolls = null;
114 |         }
115 |     }
116 | 
117 |     // Pass data to the page via props
118 |     return {
119 |         props: {
120 |             summaryObject,
121 |             gaiaAddress,
122 |             allPolls
123 |         },
124 |     };
125 | }


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import { SSRProvider } from 'react-bootstrap'
 3 | import '../styles/globals.css'
 4 | 
 5 | function MyApp({ Component, pageProps }) {
 6 |   return <>
 7 |     <SSRProvider>
 8 |       {/* Header */}
 9 |       <Head>
10 |         {/* Fathom Analytics */}
11 |         <script
12 |           src="https://stay-ethical.ballot.gg/script.js"
13 |           data-site="KIYMABDL" defer
14 |           data-included-domains="ballot.gg" />
15 |       </Head>
16 | 
17 |       {/* Body */}
18 |       <Component {...pageProps} />
19 |     </SSRProvider>
20 |   </>
21 | }
22 | 
23 | export default MyApp
24 | 


--------------------------------------------------------------------------------
/pages/all-polls.js:
--------------------------------------------------------------------------------
 1 | import { Col, Container, Row } from "react-bootstrap";
 2 | import { DashboardNavBarComponent } from "../components/common/DashboardNavBarComponent";
 3 | import DashboardAllPollsComponent from "../components/dashboard/DashboardAllPollsComponent";
 4 | 
 5 | export default function Dashboard() {
 6 |     // Variables
 7 | 
 8 |     // Return
 9 |     return (
10 |         <>
11 |             {/* Outer layer */}
12 |             <Container className="ballot_container">
13 |                 <Row>
14 |                     <Col md={12}>
15 |                         {/* Dashboard nav bar */}
16 |                         <DashboardNavBarComponent />
17 | 
18 |                         {/* List of all polls */}
19 |                         <DashboardAllPollsComponent />
20 |                     </Col>
21 |                 </Row>
22 |             </Container>
23 |         </>
24 |     );
25 | }


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/builder/[[...id]].js:
--------------------------------------------------------------------------------
 1 | import { useRouter } from "next/router";
 2 | import { Col, Container, Row } from "react-bootstrap";
 3 | import BuilderComponent from "../../components/builder/BuilderComponent";
 4 | import { DashboardNavBarComponent } from "../../components/common/DashboardNavBarComponent";
 5 | 
 6 | export default function Builder() {
 7 |     // Variables
 8 |     const router = useRouter();
 9 |     const pathParams = router.query.id;
10 | 
11 |     // Return
12 |     return (
13 |         <>
14 |             {/* Outer layer */}
15 |             <Container className="ballot_container">
16 |                 <Row>
17 |                     <Col md={12}>
18 |                         {/* Dashboard nav bar */}
19 |                         <DashboardNavBarComponent />
20 | 
21 |                         {/* Body */}
22 |                         <BuilderComponent pathParams={pathParams} />
23 |                     </Col>
24 |                 </Row>
25 |             </Container>
26 |         </>
27 |     );
28 | }


--------------------------------------------------------------------------------
/pages/summary/index.js:
--------------------------------------------------------------------------------
 1 | import { Col, Container, Row } from "react-bootstrap";
 2 | import { DashboardNavBarComponent } from "../../components/common/DashboardNavBarComponent";
 3 | import SummaryBuilderComponent from "../../components/summary/BuilderComponent";
 4 | 
 5 | export default function SummaryBuilder() {
 6 |     // Design
 7 |     return (
 8 |         <>
 9 |             {/* Outer layer */}
10 |             <Container className="ballot_container">
11 |                 <Row>
12 |                     <Col md={12}>
13 |                         {/* Dashboard nav bar */}
14 |                         <DashboardNavBarComponent />
15 | 
16 |                         {/* Body */}
17 |                         <SummaryBuilderComponent />
18 |                     </Col>
19 |                 </Row>
20 |             </Container>
21 |         </>
22 |     );
23 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BlockSurvey/ballot/29c8762ec410f2b2d763f9837c204ff283873b5f/public/favicon.ico


--------------------------------------------------------------------------------
/public/images/ballot-meta.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BlockSurvey/ballot/29c8762ec410f2b2d763f9837c204ff283873b5f/public/images/ballot-meta.png


--------------------------------------------------------------------------------
/public/images/logo/ballot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BlockSurvey/ballot/29c8762ec410f2b2d763f9837c204ff283873b5f/public/images/logo/ballot.png


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/services/auth.js:
--------------------------------------------------------------------------------
  1 | import { AppConfig, showConnect, UserSession } from "@stacks/connect";
  2 | import { StacksMainnet, StacksTestnet } from "@stacks/network";
  3 | import { Storage } from "@stacks/storage";
  4 | import { Constants } from "../common/constants";
  5 | import { parseJWTtoken } from "./utils";
  6 | 
  7 | const appConfig = new AppConfig(["store_write", "publish_data"]);
  8 | 
  9 | export const userSession = new UserSession({ appConfig });
 10 | export const storage = new Storage({ userSession });
 11 | 
 12 | // Set this to true if you want to use Mainnet
 13 | const stacksMainnetFlag = Constants.STACKS_MAINNET_FLAG;
 14 | 
 15 | export function getUserData() {
 16 |   return userSession.loadUserData();
 17 | }
 18 | 
 19 | export function alreadyLoggedIn() {
 20 |   if (!userSession.isUserSignedIn() && userSession.isSignInPending()) {
 21 |     userSession.handlePendingSignIn().then((userData) => {
 22 |       // Redirect to dashboard
 23 |       window.location.assign("/all-polls");
 24 |     });
 25 |   } else if (userSession && userSession.isUserSignedIn()) {
 26 |     // Redirect to dashboard
 27 |     window.location.assign("/all-polls");
 28 |   }
 29 | }
 30 | 
 31 | /**
 32 |  * Sign in
 33 |  */
 34 | export function authenticate(redirectTo) {
 35 |   // Sign up
 36 |   if (!userSession.isUserSignedIn() && !userSession.isSignInPending()) {
 37 |     showConnect({
 38 |       appDetails: {
 39 |         name: "Ballot",
 40 |         icon: window.location.origin + "/images/logo/ballot.png",
 41 |       },
 42 |       redirectTo: "/",
 43 |       onFinish: () => {
 44 |         if (redirectTo) {
 45 |           // Redirect to dashboard
 46 |           window.location.assign(redirectTo);
 47 |         } else {
 48 |           // Redirect to dashboard
 49 |           window.location.assign("/all-polls");
 50 |         }
 51 |       },
 52 |       userSession: userSession,
 53 |     });
 54 |   } else if (userSession && userSession.isUserSignedIn()) {
 55 |     // Redirect to dashboard
 56 |     window.location.assign("/all-polls");
 57 |   }
 58 | }
 59 | 
 60 | export function switchAccount(redirectTo) {
 61 |   showConnect({
 62 |     appDetails: {
 63 |       name: "Ballot",
 64 |       icon: window.location.origin + "/images/logo/ballot.png",
 65 |     },
 66 |     redirectTo: "/",
 67 |     onFinish: () => {
 68 |       if (redirectTo) {
 69 |         // Redirect to dashboard
 70 |         window.location.assign(redirectTo);
 71 |       } else {
 72 |         // Redirect to dashboard
 73 |         window.location.assign("/all-polls");
 74 |       }
 75 |     },
 76 |     userSession: userSession,
 77 |   });
 78 | }
 79 | 
 80 | /**
 81 |  * Sign out
 82 |  */
 83 | export function signOut() {
 84 |   // Logout
 85 |   userSession.signUserOut();
 86 | 
 87 |   // Redirect to dashboard
 88 |   window.location.assign("/");
 89 | }
 90 | 
 91 | function validateGaiaAccessToken() {
 92 |   const userData = userSession.loadUserData();
 93 | 
 94 |   // Validate gaiaAccessToken expire time
 95 |   if (userData["gaiaAssociationToken"]) {
 96 |     const gaiaAssociationTokenObj = parseJWTtoken(userData["gaiaAssociationToken"]);
 97 | 
 98 |     // If token is expired, then logout from page
 99 |     if (gaiaAssociationTokenObj && gaiaAssociationTokenObj.exp && Date.now() >= (gaiaAssociationTokenObj.exp * 1000)) {
100 |       // Force logout
101 |       signOut();
102 |       return false;
103 |     }
104 |   }
105 | 
106 |   return true;
107 | }
108 | 
109 | /**
110 |  * Save file to gaia storage
111 |  *
112 |  * @param {*} fileName
113 |  * @param {*} file
114 |  * @param {*} options
115 |  * @returns
116 |  */
117 | export function putFileToGaia(fileName, file, options = {}) {
118 |   // Always validate gaiaAccessToken before saving file
119 |   const validationStatus = validateGaiaAccessToken();
120 |   if (!validationStatus) {
121 |     return;
122 |   }
123 | 
124 |   let overrideOptions = {};
125 |   if (!options) {
126 |     overrideOptions = {
127 |       dangerouslyIgnoreEtag: true // Ignore automatic conflict prevention using etags
128 |     }
129 |   } else if (options && typeof options === 'object') {
130 |     overrideOptions = {
131 |       ...options,
132 |       dangerouslyIgnoreEtag: true // Ignore automatic conflict prevention using etags
133 |     }
134 |   }
135 | 
136 |   return storage.putFile(fileName, file, overrideOptions);
137 | }
138 | 
139 | /**
140 |  * Get file from gaia storage
141 |  */
142 | export function getFileFromGaia(fileName, options) {
143 |   // Update the fileName to make it unique using timestamp query param
144 |   if (fileName) {
145 |     fileName = `${fileName}?timestamp=${Date.now()}`;
146 |   }
147 | 
148 |   return storage.getFile(fileName, options);
149 | }
150 | 
151 | export function deleteFileToGaia(fileName) {
152 |   return storage.deleteFile(fileName);
153 | }
154 | 
155 | /**
156 |  * Get stacks network type (Mainnet/Testnet)
157 |  *
158 |  * @returns
159 |  */
160 | export function getNetworkType() {
161 |   if (stacksMainnetFlag) {
162 |     return new StacksMainnet();
163 |   } else {
164 |     return new StacksTestnet();
165 |   }
166 | }
167 | 
168 | export function getMyStxAddress() {
169 |   if (stacksMainnetFlag) {
170 |     return getUserData().profile.stxAddress.mainnet;
171 |   } else {
172 |     return getUserData().profile.stxAddress.testnet;
173 |   }
174 | }
175 | 
176 | export function getStacksAPIPrefix() {
177 |   if (stacksMainnetFlag) {
178 |     return Constants.STACKS_MAINNET_API_URL;
179 |   } else {
180 |     return Constants.STACKS_TESTNET_API_URL;
181 |   }
182 | }
183 | 


--------------------------------------------------------------------------------
/services/contract.js:
--------------------------------------------------------------------------------
  1 | import { openContractCall, openContractDeploy } from "@stacks/connect";
  2 | import { AnchorMode, bufferCV, FungibleConditionCode, listCV, makeStandardSTXPostCondition, PostConditionMode, stringAsciiCV, uintCV } from "@stacks/transactions";
  3 | import { Constants } from "../common/constants";
  4 | import { getNetworkType } from "../services/auth";
  5 | 
  6 | const cancelCallbackFunction = (data) => {
  7 |     window.location.reload();
  8 | }
  9 | 
 10 | export async function deployContract(pollObject, contractName, callbackFunction) {
 11 |     const contract = getContract(pollObject);
 12 | 
 13 |     // Transaction options
 14 |     const txOptions = {
 15 |         network: getNetworkType(), // Testnet or Mainnet
 16 |         anchorMode: AnchorMode.Any, // which type of block the tx should be mined in
 17 | 
 18 |         contractName: contractName,
 19 |         codeBody: contract,
 20 | 
 21 |         appDetails: {
 22 |             name: "Ballot",
 23 |             icon: window.location.origin + "/images/logo/ballot.png"
 24 |         },
 25 | 
 26 |         postConditionMode: PostConditionMode.Deny, // whether the tx should fail when unexpected assets are transferred
 27 |         postConditions: [], // for an example using post-conditions, see next example
 28 | 
 29 |         onFinish: callbackFunction,
 30 |         onCancel: cancelCallbackFunction
 31 |     };
 32 | 
 33 |     // Call contract function
 34 |     await openContractDeploy(txOptions);
 35 | }
 36 | 
 37 | function getContract(pollObject) {
 38 |     let contract = getRawContract();
 39 | 
 40 |     let optionIds;
 41 |     let optionResults;
 42 |     pollObject?.options?.forEach(option => {
 43 |         if (!optionIds) {
 44 |             optionIds = `"${option?.id}"`
 45 |             optionResults = `(map-set results {id: "${option?.id}"} {count: u0, name: u"${getStringByLength(encodeURIComponent(option?.value), 512)}"})`
 46 |         } else {
 47 |             optionIds = optionIds + ` "${option?.id}"`;
 48 |             optionResults = optionResults + ` (map-set results {id: "${option?.id}"} {count: u0, name: u"${getStringByLength(encodeURIComponent(option?.value), 512)}"})`
 49 |         }
 50 |     });
 51 | 
 52 | 
 53 |     let strategyFunction = "";
 54 |     let votingPowerVariable = "";
 55 |     let volumeByVotingPower = "";
 56 |     let myVotes = "";
 57 |     let votingPowerValidation = "";
 58 | 
 59 |     // Strategy
 60 |     if (pollObject?.votingStrategyFlag && pollObject?.strategyTokenType) {
 61 |         // Non fungible tokens
 62 |         if (pollObject?.strategyTokenType == "nft") {
 63 |             if (pollObject?.votingStrategyTemplate == "btcholders") {
 64 |                 strategyFunction = getStrategyFunctionForBtcHolders();
 65 |                 votingPowerVariable = `(voting-power (get-voting-power-by-bns-holder domain namespace))`;
 66 |             } else if (pollObject?.strategyContractName) {
 67 |                 strategyFunction = getStrategyFunctionForNFT(pollObject?.strategyContractName);
 68 |                 votingPowerVariable = `(voting-power (get-voting-power-by-nft-holdings token-ids))`;
 69 |             }
 70 |         } else {
 71 |             // Fungible tokens
 72 |             if (pollObject?.votingStrategyTemplate == "stx") {
 73 |                 strategyFunction = getStrategyFunctionForStxHolders(pollObject?.snapshotBlockHeight || 0);
 74 |                 votingPowerVariable = `(voting-power (get-voting-power-by-stx-holdings))`;
 75 |             } else if (pollObject?.strategyContractName) {
 76 |                 strategyFunction = getStrategyFunctionForFT(pollObject?.strategyContractName, pollObject?.snapshotBlockHeight || 0);
 77 |                 votingPowerVariable = `(voting-power (get-voting-power-by-ft-holdings))`;
 78 |             }
 79 |         }
 80 |     } else {
 81 |         // No strategy
 82 | 
 83 |         // Based on voting system
 84 |         if (pollObject?.votingSystem == "fptp") {
 85 |             votingPowerVariable = `(voting-power u1)`;
 86 |         } else if (pollObject?.votingSystem == "block") {
 87 |             votingPowerVariable = `(voting-power u1)`;
 88 |         } else if (pollObject?.votingSystem == "quadratic") {
 89 |             votingPowerVariable = `(voting-power (fold + (map get-pow-value volume) u0))`;
 90 |         } else if (pollObject?.votingSystem == "weighted") {
 91 |             votingPowerVariable = `(voting-power (fold + volume u0))`;
 92 |         }
 93 |     }
 94 | 
 95 |     // Based on voting system
 96 |     if (pollObject?.votingSystem == "fptp") {
 97 |         volumeByVotingPower = `
 98 |                 ;; FPTP and Block voting
 99 |                 (temp (var-set temp-voting-power voting-power))
100 |                 (volume-by-voting-power (map get-volume-by-voting-power volume))
101 |             `;
102 | 
103 |         myVotes = `
104 |                 ;; FPTP and Block voting - Number of votes
105 |                 (my-votes voting-power)`;
106 | 
107 |         votingPowerValidation = `
108 |                 ;; FPTP and Block voting
109 |                 (asserts! (> voting-power u0) ERR-FAILED-STRATEGY)`;
110 |     } else if (pollObject?.votingSystem == "block") {
111 |         volumeByVotingPower = `
112 |                 ;; FPTP and Block voting
113 |                 (temp (var-set temp-voting-power voting-power))
114 |                 (volume-by-voting-power (map get-volume-by-voting-power volume))
115 |             `;
116 | 
117 |         myVotes = `
118 |                 ;; FPTP and Block voting - Number of votes
119 |                 (my-votes voting-power)`;
120 | 
121 |         votingPowerValidation = `
122 |                 ;; FPTP and Block voting
123 |                 (asserts! (> voting-power u0) ERR-FAILED-STRATEGY)`;
124 |     } else if (pollObject?.votingSystem == "quadratic") {
125 |         volumeByVotingPower = `
126 |                 ;; Quadratic or Weighted voting
127 |                 (volume-by-voting-power volume)`;
128 | 
129 |         myVotes = `
130 |                 ;; Quadratic or Weighted voting - Number of votes
131 |                 (my-votes (fold + volume u0))`;
132 | 
133 |         votingPowerValidation = `
134 |                 ;; Quadratic voting
135 |                 (asserts! (>= voting-power (fold + (map get-pow-value volume-by-voting-power) u0)) ERR-FAILED-STRATEGY)`;
136 |     } else if (pollObject?.votingSystem == "weighted") {
137 |         volumeByVotingPower = `
138 |                 ;; Quadratic or Weighted voting
139 |                 (volume-by-voting-power volume)`;
140 | 
141 |         myVotes = `
142 |                 ;; Quadratic or Weighted voting - Number of votes
143 |                 (my-votes (fold + volume u0))`;
144 | 
145 |         votingPowerValidation = `
146 |                 ;; Weigted voting
147 |                 (asserts! (>= voting-power (fold + volume-by-voting-power u0)) ERR-FAILED-STRATEGY)`;
148 |     }
149 | 
150 |     const placeholder = {
151 |         "noOfOptions": pollObject?.options?.length,
152 |         "title": getStringByLength(encodeURIComponent(pollObject?.title), 512),
153 |         "description": getStringByLength(encodeURIComponent(pollObject?.description), 512),
154 |         "votingSystem": pollObject?.votingSystem,
155 |         "startAtBlock": pollObject?.startAtBlock,
156 |         "endAtBlock": pollObject?.endAtBlock,
157 |         optionIds,
158 |         optionResults,
159 |         strategyFunction,
160 |         votingPowerVariable,
161 |         volumeByVotingPower,
162 |         myVotes,
163 |         votingPowerValidation
164 |     }
165 | 
166 |     for (let key in placeholder) {
167 |         const searchRegExp = new RegExp(`&{${key}}`, 'gi')
168 |         const replaceWith = placeholder[key];
169 |         contract = contract.replace(searchRegExp, replaceWith);
170 |     }
171 | 
172 |     return contract;
173 | }
174 | 
175 | function getStringByLength(text, length) {
176 |     // Make it single line string
177 |     let finalText = text.replace(/\n/g, "");
178 | 
179 |     // Cut shot by string length
180 |     finalText = finalText.slice(0, length);
181 | 
182 |     return finalText;
183 | }
184 | 
185 | function getRawContract() {
186 |     return `
187 |     ;; ballot
188 |     
189 |     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
190 |     ;; Constants
191 |     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
192 |     (define-constant CONTRACT-OWNER tx-sender)
193 |     ;; Errors
194 |     (define-constant ERR-NOT-STARTED (err u1001))
195 |     (define-constant ERR-ENDED (err u1002))
196 |     (define-constant ERR-ALREADY-VOTED (err u1003))
197 |     (define-constant ERR-FAILED-STRATEGY (err u1004))
198 |     (define-constant ERR-NOT-VOTED (err u1005))
199 |     
200 |     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
201 |     ;; data maps and vars
202 |     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
203 |     (define-data-var title (string-utf8 512) u"")
204 |     (define-data-var description (string-utf8 512) u"")
205 |     (define-data-var voting-system (string-ascii 512) "")
206 |     (define-data-var start uint u0)
207 |     (define-data-var end uint u0)
208 |     (define-map token-ids-map {token-id: uint} {user: principal, vote-id: uint})
209 |     (define-map btc-holder-map {domain: (buff 20), namespace: (buff 48)} {user: principal, vote-id: uint})
210 |     (define-map results {id: (string-ascii 36)} {count: uint, name: (string-utf8 256)} )
211 |     (define-map users {id: principal} {id: uint, vote: (list &{noOfOptions} (string-ascii 36)), volume: (list &{noOfOptions} uint), voting-power: uint})
212 |     (define-map register {id: uint} {user: principal, vote: (list &{noOfOptions} (string-ascii 36)), volume: (list &{noOfOptions} uint), voting-power: uint})
213 |     (define-data-var total uint u0)
214 |     (define-data-var total-votes uint u0)
215 |     (define-data-var options (list &{noOfOptions} (string-ascii 36)) (list))
216 |     (define-data-var temp-voting-power uint u0)
217 |     
218 |     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
219 |     ;; private functions
220 |     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
221 |     &{strategyFunction}
222 |     
223 |     (define-private (have-i-voted)
224 |         (match (map-get? users {id: tx-sender})
225 |             success true
226 |             false
227 |         )
228 |     )
229 |     
230 |     (define-private (fold-boolean (left bool) (right bool))
231 |         (and (is-eq left true) (is-eq right true))
232 |     )
233 | 
234 |     (define-private (check-volume (each-volume uint))
235 |         (> each-volume u0)
236 |     )
237 | 
238 |     (define-private (validate-vote-volume (volume (list &{noOfOptions} uint)))
239 |         (begin
240 |             (fold fold-boolean (map check-volume volume) true)
241 |         )
242 |     )
243 | 
244 |     (define-private (get-volume-by-voting-power (volume uint))
245 |         (var-get temp-voting-power)
246 |     )
247 | 
248 |     (define-private (get-pow-value (volume uint))
249 |         (pow volume u2)
250 |     )
251 |     
252 |     (define-private (process-my-vote (option-id (string-ascii 36)) (volume uint))
253 |         (match (map-get? results {id: option-id})
254 |             result (let
255 |                     (
256 |                         (new-count-tuple {count: (+ volume (get count result))})
257 |                     )
258 | 
259 |                     ;; Capture the vote
260 |                     (map-set results {id: option-id} (merge result new-count-tuple))
261 | 
262 |                     ;; Return
263 |                     true
264 |                 )
265 |             false
266 |         )
267 |     )
268 |     
269 |     (define-private (get-single-result (option-id (string-ascii 36)))
270 |         (let 
271 |             (
272 |                 (volume (default-to u0 (get count (map-get? results {id: option-id}))))
273 |             )
274 |     
275 |             ;; Return volume
276 |             volume
277 |         )
278 |     )
279 |     
280 |     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
281 |     ;; public functions for all
282 |     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
283 |     (define-public (cast-my-vote (vote (list &{noOfOptions} (string-ascii 36))) (volume (list &{noOfOptions} uint))
284 |         (bns (string-ascii 256)) (domain (buff 20)) (namespace (buff 48)) (token-ids (list 60000 uint))
285 |         )
286 |         (let
287 |             (
288 |                 (vote-id (+ u1 (var-get total)))
289 |                 &{votingPowerVariable}
290 |                 &{volumeByVotingPower}
291 |                 &{myVotes}
292 |             )
293 |             ;; Validation
294 |             (asserts! (and (> (len vote) u0) (is-eq (len vote) (len volume-by-voting-power)) (validate-vote-volume volume-by-voting-power)) ERR-NOT-VOTED)
295 |             (asserts! (>= tenure-height (var-get start)) ERR-NOT-STARTED)
296 |             (asserts! (<= tenure-height (var-get end)) ERR-ENDED)        
297 |             (asserts! (not (have-i-voted)) ERR-ALREADY-VOTED)
298 |             &{votingPowerValidation}
299 |             
300 |             ;; Business logic
301 |             ;; Process my vote
302 |             (map process-my-vote vote volume-by-voting-power)
303 |             
304 |             ;; Register for reference
305 |             (map-set users {id: tx-sender} {id: vote-id, vote: vote, volume: volume-by-voting-power, voting-power: voting-power})
306 |             (map-set register {id: vote-id} {user: tx-sender, vote: vote, volume: volume-by-voting-power, voting-power: voting-power})
307 | 
308 |             ;; Increase the total votes
309 |             (var-set total-votes (+ my-votes (var-get total-votes)))
310 | 
311 |             ;; Increase the total
312 |             (var-set total vote-id)
313 |     
314 |             ;; Return
315 |             (ok true)
316 |         )
317 |     )
318 |     
319 |     (define-read-only (get-results)
320 |         (begin
321 |             (ok {
322 |                     total: (var-get total), 
323 |                     total-votes: (var-get total-votes), 
324 |                     options: (var-get options), 
325 |                     results: (map get-single-result (var-get options))
326 |                 })
327 |         )
328 |     )
329 |     
330 |     (define-read-only (get-result-at-position (position uint))
331 |         (ok (map-get? register {id: position}))
332 |     )
333 |         
334 |     (define-read-only (get-result-by-user (user principal))
335 |         (ok (map-get? users {id: user}))
336 |     )
337 |     
338 |     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
339 |     ;; Default assignments
340 |     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
341 |     (var-set title u"&{title}")
342 |     (var-set description u"&{description}")
343 |     (var-set voting-system "&{votingSystem}")
344 |     (var-set options (list &{optionIds}))
345 |     (var-set start u&{startAtBlock})
346 |     (var-set end u&{endAtBlock})
347 |     &{optionResults}`;
348 | }
349 | 
350 | function getStrategyFunctionForBtcHolders() {
351 |     return `
352 |     (define-private (get-voting-power-by-bns-holder (domain (buff 20)) (namespace (buff 48)))
353 |         (let
354 |             (
355 |                 (bns-owner (get owner (unwrap-panic (contract-call? 'SP000000000000000000002Q6VF78.bns name-resolve domain namespace))))
356 |             )
357 | 
358 |             (if (is-eq tx-sender bns-owner)
359 |                 (match (map-get? btc-holder-map {domain: domain, namespace: namespace})
360 |                     result
361 |                         u0
362 |                     u1
363 |                 )
364 |                 u0
365 |             )
366 |         )
367 |     )`;
368 | }
369 | 
370 | function getStrategyFunctionForNFT(strategyContractName) {
371 |     return `
372 |     (define-private (validate-nft-ownership (token-id uint))
373 |         (let
374 |             (
375 |                 (vote-id (+ u1 (var-get total)))
376 |                 (nft-owner-optional (unwrap-panic (contract-call? '${strategyContractName} get-owner token-id)))
377 |             )
378 | 
379 |             (match nft-owner-optional
380 |                 nft-owner 
381 |                     (if (is-eq tx-sender nft-owner)
382 |                         (match (map-get? token-ids-map {token-id: token-id})
383 |                             result
384 |                                 u0
385 |                             (if (map-set token-ids-map {token-id: token-id} {user: tx-sender, vote-id: vote-id})                        
386 |                                 u1
387 |                                 u0
388 |                             )
389 |                         )
390 |                         u0
391 |                     )
392 |                 u0
393 |             )
394 |         )
395 |     )
396 | 
397 |     (define-private (get-voting-power-by-nft-holdings (token-ids (list 60000 uint)))
398 |         (fold + (map validate-nft-ownership token-ids) u0)
399 |     )`;
400 | }
401 | 
402 | function getStrategyFunctionForStxHolders(snapshotBlockHeight) {
403 |     if (snapshotBlockHeight > 0) {
404 |         return `
405 |         (define-private (get-voting-power-by-stx-holdings)
406 |             (at-block (unwrap-panic (get-block-info? id-header-hash u${snapshotBlockHeight}))
407 |                 (let
408 |                     (
409 |                         (stx-balance (stx-get-balance tx-sender))
410 |                     )
411 |                     (if (> stx-balance u0)
412 |                         (/ stx-balance u1000000)
413 |                         stx-balance
414 |                     )
415 |                 )
416 |             )
417 |         )`;
418 |     }
419 | 
420 |     return `
421 |     (define-private (get-voting-power-by-stx-holdings)
422 |         (let
423 |             (
424 |                 (stx-balance (stx-get-balance tx-sender))
425 |             )
426 |             (if (> stx-balance u0)
427 |                 (/ stx-balance u1000000)
428 |                 stx-balance
429 |             )
430 |         )    
431 |     )`;
432 | }
433 | 
434 | function getStrategyFunctionForFT(strategyContractName, snapshotBlockHeight) {
435 |     if (snapshotBlockHeight > 0) {
436 |         return `
437 |         (define-private (get-voting-power-by-ft-holdings)
438 |             (at-block (unwrap-panic (get-block-info? id-header-hash u${snapshotBlockHeight}))
439 |                 (let
440 |                     (
441 |                         (ft-balance (unwrap-panic (contract-call? '${strategyContractName} get-balance tx-sender)))
442 |                         (ft-decimals (unwrap-panic (contract-call? '${strategyContractName} get-decimals)))
443 |                     )
444 | 
445 |                     (if (> ft-balance u0)
446 |                         (if (> ft-decimals u0)
447 |                             (/ ft-balance (pow u10 ft-decimals))
448 |                             ft-balance
449 |                         )
450 |                         ft-balance
451 |                     )
452 |                 )
453 |             )
454 |         )`;
455 |     }
456 | 
457 |     return `
458 |     (define-private (get-voting-power-by-ft-holdings)
459 |         (let
460 |             (
461 |                 (ft-balance (unwrap-panic (contract-call? '${strategyContractName} get-balance tx-sender)))
462 |                 (ft-decimals (unwrap-panic (contract-call? '${strategyContractName} get-decimals)))
463 |             )
464 | 
465 |             (if (> ft-balance u0)
466 |                 (if (> ft-decimals u0)
467 |                     (/ ft-balance (pow u10 ft-decimals))
468 |                     ft-balance
469 |                 )
470 |                 ft-balance
471 |             )
472 |         )
473 |     )`;
474 | }
475 | 
476 | export async function castMyVoteContractCall(contractAddress, contractName, voteObj, dns, tokenIdsArray, callbackFunction) {
477 |     // Parse vote
478 |     let voteStringAsciiArray = [], volumeUIntArray = [];
479 |     for (let key in voteObj) {
480 |         voteStringAsciiArray.push(stringAsciiCV(key));
481 |         volumeUIntArray.push(uintCV(voteObj[key]));
482 |     }
483 | 
484 |     let tokenIdsUintArray = [];
485 |     for (let tokenId of tokenIdsArray) {
486 |         tokenIdsUintArray.push(uintCV(tokenId));
487 |     }
488 | 
489 |     // Parse dns
490 |     let domain, namespace;
491 |     if (dns && dns.split(".").length > 1) {
492 |         // Parse dns
493 |         let splittedDns = dns.split(".");
494 |         domain = splittedDns.pop();
495 |         namespace = splittedDns.join(".");
496 |     }
497 | 
498 |     const functionArgs = [
499 |         listCV(voteStringAsciiArray),
500 |         listCV(volumeUIntArray),
501 |         stringAsciiCV(dns ? dns : ""),
502 |         bufferCV(Buffer.from(domain ? domain : "")),
503 |         bufferCV(Buffer.from(namespace ? namespace : "")),
504 |         listCV(tokenIdsUintArray)
505 |     ];
506 | 
507 |     // Contract function details to be called
508 |     const options = {
509 |         contractAddress: contractAddress,
510 |         contractName: contractName,
511 |         functionName: "cast-my-vote",
512 |         functionArgs: functionArgs,
513 |         postConditions: [],
514 |         network: getNetworkType(),
515 |         appDetails: {
516 |             name: "Ballot",
517 |             icon: window.location.origin + "/images/logo/ballot.png",
518 |         },
519 |         onFinish: callbackFunction,
520 |         onCancel: cancelCallbackFunction
521 |     };
522 | 
523 |     // Call contract function
524 |     await openContractCall(options);
525 | }


--------------------------------------------------------------------------------
/services/utils.js:
--------------------------------------------------------------------------------
  1 | import { Constants } from "../common/constants";
  2 | import { getMyStxAddress, getStacksAPIPrefix, getUserData, userSession } from "../services/auth";
  3 | 
  4 | export async function getRecentBlock() {
  5 |     // Get btc domain for logged in user
  6 |     const response = await fetch(
  7 |         getStacksAPIPrefix() + "/extended/v1/block?limit=1"
  8 |     );
  9 |     const responseObject = await response.json();
 10 | 
 11 |     return responseObject?.results?.[0];
 12 | }
 13 | 
 14 | export function formStacksExplorerUrl(txId, type = 'txid') {
 15 |     return (
 16 |         (Constants.STACKS_MAINNET_FLAG ? "https://explorer.stxer.xyz/" : "https://testnet-explorer.stxer.xyz/") +
 17 |         type +
 18 |         "/" +
 19 |         txId +
 20 |         "?chain=" +
 21 |         (Constants.STACKS_MAINNET_FLAG ? "mainnet" : "testnet")
 22 |     );
 23 | }
 24 | 
 25 | export function convertToDisplayDateFormat(date) {
 26 |     return new Date(date).toLocaleDateString('general', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', hour12: true, minute: 'numeric' })
 27 | }
 28 | 
 29 | // Fetch and store once
 30 | var displayUsername;
 31 | export async function getDomainNamesFromBlockchain() {
 32 |     if (displayUsername) {
 33 |         return displayUsername;
 34 |     }
 35 | 
 36 |     // If user is not signed in, just return
 37 |     if (!userSession.isUserSignedIn()) {
 38 |         return;
 39 |     }
 40 | 
 41 |     // Get btc domain for logged in user
 42 |     const response = await fetch(
 43 |         getStacksAPIPrefix() + "/v1/addresses/stacks/" + getMyStxAddress()
 44 |     );
 45 |     const responseObject = await response.json();
 46 | 
 47 |     // Testnet code
 48 |     if (Constants.STACKS_MAINNET_FLAG == false) {
 49 |         displayUsername = getMyStxAddress().substr(-5) + ".btc";
 50 |         return displayUsername;
 51 |     }
 52 | 
 53 |     // Get btc dns
 54 |     if (responseObject?.names?.length > 0) {
 55 |         const btcDNS = responseObject.names.filter((bns) =>
 56 |             bns.endsWith(".btc")
 57 |         );
 58 | 
 59 |         // Check does BTC dns is available
 60 |         if (btcDNS && btcDNS.length > 0) {
 61 |             // BTC holder
 62 |             displayUsername = btcDNS[0];
 63 | 
 64 |         } else {
 65 |             // Not a BTC holder
 66 |             displayUsername = responseObject.names?.[0];
 67 |         }
 68 |     } else {
 69 |         displayUsername = getUserData().identityAddress;
 70 |     }
 71 | 
 72 |     return displayUsername;
 73 | };
 74 | 
 75 | // Social media share
 76 | /**
 77 |  * Get Twitter post content
 78 |  */
 79 | export function openTwitterUrl(url, title) {
 80 |     if (title && url) {
 81 |         let link = "https://twitter.com/intent/tweet?text=" + title + "&url=" + url;
 82 |         window.open(link, "_blank");
 83 |     }
 84 | }
 85 | 
 86 | /**
 87 |  * Get Facebook post content
 88 |  */
 89 | export function openFacebookUrl(url, title) {
 90 |     if (url) {
 91 |         let link = "https://www.facebook.com/sharer.php?u=" + url;
 92 |         window.open(link, "_blank");
 93 |     }
 94 | }
 95 | 
 96 | /**
 97 |  * Get Linkedin post content
 98 |  */
 99 | export function openLinkedinUrl(url, title) {
100 |     if (url) {
101 |         let link = "https://www.linkedin.com/sharing/share-offsite/?url=" + url;
102 | 
103 |         // Adding extra text
104 |         if (title) {
105 |             link = link + "&summary=" + title;
106 |         }
107 | 
108 |         window.open(link, "_blank");
109 |     }
110 | }
111 | 
112 | /**
113 |  * Get Whatsapp post content
114 |  */
115 | export function openWhatsappUrl(url, title) {
116 |     if (url) {
117 |         let link = "https://web.whatsapp.com/send?text=" + url;
118 |         window.open(link, "_blank");
119 |     }
120 | }
121 | 
122 | /**
123 |  * Get Telegram post content
124 |  */
125 | export function openTelegramUrl(url, title) {
126 |     if (url) {
127 |         let link = "https://telegram.me/share/url?url=" + url;
128 |         window.open(link, "_blank");
129 |     }
130 | }
131 | 
132 | /**
133 |  * Get Facebook post content
134 |  */
135 | export function openRedditUrl(url, title) {
136 |     if (url) {
137 |         let link = "https://www.reddit.com/submit?url=" + url;
138 |         window.open(link, "_blank");
139 |     }
140 | }
141 | // Social media share
142 | 
143 | export function parseJWTtoken(token) {
144 |     // Validation
145 |     if (!token) {
146 |         return;
147 |     }
148 | 
149 |     var base64Url = token.split('.')[1];
150 |     var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
151 |     var jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
152 |         return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
153 |     }).join(''));
154 | 
155 |     return JSON.parse(jsonPayload);
156 | }
157 | 
158 | export function isValidUtf8(str) {
159 |     try {
160 |         // Encode the string as URI component and then decode it.
161 |         decodeURIComponent(encodeURIComponent(str));
162 |         return true;
163 |     } catch (e) {
164 |         // If there's a decoding error, the string is not valid UTF-8
165 |         return false;
166 |     }
167 | }
168 | 
169 | export function isValidAscii(str) {
170 |     return /^[\x20-\x7E]*$/.test(str);
171 | }
172 | 
173 | export function formatUtcDateTime(dateTimeStr) {
174 |     // Parse the date-time string as a UTC date
175 |     const date = new Date(dateTimeStr);
176 | 
177 |     // Extract and format the components of the date
178 |     const day = date.getUTCDate();
179 |     const month = date.toLocaleString('en-US', { month: 'short', timeZone: 'UTC' });
180 |     const year = date.getUTCFullYear();
181 |     const hours = date.getUTCHours();
182 |     const minutes = date.getUTCMinutes();
183 | 
184 |     // Format the time in 12-hour format with AM/PM
185 |     const hourFormatted = hours % 12 || 12; // Convert 0 (midnight) to 12
186 |     const minuteFormatted = minutes < 10 ? '0' + minutes : minutes;
187 |     const amPm = hours < 12 ? 'am' : 'pm';
188 | 
189 |     // Construct the formatted string
190 |     return `${day} ${month} ${year}, ${hourFormatted}:${minuteFormatted} ${amPm}`;
191 | }
192 | 
193 | export const calculateDateByBlockHeight = (currentBlockHeight, targetBlockHeight) => {
194 |     if (targetBlockHeight && currentBlockHeight && targetBlockHeight > 0 && currentBlockHeight > 0 &&
195 |         targetBlockHeight > currentBlockHeight) {
196 |         const diff = targetBlockHeight - currentBlockHeight;
197 |         const minutes = diff * 10;
198 | 
199 |         return new Date(new Date().getTime() + (minutes * 60 * 1000)).toISOString();
200 |     }
201 | }


--------------------------------------------------------------------------------
/styles/Accordion.module.css:
--------------------------------------------------------------------------------
 1 | .items {
 2 |   cursor: pointer;
 3 | }
 4 | 
 5 | .faq_question {
 6 |   padding: 16px 0px;
 7 |   display: flex;
 8 |   justify-content: space-between;
 9 |   align-items: center;
10 |   font-size: 20px;
11 |   cursor: pointer;
12 | }
13 | 
14 | .faq_answer {
15 |   max-height: 0;
16 |   overflow: hidden;
17 |   opacity: 0;
18 |   transition: all 0.3s cubic-bezier(0, 1, 0, 1);
19 | }
20 | 
21 | .faq_answer_show {
22 |   height: 100%;
23 |   max-height: 9999px;
24 |   opacity: 1;
25 |   transition: all 0.3s cubic-bezier(1, 0, 1, 0);
26 | }
27 | 
28 | .faq_answer_content {
29 |   font-size: 18px;
30 |   opacity: 0.9;
31 |   padding-bottom: 16px;
32 | }
33 | .faq_answer_content a {
34 |   color: black;
35 | }
36 | 
37 | /* Extra small devices (portrait phones, less than 576px) */
38 | @media (max-width: 575.98px) {
39 |   .accordion {
40 |     margin-bottom: 60px;
41 |     margin-top: 60px;
42 |   }
43 | 
44 |   .faq_question {
45 |     font-size: 18px;
46 |   }
47 | 
48 |   .faq_answer_content {
49 |     font-size: 16px;
50 |   }
51 | }
52 | 
53 | /* Small devices (landscape phones, 576px and up) */
54 | @media (min-width: 576px) and (max-width: 767.98px) {
55 |   .accordion {
56 |     margin-bottom: 60px;
57 |     margin-top: 60px;
58 |   }
59 | 
60 |   .faq_question {
61 |     font-size: 18px;
62 |   }
63 | 
64 |   .faq_answer_content {
65 |     font-size: 16px;
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/styles/Builder.module.css:
--------------------------------------------------------------------------------
 1 | .builder_container {
 2 |     flex: 1;
 3 |     display: flex;
 4 |     flex-direction: row;
 5 |     flex-wrap: nowrap;
 6 |     z-index: 0;
 7 |     column-gap: 30px;
 8 | }
 9 | .builder_left {
10 |     flex-grow: 1;
11 |     width: 100%;
12 | }
13 | .builder_right {
14 |     flex-shrink: 0;
15 |     position: relative;
16 | 
17 |     min-width: 321px;
18 | }
19 | 
20 | .builder_right_section {
21 |     background-color: rgba(236, 239, 241, 0.3);
22 |     padding: 20px;
23 | }
24 | 
25 | .builder_option_box {
26 |     display: flex;
27 |     flex-direction: column;
28 |     align-items: center;
29 |     row-gap: 10px;
30 | }
31 | 
32 | .builder_option_section {
33 |     display: flex;
34 |     align-items: center;
35 |     background-color: rgba(236, 239, 241, 0.6);
36 |     border-radius: 0.375rem;
37 |     position: relative;
38 |     width: 100%;
39 | }
40 | .builder_option_delete {
41 |     position: absolute;
42 |     right: 0;
43 |     margin-left: "10px";
44 |     border: none !important;
45 | }
46 | 
47 | /* Extra small devices (portrait phones, less than 576px) */
48 | @media (max-width: 575.98px) {
49 |     .builder_container {
50 |         flex-direction: column;
51 |     }
52 |     .builder_right {
53 |         min-width: initial;
54 |         width: 100%;
55 |         height: auto;
56 |     }
57 | }
58 | 
59 | /* Small devices (landscape phones, 576px and up) */
60 | @media (min-width: 576px) and (max-width: 767.98px) {
61 |     .builder_container {
62 |         flex-direction: column;
63 |     }
64 |     .builder_right {
65 |         min-width: initial;
66 |         width: 100%;
67 |         height: auto;
68 |     }
69 | }
70 | 
71 | /* Medium devices (tablets, 768px and up) */
72 | @media (min-width: 768px) and (max-width: 991.98px) {
73 |     .builder_container {
74 |         flex-direction: column;
75 |     }
76 |     .builder_right {
77 |         min-width: initial;
78 |         width: 100%;
79 |         height: auto;
80 |     }
81 | }
82 | 
83 | /* Large devices (desktops, 992px and up) */
84 | @media (min-width: 992px) and (max-width: 1199.98px) {
85 | }
86 | 
87 | /* Extra large devices (large desktops, 1200px and up) */
88 | @media (min-width: 1200px) {
89 | }
90 | 


--------------------------------------------------------------------------------
/styles/ChoosePollsPopup.module.css:
--------------------------------------------------------------------------------
 1 | /* Modal */
 2 | .summary_modal_header_box {
 3 |   position: relative;
 4 |   padding: 20px;
 5 |   font-size: 18px;
 6 |   font-weight: 500;
 7 | }
 8 | .summary_modal_close_icon_btn_box {
 9 |   position: absolute;
10 |   right: 20px;
11 |   top: 20px;
12 |   width: 24px;
13 |   height: 24px;
14 |   border-radius: 50%;
15 |   border: none;
16 |   display: flex;
17 |   align-items: center;
18 |   justify-content: center;
19 |   transition: 0.3s all ease;
20 | }
21 | .summary_modal_body_box {
22 |   padding: 0 20px 20px 20px;
23 |   max-height: 75vh;
24 |   overflow: auto;
25 | }
26 | 
27 | .all_polls_list_outline_box {
28 |   display: flex;
29 |   align-items: flex-start;
30 |   flex-direction: column;
31 |   row-gap: 10px;
32 | }
33 | .all_polls_list_box {  
34 |   border-radius: 6px;
35 |   padding: 16px;
36 |   cursor: pointer;
37 |   background-color: rgba(236, 239, 241, 0.3);
38 |   width: 100%;
39 |   transition: 0.2s ease all;
40 | }
41 | .all_polls_list_box:hover {
42 |   background-color: rgba(236, 239, 241, 0.6);
43 | }
44 | .all_polls_status_box_active {
45 |   padding: 1px 8px;
46 |   background-color: #21b66f;
47 |   font-size: 12px;
48 |   color: white;
49 |   border-radius: 24px;
50 | }
51 | .all_polls_status_box_draft {
52 |   padding: 1px 8px;
53 |   background-color: #fca43e;
54 |   font-size: 12px;
55 |   color: white;
56 |   border-radius: 24px;
57 | }
58 | .all_polls_status_box_closed {
59 |   padding: 1px 8px;
60 |   background-color: #fa4949;
61 |   font-size: 12px;
62 |   color: white;
63 |   border-radius: 24px;
64 | }
65 | .all_polls_description {
66 |   font-size: 15px;
67 |   color: rgba(0, 0, 0, 0.8);
68 |   line-height: 1.6;
69 | }
70 | 


--------------------------------------------------------------------------------
/styles/Dashboard.module.css:
--------------------------------------------------------------------------------
 1 | .dashboard_container {
 2 |     padding-top: 10px;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 | }
 7 | 
 8 | /* Modal */
 9 | .dashboard_modal_header_box {
10 |     position: relative;
11 |     padding: 20px;
12 |     font-size: 18px;
13 |     font-weight: 500;
14 | }
15 | 
16 | .dashboard_modal_close_icon_btn_box {
17 |     position: absolute;
18 |     right: 20px;
19 |     top: 20px;
20 |     width: 24px;
21 |     height: 24px;
22 |     border-radius: 50%;
23 |     border: none;
24 |     display: flex;
25 |     align-items: center;
26 |     justify-content: center;
27 |     transition: 0.3s all ease;
28 | }
29 | 
30 | .dashboard_modal_body_box {
31 |     padding: 14px 20px;
32 | }
33 | 
34 | .dashboard_transactions_modal_body_box {
35 |     max-height: 360px;
36 |     overflow: auto;
37 | }
38 | 
39 | /* My votes */
40 | .dashboard_transactions_modal_body_box {
41 |     max-height: 360px;
42 |     overflow: auto;
43 | }
44 | 
45 | .share_dropdown {
46 |     padding: 0px;
47 |     background: none;
48 |     border: 0px;
49 | }
50 | 
51 | .share_dropdown::after {
52 |     display: none;
53 | }
54 | 
55 | /* Dashboard all polls */
56 | .all_polls_list_outline_box {
57 |     display: flex;
58 |     align-items: flex-start;
59 |     flex-direction: column;
60 |     row-gap: 10px;
61 | }
62 | .all_polls_list_box {
63 |     border-radius: 6px;
64 |     padding: 16px;
65 |     cursor: pointer;
66 |     background-color: rgba(236, 239, 241, 0.3);
67 |     width: 100%;
68 |     transition: 0.2s ease all;
69 | }
70 | .all_polls_list_box:hover {
71 |     background-color: rgba(236, 239, 241, 0.6);
72 | }
73 | .all_polls_status_box_active {
74 |     padding: 1px 8px;
75 |     background-color: #21b66f;
76 |     font-size: 12px;
77 |     color: white;
78 |     border-radius: 24px;
79 | }
80 | .all_polls_status_box_draft {
81 |     padding: 1px 8px;
82 |     background-color: #fca43e;
83 |     font-size: 12px;
84 |     color: white;
85 |     border-radius: 24px;
86 | }
87 | .all_polls_status_box_closed {
88 |     padding: 1px 8px;
89 |     background-color: #fa4949;
90 |     font-size: 12px;
91 |     color: white;
92 |     border-radius: 24px;
93 | }
94 | .all_polls_description {
95 |     font-size: 15px;
96 |     color: rgba(0, 0, 0, 0.8);
97 |     line-height: 1.6;
98 | }
99 | 


--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
  1 | .home_section {
  2 |     margin-bottom: 100px;
  3 | }
  4 | 
  5 | .header_section {
  6 |     background-color: #ECEFF1;
  7 |     padding: 30px;
  8 | }
  9 | 
 10 | .hero_section_left_box {
 11 |     display: flex;
 12 |     align-items: center;
 13 |     height: 100%;
 14 |     padding-left: 50px;
 15 | }
 16 | 
 17 | .how_it_works_section {
 18 |     background-color: #ECEFF1;
 19 |     padding: 50px;
 20 | }
 21 | 
 22 | .how_it_works_step_box {
 23 |     background-color: white;
 24 |     padding: 20px 20px 50px 20px;
 25 |     position: relative;
 26 |     z-index: 1;
 27 | }
 28 | 
 29 | .how_it_works_step_image {
 30 |     margin-bottom: 20px
 31 | }
 32 | 
 33 | .how_it_works_step_title {
 34 |     font-size: 24px;
 35 | }
 36 | 
 37 | .how_it_works_step_number {
 38 |     position: absolute;
 39 |     bottom: 20px;
 40 |     right: 20px;
 41 |     z-index: -1;
 42 | }
 43 | 
 44 | .social_icon {
 45 |     background-color: rgb(236, 239, 241);
 46 |     height: 40px;
 47 |     width: 40px;
 48 |     border-radius: 20px;
 49 |     border: 0px;
 50 |     display: flex;
 51 |     justify-content: center;
 52 |     align-items: center;
 53 | }
 54 | 
 55 | /* Extra small devices (portrait phones, less than 576px) */
 56 | @media (max-width: 575.98px) {
 57 |     .home_section {
 58 |         margin-bottom: 60px;
 59 |     }
 60 | 
 61 |     .header_section {
 62 |         text-align: center;
 63 |         padding: 20px;
 64 |     }
 65 | 
 66 |     .hero_section_left_box {
 67 |         padding-left: 0px;
 68 |         justify-content: center;
 69 |     }
 70 | 
 71 |     .how_it_works_section {
 72 |         padding: 20px;
 73 |     }
 74 | }
 75 | 
 76 | /* Small devices (landscape phones, 576px and up) */
 77 | @media (min-width: 576px) and (max-width: 767.98px) {
 78 |     .home_section {
 79 |         margin-bottom: 60px;
 80 |     }
 81 | 
 82 |     .header_section {
 83 |         text-align: center;
 84 |         padding: 20px;
 85 |     }
 86 | 
 87 |     .hero_section_left_box {
 88 |         padding-left: 0px;
 89 |         justify-content: center;
 90 |     }
 91 | 
 92 |     .how_it_works_section {
 93 |         padding: 20px;
 94 |     }
 95 | }
 96 | 
 97 | /* Medium devices (tablets, 768px and up) */
 98 | @media (min-width: 768px) and (max-width: 991.98px) {}
 99 | 
100 | /* Large devices (desktops, 992px and up) */
101 | @media (min-width: 992px) and (max-width: 1199.98px) {}
102 | 
103 | /* Extra large devices (large desktops, 1200px and up) */
104 | @media (min-width: 1200px) {}


--------------------------------------------------------------------------------
/styles/Poll.module.css:
--------------------------------------------------------------------------------
1 | .poll_container {
2 |     padding-top: 10px;
3 | }
4 | 


--------------------------------------------------------------------------------
/styles/QRCodePopup.module.css:
--------------------------------------------------------------------------------
 1 | /* Modal */
 2 | .dashboard_modal_header_box {
 3 |   position: relative;
 4 |   padding: 20px;
 5 |   font-size: 18px;
 6 |   font-weight: 500;
 7 | }
 8 | .dashboard_modal_close_icon_btn_box {
 9 |   position: absolute;
10 |   right: 20px;
11 |   top: 20px;
12 |   width: 24px;
13 |   height: 24px;
14 |   border-radius: 50%;
15 |   border: none;
16 |   display: flex;
17 |   align-items: center;
18 |   justify-content: center;  
19 |   transition: 0.3s all ease;
20 | }
21 | .dashboard_modal_body_box {
22 |   padding: 14px 20px;
23 | }
24 | .dashboard_transactions_modal_body_box {
25 |   max-height: 360px;
26 |   overflow: auto;
27 | }
28 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
  1 | @import url("bootstrap/dist/css/bootstrap.min.css");
  2 | 
  3 | .flex_align_item_center {
  4 |     display: flex;
  5 |     align-items: center;
  6 |     justify-content: center;
  7 | }
  8 | 
  9 | .btn_big {
 10 |     padding-left: 2rem;
 11 |     padding-right: 2rem;
 12 | }
 13 | 
 14 | .ballot_link {
 15 |     color: black;
 16 |     text-decoration: underline;
 17 |     fill: black;
 18 | }
 19 | 
 20 | .ballot_link:hover {
 21 |     color: black;
 22 | }
 23 | 
 24 | .dropdown-menu {
 25 |     border-radius: 4px;
 26 |     min-width: 184px;
 27 | }
 28 | .dropdown-toggle {
 29 |     padding: 6px 0px !important;
 30 |     background-color: transparent !important;
 31 |     border: none !important;
 32 |     box-shadow: none !important;
 33 |     color: rgba(0, 0, 0, 0.7);
 34 |     display: flex;
 35 |     align-items: center;
 36 |     column-gap: 6px;
 37 | }
 38 | .dropdown-toggle:hover {
 39 |     color: rgba(0, 0, 0, 1);
 40 | }
 41 | .dropdown-toggle:focus {
 42 |     color: rgba(0, 0, 0, 1);
 43 | }
 44 | .dropdown-toggle::after {
 45 |     content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
 46 |     width: 12px;
 47 |     margin-top: 3px;
 48 |     margin-left: 0px;
 49 |     border: none;
 50 | }
 51 | 
 52 | /* Secondary button */
 53 | .action_secondary_btn {
 54 |     padding: 6px 16px !important;
 55 |     border: 1px solid #000000 !important;
 56 |     background-color: transparent;
 57 |     color: black !important;
 58 |     font-size: 16px;
 59 |     display: flex;
 60 |     align-items: center;
 61 |     justify-content: center;
 62 |     column-gap: 6px;
 63 |     box-shadow: none;
 64 | }
 65 | .action_secondary_btn:hover {
 66 |     background-color: rgba(0, 0, 0, 0.04);
 67 | }
 68 | .action_secondary_btn:focus {
 69 |     color: black;
 70 |     background-color: rgba(0, 0, 0, 0.04);
 71 |     box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
 72 | }
 73 | .action_secondary_btn:active {
 74 |     color: black;
 75 |     background-color: rgba(0, 0, 0, 0.04);
 76 |     box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
 77 | }
 78 | .action_secondary_btn:disabled {
 79 |     box-shadow: none;
 80 |     background-color: transparent;
 81 | }
 82 | 
 83 | /* dashed button */
 84 | .action_dashed_btn {
 85 |     padding: 6px 16px !important;
 86 |     border: 1px dashed rgba(0, 0, 0, 0.5) !important;
 87 |     background-color: transparent;
 88 |     color: black !important;
 89 |     font-size: 16px;
 90 |     display: flex;
 91 |     align-items: center;
 92 |     justify-content: center;
 93 |     column-gap: 6px;
 94 |     box-shadow: none;
 95 | }
 96 | .action_dashed_btn:hover {
 97 |     background-color: rgba(0, 0, 0, 0.04);
 98 | }
 99 | .action_dashed_btn:focus {
100 |     color: black;
101 |     background-color: rgba(0, 0, 0, 0.04);
102 |     box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
103 | }
104 | .action_dashed_btn:active {
105 |     color: black;
106 |     background-color: rgba(0, 0, 0, 0.04);
107 |     box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
108 | }
109 | .action_dashed_btn:disabled {
110 |     box-shadow: none;
111 |     background-color: transparent;
112 | }
113 | 
114 | /* Links */
115 | .ballot_links {
116 |     color: rgba(0, 0, 0, 0.7);
117 | }
118 | .ballot_links:hover {
119 |     color: rgba(0, 0, 0, 0.9);
120 | }
121 | 
122 | /* Labels */
123 | .ballot_labels {
124 |     color: rgba(0, 0, 0, 0.6);
125 |     font-size: 15px;
126 | }
127 | 
128 | /* Input box */
129 | .ballot_input {
130 |     background-color: rgba(236, 239, 241, 0.6);
131 |     border: transparent;
132 | }
133 | .ballot_input:focus {
134 |     background-color: rgba(236, 239, 241, 0.6);
135 |     box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
136 | }
137 | 
138 | /* Text truncate */
139 | .text_truncate_2 {
140 |     -webkit-line-clamp: 2;
141 |     overflow: hidden;
142 |     text-overflow: ellipsis;
143 |     display: -webkit-box;
144 |     -webkit-box-orient: vertical;
145 | }
146 | 
147 | .form-check-input:checked {
148 |     background-color: #000;
149 |     border-color: #000;
150 | }
151 | .form-check-input:focus {
152 |     border-color: #000;
153 |     outline: 0;
154 |     box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 25%);
155 | }
156 | 
157 | @media (min-width: 1400px) {
158 |     .ballot_container {
159 |         max-width: 1140px;
160 |     }
161 | }
162 | 


--------------------------------------------------------------------------------