Merge pull request #6 from buildship-dev/dev

v2.0: mint modal, Webpack, ETH bridge for Polygon
artgenexyz · Jan 5, 2022 · 074fa1c · 074fa1c
2 parents 10c7cb8 + 2e39b84
commit 074fa1c
Show file tree

Hide file tree

Showing 36 changed files with 15,266 additions and 200 deletions.
diff --git a/.gitignore b/.gitignore
@@ -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*
diff --git a/README.md b/README.md
@@ -3,6 +3,8 @@
 Connect web3 to Webflow without coding skills required.
 ## Lazy mint on Webflow
 
+![Mint widget](public/images/screenshot.png)
+
 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/material@5.1.0/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/material@5.1.0/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
diff --git a/craco.config.js b/craco.config.js
@@ -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;
+        },
+    },
+}
diff --git a/deploy.sh b/deploy.sh
@@ -2,7 +2,7 @@
 
 echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF"
 
-if [[ "$VERCEL_GIT_COMMIT_REF" == "dev" ]] ; then
+if [[ "$VERCEL_GIT_COMMIT_REF" != "v1" ]] ; then
   # Proceed with the build
     echo "✅ - Build can proceed"
   exit 1;

diff --git a/mint/README.md b/mint/README.md
@@ -1,5 +1,7 @@
 # Mint NFTs on Webflow
 
+![Mint widget](public/images/screenshot.png)
+
 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/material@5.1.0/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/material@5.1.0/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
diff --git a/mint/embed.html b/mint/embed.html
@@ -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/material@5.1.0/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">
diff --git a/mint/web3.js b/mint/web3.js
diff --git a/package.json b/package.json
@@ -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"
+    ]
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/buildship.png b/public/images/buildship.png
diff --git a/public/images/eth-logo.svg b/public/images/eth-logo.svg
diff --git a/public/images/polygon-logo.svg b/public/images/polygon-logo.svg
diff --git a/public/images/screenshot.png b/public/images/screenshot.png
diff --git a/public/images/warning.png b/public/images/warning.png