The unlocked preview screen.
The locked screen. (Button)
We are building a platform to allow Artists to tokenize their work on the Ethereum blockchain. For the hackathon we decided to develop a completely new widget for artists to integrate our platform in their own websites. We do this by offering an exclusive zone where only people who have contributed to an artist by buying their personal tokens can access the content. We have created an easy-to-use builder interface for the artist to enter in their token address and generate a one-line iframe embed which they can copy-paste onto their website. Our project is deeply rooted in idea of self sovereign identity because the token is completely owned and controlled by the artists and not central intermediaries like fundraising platforms.
What it does
It is at its core simply a button which when clicked will prompt the user to sign a message on their MetaMask account to prove they own some of the tokens. If they own at least the required amount of tokens they will be authenticated to access the creator's "Backstage", their exclusive zone where they post content only for their contributors. If the user doesn't own the required amount of tokens they will be prompted to purchase the tokens before they get access. If the user does own the required amount of tokens, they will be displayed the exclusive content.
The button and display logic is encapsulated in a simple one-line iframe which creators can copy-paste onto their own websites. In this way, we've brought the Web3 Ethereum world into legacy web pages without disturbing the user flow.
How we built it
We used create-react-app to bootstrap a completely new React project. Ethereum is our smart contract layer for the payments and artist currency and we are live on the Rinkeby testnet. We used styled-components for most our styling. NodeJS, Express, MongoDB exposed by ngrok are used for a backend to handle the authentication of tokens and the granting of the access permissions. We simulated Jolocom DID procedure in the backend by creating a new credential every time a user buys a service.
Challenges we ran into
We struggled to find a compromise between putting as much of our infrastructure on the decentralized blockchain as we could and putting what we needed to on our MongoDB backend. We needed to solve two problems which seemed severe at first: 1) the problem of expiring access control permissions based only on the information we could get from the public blockchain and 2) where to store the images uploaded by the creators. For the first problem we found an elegant solution with using the transaction nonce already included in the state of each account to control the expiration permissions, but still need to completely implement this in the backend. For the second problem, we decided that the truly important part of our platform that needed to be trustless was the payments and currency aspect and that we were willing to make the tradeoff of storing user data for the sake of simplicity and ease of use.
Accomplishments that we're proud of
We are proud to have completed a contained project which can be delivered to consumers today.
What we learned
We learned about the DID open standard and the Jolocom library for interacting with it. We also learned how to make tradeoffs between server backend technology and the blockchain, and have discovered some of the strengths and weaknesses of both. We learned how to create easily iframes as embeds that can be reused among consumers. We have found out that we can embed MetaMask in an iframe and this creates a nice user experience for bridging normal web pages with Ethereum enabled Web3.
What's next for Backstage
We need to do quite a bit of work until Backstage is ready for production use, both on refinement of the presentation components and on the backend. We are working on the next iteration of our platform for artists which is scheduled to go live February 13, 2019.