E3D User Guide

A complete tokenized platform to explore blockchain analytics and swap tokens in a dynamic 3D environment.

E3D User Guide

Introduction

Welcome to E3D, your gateway to exploring the Ethereum blockchain in 3D. This guide will help you navigate the user interface, showcasing how to visualize transactions of tokens and NFTs in real-time, customize the layout, search, swap tokens, and more.

The E3D platform redefines the way we interact with blockchain data by providing a three-dimensional, user-friendly environment. Dive into a space where transactions and token activities are not just numbers and charts, but a visual narrative of the blockchain ecosystem.

About the E3D Token

The E3D Token is the cornerstone of our visualization platform, acting as a versatile tool for users to engage with a myriad of features. It's designed to enhance the user experience within the E3D environment, facilitating token swaps, unlocking advanced functionalities, and fostering a community-driven marketplace for NFTs and token-based analytics.

The E3D User Interface

There are two primary views in E3D, the 3D Token graph and the NFT Viewer. When the UI first comes up, the default view is the 3D Token graph. This can be changed by using specific paths and parameters in the URL. the center of the window is a spinning 3D sphere of tokens and NFTs. These represent the tokens and NFTs that have had the most recent transactions. There are other 3D and 2D shapes to choose from, but I decided to go with the 3D sphere as the opener, filling a good part of the visible space in the x, y, and z directions. It is also spinning, which is great since it is 3D, and half ofthe tokens and NFTs are on the back side of the sphere at any point in time. By spinning, the tokens on the sides and the back become visible as they move between gaps in the tokens and NFTs in the front. And since it is spinning, you do not really have to do anything, at least immediately. As you watch the sphere spin, your mind will take care of changing focus from one token or NFT to another as they move from the front, off to the side, and on to the back, and new ones appear from the other side.

Real-time and Dynamic Content

By default, there will be about 400-500 tokens and NFTs in the sphere. The actual number depends because what is being searched for are the latest transactions on the Ethereum blockchain. As of this writing, the default number of transactions is currently set at 5000. Those 5000 transactions are the swaps of tokens and NFTs, typically between a person's wallet address and the tokens or NFTs that are being swapped. This results in a couple of hundred tokens and NFTs, which is a reasonable number for the 3D graph. The graph can handle more, and it is fun to try 10,000 or even 50,000, but as the number goes up, it will become a more crowded space, and performance will go down. At some point, when the number of transactions and thus tokens and NFTs is too high, the browser will crash. There is a limit of 100K transactions though, which should work, albeit slowly, in most browsers on most platforms.

Token and NFT List

On the right side of the 3D graph is the vertical list of all the tokens and NFTs. Of course, this is a very large list and growing fast, so for better performance it renders dynamically as it is being scrolled. This list is visible by default, but can be closed using the list icon (aka hamburger) at the top right. The entries in this list are a superset of the tokens and NFTs in the 3D graph. In Token mode each entry contains the icon, name, price. In NFT View mode each entry is contains the NFT group icon, NFT group name, and the number of NFTs in the group. These lists can be long and is scrolled using the mouse/trackpad or with the up and down arrow key. When an entry in the list is selected, the action depends on the graph mode, which is a button at the top with the boxes. When it is enabled, the center window is the 3D graph and when entries are select in the list they are highlighted in the list and zoomed into the 3D graph “flying” from the current location or camera position to the selected entry. If the entry is not already in the graph, it will be dynamically added. The flight from one token to another looks cool, and adds to the sense of being in a space with objects in it that have some distance between them. I like it, and hope you enjoy the ride as much as I do. If the graph mode button at the top is disabled, the selected entry will be displayed in the NFT Viewer, which is a 2D view of the NFTs in the group. The NFT Viewer is a horizontal list of the NFTs in the selected group, and the selected NFT is displayed in the center of the grid. The NFTs can be selected using the mouse or the left and right arrows keys. The arrow keys work best because when the list is longer than the window, it will automatically scroll to show and select the next entry. The NFT Viewer is a great way to see all of the NFTs in a group, and to select one to view in more detail. In my opinion, the NFT View is best with the graph mode disabled, and the 3D graph is best with the graph mode enabled. But that is just me, and you may have a different opinion, which is great. I am looking forward to hearing about it.

