-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from buildship-dev/dev
v2.0: mint modal, Webpack, ETH bridge for Polygon
- Loading branch information
Showing
36 changed files
with
15,266 additions
and
200 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
|
||
| # dependencies | ||
| node_modules/ | ||
| */node_modules/ | ||
| /.pnp | ||
| .pnp.js | ||
|
|
||
| # testing | ||
| /coverage | ||
|
|
||
| # production | ||
| /build | ||
| */build | ||
|
|
||
| # misc | ||
| .idea | ||
| .vercel | ||
| .DS_Store | ||
| .env.local | ||
| .env.development.local | ||
| .env.test.local | ||
| .env.production.local | ||
|
|
||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,6 +3,8 @@ | |
| Connect web3 to Webflow without coding skills required. | ||
| ## Lazy mint on Webflow | ||
|
|
||
|  | ||
|
|
||
| Check out our ready-to-use minting website template: https://textapes.art | ||
|
|
||
| [Contact us](https://buildship.dev) to get this Webflow template & create your Opensea-independent NFT collection | ||
|
|
@@ -12,17 +14,13 @@ Check out our ready-to-use minting website template: https://textapes.art | |
| 2. Create a new [Embedded HTML code](https://university.webflow.com/lesson/custom-code-embed) block (at least **Basic** site plan required) | ||
| 3. Copy & paste this code in Webflow Embed block | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> | ||
| <script type="text/javascript" src="https://unpkg.com/web3modal"></script> | ||
| <script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider"></script> | ||
| <script> | ||
| CONTRACT_ADDRESS = "<your contract address here>" | ||
| NETWORK_ID = 1 | ||
| CONTRACT_ADDRESS = "<your contract address here>" | ||
| NETWORK_ID = 1 | ||
| MAX_PER_MINT = 20 | ||
| </script> | ||
| <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> | ||
| <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> | ||
| <script crossorigin src="https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js"></script> | ||
| <script type="module" src="https://buildship-dev.github.io/webflow-nft-components/mint/index.js"></script> | ||
| <script src="https://nftcomponents.vercel.app/static/js/main.js"></script> | ||
| <link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet"> | ||
| ``` | ||
| 4. If you have your Ethereum NFT contract, insert your contract address in `CONTRACT_ADDRESS` field. If you don't, [contact us](https://buildship.dev). | ||
| 5. Create a button with ID `mint-button` to your Webflow site. | ||
|
|
@@ -31,19 +29,17 @@ Check out our ready-to-use minting website template: https://textapes.art | |
|
|
||
| ### Example for testing | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> | ||
| <script type="text/javascript" src="https://unpkg.com/web3modal"></script> | ||
| <script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider"></script> | ||
| <script> | ||
| CONTRACT_ADDRESS = "0x8Fac2e25DFF0B248A19A66Ae8D530613c8Ff670B" | ||
| IS_TESTNET = true | ||
| CONTRACT_ADDRESS = "0x8Fac2e25DFF0B248A19A66Ae8D530613c8Ff670B" | ||
| IS_TESTNET = true | ||
| MAX_PER_MINT = 20 | ||
| </script> | ||
| <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> | ||
| <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> | ||
| <script crossorigin src="https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js"></script> | ||
| <script type="module" src="https://buildship-dev.github.io/webflow-nft-components/mint/index.js"></script> | ||
| <script src="https://nftcomponents.vercel.app/static/js/main.js"></script> | ||
| <link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet"> | ||
| ``` | ||
|
|
||
| ## FAQ | ||
|
|
||
| ### I'm confused / it's not working, can you help me? | ||
| Yes, absolutely! You can contact us at https://buildship.dev, or open a [GitHub issue](https://github.com/buildship-dev/webflow-nft-components/issues/new) | ||
|
|
||
|
|
@@ -52,10 +48,25 @@ Mint button will ask to connect wallet, so it's not necessary to add a "Connect | |
|
|
||
| If you still want to do it, create a Webflow button with ID `connect`. | ||
|
|
||
| ### How to add minted counter? | ||
| Just create two text elements and assign them: | ||
| - `minted-counter` ID to display minted number | ||
| - `total-counter` ID to display collection max size | ||
|
|
||
| ### How to use this with Polygon, Binance, or other Ethereum-based networks? | ||
| It's easy! Change `NETWORK_ID` in the code snippet: | ||
|
|
||
| - Ethereum Rinkeby Testnet: `NETWORK_ID = 4` | ||
| - Polygon `NETWORK_ID = 137` | ||
| - Binance `NETWORK_ID = 56` | ||
| - For others visit: https://chainlist.org/ | ||
| 5. Change `NETWORK_ID` if you're using something other than Ethereum: | ||
| - Ethereum Rinkeby Testnet: `NETWORK_ID = 4` | ||
| - Polygon `NETWORK_ID = 137` | ||
| - Binance `NETWORK_ID = 56` | ||
| 6. Create a button with ID `mint-button` to your Webflow site. | ||
| 7. You're done 🎉 | ||
|
|
||
| Minting will work via Metamask wallet, and will ask to connect the wallet first, so it's not necessary to add a "Connect wallet" button. | ||
|
|
||
| If you don't know how to code or want to launch fast, get Webflow NFT minting templates at https://buildship.dev | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| module.exports = { | ||
| webpack: { | ||
| alias: {}, | ||
| configure: (webpackConfig, {env, paths}) => { | ||
| const isEnvProduction = env === "production"; | ||
| const isEnvDevelopment = env === "development"; | ||
| webpackConfig.output.libraryTarget = "umd"; | ||
| webpackConfig.output.library = "NFTComponents"; | ||
| webpackConfig.output.filename = isEnvProduction | ||
| ? 'static/js/[name].js' | ||
| : isEnvDevelopment && 'static/js/bundle.js'; | ||
| // Turn off chunking | ||
| webpackConfig.optimization = {}; | ||
|
|
||
| const miniCssPlugin = webpackConfig.plugins.find( | ||
| ({ constructor }) => constructor.name === 'MiniCssExtractPlugin' | ||
| ); | ||
| if (miniCssPlugin) { | ||
| miniCssPlugin.options.filename = 'static/css/[name].css'; | ||
| miniCssPlugin.options.chunkFilename = 'static/css/[name].css'; | ||
| } | ||
| return webpackConfig; | ||
| }, | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,7 @@ | ||
| # Mint NFTs on Webflow | ||
|
|
||
|  | ||
|
|
||
| Check out our ready-to-use minting website template: https://textapes.art | ||
|
|
||
| [Contact us](https://buildship.dev) to get this Webflow template & create your Opensea-independent NFT collection | ||
|
|
@@ -9,17 +11,13 @@ Check out our ready-to-use minting website template: https://textapes.art | |
| 2. Create a new [Embedded HTML code](https://university.webflow.com/lesson/custom-code-embed) block (at least **Basic** site plan required) | ||
| 3. Copy & paste this code in Webflow Embed block | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> | ||
| <script type="text/javascript" src="https://unpkg.com/web3modal"></script> | ||
| <script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider"></script> | ||
| <script> | ||
| CONTRACT_ADDRESS = "<your contract address here>" | ||
| NETWORK_ID = 1 | ||
| CONTRACT_ADDRESS = "<your contract address here>" | ||
| NETWORK_ID = 1 | ||
| MAX_PER_MINT = 20 | ||
| </script> | ||
| <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> | ||
| <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> | ||
| <script crossorigin src="https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js"></script> | ||
| <script type="module" src="https://buildship-dev.github.io/webflow-nft-components/mint/index.js"></script> | ||
| <script src="https://nftcomponents.vercel.app/static/js/main.js"></script> | ||
| <link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet"> | ||
| ``` | ||
| 4. If you have your Ethereum NFT contract, insert your contract address in `CONTRACT_ADDRESS` field. If you don't, [contact us](https://buildship.dev). | ||
| 5. Create a button with ID `mint-button` to your Webflow site. | ||
|
|
@@ -28,31 +26,44 @@ Check out our ready-to-use minting website template: https://textapes.art | |
|
|
||
| ### Example for testing | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> | ||
| <script type="text/javascript" src="https://unpkg.com/web3modal"></script> | ||
| <script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider"></script> | ||
| <script> | ||
| CONTRACT_ADDRESS = "0x8Fac2e25DFF0B248A19A66Ae8D530613c8Ff670B" | ||
| IS_TESTNET = true | ||
| CONTRACT_ADDRESS = "0x8Fac2e25DFF0B248A19A66Ae8D530613c8Ff670B" | ||
| IS_TESTNET = true | ||
| MAX_PER_MINT = 20 | ||
| </script> | ||
| <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> | ||
| <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> | ||
| <script crossorigin src="https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js"></script> | ||
| <script type="module" src="https://buildship-dev.github.io/webflow-nft-components/mint/index.js"></script> | ||
| <script src="https://nftcomponents.vercel.app/static/js/main.js"></script> | ||
| <link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet"> | ||
| ``` | ||
|
|
||
| ## FAQ | ||
|
|
||
| ### I'm confused / it's not working, can you help me? | ||
| Yes, absolutely! You can contact us at https://buildship.dev, or open a [GitHub issue](https://github.com/buildship-dev/webflow-nft-components/issues/new) | ||
|
|
||
| ### How to add "Connect wallet" button? | ||
| Mint button will ask to connect wallet, so it's not necessary to add a "Connect wallet" button. | ||
| Mint button will ask to connect wallet, so it's not necessary to add a "Connect wallet" button. | ||
|
|
||
| If you still want to do it, create a Webflow button with ID `connect`. | ||
|
|
||
| ### How to add minted counter? | ||
| Just create two text elements and assign them: | ||
| - `minted-counter` ID to display minted number | ||
| - `total-counter` ID to display collection max size | ||
|
|
||
| ### How to use this with Polygon, Binance, or other Ethereum-based networks? | ||
| It's easy! Change `NETWORK_ID` in the code snippet: | ||
|
|
||
| - Ethereum Rinkeby Testnet: `NETWORK_ID = 4` | ||
| - Polygon `NETWORK_ID = 137` | ||
| - Binance `NETWORK_ID = 56` | ||
| - For others visit: https://chainlist.org/ | ||
| 5. Change `NETWORK_ID` if you're using something other than Ethereum: | ||
| - Ethereum Rinkeby Testnet: `NETWORK_ID = 4` | ||
| - Polygon `NETWORK_ID = 137` | ||
| - Binance `NETWORK_ID = 56` | ||
| 6. Create a button with ID `mint-button` to your Webflow site. | ||
| 7. You're done 🎉 | ||
|
|
||
| Minting will work via Metamask wallet, and will ask to connect the wallet first, so it's not necessary to add a "Connect wallet" button. | ||
|
|
||
| If you don't know how to code or want to launch fast, get Webflow NFT minting templates at https://buildship.dev | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,6 @@ | ||
| <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> | ||
| <script type="text/javascript" src="https://unpkg.com/web3modal"></script> | ||
| <script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider"></script> | ||
| <script> | ||
| CONTRACT_ADDRESS = "<your contract address here>" | ||
| NETWORK_ID = 1 | ||
| </script> | ||
| <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> | ||
| <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> | ||
| <script crossorigin src="https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js"></script> | ||
| <script type="module" src="https://buildship-dev.github.io/webflow-nft-components/mint/index.js"></script> | ||
|
|
||
| <script src="https://nftcomponents.vercel.app/static/js/main.js"></script> | ||
| <link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet"> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| { | ||
| "name": "webflow-nft-components", | ||
| "version": "0.1.0", | ||
| "private": true, | ||
| "dependencies": { | ||
| "@craco/craco": "^6.4.2", | ||
| "@emotion/react": "^11.7.0", | ||
| "@emotion/styled": "^11.6.0", | ||
| "@mui/icons-material": "^5.2.0", | ||
| "@mui/material": "^5.2.2", | ||
| "@testing-library/jest-dom": "^5.11.4", | ||
| "@testing-library/react": "^11.1.0", | ||
| "@testing-library/user-event": "^12.1.10", | ||
| "@walletconnect/web3-provider": "^1.6.6", | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2", | ||
| "react-scripts": "4.0.3", | ||
| "web-vitals": "^1.0.1", | ||
| "web3": "^1.6.1", | ||
| "web3modal": "^1.9.4" | ||
| }, | ||
| "scripts": { | ||
| "start": "craco start", | ||
| "build": "craco build", | ||
| "test": "craco test", | ||
| "eject": "react-scripts eject" | ||
| }, | ||
| "eslintConfig": { | ||
| "extends": [ | ||
| "react-app", | ||
| "react-app/jest" | ||
| ] | ||
| }, | ||
| "browserslist": { | ||
| "production": [ | ||
| ">0.2%", | ||
| "not dead", | ||
| "not op_mini all" | ||
| ], | ||
| "development": [ | ||
| "last 1 chrome version", | ||
| "last 1 firefox version", | ||
| "last 1 safari version" | ||
| ] | ||
| } | ||
| } |
Empty file.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.