Skip to content

Commit 074fa1c

Browse files
theshadowagenttheshadowagent
authored
Merge pull request #6 from buildship-dev/dev
v2.0: mint modal, Webpack, ETH bridge for Polygon
2 parents 10c7cb8 + 2e39b84 commit 074fa1c

36 files changed

+15266
-200
lines changed

‎.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules/
5+
*/node_modules/
6+
/.pnp
7+
.pnp.js
8+
9+
# testing
10+
/coverage
11+
12+
# production
13+
/build
14+
*/build
15+
16+
# misc
17+
.idea
18+
.vercel
19+
.DS_Store
20+
.env.local
21+
.env.development.local
22+
.env.test.local
23+
.env.production.local
24+
25+
npm-debug.log*
26+
yarn-debug.log*
27+
yarn-error.log*

‎README.md‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
Connect web3 to Webflow without coding skills required.
44
## Lazy mint on Webflow
55

6+
![Mint widget](public/images/screenshot.png)
7+
68
Check out our ready-to-use minting website template: https://textapes.art
79

810
[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
1214
2. Create a new [Embedded HTML code](https://university.webflow.com/lesson/custom-code-embed) block (at least **Basic** site plan required)
1315
3. Copy & paste this code in Webflow Embed block
1416
```html
15-
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
16-
<script type="text/javascript" src="https://unpkg.com/web3modal"></script>
17-
<script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider"></script>
1817
<script>
19-
CONTRACT_ADDRESS = "<your contract address here>"
20-
NETWORK_ID = 1
18+
CONTRACT_ADDRESS = "<your contract address here>"
19+
NETWORK_ID = 1
20+
MAX_PER_MINT = 20
2121
</script>
22-
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
23-
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
24-
<script crossorigin src="https://unpkg.com/@mui/material@5.1.0/umd/material-ui.production.min.js"></script>
25-
<script type="module" src="https://buildship-dev.github.io/webflow-nft-components/mint/index.js"></script>
22+
<script src="https://nftcomponents.vercel.app/static/js/main.js"></script>
23+
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">
2624
```
2725
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).
2826
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
3129

3230
### Example for testing
3331
```html
34-
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
35-
<script type="text/javascript" src="https://unpkg.com/web3modal"></script>
36-
<script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider"></script>
3732
<script>
38-
CONTRACT_ADDRESS = "0x8Fac2e25DFF0B248A19A66Ae8D530613c8Ff670B"
39-
IS_TESTNET = true
33+
CONTRACT_ADDRESS = "0x8Fac2e25DFF0B248A19A66Ae8D530613c8Ff670B"
34+
IS_TESTNET = true
35+
MAX_PER_MINT = 20
4036
</script>
41-
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
42-
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
43-
<script crossorigin src="https://unpkg.com/@mui/material@5.1.0/umd/material-ui.production.min.js"></script>
44-
<script type="module" src="https://buildship-dev.github.io/webflow-nft-components/mint/index.js"></script>
37+
<script src="https://nftcomponents.vercel.app/static/js/main.js"></script>
38+
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">
4539
```
4640

41+
## FAQ
42+
4743
### I'm confused / it's not working, can you help me?
4844
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)
4945

@@ -52,10 +48,25 @@ Mint button will ask to connect wallet, so it's not necessary to add a "Connect
5248

5349
If you still want to do it, create a Webflow button with ID `connect`.
5450

51+
### How to add minted counter?
52+
Just create two text elements and assign them:
53+
- `minted-counter` ID to display minted number
54+
- `total-counter` ID to display collection max size
55+
5556
### How to use this with Polygon, Binance, or other Ethereum-based networks?
5657
It's easy! Change `NETWORK_ID` in the code snippet:
5758