Artistic Perspective

Personally, I see the E3D User Interface as a new form of modern art. So modern that it is a real-time snapshot of our dynamic reality, in 3D, of the tokens and NFTs that have had transactions in the last couple of minutes. Besides art, it is also a very holistic view of what society is thinking about and doing right now, manifested as tokens and NFTs. If AI is hot, you will see AI tokens. If Elon Musk’s dog is hot, you see tokens related to that as well. So it is not just what topics are on people's minds, it is what the people creating and deploying these think is on people's minds, and along with many other characteristics, interactions, statistics, descriptions, and features it all becomes a living story, and everyone loves a good story.

Social Media Integration

In some sense, it is a new form of social media, where the content is images of tokens and NFTs. To enhance this, I am thinking about adding a comment feature for each token and NFT, with like/dislike buttons for each. That could be fun. There is also a relationship between the tokens and NFTs since the size of each is determined by the volume of transactions during the range of time. There are other relationships that can be displayed as well, like transactions between users and tokens, not just between the tokens.

Mobile Experience

The E3D site does appear and work well on beefier iphones. The UI has been customized to fit well in both portait and landscape modes. The sphere spins, which looks amazing, and the tokens can be moved around. However, the UI does have a lot of controls, maybe too many, which makes the mobile UI very crowded. I have not really spent any time yet developing or testing specifically for mobile. I am looking forward to it though, because I think lots of people research tokens and NFTs from their phones, and would like a better UI, than just endless vertical lists of tokens sorted in different ways.

Lists

Speaking of lists, there are some in the E3D site, and there will probably be more. I will always strive to focus on making as much of the data available in the 3D space as possible, but many types of data are better suited to lists, especially as you move from the macro picture or ecosystem, to the details of a particular token or NFT. And some people may prefer to see the data in both 3D form and lists, in order to get different perspectives on it.

Detailed Information Overlays

When you select an item from the list or the graph, the info overlay in the top-left corner of the graph space instantly updates to display key details such as the icon, name, symbol, contract address, price, and market cap. Conveniently, there are icons that open new windows to the token's website, price charts, Etherscan, Twitter, and Uniswap. On the right side, you'll find a scrollable description of the selected token, which I personally find invaluable when exploring tokens that catch my attention. These descriptions typically offer insights about the token itself or the project it supports. To the far right is a price chart for the current day, keeping in line with the real-time focus of the site. I opted for a daily chart, although I could have chosen a weekly or yearly view. Keep in mind that not all tokens and NFTs are supported yet. While most of the data in E3D is mined from a Geth/Prysm server setup, some data is pulled on-demand using the CoinGecko and CoinMarketCap APIs.

Transaction Details List

The other main list in E3D is located at the bottom of the screen and is hidden by default. You can enable it by clicking the list icon in the bottom-left corner. This list displays the transactions for the currently selected item, and since an item is always selected by default (the first token or NFT in the list), there will always be some transactions shown. The columns in the transaction list are a subset of fields from an Ethereum block transaction. For each transaction, the list includes the timestamp (formatted as 4/28/2024, 8:50:11 AM), icons for the sender and receiver, block number, transaction hash, transaction value, transaction fee, gas limit, gas used, and gas price. For values in ETH or Gwei, you’ll also see the equivalent in USD or ETH, such as “0.003600 ETH ($11.96)” for a transaction fee, or “40.000000000 Gwei (0.00000004000000000 ETH)” for a gas price.

Flying to Tokens

Clicking on a transaction entry takes you directly to the corresponding token in the graph. Shift-clicking on a transaction opens its Etherscan page, but I’m not entirely satisfied with this method, as it’s not immediately clear. I’m considering changing it so that clicking on the Block# or Transaction Hash will take you to the Etherscan page instead, although that still doesn’t feel as intuitive as I’d like. Since there may be more entries than fit on the page, you can scroll through the list using the trackpad or mouse up/down keys.

