Code Monkey home page Code Monkey logo

chainblock's Introduction

chainblock

chainblock is an open source hardware project for displaying NFT art. The project consists of a Raspberry Pi image and a dapp.

The Pi image is based off of jareware/chilipie-kiosk. The image launches chromium in kiosk mode and opens https://chainblock.art, which serves the NextJS app in this repo. We are primarily designing for a square display, and focusing our efforts on dynamic NFTs and related apps.

dapp functionality

The long term goal is to allow users to display any of their NFTs. Users will also be able to choose to display free apps or widgets contributed by 3rd party developers.

We use WalletConnect QR codes to immediately ask the user to authenticate a wallet. Once authenticated, we use SimpleHash API to fetch their NFTs across multiple chains. Right now we are only fetching NFTs from supported collections. We are also displaying a few free widgets and some specific NFTs from collections we want to test. In the future this will be replaced by some app store or settings page that lets a user customize the things they display.

We then use Swiper.js to display an auto-playing slideshow of React components.

chainblock's People

Contributors

sbauch avatar

chainblock's Issues

Image distribution

I initially installed https://github.com/jareware/chilipie-kiosk as the image and used their customization flow to do things like specify the URL.

But I ended up also adding some things - python based script to set the timezone from the network for instance. For my local usage, I used macOS Disk Utility to create an image from the SD card I had used when installing additional software and making further customizations. I can use that to flash additional SD cards with everything properly setup.

That image is however extremely large - 30GB. I don't think there's really 30 GB of important things on there, but am pretty clueless about how to create an image that has all my customizations and end up with an .iso more similar in size to the forked project (800 MB).

Third party developer support

Very hand-wavy but I want to figure out how we can create an "app store" where 3rd party devs can bundle their own component that would be dynamically imported for users to install as apps.

Ideally we allow 3rd party devs to create these widgets without having to touch the source code here.

Chaos Roads custom component

I'd like to support the dynamic NFT project Chaos Roads - https://www.chainleft.art/chaos-roads

Right now the collection is being displayed using the IframeNFT component. This fetches metadata and iframes the animation_url.

This is less than ideal for a few reasons - we cant control the audio of the iframed window to pause it when the slide is not active, for instance. The main issue is that this tends to lock up the chromium browser. I've tried on a 2gb and 4gb RAM rpi 4B, and neither is really able to handle this.

The artist shared their codebase for a website they use to display tokens - https://github.com/chainleft/chaos-roads-explorer

It's entirely possible that the pi image isn't well-tuned for this, but as a first step I'd like to create a custom component that mimics the above site to try and bring more of this inside our control.

I did something similar for my project BlockClocks, where rather than iframing the site pinned on ipfs, I recreated that page as a react component.

So the steps generally here would be

  1. create a component to display a chaos roads token - maybe under the Collections dir?
  2. Change the chaos roads collection from using the IframeNFT to instead use this custom component
  3. A chaos roads token is hardcoded to be displayed inside Slideshow.tsx so one will display when running the dapp regardless of connected account holdings

I don't think we necessarily need to run the image to test things, instead load up your dev version of the site on your pi using ngrok. Then I can deploy a preview version for final testing and acceptance.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.