5859
- Ethereum Rinkeby Testnet: `NETWORK_ID = 4`
5960
- Polygon `NETWORK_ID = 137`
6061
- Binance `NETWORK_ID = 56`
6162
- For others visit: https://chainlist.org/
63+
5. Change `NETWORK_ID` if you're using something other than Ethereum:
64+
- Ethereum Rinkeby Testnet: `NETWORK_ID = 4`
65+
- Polygon `NETWORK_ID = 137`
66+
- Binance `NETWORK_ID = 56`
67+
6. Create a button with ID `mint-button` to your Webflow site.
68+
7. You're done 🎉
69+
70+
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.
71+
72+
If you don't know how to code or want to launch fast, get Webflow NFT minting templates at https://buildship.dev

‎craco.config.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
module.exports = {
2+
webpack: {
3+
alias: {},
4+
configure: (webpackConfig, {env, paths}) => {
5+
const isEnvProduction = env === "production";
6+
const isEnvDevelopment = env === "development";
7+
webpackConfig.output.libraryTarget = "umd";
8+
webpackConfig.output.library = "NFTComponents";
9+
webpackConfig.output.filename = isEnvProduction
10+
? 'static/js/[name].js'
11+
: isEnvDevelopment && 'static/js/bundle.js';
12+
// Turn off chunking
13+
webpackConfig.optimization = {};
14+
15+
const miniCssPlugin = webpackConfig.plugins.find(
16+
({ constructor }) => constructor.name === 'MiniCssExtractPlugin'
17+
);
18+
if (miniCssPlugin) {
19+
miniCssPlugin.options.filename = 'static/css/[name].css';
20+
miniCssPlugin.options.chunkFilename = 'static/css/[name].css';
21+
}
22+
return webpackConfig;
23+
},
24+
},
25+
}

‎deploy.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF"
44

5-
if [[ "$VERCEL_GIT_COMMIT_REF" == "dev" ]] ; then
5+
if [[ "$VERCEL_GIT_COMMIT_REF" != "v1" ]] ; then
66
# Proceed with the build
77
echo "✅ - Build can proceed"
88
exit 1;

‎mint/README.md‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Mint NFTs on Webflow
22

3+
![Mint widget](public/images/screenshot.png)
4+
35
Check out our ready-to-use minting website template: https://textapes.art
46

57
[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
911
2. Create a new [Embedded HTML code](https://university.webflow.com/lesson/custom-code-embed) block (at least **Basic** site plan required)
1012
3. Copy & paste this code in Webflow Embed block
1113
```html
12-
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
13-
<script type="text/javascript" src="https://unpkg.com/web3modal"></script>
14-
<script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider"></script>
1514
<script>
16-
CONTRACT_ADDRESS = "<your contract address here>"
17-
NETWORK_ID = 1
15+
CONTRACT_ADDRESS = "<your contract address here>"
16+
NETWORK_ID = 1
17+
MAX_PER_MINT = 20
1818
</script>
19-
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
20-
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
21-
<script crossorigin src="https://unpkg.com/@mui/material@5.1.0/umd/material-ui.production.min.js"></script>
22-
<script type="module" src="https://buildship-dev.github.io/webflow-nft-components/mint/index.js"></script>
19+
<script src="https://nftcomponents.vercel.app/static/js/main.js"></script>
20+
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">
2321
```
2422
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).
2523
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
2826

2927
### Example for testing
3028
```html
31-
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
32-
<script type="text/javascript" src="https://unpkg.com/web3modal"></script>
33-
<script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider"></script>
3429
<script>
35-
CONTRACT_ADDRESS = "0x8Fac2e25DFF0B248A19A66Ae8D530613c8Ff670B"
36-
IS_TESTNET = true
30+
CONTRACT_ADDRESS = "0x8Fac2e25DFF0B248A19A66Ae8D530613c8Ff670B"
31+
IS_TESTNET = true
32+
MAX_PER_MINT = 20
3733
</script>
38-
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
39-
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
40-
<script crossorigin src="https://unpkg.com/@mui/material@5.1.0/umd/material-ui.production.min.js"></script>
41-
<script type="module" src="https://buildship-dev.github.io/webflow-nft-components/mint/index.js"></script>
34+
<script src="https://nftcomponents.vercel.app/static/js/main.js"></script>
35+
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">
4236
```
4337

38+
## FAQ
39+
4440
### I'm confused / it's not working, can you help me?
4541
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)
4642

