= async (e) => {
66 | e.preventDefault()
67 | // Abort if form isn't valid
68 | if (!e.currentTarget.reportValidity()) return
69 | if (!elements) return
70 | setPayment({ status: 'processing' })
71 |
72 | // Create a PaymentIntent with the specified amount.
73 | const response = await fetchPostJSON('/api/payment_intents', {
74 | amount: input.customDonation,
75 | payment_intent_id: paymentIntent?.id,
76 | })
77 | setPayment(response)
78 |
79 | if (response.statusCode === 500) {
80 | setPayment({ status: 'error' })
81 | setErrorMessage(response.message)
82 | return
83 | }
84 |
85 | // Use your card Element with other Stripe.js APIs
86 | const { error } = await stripe!.confirmPayment({
87 | elements,
88 | confirmParams: {
89 | return_url: 'http://localhost:3000/donate-with-elements',
90 | payment_method_data: {
91 | billing_details: {
92 | name: input.cardholderName,
93 | },
94 | },
95 | },
96 | })
97 |
98 | if (error) {
99 | setPayment({ status: 'error' })
100 | setErrorMessage(error.message ?? 'An unknown error occurred')
101 | } else if (paymentIntent) {
102 | setPayment(paymentIntent)
103 | }
104 | }
105 |
106 | return (
107 | <>
108 |
151 |
8 |
11 | );
12 | }
13 |
14 | export default Floor;
15 |
--------------------------------------------------------------------------------
/components/Layout.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode,useContext } from 'react'
2 | import Head from 'next/head'
3 | import Link from 'next/link'
4 | import { library } from "@fortawesome/fontawesome-svg-core";
5 | import Canvas3 from './Canvas3'
6 | import { fab,faTwitter,faDiscord,faGithub } from '@fortawesome/free-brands-svg-icons'
7 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
8 | // import { } from '@fortawesome/fontawesome-free-solid'
9 | import { ConnectWallet } from '../components/ConnectWallet';
10 | import { AddressContext } from "../contexts/Address"
11 |
12 |
13 |
14 | library.add(faTwitter,faDiscord,faGithub);
15 | type Props = {
16 | children: ReactNode
17 | title?: string
18 | }
19 |
20 | const Layout = ({
21 | children,
22 | title = 'ArchiDAO',
23 | }: Props) => (
24 | <>
25 |
26 |
27 |
28 | {title}
29 |
45 |
62 | {children}
63 |
6 |
10 | );
11 | }
12 |
13 | export default LightBulb;
14 |
--------------------------------------------------------------------------------
/components/Modal/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./modal.css";
3 | import PropTypes from "prop-types";
4 |
5 | export default class Modal extends React.Component {
6 | onClose = e => {
7 | this.props.onClose && this.props.onClose(e);
8 | };
9 | render() {
10 | if (!this.props.show) {
11 | return null;
12 | }
13 | return (
14 |
15 |
Modal Window
16 |
{this.props.children}
17 |
18 |
19 | close
20 |
21 |
22 |
{formattedContent}
10 | }
11 |
12 | export default PrintObject
13 |
--------------------------------------------------------------------------------
/components/Products.tsx:
--------------------------------------------------------------------------------
1 | import products from '../data/products'
2 | import { formatCurrencyString } from 'use-shopping-cart'
3 | import { useShoppingCart } from 'use-shopping-cart/react'
4 | import { CWload } from '../components/CWload';
5 | // import {FontAwesomeIcon} from fortawesome;
6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
7 | // import { library } from '@fortawesome/fontawesome-svg-core'
8 | // import { fab } from '@fortawesome/free-brands-svg-icons'
9 | // import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'
10 | // library.add(fab, faCheckSquare, faCoffee)
11 | // // this babel macros brings in a module called moduled and next doesnt like that (which makes sense because using a built in name is a bad idea)
12 | // import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import.macro'
13 | import React, { useState, useEffect, useCallback } from 'react'
14 |
15 |
16 | const Products = () => {
17 | const { addItem, removeItem, incrementItem, decrementItem,cartCount } = useShoppingCart()
18 | const [minusOn, setMinus] = useState(false)
19 | const [plusOn, setPlus] = useState(true)
20 | const address = CWload('Products.tsx')
21 | // try{decrementItem(product.id)}
22 | const minusAction = (product) => {
23 |
24 | if (cartCount > 1) {
25 | decrementItem(product.id)
26 | } else { setMinus(false)}
27 | checkButtons(cartCount)
28 |
29 | }
30 |
31 | const plusAction = (product) => {
32 | console.log(product)
33 | if (cartCount < 10) {
34 | addItem(product)
35 | } else { setPlus(false) }
36 | checkButtons(cartCount)
37 | }
38 |
39 | const checkButtons = (count) => {
40 | console.log(count)
41 | if (count > 1 ) {setMinus(true)}
42 | if (count < 10 ) {setPlus(true)}
43 | }
44 |
45 | if (!address) {return (
46 |
47 | {products.map((product) => (
48 |
49 |
50 |
{product.name}
51 |
52 | {formatCurrencyString({
53 | value: product.price,
54 | currency: product.currency,
55 | })}
56 |
57 |
)
60 | } else{
61 | return (
62 |
63 | {products.map((product) => (
64 |
65 |
66 |
{product.name}
67 |
68 | {formatCurrencyString({
69 | value: product.price,
70 | currency: product.currency,
71 | })}
72 |
73 |
minusAction(product)}
76 | disabled={!address || !(cartCount > 1)}
77 | >
78 | -
79 |
80 |
{
83 | console.log(product)
84 | addItem(product)
85 | }}
86 | disabled={!address || !(cartCount < 10) }
87 | >
88 | +
89 |
90 |
93 | )}
94 | }
95 |
96 | export default Products
97 |
--------------------------------------------------------------------------------
/components/StripeTestCards.tsx:
--------------------------------------------------------------------------------
1 | const StripeTestCards = () => {
2 | return (
3 |
4 | Use any of the{' '}
5 |
10 | Stripe test cards
11 | {' '}
12 | for this demo, e.g.{' '}
13 |
14 | 4242
16 | .
17 |
11 | { children }
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/contexts/Address/reducer.js:
--------------------------------------------------------------------------------
1 | export const reducer = (state, action) => {
2 | switch (action.type) {
3 | case "toggle_button":
4 | return {
5 | ...state,
6 | active: !state.active
7 | }
8 |
9 | default:
10 | return state
11 | }
12 | }
13 |
14 | export const initialState = {
15 | active: 'init',
16 | address: 'init',
17 | }
18 |
--------------------------------------------------------------------------------
/contexts/web3/index.js:
--------------------------------------------------------------------------------
1 | import {createContext,useState} from "react"
2 |
3 | export const Web3Context = createContext()
4 |
5 | export function Web3Provider({ children }){
6 | const [addressx , setAddressx] = useState({address: '',active: false, transaction: ''})
7 | const setAddress = (address) => {setAddressx({address:address})}
8 | return (
9 |
10 | { children }
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/data/products.ts:
--------------------------------------------------------------------------------
1 | const product = [
2 | {
3 | name: 'ArchiDAO NFT',
4 | description: 'ArchiDAO Wearable',
5 | id: 'archida_nft_0000',
6 | price: 9000,
7 | image:
8 | 'https://ipfs.io/ipfs/QmPYAPNFB373TrM9TJN59RDuZgSpUDW9qvqBktaSS4vDEH?filename=nft_.png',
9 | attribution: 'Photo by Archidao.io',
10 | currency: 'USD',
11 | },
12 | ]
13 | export default product
14 |
--------------------------------------------------------------------------------
/lib/firebase.js:
--------------------------------------------------------------------------------
1 | import * as admin from 'firebase-admin';
2 |
3 | if (!admin.apps.length) {
4 | admin.initializeApp({
5 | credential: admin.credential.cert({
6 | projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
7 | clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
8 | privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n')
9 | })
10 | });
11 | }
12 |
13 | const db = admin.firestore();
14 |
15 | export { db };
16 |
--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
8 | 404 | NOTHING HERE
10 |
11 | )
12 | }
13 |
14 | export default IndexPage
15 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import { AppProps } from 'next/app'
2 | import { ThirdwebProvider } from '@thirdweb-dev/react';
3 | import { AddressProvider } from "../contexts/Address"
4 | import { Web3Provider } from "../contexts/web3"
5 |
6 | import ReactDOM from 'react-dom'
7 | import { library } from '@fortawesome/fontawesome-svg-core'
8 | import { fab } from '@fortawesome/free-brands-svg-icons'
9 | import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'
10 |
11 | library.add(fab, faCheckSquare, faCoffee)
12 |
13 |
14 |
15 | import '../styles.css'
16 |
17 | function MyApp({ Component, pageProps }: AppProps) {
18 | const desiredChainId = 80001;
19 | /* Make sure that your app is wrazpped with these contexts.
20 | * If you're using React, you'll have to replace the Component setup with {children}
21 | */
22 | return (
23 | <>
24 |
25 |
26 |
27 | {/* @ts-ignore */}
28 |
30 |
31 |
32 |
33 | );
34 | }
35 |
36 | export default MyApp
37 |
--------------------------------------------------------------------------------
/pages/_app.xjsx:
--------------------------------------------------------------------------------
1 | import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";
2 |
3 | const MyApp = () => {
4 | return (
5 |
6 |
8 | );
9 | };
10 |
11 | export default MyApp
12 |
--------------------------------------------------------------------------------
/pages/admin/edit/[id].js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useRouter } from 'next/router'
3 | import dashify from 'dashify';
4 | import axios from 'axios';
5 |
6 | const EditEntry = () => {
7 | const router = useRouter()
8 | const [content, setContent] = useState({
9 | title: undefined,
10 | body: undefined,
11 | })
12 |
13 | useEffect(async () => {
14 | const { id } = router.query;
15 | if (id) {
16 | const res = await axios.get(`/api/entry/${id}`);
17 | const { title, body } = res.data;
18 | setContent({
19 | title,
20 | body
21 | })
22 | }
23 | }, [router])
24 |
25 | const onChange = (e) => {
26 | const { value, name } = e.target;
27 | setContent(prevState => ({ ...prevState, [name]: value }));
28 | }
29 |
30 | const onSubmit = async (e) => {
31 | const { id } = router.query
32 | const { title, body } = content;
33 | console.log(id, title, body);
34 | await axios.put(`/api/entry/${id}`, {
35 | slug: dashify(title),
36 | title,
37 | body,
38 | });
39 | }
40 |
41 | const onDelete = async () => {
42 | const { id } = router.query;
43 | await axios.delete(`/api/entry/${id}`);
44 | router.back();
45 | }
46 |
47 | return (
48 |
49 | Title
50 | Body
57 |
62 |
66 | Submit
67 |
68 |
72 | Delete
73 |
74 |
75 | );
76 | };
77 |
78 | export default EditEntry;
79 |
--------------------------------------------------------------------------------
/pages/admin/edit/index.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import Link from 'next/link'
3 | import axios from 'axios';
4 |
5 | const List = () => {
6 | const [entries, setEntries] = useState([]);
7 | useEffect(async () => {
8 | const res = await axios.get('/api/entries');
9 | setEntries(res.data.entriesData);
10 | }, []);
11 |
12 | return (
13 |
14 |
Entries
15 | {entries.map(entry => (
16 |
22 | ))}
23 |
20 | Title
21 | Body
28 |
33 | POST
34 |
35 | );
36 | };
37 |
38 | export default Post;
39 |
--------------------------------------------------------------------------------
/pages/api/checkout_sessions/[id].ts:
--------------------------------------------------------------------------------
1 | import { NextApiRequest, NextApiResponse } from 'next'
2 |
3 | import Stripe from 'stripe'
4 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
5 | // https://github.com/stripe/stripe-node#configuration
6 | apiVersion: '2020-08-27',
7 | })
8 |
9 | export default async function handler(
10 | req: NextApiRequest,
11 | res: NextApiResponse
12 | ) {
13 | const id: string = req.query.id as string
14 | try {
15 | if (!id.startsWith('cs_')) {
16 | throw Error('Incorrect CheckoutSession ID.')
17 | }
18 | const checkout_session: Stripe.Checkout.Session =
19 | await stripe.checkout.sessions.retrieve(id, {
20 | expand: ['payment_intent'],
21 | })
22 |
23 | res.status(200).json(checkout_session)
24 | } catch (err) {
25 | const errorMessage =
26 | err instanceof Error ? err.message : 'Internal server error'
27 | res.status(500).json({ statusCode: 500, message: errorMessage })
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/pages/api/checkout_sessions/cart.ts:
--------------------------------------------------------------------------------
1 | import { NextApiRequest, NextApiResponse } from 'next'
2 |
3 | /*
4 | * Product data can be loaded from anywhere. In this case, we’re loading it from
5 | * a local JSON file, but this could also come from an async call to your
6 | * inventory management service, a database query, or some other API call.
7 | *
8 | * The important thing is that the product info is loaded from somewhere trusted
9 | * so you know the pricing information is accurate.
10 | */
11 | import { validateCartItems } from 'use-shopping-cart/utilities/serverless'
12 | import inventory from '../../../data/products'
13 |
14 | import Stripe from 'stripe'
15 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
16 | // https://github.com/stripe/stripe-node#configuration
17 | apiVersion: '2020-08-27',
18 | })
19 |
20 | export default async function handler(
21 | req: NextApiRequest,
22 | res: NextApiResponse
23 | ) {
24 | if (req.method === 'POST') {
25 | try {
26 | // Validate the cart details that were sent from the client.
27 | const line_items = validateCartItems(inventory as any, req.body)
28 | const hasSubscription = line_items.find((item) => {
29 | return !!item.price_data.recurring
30 | })
31 | // Create Checkout Sessions from body params.
32 | const params: Stripe.Checkout.SessionCreateParams = {
33 | submit_type: 'pay',
34 | payment_method_types: ['card'],
35 | billing_address_collection: 'auto',
36 | line_items,
37 | success_url: `${req.headers.origin}/thanks`,
38 | cancel_url: `${req.headers.origin}/shop`,
39 | mode: hasSubscription ? 'subscription' : 'payment',
40 | }
41 |
42 | // checkoutSession should hold the transaction ID after success!!!
43 | const checkoutSession: Stripe.Checkout.Session =
44 | await stripe.checkout.sessions.create(params)
45 |
46 | res.status(200).json(checkoutSession)
47 | // add the ID somewhere now!
48 | // perhaps to Redis?
49 | console.log(checkoutSession.id)
50 | } catch (err) {
51 | console.log(err)
52 | const errorMessage =
53 | err instanceof Error ? err.message : 'Internal server error'
54 | res.status(500).json({ statusCode: 500, message: errorMessage })
55 | }
56 | } else {
57 | res.setHeader('Allow', 'POST')
58 | res.status(405).end('Method Not Allowed')
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/pages/api/checkout_sessions/index.ts:
--------------------------------------------------------------------------------
1 | import { NextApiRequest, NextApiResponse } from 'next'
2 |
3 | import { CURRENCY, MIN_AMOUNT, MAX_AMOUNT } from '../../../config'
4 | import { formatAmountForStripe } from '../../../utils/stripe-helpers'
5 |
6 | import Stripe from 'stripe'
7 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
8 | // https://github.com/stripe/stripe-node#configuration
9 | apiVersion: '2020-08-27',
10 | })
11 |
12 | export default async function handler(
13 | req: NextApiRequest,
14 | res: NextApiResponse
15 | ) {
16 | if (req.method === 'POST') {
17 | const amount: number = req.body.amount
18 | try {
19 | // Validate the amount that was passed from the client.
20 | if (!(amount >= MIN_AMOUNT && amount <= MAX_AMOUNT)) {
21 | throw new Error('Invalid amount.')
22 | }
23 | // Create Checkout Sessions from body params.
24 | const params: Stripe.Checkout.SessionCreateParams = {
25 | submit_type: 'donate',
26 | payment_method_types: ['card'],
27 | line_items: [
28 | {
29 | name: 'Custom amount donation',
30 | amount: formatAmountForStripe(amount, CURRENCY),
31 | currency: CURRENCY,
32 | quantity: 1,
33 | },
34 | ],
35 | success_url: `${req.headers.origin}/result?session_id={CHECKOUT_SESSION_ID}`,
36 | cancel_url: `${req.headers.origin}/donate-with-checkout`,
37 | }
38 | const checkoutSession: Stripe.Checkout.Session =
39 | await stripe.checkout.sessions.create(params)
40 |
41 | res.status(200).json(checkoutSession)
42 | } catch (err) {
43 | const errorMessage =
44 | err instanceof Error ? err.message : 'Internal server error'
45 | res.status(500).json({ statusCode: 500, message: errorMessage })
46 | }
47 | } else {
48 | res.setHeader('Allow', 'POST')
49 | res.status(405).end('Method Not Allowed')
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/pages/api/payment_intents/index.ts:
--------------------------------------------------------------------------------
1 | import { NextApiRequest, NextApiResponse } from 'next'
2 |
3 | import { CURRENCY, MIN_AMOUNT, MAX_AMOUNT } from '../../../config'
4 | import { formatAmountForStripe } from '../../../utils/stripe-helpers'
5 |
6 | import Stripe from 'stripe'
7 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
8 | // https://github.com/stripe/stripe-node#configuration
9 | apiVersion: '2020-08-27',
10 | })
11 |
12 | export default async function handler(
13 | req: NextApiRequest,
14 | res: NextApiResponse
15 | ) {
16 | if (req.method !== 'POST') {
17 | res.setHeader('Allow', 'POST')
18 | res.status(405).end('Method Not Allowed')
19 | return
20 | }
21 | const {
22 | amount,
23 | payment_intent_id,
24 | }: { amount: number; payment_intent_id?: string } = req.body
25 | // Validate the amount that was passed from the client.
26 | if (!(amount >= MIN_AMOUNT && amount <= MAX_AMOUNT)) {
27 | res.status(500).json({ statusCode: 400, message: 'Invalid amount.' })
28 | return
29 | }
30 | if (payment_intent_id) {
31 | try {
32 | const current_intent = await stripe.paymentIntents.retrieve(
33 | payment_intent_id
34 | )
35 | // If PaymentIntent has been created, just update the amount.
36 | if (current_intent) {
37 | const updated_intent = await stripe.paymentIntents.update(
38 | payment_intent_id,
39 | {
40 | amount: formatAmountForStripe(amount, CURRENCY),
41 | }
42 | )
43 | res.status(200).json(updated_intent)
44 | return
45 | }
46 | } catch (e) {
47 | if ((e as any).code !== 'resource_missing') {
48 | const errorMessage =
49 | e instanceof Error ? e.message : 'Internal server error'
50 | res.status(500).json({ statusCode: 500, message: errorMessage })
51 | return
52 | }
53 | }
54 | }
55 | try {
56 | // Create PaymentIntent from body params.
57 | const params: Stripe.PaymentIntentCreateParams = {
58 | amount: formatAmountForStripe(amount, CURRENCY),
59 | currency: CURRENCY,
60 | description: process.env.STRIPE_PAYMENT_DESCRIPTION ?? '',
61 | automatic_payment_methods: {
62 | enabled: true,
63 | },
64 | }
65 | const payment_intent: Stripe.PaymentIntent =
66 | await stripe.paymentIntents.create(params)
67 |
68 | res.status(200).json(payment_intent)
69 | } catch (err) {
70 | const errorMessage =
71 | err instanceof Error ? err.message : 'Internal server error'
72 | res.status(500).json({ statusCode: 500, message: errorMessage })
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/pages/api/user.js:
--------------------------------------------------------------------------------
1 | import { db } from '../../lib/firebase';
2 |
3 | export default async function handler(req, res) {
4 | const user = await db.collection('users').doc('leerob').get();
5 |
6 | if (!user.exists) {
7 | return res.status(404).json({});
8 | }
9 |
10 | return res.status(404).json({ id: user.id, ...user.data() });
11 | }
12 |
--------------------------------------------------------------------------------
/pages/api/webhooks/index.ts:
--------------------------------------------------------------------------------
1 | import { buffer } from 'micro'
2 | import Cors from 'micro-cors'
3 | import { NextApiRequest, NextApiResponse } from 'next'
4 |
5 | import Stripe from 'stripe'
6 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
7 | // https://github.com/stripe/stripe-node#configuration
8 | apiVersion: '2020-08-27',
9 | })
10 |
11 | const webhookSecret: string = process.env.STRIPE_WEBHOOK_SECRET!
12 |
13 | // Stripe requires the raw body to construct the event.
14 | export const config = {
15 | api: {
16 | bodyParser: false,
17 | },
18 | }
19 |
20 | const cors = Cors({
21 | allowMethods: ['POST', 'HEAD'],
22 | })
23 |
24 | const webhookHandler = async (req: NextApiRequest, res: NextApiResponse) => {
25 | if (req.method === 'POST') {
26 | const buf = await buffer(req)
27 | const sig = req.headers['stripe-signature']!
28 |
29 | let event: Stripe.Event
30 |
31 | try {
32 | event = stripe.webhooks.constructEvent(buf.toString(), sig, webhookSecret)
33 | } catch (err) {
34 | const errorMessage = err instanceof Error ? err.message : 'Unknown error'
35 | // On error, log and return the error message.
36 | if (err! instanceof Error) console.log(err)
37 | console.log(`❌ Error message: ${errorMessage}`)
38 | res.status(400).send(`Webhook Error: ${errorMessage}`)
39 | return
40 | }
41 |
42 | // Successfully constructed event.
43 | console.log('✅ Success:', event.id)
44 |
45 | // Cast event data to Stripe object.
46 | if (event.type === 'payment_intent.succeeded') {
47 | const paymentIntent = event.data.object as Stripe.PaymentIntent
48 | console.log(`💰 PaymentIntent status: ${paymentIntent.status}`)
49 | } else if (event.type === 'payment_intent.payment_failed') {
50 | const paymentIntent = event.data.object as Stripe.PaymentIntent
51 | console.log(
52 | `❌ Payment failed: ${paymentIntent.last_payment_error?.message}`
53 | )
54 | } else if (event.type === 'charge.succeeded') {
55 | const charge = event.data.object as Stripe.Charge
56 | console.log(`💵 Charge id: ${charge.id}`)
57 | } else {
58 | console.warn(`🤷♀️ Unhandled event type: ${event.type}`)
59 | }
60 |
61 | // Return a response to acknowledge receipt of the event.
62 | res.json({ received: true })
63 | } else {
64 | res.setHeader('Allow', 'POST')
65 | res.status(405).end('Method Not Allowed')
66 | }
67 | }
68 |
69 | export default cors(webhookHandler as any)
70 |
--------------------------------------------------------------------------------
/pages/boxes.tsx:
--------------------------------------------------------------------------------
1 |
2 | import { NextPage } from 'next'
3 | import Link from 'next/link'
4 | import Layout from '../components/Layout'
5 | import Boxes from '../components/Boxes'
6 |
7 | const BoxesPage: NextPage = () => {
8 | return (
9 |
10 |
12 | )
13 | }
14 |
15 | export default BoxesPage
16 |
--------------------------------------------------------------------------------
/pages/edit.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import Link from 'next/link';
3 | import axios from 'axios';
4 |
5 | const List = () => {
6 | const [entries, setEntries] = useState([]);
7 | useEffect(async () => {
8 | const res = await axios.get('/api/entries');
9 | setEntries(res.data.entriesData);
10 | }, []);
11 |
12 | return (
13 |
14 |
Entries
15 | {entries.map(entry => (
16 |
22 | ))}
23 |
19 |
20 |
Why is your NFT not just a hype?
21 |
ArchiDAO presents our wearable NFT! The wearable will be available for use in Decentraland.
24 |
What are the six utilities?
25 |
26 |
27 | {items.map((item) => {i += 1; if (item.link == true) {
28 | return(
29 |
30 |
35 |
36 | )} else {return(
37 |
38 |
39 |
{i}. {item.title}
40 |
{item.data}
41 |
43 | )}
44 | })}
45 |
46 |
48 | )
49 | }
50 |
51 | export default IndexPage
52 |
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next'
2 | import Link from 'next/link'
3 | import Layout from '../components/Layout'
4 |
5 | const IndexPage: NextPage = () => {
6 | return (
7 |
8 |
17 |
18 | )
19 | }
20 |
21 | export default IndexPage
22 |
--------------------------------------------------------------------------------
/pages/post.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import dashify from 'dashify';
3 | import axios from 'axios';
4 |
5 | const Post = () => {
6 | const [content, setContent] = useState({
7 | title: undefined,
8 | body: undefined,
9 | })
10 | const onChange = (e) => {
11 | const { value, name } = e.target;
12 | setContent(prevState => ({ ...prevState, [name]: value }));
13 | }
14 | const onSubmit = async () => {
15 | const { title, body } = content;
16 | await axios.post('/api/entry', { title, slug: dashify(title), body });
17 | }
18 | return (
19 |
20 | Title
21 | Body
28 |
33 | POST
34 |
35 | );
36 | };
37 |
38 | export default Post;
39 |
--------------------------------------------------------------------------------
/pages/result.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next'
2 | import { useRouter } from 'next/router'
3 |
4 | import Layout from '../components/Layout'
5 | import PrintObject from '../components/PrintObject'
6 | import Cart from '../components/Cart'
7 | import ClearCart from '../components/ClearCart'
8 |
9 | import { fetchGetJSON } from '../utils/api-helpers'
10 | import useSWR from 'swr'
11 |
12 | const ResultPage: NextPage = () => {
13 | const router = useRouter()
14 |
15 | // Fetch CheckoutSession from static page via
16 | // https://nextjs.org/docs/basic-features/data-fetching#static-generation
17 | const { data, error } = useSWR(
18 | router.query.session_id
19 | ? `/api/checkout_sessions/${router.query.session_id}`
20 | : null,
21 | fetchGetJSON
22 | )
23 |
24 | if (error) return failed to load
25 |
26 | return (
27 |
28 |
29 |
Checkout Payment Result
30 |
Status: {data?.payment_intent?.status ?? 'loading...'}
31 |
CheckoutSession response:
32 |
33 |
34 |
36 |
38 | )
39 | }
40 |
41 | export default ResultPage
42 |
--------------------------------------------------------------------------------
/pages/shop.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next'
2 | import Layout from '../components/Layout'
3 | import React from "react"
4 | import Cart from '../components/Cart'
5 | import CartSummary from '../components/CartSummary'
6 | import Products from '../components/Products'
7 | import { AddressContext } from "../contexts/Address"
8 | const DonatePage: NextPage = () => {
9 |
10 | return (
11 |
12 |
13 |
19 |
20 | )
21 | }
22 |
23 | export default DonatePage
24 |
--------------------------------------------------------------------------------
/pages/thanks.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { NextPage } from 'next'
3 | import Link from 'next/link'
4 | import Layout from '../components/Layout'
5 | import Head from "next/head";
6 | import { CWload } from '../components/CWload';
7 |
8 | import { setDoc,doc,collection, getFirestore } from '@firebase/firestore';
9 |
10 | import { useState } from 'react';
11 | import { firestore } from '../components/firebase/client';
12 |
13 | import React from "react"
14 |
15 | import {
16 | useNetwork,
17 | useAddress,
18 | } from '@thirdweb-dev/react';
19 |
20 |
21 | const addPurchasex = async (address) => {
22 | // alert(String(address))
23 | };
24 |
25 | const IndexPage: NextPage = () => {
26 | CWload('CWload')
27 | return (
28 |
29 |
30 |
31 | Thanks for purchasing!
32 | The ArchiDAO NFT will be distributed in the next 48 hours.
33 | If the address shown at top right is not correct, please hit us up in Discord!
34 |
35 |
36 |
37 |
38 | )
39 |
40 | }
41 |
42 | export default IndexPage
43 |
44 |
45 | // addPurchasex()}
48 | // >
49 | //
50 | // Click to pre-Mint
51 | //
52 |
--------------------------------------------------------------------------------
/pages/web3.xjs:
--------------------------------------------------------------------------------
1 | import {
2 | useNetwork,
3 | useAddress,
4 | } from '@thirdweb-dev/react';
5 |
6 | function delay(time) {
7 | return new Promise(resolve => setTimeout(resolve, time));
8 | }
9 | export default async function () {
10 | var addressX = await useAddress()
11 | return (addressX)
12 | }
13 |
--------------------------------------------------------------------------------
/pages/whitelist-thanks.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next'
2 | import Link from 'next/link'
3 | import Layout from '../components/Layout'
4 |
5 | const IndexPage: NextPage = () => {
6 | return (
7 |
8 |
18 |
19 | )
20 | }
21 |
22 | export default IndexPage
23 |
--------------------------------------------------------------------------------
/pages/whitelist.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { NextPage } from 'next'
3 | import Link from 'next/link'
4 | import Layout from '../components/Layout'
5 | import Head from "next/head";
6 | import { CWload } from '../components/CWload';
7 | import { useRouter } from 'next/router'
8 | import { useState } from 'react';
9 | import React from "react"
10 |
11 | import { setDoc,doc,collection, getFirestore,updateDoc, arrayUnion } from '@firebase/firestore';
12 | import { firestore } from '../components/firebase/client';
13 |
14 |
15 | import {
16 | useNetwork,
17 | useAddress,
18 | } from '@thirdweb-dev/react';
19 |
20 |
21 | const addPurchasex = async (address) => {
22 | // alert(String(address))
23 | };
24 |
25 | const IndexPage: NextPage = () => {
26 | const [values, setValues] = useState({
27 | email: '',
28 | });
29 | const handleEmailInputChange = (event) => {
30 | event.persist();
31 | values.email = event.target.value
32 | setValues((values) => ({
33 | ...values,
34 | email: event.target.value,
35 | }));
36 | };
37 |
38 |
39 | var address = CWload('whitelist')
40 | // Handles the submit event on form submit.
41 | const handleSubmit = async (event) => {
42 | // Stop the form from submitting and refreshing the page.
43 | event.preventDefault()
44 | const timestamp = Date.now().toString();
45 | console.log(address)
46 | console.log(timestamp)
47 | await updateDoc(doc(firestore, "whitelist", String(address)), {
48 | email: (String(values.email)) }).catch(()=>{ setDoc(doc(firestore, "whitelist", String(address)), {
49 | email: (String(values.email)) });})
50 | await updateDoc(doc(firestore, "crypto_logins", String(address)), {
51 | whitelist: arrayUnion(String(timestamp)), email: arrayUnion(String(values.email)) }).catch(()=>{ setDoc(doc(firestore, "crypto_logins", String(address)), {
52 | whitelist: (String(timestamp)), email: (String(values.email)) });})
53 |
54 |
55 |
56 | window.location.href = "/whitelist-thanks";
57 | // Send the form data to our forms API on Vercel and get a response.
58 | }
59 | if (address) { return (
60 |
61 |
62 |
66 |
67 |
68 | )} else
69 | { return (
70 |
71 |
72 |
Please connect wallet to whitelist
73 |
74 |
75 | )}
76 |
77 | }
78 |
79 |
80 |
81 | export default IndexPage
82 |
83 |
84 | // addPurchasex()}
87 | // >
88 | //
89 | // Click to pre-Mint
90 | //
91 |
--------------------------------------------------------------------------------
/public/Archidao_wearable.js:
--------------------------------------------------------------------------------
1 | /*
2 | Auto-generated by: https://github.com/pmndrs/gltfjsx
3 | */
4 |
5 | import React, { useRef } from 'react'
6 | import { useGLTF } from '@react-three/drei'
7 |
8 | export default function Model({ ...props }) {
9 | const group = useRef()
10 | const { nodes, materials } = useGLTF('/archidao_wearable.gltf')
11 | return (
12 |
13 |
14 |
17 |
19 | )
20 | }
21 |
22 | useGLTF.preload('/archidao_wearable.gltf')
23 |
--------------------------------------------------------------------------------
/public/Test.js:
--------------------------------------------------------------------------------
1 | /*
2 | Auto-generated by: https://github.com/pmndrs/gltfjsx
3 | */
4 |
5 | import React, { useRef } from 'react'
6 | import { useGLTF } from '@react-three/drei'
7 |
8 | export default function Model({ ...props }) {
9 | const group = useRef()
10 | const { nodes, materials } = useGLTF('/archidao_wearable_2.gltf')
11 | return (
12 |
13 |
15 | )
16 | }
17 |
18 | useGLTF.preload('/test.gltf')
19 |
--------------------------------------------------------------------------------
/public/archidao.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/blixor/next-three-stripe-web3/6fd4189648eb3dd064090a24f99b10a8e9de0643/public/archidao.png
--------------------------------------------------------------------------------
/public/archidao_wearable.bin:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/blixor/next-three-stripe-web3/6fd4189648eb3dd064090a24f99b10a8e9de0643/public/archidao_wearable.bin
--------------------------------------------------------------------------------
/public/archidao_wearable.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/blixor/next-three-stripe-web3/6fd4189648eb3dd064090a24f99b10a8e9de0643/public/archidao_wearable.glb
--------------------------------------------------------------------------------
/public/black_ready.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/blixor/next-three-stripe-web3/6fd4189648eb3dd064090a24f99b10a8e9de0643/public/black_ready.jpg
--------------------------------------------------------------------------------
/public/checkout-one-time-payments.svg:
--------------------------------------------------------------------------------
1 | $29.90 Pay $29.90 4242 11/26 934 Jenny Rosen jenny@rosen.com
5 |
6 |
7 |
8 |
15 |
16 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/public/elements-card-payment.svg:
--------------------------------------------------------------------------------
1 | Pay $29.90 4242 4242 4242 4242 {children}
8 | );
9 | };
10 |
11 | export default GlobalStateProvider;
12 |
--------------------------------------------------------------------------------
/store/useGlobalState.js:
--------------------------------------------------------------------------------
1 | import { useReducer } from "react";
2 |
3 | const reducer = (state, action) => {
4 | switch (action.type) {
5 | case "LOGIN":
6 | return {
7 | ...state,
8 | isLoggedIn: true,
9 | };
10 | case "LOGOUT":
11 | return {
12 | ...state,
13 | isLoggedIn: false
14 | };
15 | default: {
16 | return state;
17 | }
18 | }
19 | };
20 |
21 | const useGlobalState = () => {
22 | const [globalState, globalDispatch] = useReducer(reducer, {
23 | isLoggedIn: false,
24 | active: false,
25 | address: ''
26 | });
27 |
28 | return { globalState, globalDispatch };
29 | };
30 |
31 | export default useGlobalState;
32 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://rsms.me/inter/inter.css");
2 | /* @import url("https://fonts.googleapis.com/css2?family=Antonio:wght@600&display=swap"); */
3 | @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');
4 | @import url('https://fonts.googleapis.com/css2?family=Bungee+Hairline&display=swap');
5 | * {
6 | box-sizing: border-box;
7 | }
8 |
9 | html,
10 | body,
11 | #root {
12 | width: 100%;
13 | min-height: 100vh;
14 | margin: 0;
15 | padding: 0;
16 | background: linear-gradient(180deg, #200020 0%, #151015 90%);
17 | font-family: 'Major Mono Display', monospace;
18 | }
19 |
20 | body {
21 | font-family: "Inter var", sans-serif;
22 | cursor: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjUgMTZDMzAuNSAyNC4wMDgxIDI0LjAwODEgMzAuNSAxNiAzMC41QzcuOTkxODcgMzAuNSAxLjUgMjQuMDA4MSAxLjUgMTZDMS41IDcuOTkxODcgNy45OTE4NyAxLjUgMTYgMS41QzI0LjAwODEgMS41IDMwLjUgNy45OTE4NyAzMC41IDE2WiIgc3Ryb2tlPSJibGFjayIvPgo8cGF0aCBkPSJNNiA5QzcuNjU2ODUgOSA5IDcuNjU2ODUgOSA2QzkgNC4zNDMxNSA3LjY1Njg1IDMgNiAzQzQuMzQzMTUgMyAzIDQuMzQzMTUgMyA2QzMgNy42NTY4NSA0LjM0MzE1IDkgNiA5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg=="),
23 | auto;
24 | }
25 |
26 |
27 | @media screen and (max-width: 568px) {
28 | .full {
29 | visibility: hidden;
30 | display: none;
31 | }
32 | }
33 |
34 | /* Variables */
35 | :root {
36 | --body-color: black;
37 | --checkout-color: #ffffff;
38 | --checkout-color2: #500050;
39 | --elements-color: #6772e5;
40 | --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
41 | sans-serif;
42 | --h1-color: #ff1fff;
43 | --h2-color: #ff81ff;
44 | --h3-color: #ffacff;
45 | --href-color: #20ffff;
46 | --radius: 6px;
47 | --container-width-max: 1280px;
48 | --page-width-max: 600px;
49 | --transition-duration: 2s;
50 | }
51 | /* canvas{
52 | position: absolute;
53 | z-index: 99 !important;
54 | left: 0;
55 | top: 0;
56 | width: 100vw !important;
57 | height: 100vh !important;
58 | } */
59 |
60 | .header-content {
61 | position: fixed;
62 | border-radius: 0 0 20px 20px;
63 | height: min(8vw,100px);
64 | max-height: 120px;
65 | width: 100vw;
66 | left: 0;
67 | top: 0;
68 | color: white;
69 | /* padding: 1vw; */
70 | background: var(--body-color);
71 | opacity: 90%;
72 | font-family: 'Major Mono Display', monospace;
73 | font-size: min(2vw,20px);
74 | }
75 | .faq-item{
76 | display: block;
77 | border-style: solid;
78 | border-radius: 10px;
79 | border-width: 1.25px;
80 | border-color: #909090;
81 | color: white!important;
82 | width: 100%;
83 | max-width: 65vh;
84 | margin: 0 20px 20px 0;
85 | font-weight: bold;
86 | text-decoration: none;
87 | box-shadow: 0 0 10px #abffad, 0 0 5px #00ff50;
88 | z-index: 99;
89 | padding: 10px;
90 | line-height: normal!important;
91 | }
92 | .cw-button{
93 | border-style: solid;
94 | border-width: 1.25px;
95 | border-color: #90ff90;
96 | width: auto;
97 | /* height: 6vw; */
98 | color: white;
99 | background-color: black;
100 | position: relative;
101 | float: right;
102 | padding: 1vw;
103 | right: 5px;
104 | top: 5px;
105 | margin: .25vw;
106 | line-height: min(3vw,20px);
107 | }
108 | .backdrop{
109 | position: fixed;
110 | z-index: 0;
111 | width: 100vw !important;
112 | height: 100vh !important;
113 | }
114 | body {
115 | margin: 0;
116 | padding: 0;
117 | background: var(--body-color);
118 | overflow-y: scroll;
119 | color:var(--h3-color);
120 | }
121 |
122 | * {
123 | /* box-sizing: border-box; */
124 | font-family: 'Bungee Hairline', cursive;
125 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
126 | }
127 | .faq-div{
128 | width: 100%;
129 | /* background-color: red; */
130 | display: block;
131 | border-style: solid;
132 | border-radius: 10px;
133 | border-width: 1.25px;
134 | border-color: #909090;
135 | color: white!important;
136 | width: 100%;
137 | max-width: 65vh;
138 | margin: 0 20px 20px 0;
139 | font-weight: bold;
140 | text-decoration: none;
141 | background-color: #00000090;
142 | box-shadow: 0 0 20px #abffad, 0 0 10px #00ff50;
143 | z-index: 99;
144 | padding: 10px;
145 | line-height: normal!important;
146 | }
147 | .shop-info {
148 | margin: 20px;
149 | display: inline;
150 |
151 | /* padding: 5vw; */
152 | }
153 | .shop-info-div {
154 | /* display: inline; */
155 | margin: 10px 0 20px 0 ;
156 | /* text-align: center; */
157 | display: block;
158 | height: 60px;
159 | /* background-color: blue */
160 |
161 | }
162 | .shop-sum-div{
163 | /* display: flex; */
164 | width: 100%;
165 | /* padding: 10px; */
166 | /* background-color: red */
167 | }
168 | .cart-button{
169 | display: block;
170 | width: 95%;
171 | left: 0;
172 | margin-top: 0;
173 | margin-bottom: 0;
174 | }
175 | html {
176 | overflow: scroll;
177 | }
178 | ::-webkit-scrollbar {
179 | width: 0px;
180 | background: transparent; /* make scrollbar transparent */
181 | }
182 | .cart-button-top{
183 | border-radius: 10px 10px 0 0!important;
184 | }
185 | .cart-button-mid{
186 | border-radius: 0 0 0 0!important;
187 | }
188 | .cart-button-bot{
189 | border-radius: 0 0 10px 10px !important;
190 | margin-bottom: 30px;
191 | }
192 |
193 | .spanx {
194 | white-space: nowrap;
195 | overflow: hidden;
196 | /* text-overflow: ellipsis; */
197 | /* display: inline !important; */
198 | }
199 | .shop-button-div {
200 |
201 | /* display: grid; */
202 |
203 | /* padding: 20px; */
204 | /* background-color: yellow; */
205 | }
206 |
207 | .add-button{
208 | border-radius: 0px 10px 10px 0!important;
209 |
210 | }
211 | .subtract-button{
212 | border-radius: 10px 0px 0 10px!important;
213 | }
214 | .change-count-button{
215 | width: 45%;
216 | margin: 10px 00px 10px 00px ;
217 | }
218 | .clear-cart-background {
219 | background-color: #50000050!important;
220 | }
221 | #__next {
222 | display: flex;
223 | justify-content: center;
224 | }
225 |
226 | .container {
227 | max-width: var(--container-width-max);
228 | padding: 45px 25px;
229 | display: absolute;
230 | flex-direction: row;
231 | z-index: 99;
232 | padding-top: 12vh;
233 | }
234 |
235 | .page-container {
236 | padding-bottom: 60px;
237 | max-width: var(--page-width-max);
238 | }
239 |
240 | h1 {
241 | font-weight: 600;
242 | color: var(--h1-color);
243 | margin: 6px 0 12px;
244 | font-size: 27px;
245 | line-height: 32px;
246 | }
247 |
248 | h1 span.light {
249 | color: var(--h3-color);
250 | }
251 |
252 | h2 {
253 | color: var(--h2-color);
254 | margin: 8px 0;
255 | }
256 |
257 | h3 {
258 | font-size: 17px;
259 | color: var(--h3-color);
260 | margin: 8px 0;
261 | }
262 |
263 | .faq-a {
264 | color: var(--href-color);
265 | text-decoration: underline;
266 | }
267 |
268 | a {
269 | color: var(--checkout-color);
270 | text-decoration: none;
271 | }
272 |
273 |
274 | .nft-container{
275 | max-width: 500px;
276 | min-width: 50vh;
277 | padding: 1vw;
278 | justify-content: center;
279 | align-items: center;
280 | text-align: center;
281 | margin-top: min(5vw,100px);
282 | margin-bottom: 100vh;
283 | background: #00000090;
284 | border-radius: 20px;
285 | border-style: solid;
286 | border-width: 1.25px;
287 | border-color: #909090;
288 | }
289 |
290 | .header-logo img {
291 | height: min(6vw,80px);
292 | }
293 | .header-logo{
294 | color: black;
295 | font-size: min(3vw,40px);
296 | color: white;
297 | font-weight: 600;
298 | /* position: fixed; */
299 | float: left;
300 | padding: 1vw;
301 | margin: 1vw;
302 | margin-top: -1vw;
303 | }
304 |
305 |
306 | ul,
307 | li {
308 | list-style: none;
309 | padding: 0;
310 | margin: 0;
311 | }
312 |
313 | .card-list {
314 | display: flex;
315 | flex-wrap: wrap;
316 | align-content: flex-start;
317 | padding-top: 64px;
318 | }
319 |
320 | .card {
321 | display: block;
322 | border-style: solid;
323 | border-radius: 10px;
324 | border-width: 1.25px;
325 | border-color: #909090;
326 | position: relative;
327 | /* padding: 12px; */
328 | height: min(400px,100vw);
329 | width: min(400px, 100vw);
330 | flex: 0 0 33%;
331 | min-width: 304px;
332 | width: 33%;
333 | margin: 0 20px 20px 0;
334 | text-decoration: none;
335 | box-shadow: 0 0 160px #abffad, 0 0 60px #00ff50;
336 | z-index: 99;
337 | }
338 | .card2 {
339 | display: block;
340 | border-style: solid;
341 | border-radius: 10px;
342 | border-width: 1.25px;
343 | border-color: #909090;
344 | position: relative;
345 | /* padding: 12px; */
346 | /* height: min(400px,100vw);
347 | width: min(400px, 100vw); */
348 | flex: 0 0 33%;
349 | left: 33%;
350 | /* min-width: 304px; */
351 | /* width: 33%; */
352 | margin: 20px;
353 | padding: 10px;
354 | text-decoration: none;
355 | box-shadow: 0 0 160px #abffad, 0 0 60px #00ff50;
356 | z-index: 99;
357 | }
358 | .card h2 {
359 | color: #fff;
360 | margin: 10px;
361 | }
362 | .card h2.bottom {
363 | position: absolute;
364 | bottom: 10px;
365 | }
366 |
367 | .card img {
368 | width: 90%;
369 | margin: 5%;
370 | position: absolute;
371 | border-radius: 20px;
372 | box-shadow: 0 0 20px #50ff80, 0 0 10px #00ffff;
373 | /* top: 50%;
374 | left: 50%;
375 | transform: translate(-50%, -50%); */
376 | }
377 |
378 | .error-message {
379 | color: #ef2961;
380 | }
381 |
382 | .FormRow,
383 | fieldset,
384 | input[type='number'],
385 | input[type='text'] {
386 | border-radius: var(--radius);
387 | padding: 5px 12px;
388 | width: 100%;
389 | background: #fff;
390 | appearance: none;
391 | font-size: 16px;
392 | margin-top: 10px;
393 | }
394 |
395 | input[type='range'] {
396 | margin: 5px 0;
397 | width: 100%;
398 | }
399 |
400 | button {
401 | border-radius: var(--radius);
402 |
403 | font-size: larger;
404 | /* border: 0; */
405 | /* padding: 12px 16px; */
406 | /* margin-top: 10px; */
407 | margin: 10px;
408 | font-weight: 600;
409 | cursor: pointer;
410 | transition: all 0.2s ease;
411 | /* display: block; */
412 | /* width: 100%; */
413 | /* z-index: 99; */
414 | /* color: var(--h3-color); */
415 | /* border: 1px solid var(--elements-color); */
416 | /* background: var(--elements-color); */
417 | /* transition: box-shadow var(--transition-duration); */
418 | }
419 | .shop-button {
420 | border-radius: var(--radius);
421 | color: white;
422 | font-size: larger;
423 | border: 0;
424 | /* padding: 12px 16px; */
425 | /* margin: 10px 00px 10px 00px ; */
426 | /* margin-top: 10px; */
427 | font-weight: 600;
428 | cursor: pointer;
429 | transition: all 0.2s ease;
430 | /* display: flex; */
431 | /* min-width: 16vw; */
432 | /* width: auto; */
433 | z-index: 99;
434 | border: 1px solid var(--elements-color);
435 | color: var(--h3-color);
436 | background: var(--elements-color);
437 | transition: box-shadow var(--transition-duration);
438 | min-width: 60px;
439 | min-height: 60px;
440 |
441 | }
442 | button:disabled {
443 | opacity: 0.5;
444 | cursor: not-allowed;
445 | }
446 | form{
447 | min-width: min(100vw,400px) ;
448 | display:flex;
449 | }
450 |
451 | .elements-style {
452 | color: var(--elements-color);
453 | border: 1px solid var(--elements-color);
454 | }
455 | .elements-style-background {
456 | background: var(--elements-color);
457 | transition: box-shadow var(--transition-duration);
458 | }
459 | .card.elements-style-background:hover {
460 | box-shadow: 20px 20px 60px #464e9c, -20px -20px 60px #8896ff;
461 | }
462 | .checkout-style {
463 | color: var(--checkout-color);
464 | border: 1px solid var(--checkout-color);
465 | }
466 | .checkout-style-background {
467 | background: var(--checkout-color);
468 | transition: box-shadow var(--transition-duration);
469 | }
470 | .card.checkout-style-background:hover {
471 | box-shadow: 20px 20px 60px #614b91, -20px -20px 60px #bd91ff;
472 | }
473 | .cart-style-background {
474 | background: #00000090;
475 | transition: box-shadow var(--transition-duration);
476 | }
477 | .card.cart-style-background:hover {
478 | box-shadow: 20px 20px 60px teal, -20px -20px 60px teal;
479 | }
480 |
481 | /* Products */
482 | .products {
483 | display: grid;
484 | /* gap: 1rem; */
485 | /* grid-template-columns: repeat(2, 1fr); */
486 | margin-top: 1rem;
487 | }
488 | .nftimage{
489 | display: flex;
490 | justify-content: center;
491 | align-items: center;
492 | width: 80%;
493 | margin: 10%;
494 | }
495 | .product img {
496 | /* max-width: 100%; */
497 |
498 | /* margin: 30px; */
499 | border-radius: 20px;
500 | box-shadow: 0 0 40px #50ff80, 0 0 20px #00ffff;
501 | text-align: center;
502 | align-items: center;
503 |
504 | /* margin: 60px; */
505 | }
506 | .whitelist-div {
507 | display: flex;
508 |
509 | background: #00000090;
510 | border-style: solid;
511 | border-radius: 10px;
512 | border-width: 1.25px;
513 | border-color: #909090;
514 | color: white!important;
515 | width: 100%;
516 | /* max-width: 65vh; */
517 | /* margin: 0 20px 20px 0; */
518 | margin: 10px;
519 | padding: 10px;
520 | font-weight: bold;
521 | text-decoration: none;
522 | box-shadow: 0 0 10px #abffad, 0 0 5px #00ff50;
523 | z-index: 99;
524 | margin-top: min(15vh,100px);
525 | line-height: normal!important;
526 | }
527 | .product{
528 | display: inline !important;
529 | white-space: nowrap !important;
530 | overflow: hidden !important;
531 | text-overflow: ellipsis !important;
532 | }
533 |
534 | /* Test card number */
535 | .test-card-notice {
536 | display: block;
537 | margin-block-start: 1em;
538 | margin-block-end: 1em;
539 | margin-inline-start: 0px;
540 | margin-inline-end: 0px;
541 | }
542 | .card-number {
543 | display: inline;
544 | white-space: nowrap;
545 | font-family: Menlo, Consolas, monospace;
546 | color: #3c4257;
547 | font-weight: 500;
548 | }
549 | .card-number span {
550 | /* display: inline-block; */
551 | width: 4px;
552 | }
553 |
554 | /* Code block */
555 | code,
556 | pre {
557 | font-family: 'SF Mono', 'IBM Plex Mono', 'Menlo', monospace;
558 | font-size: 12px;
559 | background: rgba(0, 0, 0, 0.03);
560 | padding: 12px;
561 | border-radius: var(--radius);
562 | max-height: 500px;
563 | width: var(--page-width-max);
564 | overflow: auto;
565 | }
566 |
567 | .banner {
568 | /* max-width: 825px; */
569 |
570 | width: auto;
571 | /* margin: 0 auto; */
572 | font-size: min(3vw,20px);
573 | background: var(--body-color);
574 | font-weight: 600;
575 | opacity: 90%;
576 | color: #6a7c94;
577 | border-radius: 50px 0 0px 0px;
578 | /* box-shadow: -10px 10px 20px #20ff50, 10px -10px 20px #002010; */
579 | display: flex;
580 | align-items: right;
581 | box-sizing: border-box;
582 | padding: 15px;
583 | line-height: 1.15;
584 | position: fixed;
585 | bottom: 0;
586 | left: 0;
587 | right: 0;
588 | text-align: right;
589 | justify-content: right;
590 | z-index: 99;
591 | }
592 | .whitelist-submit{
593 | width: auto;
594 | right: 10px;
595 | margin: 10px!important;
596 | padding: 10px!important;
597 | position: relative;
598 | display: block;
599 | font-size: 1rem!important;
600 | }
601 | .whitelist-form{
602 | width: 100%;
603 | }
604 | .whitelist-input{
605 | width: 80%!important;
606 | margin: 10px!important;
607 | }
608 |
609 | @media only screen and (max-width: 980px) {
610 | .container {
611 | flex-direction: column;
612 | padding-top: 12vh;
613 | }
614 |
615 |
616 |
617 | .card {
618 | margin: 0 20px 20px 0;
619 | box-shadow: none;
620 | }
621 |
622 | .card-list {
623 | padding-top: 12vh;
624 | }
625 |
626 | .banner {
627 | box-shadow: none;
628 | bottom: 0;
629 | }
630 | .faq-div {
631 | width: 100vw;
632 | margin: 10px;
633 | }
634 | }
635 |
636 | @media only screen and (max-width: 600px) {
637 | .container {
638 | flex-direction: column;
639 | padding-top: 12vh;
640 | }
641 |
642 | .card {
643 | display: block;
644 | border-radius: 8px;
645 | /* flex: 0 0 100%; */
646 | /* max-width: 100%; */
647 | padding-left: 0;
648 | padding-right: 0;
649 | margin: 20px;
650 | box-shadow: none;
651 | }
652 |
653 | .faq-div {
654 | width: 100vw;
655 | }
656 | .whitelist-div{
657 | width: 100vw;
658 | }
659 | .card-list {
660 | padding-top: 12vh;
661 | }
662 |
663 | code,
664 | pre,
665 | h3 {
666 | display: none;
667 | }
668 |
669 | .banner {
670 | box-shadow: none;
671 | bottom: 0;
672 | }
673 | }
674 |
--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
1 | .scene{
2 | width:100vw;
3 | height:100vh;
4 | }
5 |
6 | .canvas{
7 | background: #000;
8 | }
9 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2019",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "allowSyntheticDefaultImports": true,
15 | "isolatedModules": true,
16 | "incremental": true,
17 | "jsx": "preserve"
18 | },
19 | "exclude": ["node_modules"],
20 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
21 | }
22 |
--------------------------------------------------------------------------------
/utils/api-helpers.ts:
--------------------------------------------------------------------------------
1 | export async function fetchGetJSON(url: string) {
2 | try {
3 | const data = await fetch(url).then((res) => res.json())
4 | return data
5 | } catch (err) {
6 | if (err instanceof Error) {
7 | throw new Error(err.message)
8 | }
9 | throw err
10 | }
11 | }
12 |
13 | export async function fetchPostJSON(url: string, data?: {}) {
14 | try {
15 | // Default options are marked with *
16 | const response = await fetch(url, {
17 | method: 'POST', // *GET, POST, PUT, DELETE, etc.
18 | mode: 'cors', // no-cors, *cors, same-origin
19 | cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
20 | credentials: 'same-origin', // include, *same-origin, omit
21 | headers: {
22 | 'Content-Type': 'application/json',
23 | // 'Content-Type': 'application/x-www-form-urlencoded',
24 | },
25 | redirect: 'follow', // manual, *follow, error
26 | referrerPolicy: 'no-referrer', // no-referrer, *client
27 | body: JSON.stringify(data || {}), // body data type must match "Content-Type" header
28 | })
29 | return await response.json() // parses JSON response into native JavaScript objects
30 | } catch (err) {
31 | if (err instanceof Error) {
32 | throw new Error(err.message)
33 | }
34 | throw err
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/utils/get-stripejs.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This is a singleton to ensure we only instantiate Stripe once.
3 | */
4 | import { Stripe, loadStripe } from '@stripe/stripe-js'
5 |
6 | let stripePromise: Promise
7 | const getStripe = () => {
8 | if (!stripePromise) {
9 | stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)
10 | }
11 | return stripePromise
12 | }
13 |
14 | export default getStripe
15 |
--------------------------------------------------------------------------------
/utils/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/blixor/next-three-stripe-web3/6fd4189648eb3dd064090a24f99b10a8e9de0643/utils/index.js
--------------------------------------------------------------------------------
/utils/stripe-helpers.ts:
--------------------------------------------------------------------------------
1 | export function formatAmountForDisplay(
2 | amount: number,
3 | currency: string
4 | ): string {
5 | let numberFormat = new Intl.NumberFormat(['en-US'], {
6 | style: 'currency',
7 | currency: currency,
8 | currencyDisplay: 'symbol',
9 | })
10 | return numberFormat.format(amount)
11 | }
12 |
13 | export function formatAmountForStripe(
14 | amount: number,
15 | currency: string
16 | ): number {
17 | let numberFormat = new Intl.NumberFormat(['en-US'], {
18 | style: 'currency',
19 | currency: currency,
20 | currencyDisplay: 'symbol',
21 | })
22 | const parts = numberFormat.formatToParts(amount)
23 | let zeroDecimalCurrency: boolean = true
24 | for (let part of parts) {
25 | if (part.type === 'decimal') {
26 | zeroDecimalCurrency = false
27 | }
28 | }
29 | return zeroDecimalCurrency ? amount : Math.round(amount * 100)
30 | }
31 |
32 | export function formatAmountFromStripe(
33 | amount: number,
34 | currency: string
35 | ): number {
36 | let numberFormat = new Intl.NumberFormat(['en-US'], {
37 | style: 'currency',
38 | currency: currency,
39 | currencyDisplay: 'symbol',
40 | })
41 | const parts = numberFormat.formatToParts(amount)
42 | let zeroDecimalCurrency: boolean = true
43 | for (let part of parts) {
44 | if (part.type === 'decimal') {
45 | zeroDecimalCurrency = false
46 | }
47 | }
48 | return zeroDecimalCurrency ? amount : Math.round(amount / 100)
49 | }
50 |
--------------------------------------------------------------------------------
/with-stripe-typescript-app.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/blixor/next-three-stripe-web3/6fd4189648eb3dd064090a24f99b10a8e9de0643/with-stripe-typescript-app.zip
--------------------------------------------------------------------------------
50 | 
50 |