Take the Free Tour

As if rotating the map in 3D wasn’t impressive enough, there’s also a (rather unappealing) green button at the bottom that starts the Tour. When you begin the tour, it flies you to each token, giving you a brief moment to read the description before moving on to the next. The time spent at each token is just a few seconds, so if something catches your interest and you want to explore it further—or even make a swap—you can stop the tour at any time by hitting the Tour button again. There are also forward and backward buttons to manually navigate through the tour. The backward button is particularly useful if you missed something and want to revisit it. There's definitely more we can improve here, and we will!

Auto Refresh

For those who want E3D running continuously, whether on an investor wall at a large trading firm or just on your own setup, the Auto Refresh button is perfect for you. When Auto Refresh is enabled, E3D.ai will automatically update the graph with the latest token transactions. It pulls whatever is cached on the server, so occasionally it may look the same, but once the server refreshes the cache, the graph will update with the newest tokens and NFTs that have had recent transactions.

Advanced Layouts

Now let’s have some fun. When I use E3D, I love experimenting with different shape possibilities using the vertical toolbar on the left. At the top, you’ll find a set of icons for switching between 2D and 3D modes. Although the graph is always rendered in 3D, some shape icons allow you to arrange tokens and NFTs in either 2D or 3D. The difference? In 3D mode, tokens and NFTs have depth, utilizing the z-axis, while in 2D mode, all tokens and NFTs sit on the same plane with no depth. My favorite thing to do is create custom layouts by combining shape controls in both modes. For instance, if you switch to 2D mode and click the sphere icon, it generates a 2D circle, like a wheel. Even though it's in 2D, the layout exists in a 3D space, so you can move tokens out of the circle and spin them around, which creates some really interesting and cool visual effects.

Pyramid and Grid

But let’s move on. I’m also a fan of the Pyramid and Grid views in 3D. They’re similar to the sphere, but instead of being hollow in the middle, they’re filled with tokens and NFTs evenly spread in all directions. These views can get a bit dense and crowded, especially if there’s high volume, which can cause the token icons to appear larger. If the graph feels too packed and the images are overlapping, you can use the Expand button (the last icon on the bottom-left toolbar) to give everything more space. Right above it is the Compress button, which pulls everything back toward the center.

The Tube

Next up is one of my favorites—the Tube. The Tube layout tool is represented by the icon with two horizontal lines. What makes the Tube view interesting is that the result depends on how you get there, which I think is awesome. Now that we’ve covered a few layout modes and controls, let me share one of my favorite workflows that involves the Tube. Start by switching from Sphere to Grid. As we’ve discussed, the Grid positions the tokens and NFTs in a pattern that sets things up perfectly for the Tube. Once you're in the Grid view, switch to the Tube layout, then hit the Expand button to spread everything out. Not bad, right? But here’s the fun part: use your mouse or trackpad to rotate the Tube so that the opening faces you, and you’re looking right through it. How cool is that? Now, zoom in and out, exploring the inside of the Tube—it’s a totally unique experience!

Top Toolbar

Ok, enough fun for now—or is it? Let’s talk about the toolbar at the top, starting with the E3D icon on the far left. Have you clicked it yet? It opens up an E3D Welcome dialog, giving you an overview of the Beta version, the app’s highlights, the vision behind it, and why you should use it, sign up, and buy the E3D Token. On the opposite end, the far right, is the documentation icon. This may even be how you ended up here, but I can’t say for sure, because as I’m writing this, I haven’t quite decided where to place it!

Search Field

The search field will eventually support a wide range of features, but for now, you can enter a contract address, and it will search the database for all related transactions. This search goes further back than the default one and includes token-to-user transactions. While the graph might not look too exciting—users are just represented as blue spheres—the transaction list provides all the details of user-to-token transactions, which is the main purpose of this feature. There's so much more the search bar could do, and I’m excited to add those possibilities soon. That said, I’d love to hear your ideas—feel free to email me at support@e3d.ai with any requests!

