Part 1 - Connect Wallet using Metamask and mint an NFT
This 2-part tutorial will guide you through integrating with Bastion SDK in your Next.js app through Metamask and then using social login via Particle Auth.
This is Part 1 of the tutorial.
Note: You can find the complete code for this app in this Github repo.
Prerequisites
Node.js and npm installed
Basic understanding of Next.js and React
A Bastion account for API key
A Particle Network account
Step 1: Set Up Your Next.js Project
If you haven't already set up a Next.js project, create one by running:
npxcreate-next-appnextjs-demo-app
Make sure that you choose the following options for this demo to work. (It should still work with different options, but the project structure would be different).
Note:- If you're using App Router in NextJS 13, you should use /app/index.tsx instead of /pages/index.tsx
Go to your globals.css file, which is usually under /styles.
Add the following CSS at the bottom -
/* styles/globals.css */html,body {max-width:100vw;overflow-x:hidden;height:100vh; /* New: Set height to full viewport height */}/* Reset some default browser styles */body,h1,button {margin:0;font-family:Arial, Helvetica, sans-serif;}/* Make a container for the whole page */div {text-align:center;margin:0 auto; /* Updated: Removed top and bottom margin */height:100vh; /* New: Set height to full viewport height */display:flex;flex-direction:column;justify-content:center; /* Center content vertically */align-items:center; /* Center content horizontally */}/* Add some padding and a background gradient to buttons */button {padding:15px 25px;font-size:16px;cursor:pointer;border:none;border-radius:4px;color:#fff;background:linear-gradient(to right, #6C1EB0, #DE389F);transition:0.3s ease-out;margin-top:15px;}h3{margin-top:15px;}.main-container {text-align:center;height:100vh; /* Set height to full viewport height */display:flex;flex-direction:column;justify-content:center; /* Center content vertically */align-items:center; /* Center content horizontally */}/* Hover effect for buttons */button:hover {background:linear-gradient(to right, #DE389F, #6C1EB0);}/* Add some spacing between items */h1,h2,h3,button {margin-bottom:20px;}
Step 7: Test your app
Now you can run your app using
npmrundev
Navigate to http://localhost:3000 and click on the "Login with Metamask" button. Follow the usual Metamask login procedure, and you should see your Ethereum address displayed on the screen, indicating a successful login.
You should also see a Mint NFT button on the page now. If you click on this button, the app will mint an NFT to your Smart Wallet by sending a User Operation on the Arbitrum Goerli testnet using the Pimlico bundler.
That's it! You've successfully integrated Metamask with the Bastion SDK in a Next.js application. You can now proceed to build more complex functionalities into your decentralized application.