shout.setfive.com{5} Setfive - Talking to the World - Ramblings on code, startups, and everything in between

Services Client Stories Insights Contact Us HomeServices Client Stories Insights Contact Us web3: Creating a NFT contract By Ashish Datta | 34 Comments on web3: Creating a NFT contract Wow…it’s been awhile! A couple of weeks ago one of our clients approached us about helping them build an NFT (more on that later). In case you’re not extremely online” and don’t know what web3 or NFTs are here’s a quick primer. Crypto and NFTs As crypto currencies go Bitcoin and Ethereum are the OG” coins. They’re related projects but ultimately quite different. Ethereum differentiates itself because it enables the Ethereum Virtual Machine which is a global, distributed computing environment which uses Ethereum as payment for executing computation. Executing pieces of code, known as smart contracts, on the EVM is broadly referred to as web3”. The web3 vision is that it should be possible to transition dozens of financial businesses processes onto the blockchain by using the EVM and smart contracts to encode the rules of the processes. Think stuff like insurance, stock issuance, and even sports books. Non-fungible tokens (NFTs) are a specific type of smart contract which encode ownership of an asset onto the Ethereum blockchain. What makes NFTs special is that because of the decentralized nature of the blockchain and the EVM its possible to freely trade NFTs and encode rules into their smart contracts. OpenSea is the defacto NFT marketplace where users can trade tokens without the original creators having to create any additional infrastructure. It’s like StubHub…but anyone can sell any NFT on it and anyone can access it. In addition, because the EVM is Turing complete its possible to enable extremely complex behaviors within the contract of an NFT. In theory, a NFT could represent ownership of any items from tickets to an event or digital collectables. But as it turns out, digital collectibles is where most of the action is today. See for example Bored Ape Yacht Club which has seen some tokens trade for upwards of $24m, Set of Bored Ape” NFTs sells for $24.4 mln in Sotheby’s online auction OK, now that we’re all caught up how does one create an NFT? There’s more or less 3 steps: Develop a smart contract in Solidity which implements the EIP-721: Non-Fungible Token Standard Write some HTML/JS to interact with web3 via MetaMask to call your contract Publish the contract to the Ethereum blockchain Mint your tokens via the HTML/JS from step 2 Sounds simple enough, but how do you actually make it happen? Here’s a walk through to launch a NFT in your local test environment. You can develop the Solidity code in any text editor. But there are some IDE options including an IntelliJ plugin and a larger list here, https://ethereum.org/en/developers/docs/ides/ It’s certainly possible to write a EIP721 Solidity contract from scratch but you’ll end up writing a lot of boilerplate code which will increase the surface area for bugs. A sensible alternative is to use the OpenZeppelin framework which provides you with a suite of battle tested, open source libraries to bootstrap your smart contract. Additionally, OpenZeppelin has a handful of working tutorials so that you can see a smart contract working end to end. Check out OpenSea Creatures . After you have your contract the next piece is interacting with the blockchain to publish your contract. There’s a few tools here that all interact: MetaMask – MetaMask is a browser based crypto wallet and web3 provider. It allows you to store Ethereum and interact with contracts on the Ethereum blockchain. You’ll use MetaMask to ultimately mint a token. Ganache – Ganache is a tool which allows you to run an Ethereum blockchain on your local machine Truffle – Truffle is a suite of tools which makes it easier to interact with the blockchain. You’ll use Truffle to publish your contract and invoke methods within your contract. Once you have all the tooling setup the steps you’ll need to take are: Setup MetaMask and note the mnemonic phrase which your keys were initialized with Launch ganache with that mnemonic so that your accounts have some Ethereum Use Truffle to publish your contract to your local ganache blockchain Use the HTML/JS integration you wrote to invoke MetaMask to call the .mint() function in your contract Congratulations, you just minted your first NFT in test! The process for deploying a NFT live is effectively the same except that you’d need to buy some real Ethereum and you’d point Truffle at the live network when you publish your contract. Hope this was helpful and we’ll add more web3 related content as we continue to build solutions on it! Posted in General vue.js: Using vue with a Symfony Form By Spencer Murray | Leave a Comment on vue.js: Using vue with a Symfony Form One of our new projects here at Setfive is a service that will allow people to create a subscription that will condense AWS product updates into a single email notification with the user’s chosen frequency. An important aspect to a product like this is a captivating sign up — we wanted to include a clean and dynamic sign up section on the website that would help to entice people to sign up and use the product. This sign up form involves two side by side lists of ‘sources’ you would like updates about (i.e. Amazon EC2, Amazon Lambda, Amazon SNS), a textbox for your email, and a button to submit. The left side Sources are your options, which you can be adjusted via search or selecting different categories. The right side shows your selected sources — clicking a source will select it and move it to the right side, and vice versa to deselect one of your choices: The majority of the project is handled by Symfony — Symfony is perfect for creating rather generic data entry forms made up of different input types such as textboxes, radio buttons, and select boxes. However, we wanted our sign up section to be far more dynamic than what would be easily built through Symfony’s FormBuilder. Enter Vue.js: a JavaScript framework that can be easily integrated within a traditional web app. If you keep up to date with our Setfive blog posts, you may have seen my last blog about getting started with Vue.js . One of the key benefits of Vue.js is the ability to reuse/combine Vue components with each other and with Symfony’s forms — this allows us to reap the benefits of a dynamic/reactive Vue component as well as the automatic data validation and creation of Symfony. The Goal: We at Setfive love Symfony and to stay consistent, we try to use Symfony wherever possible. We wanted to reuse the ‘source select’ portion of the sign up section to allow existing users to edit their subscriptions and create new ones. However, for a registered user the create and edit subscription forms don’t require an email field and we’d instead want to immediately present ‘name’ and ‘frequency’ fields. his being the case, we knew combining our ‘source select’ Vue component with a Symfony form would be our best option — Symfony forms allow for much simpler data validation and can be displayed simply using Twig helpers. With a combination of Symfony and Vue, we were able to build a dynamic source selecting component with Vue and allow Symfony to validate the selected sources, the name, and the frequency automatically without any extra work. The Solution: The first thing we needed to do was split our existing ‘source select’ component up so that the double list selector is independent from the other fields on the sign up form. Fortunately, it is simple to create parent and child Vue components and pass data from child to parent. This is done through Event Emitting: when a source is selected in the child component (source select), that ‘event’ and its data is emitted to the parent component (form composed of source select + email field and submit button). It is a bit more complicated to synchronize this data with a Symfony form. To solve this problem, a few steps were needed. First, we had to see what a form...