Reload Button

To the right of the search bar is the reload icon. Unlike the browser’s reload, this doesn’t refresh the entire page but instead runs a new query based on your current settings. For example, if you click the filter icon (the funnel-shaped button) next to it, the search bar will auto-populate with the contract address of the currently selected token. You can then click the reload button to load the transactions for that token. If you narrow things down to just one token and all its transactions, you can simply clear the search bar, reload again, and hit the sphere icon to reset the view.

Rotate Button

We’ve already touched on the spinning sphere, which is enabled by default and can be toggled using the rotating arrows icon. The spin feature is also disabled when you click anywhere in the graph, although sometimes it takes a few clicks, which I’m working on. Regardless of the mode or the arrangement of tokens and NFTs, clicking the rotate feature will get everything spinning again.

Visualization Controls

The chart icon is enabled by default and controls the token information overlay on the graph whenever a new selection is made. This includes the Transactions chart in the bottom-left corner. These elements can be turned off individually but will reappear with any new selection. Disabling the whole feature prevents them from appearing at all.

Save and Load Graphs

To the right of the chart icon, you’ll find the Save and Load Token Coordinates buttons. This is a premium feature that may require a subscription in the future, but I’m still deciding. One idea is to offer it as a reward for purchasing a certain amount of E3D Tokens. What do you think? The feature allows you to save the current timeframe and token coordinates to the database as a named entry, and then reload that saved configuration later. This is currently in beta and requires signup and login to manage saved profiles.

Download Options

The File icon with an arrow opens a menu where you can choose the format to download the graph to your local folder. Options include CSV, JPEG, PNG, and PDF. Note that only the token and NFT images in the graph window will be saved, not the information overlays.

MetaMask Integration

We’re almost done, so stick around for the finale! You’ve probably noticed the Connect Wallet button in the upper right. This is how you link your MetaMask wallet to swap the currently selected token. Once connected, clicking the SWAP TOKENS button opens a dialog showing the amount of ETH to swap, defaulting to 0.01 ETH (about $32 at the time of writing). You can adjust this amount. After clicking "Continue to Wallet," MetaMask will appear with the swap details, where you can either Reject or Confirm the transaction.

NFT and Token Transactions

It just occurred to me that the SWAP TOKENS probably won’t work for NFTs. NFTs on the Ethereum blockchain are different from ERC-20 tokens. The smart contract for an NFT is an ERC-721, and is really the manager of the NFTs, not the individual NFTs themselves. Each NFT is actually just an id that is used to identify and locate the information about the NFT, like where the image is, which is usually on the IPFS network somewhere. I will have to look into that and figure it out.

Seamless Integration of Tokens and NFTs

But speaking of NFTs, I will take this opportunity to point out how both tokens and NFTs are both seamlessly integrated into E3D. That was not easy to do, but it was part of the vision and I was determined to figure it out. As you use E3D more, you will start to notice that there are not as many NFT transactions as there are token transactions, and although this makes sense it is interesting to get a sense of it in the app. It will also be interesting to see that balance change as tokenize everything in the universe becomesmore common. One more thing I notice is that NFT transactions tend to come in batches. The result of this is that for a particular range of time the E3D map may contain a bunch of NFT images, and sometimes they are all the same image. I am not sure why this is, but I think it is because the NFTs are being minted in batches, and then sold in batches. I am looking forward to learning more about this, and to see how it affects the E3D map.

E3D AI Newsletter

The newest feature is the E3D AI Newsletter. The button for the newsletter is a newspaper icon on the right of the top toolbar. The newsletter is automatically generated every night at midnight using the latest data from the Ethereum blockchain. It contains charts for the transacion volume per hour for today compared to yesterday, the top 10 tokens and NFTs by volume, and the ETH rate for each hour for today compared to yesterday. This data is also used in a query to openai to research the web and provide insights on the ethereum blockchain activity and tokens. The newsletter is a great way to stay informed about the latest trends in the blockchain space, and to discover new tokens and NFTs that are gaining popularity. This is just the beginning, and I am looking forward to expanding the newsletter with more features and insights in the future.