4743
### How to add "Connect wallet" button?
48-
Mint button will ask to connect wallet, so it's not necessary to add a "Connect wallet" button.
44+
Mint button will ask to connect wallet, so it's not necessary to add a "Connect wallet" button.
4945

5046
If you still want to do it, create a Webflow button with ID `connect`.
5147

48+
### How to add minted counter?
49+
Just create two text elements and assign them:
50+
- `minted-counter` ID to display minted number
51+
- `total-counter` ID to display collection max size
52+
5253
### How to use this with Polygon, Binance, or other Ethereum-based networks?
5354
It's easy! Change `NETWORK_ID` in the code snippet:
5455

5556
- Ethereum Rinkeby Testnet: `NETWORK_ID = 4`
5657
- Polygon `NETWORK_ID = 137`
5758
- Binance `NETWORK_ID = 56`
5859
- For others visit: https://chainlist.org/
60+
5. Change `NETWORK_ID` if you're using something other than Ethereum:
61+
- Ethereum Rinkeby Testnet: `NETWORK_ID = 4`
62+
- Polygon `NETWORK_ID = 137`
63+
- Binance `NETWORK_ID = 56`
64+
6. Create a button with ID `mint-button` to your Webflow site.
65+
7. You're done 🎉
66+
67+
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.
68+
69+
If you don't know how to code or want to launch fast, get Webflow NFT minting templates at https://buildship.dev

‎mint/embed.html‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
1-
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
2-
<script type="text/javascript" src="https://unpkg.com/web3modal"></script>
3-
<script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider"></script>
41
<script>
52
CONTRACT_ADDRESS = "<your contract address here>"
63
NETWORK_ID = 1
74
</script>
8-
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
9-
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
10-
<script crossorigin src="https://unpkg.com/@mui/material@5.1.0/umd/material-ui.production.min.js"></script>
11-
<script type="module" src="https://buildship-dev.github.io/webflow-nft-components/mint/index.js"></script>
12-
5+
<script src="https://nftcomponents.vercel.app/static/js/main.js"></script>
6+
<link href="https://nftcomponents.vercel.app/static/css/main.css" rel="stylesheet">

‎mint/web3.js‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎package.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "webflow-nft-components",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@craco/craco": "^6.4.2",
7+
"@emotion/react": "^11.7.0",
8+
"@emotion/styled": "^11.6.0",
9+
"@mui/icons-material": "^5.2.0",
10+
"@mui/material": "^5.2.2",
11+
"@testing-library/jest-dom": "^5.11.4",
12+
"@testing-library/react": "^11.1.0",
13+
"@testing-library/user-event": "^12.1.10",
14+
"@walletconnect/web3-provider": "^1.6.6",
15+
"react": "^17.0.2",
16+
"react-dom": "^17.0.2",
17+
"react-scripts": "4.0.3",
18+
"web-vitals": "^1.0.1",
19+
"web3": "^1.6.1",
20+
"web3modal": "^1.9.4"
21+
},
22+
"scripts": {
23+
"start": "craco start",
24+
"build": "craco build",
25+
"test": "craco test",
26+
"eject": "react-scripts eject"
27+
},
28+
"eslintConfig": {
29+
"extends": [
30+
"react-app",
31+
"react-app/jest"
32+
]
33+
},
34+
"browserslist": {
35+
"production": [
36+
">0.2%",
37+
"not dead",
38+
"not op_mini all"
39+
],
40+
"development": [
41+
"last 1 chrome version",
42+
"last 1 firefox version",
43+
"last 1 safari version"
44+
]
45+
}
46+
}

‎public/favicon.ico‎

Whitespace-only changes.

‎public/images/buildship.png‎

1.12 KB
Loading

0 commit comments

Comments
 (0)