NFT Minting

The longer-term vision is to add a feature to mint a new NFT out of a saved graph. The NFT will containthelist of other NFTs in the image such that when the NFT is purchased a percentage of the proceeds will automatically be paid out to the owners of the other NFTs in the image. Lots of work to do on that, but it will happen.

The NFT Minting feature represents an ambitious expansion of the E3D platform's capabilities. This featurewill enable users to mint a new NFT directly from the E3D platform, using a saved visualization of the Ethereum blockchain. The resulting NFT will not only encapsulate a unique snapshot of blockchain interactions but also embed the essence of the community and connectivity represented within that snapshot.

Process and Functionality

To mint an NFT, a user will first save a particular graph configuration that they find meaningful or informative. This could be a visualization that shows a surge in a particular token, a notable shift in the market, or just a personally aesthetically pleasing arrangement of tokens and NFTs. Once saved, the user can initiate the minting process directly within the E3D platform.

The minted NFT will include a detailed list of all tokens and NFTs depicted in the saved graph. This list ensures that each element within the graph is recognized as a contributing factor to the overall value and uniqueness of the final NFT. When the NFT is sold, a predetermined percentage of the proceeds will be automatically distributed to the owners of the original NFTs included in the image. This revenue-sharing model incentivizes users to include their NFTs in visualizations and fosters a sense of community and mutual benefit.

NFT Revenue Sharing Model

A distinctive feature of these minted NFTs is the built-in revenue sharing mechanism. When an NFT created from a saved graph is sold, a predetermined percentage of the proceeds will be automatically distributed to the owners of the original NFTs included in the image. This feature not only incentivizes users to include their NFTs in such visualizations but also fosters a sense of community and mutual benefit. It aligns with the decentralized ethos of the blockchain community, where collaborative success contributes to individual benefits. This is a unique and innovative approach to NFT creation and monetization, and we are excited to bring it to the E3D platform.

Technical Considerations

Implementing this feature involves complex interactions between smart contracts, the E3D visualization platform, and the Ethereum blockchain. The smart contracts must be designed to handle the tracking of ownership and the distribution of proceeds in a secure and transparent manner. They will need to be robust enough to manage potential changes in token and NFT ownership, ensuring that proceeds from sales are always directed to the current owners. The E3D platform must be integrated with these smart contracts to facilitate the minting process and ensure that the resulting NFTs accurately reflect the saved graph configurations. Additionally, the platform must provide a user-friendly interface that guides users through the minting process and clearly communicates the revenue-sharing model. This is going to be a lot of work, but also super fun, so I am excited to take on the challenge.

Challenges and Opportunities

The development of the NFT minting feature poses several challenges, including ensuring the scalability of the system to handle potentially large numbers of transactions and payouts, maintaining security against potential exploits, and ensuring a user-friendly interface that can accommodate the complexities of NFTminting and sales. However, the opportunities are significant so we are determined to figure it out. By enabling users to create and monetize unique digital assets based on real-time data, E3D can significantly enhance user engagement. Additionally, this feature could attract a new audience of users interested in the intersection of digital art, blockchain technology, and financial investment. The potential for creating a vibrant marketplace of NFTs that reflect the dynamic nature of the blockchain ecosystem is immense, and we are excited to explore this frontier.

Future Developments

As the platform evolves, we anticipate expanding the capabilities of the NFT Minting feature to include more customizable options for visualization, more sophisticated algorithms for revenue distribution, and deeper integration with other blockchain platforms and currencies. This would not only enhance the utility and appeal of the E3D platform but also position it at the forefront of digital asset innovation and blockchain visualization technology. We are excited to embark on this journey and invite you to join us in shaping the future of blockchain analytics and NFT creation.

Closing Thoughts

That is all I have for now. I hope you are excited to use E3D.ai, or if you already do, you now know how to use it more effectively. I hope you get as hooked on E3D as I do, and welcome you to provide feedback on how we can make it better together.