Front-end code for teia

Overview

Teia UI

size of the repository number of opened issues number of opened PRs license website status

This repository is the frontend code of the open, community owned Tezos NFT Platform teia.art.

Teia is a fork of the Tezos NFT platform Hic et Nunc, build by the Teia community for the Teia community with accessibility, sustainability, decentralization and equity in mind. Read more about Teia's Core Values (Wiki)

Find further info and documentation on the Teia Wiki

Install

git clone https://github.com/teia-community/teia-ui.git
npm install
npm start

Article about setting up a clone/mirror of Teia (Wiki)

Contributing

Article about contributing to the Teia code (Wiki)

Code of Conduct


License

MIT license See LICENSE

Comments
  • [feat] update Teia indexer to support new metadata fields

    [feat] update Teia indexer to support new metadata fields

    The Teia marketplace minter logic is being updated to support new metadata fields based on this requirements doc: https://docs.google.com/document/d/1R3rxuJfpCBoh52wDsYpEmY_iuH8sd6l17oh4nk7jlRE/edit?usp=sharing

    See: https://github.com/teia-community/teia-ui/pull/104 and https://github.com/teia-community/teia-ui/pull/113

    The Teia indexer needs to be updated to make the new metadata available via the GraphQL API so it can be displayed in the Teia marketplace UI for mints.

    Example of new metadata: https://teia.rocks/objkt/748200

    opened by NoRulesJustFeels 29
  • fix: ⚡️ Fix dependency vulnerabilities

    fix: ⚡️ Fix dependency vulnerabilities

    Disclaimer

    This is updating a lot of dependencies. To properly test it locally if you have already pulled the repo before, you must first delete node_modules and re-run npm i


    Current main:

    50 vulnerabilities (27 moderate, 20 high, 3 critical)
    

    This PR:

    10 vulnerabilities (7 moderate, 3 high)
    

    I'm following dependabot alerts for now. Most of them actually came from the templates.

    Fixes: dependabot/2 dependabot/9 dependabot/50 dependabot/26

    💪 enhancement 📦 dependencies 🧹 cleanup 🛠 developer 
    opened by melMass 15
  • [feat] Use the nft.storage IPFS gateway

    [feat] Use the nft.storage IPFS gateway

    Describe the problem

    Once we use the nft.storage IPFS service, we should consider using their IPFS gateway: https://nft.storage/docs/concepts/gateways/

    Describe the solution you'd like

    Use https://nftstorage.link/ipfs/* for loading IPFS files

    Alternatives considered

    No response

    Additional context

    No response

    good first issue 🧪 feature request ⛏ minting / ipfs Priority: Medium 
    opened by NoRulesJustFeels 12
  • fixed endless loading of collab tab and redirect to /tz problem

    fixed endless loading of collab tab and redirect to /tz problem

    this fixes the problem mentioned in https://github.com/teia-community/teia-ui/issues/2 and a further problem that triggered a redirect to '/tz' when clicking on the collab tab as a user without subjkt.

    🐛 bug 💪 enhancement 
    opened by xat 10
  • feat: ♿ first accessibility updates

    feat: ♿ first accessibility updates

    First updates for accessibility improvements based on the aXe extension: https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd

    opened by NoRulesJustFeels 9
  • [feat] NFT.storage continue...

    [feat] NFT.storage continue...

    Fixing issues due to the IPFS switch and older unreported ones:

    • [x] Cannot edit profile
      • [x] Works but there is absolutely no feedback...
    • [x] MD preview / styling -> fixed displayURi issue, styling should be done is a dedicated PR
    • [x] Subfolders for generative tokens (linked to https://github.com/teia-community/ipfs-upload-proxy/pull/3)
    • [x] ~~Clean the folders before upload? (macOS creates .DS_Store files and ._. prefixed files, windows has ThumbDB), might be "dangerous" to alter the archive~~
    opened by melMass 9
  • fixed swapping in collab mode

    fixed swapping in collab mode

    this fixes swapping in collab mode. the operator in the update_operators transaction was wrongly set to the address of the collab contract instead of the marketplace address.

    this should carefully be tested, before merging.

    🤜 🤛 collab-contract 
    opened by xat 7
  • [support] metaData not loading

    [support] metaData not loading

    Objkt minted on TEIA 7 hours ago. Metadata are still described as being queued.

    https://teia.art/khc tz1V6f3bXuZV6Qu8MPJHZgdHkt4w1UVuEqrG OBJKT#747226

    SC1

    SC2

    opened by JNK101 5
  • Minting metadata improvements

    Minting metadata improvements

    Based on https://docs.google.com/document/d/1R3rxuJfpCBoh52wDsYpEmY_iuH8sd6l17oh4nk7jlRE/edit?usp=sharing

    New fields still need to be added to the GUI.

    opened by NoRulesJustFeels 5
  • [feat] add ability to choose rpc nodes

    [feat] add ability to choose rpc nodes

    Describe the problem

    Currently the rpc node is hard coded in some places. For example https://github.com/teia-community/teia-ui/blob/develop/src/context/HicetnuncContext.js#L46

    Describe the solution you'd like

    It would be nice to be able to configure the rpc node endpoint in the .env file.

    Alternatives considered

    No response

    Additional context

    No response

    🧪 feature request 
    opened by Zir0h 4
  • [bug] SVG links broken on overview pages

    [bug] SVG links broken on overview pages

    Describe the bug

    For example on https://teia.art/makio135 a lot of the objkt links aren't working.

    Reproduction

    1. go to https://teia.art/makio135
    2. hover over some of the objkts

    Expected behavior

    mouse pointer should change to a little hand and you should be able to click on the objkt to see the details page

    Platform and versions

    Mozilla/5.0 (X11; Linux x86_64; rv:105.0) Gecko/20100101 Firefox/105.0
    

    Console output

    No response

    Additional context

    No response

    🐛 bug 🧹 needs triage 
    opened by Zir0h 4
  • ⚡develop/layout

    ⚡develop/layout

    preview url

    Are the tasks already solved in this PR 🚧 Are the tasks in progress that will get done by early January.


    • ✅ Reworked the Header logic, I still have to move things around, but it made the migration of the PR too complex, I will push these next week.

    • ✅ Created a dedicated DropDownButton and DropDownMenu component, used by the new events menu and filters menu.

    • ✅ Masonry & Single view mode switches

    • ✅ Reworked the menu logic and separated it to be reusable in the footer

    • 🚧 OBJKT History, @xat added the "transfer" transaction type but we need an icon for it.

    • 🚧 Zen Mode: The logic is there, it just need to be hooked (context + localStorage I think, like the feed view mode)

    • 🚧 New Footer, it should be inlined on pages with finite scroll (profiles, config, faq etc..) and based on scroll for the infinite feeds?

    • Homogenise the codebase and split components logic;

      • ✅ Removed a bunch of non needed nesting and classes.
      • 🚧Use container queries where it makes sense
      • ✅ Separate Components and Atoms (atom < component < page)

    ℹ️ - The fonts are the right ones (named the same as in Figma) but don't look the same, I will check later with @denscimonk


    Out of grant

    • 🚧 Created a Hook to manage localStorage settings, only the view mode is used for now. It would be nice to also have a separated key for the "profile" feeds and the other feeds too.
    • 🚧 Advanced filters: only the atomic UI is implemented, the whole logic will be the most important task of January imo.
    opened by melMass 0
  • [feat] ✨💾📭 Storing User Data, Decentralized.

    [feat] ✨💾📭 Storing User Data, Decentralized.

    Describe the problem

    In the infinite feed of life, it's a common desire to store great stuff in our minds. Sadly, the brains don't work that well on storing NFTs. Countless times we crossed by astonishing pieces of art on Teia. Yet sometimes we have no money to acquire it. I just wish I could save it for later!

    This is a proposal for storing list-like user data, such as saved collections (just like instagram saves), and can be used for even more purposes like follows, likes, shopping carts, the possibilities are endless.

    Describe the solution you'd like

    The Cycle:

    1. A user click on "save" a post, the frontend must "mint" a list on a smart contract that relates this "file list" with a specific user (user: tz1..., list: ipfs CID). This updatable list is published to IPFS as a.json IPNS (editable ipfs that never changes the CID), then minted.

    2. The problem of IPNS files is that it can only be edited by the IPFS node that created it and holds a key to edit it. The solution would be to use a centralized node by teia or by using winloss's solution, that will hold the key to edit it. Owners of the wallets also have the possibility to communicate with the smart contract that holds the list CID and can be able to change it to its preferred solution later.

    3. As soon as the user have the .json file list ready floating on IPFS's infinity of data, we must populate it everytime a user clicks on that save button. This is a bit too heavy usage to do directly to IPFS, as real time micro interactions does not work well yet with these p2p technologies as winloss suggested (more research needed). In this sense we would need to index all the users interactions on an indexer as a "cacher" that will then batch-publish to their respective IPNS files by using our centralized ipfs node with private key.

    Mapping What We Will Need:

    • An IPNS/IPFS node and a pinning service (could be winloss's solution)
    • A save button design for the UI of the front end
    • A react js code to mint a new IPNS .json list onclick of the save button if the user dont have a saves list yet (this can happen other time too, like on settings)
    • A react js code that connects to the node and launches an IPNS file to IPFS for the user with the updatable json list format storing the objkt IDs
    • A simple smart contract to store the wallet and the ipfs CID, and enable users to change it later as owners of the wallets
    • A react code than understands if the user is already with a saved list registered on the smart contract, and if so, each interaction can now be indexed on an indexer blazing fast
    • An indexer that will work as a gateway for mass interactions that then will be batch stored on the IPNS file via the IPFS node
    • A backend cron batch publisher from the indexer db to our IPFS node's stored IPNSs
    • A page to see the saved items of the user like teia.art/saves. It could be public like /tz/t1.../saves or private for the logged user like just /saves.

    I imagine if we had only one collection the json would look like this:

    teia-saves-<tz1wallet>.json
    {
      "owner":"tz1...xyz",
      "objkts":["001, 002, 003"]
    }
    

    or if we had multiple collections then

    teia-saves-<tz1wallet>.json
    {
      "owner":"tz1...xyz",
      "lists":{
        "list name 1":{
          "objkts":["001, 002, 003"]
        },
        "list name 2":{
          "objkts":["004, 005, 006"]
        }
      }
    }
    

    Alternatives considered

    All ideas for alternatives and better ways for executing are very welcome, as this is just an excercise to spark the flame of creativity in your minds.

    Additional context

     ________________________
    |.----------------------.|
    ||                      ||
    ||       ______         ||
    ||     .;;;;;;;;.       ||
    ||    /;;;;;;;;;;;\     ||
    ||   /;/`    `-;;;;; . .||
    ||   |;|__  __  \;;;|   ||
    ||.-.|;| e`/e`  |;;;|   ||
    ||   |;|  |     |;;;|'--||
    ||   |;|  '-    |;;;|   ||
    ||   |;;\ --'  /|;;;|   ||
    ||   |;;;;;---'\|;;;|   ||
    ||   |;;;;|     |;;;|   ||
    ||   |;;.-'     |;;;|   ||
    ||'--|/`        |;;;|--.||
    ||;;;;    .     ;;;;.\;;||
    ||;;;;;-.;_    /.-;;;;;;||
    ||;;;;;;;;;;;;;;;;;;;;;;||
    ||;;;;;;;;;;;;;;;;;;;;;;||
    '------------------------'
                    [save objkt]
    
    🧪 feature request 
    opened by babycommando 1
  • [feat] Allow an artist to specify if their content may be used for AI training

    [feat] Allow an artist to specify if their content may be used for AI training

    Describe the problem

    AI models are trained on publicly available data and images. If an artist mints on Teia, there is currently no way for the artist to specify that any crawlers gathering data for AI training should not use their work.

    Other sites like Deviantart and Artstation have deployed ways to allow their artist to control if their art can be crawled and used in AI training.

    Describe the solution you'd like

    ArtStation has just released an update to their platform and terms of service where projects tagged using “NoAI” will automatically be assigned an HTML “NoAI” meta tag. This will explicitly disallow the use of the content by AI systems and mark the project so that they know they are not allowed to use it.

    Deviantart supports the following:

    To not allow AI to use anything on the page:
    <meta name="robots" content="noai">
    To not allow AI to use any images on the page:
    <meta name="robots" content="noimageai">
    To place both directives:
    <meta name="robots" content="noai, noimageai">
    

    One option for Teia could be to follow Artstations and allow artists to tag their work with "noai". The Teia frontend would then add the HTML metadata tags.

    Alternatives considered

    No response

    Additional context

    No response

    🧪 feature request 
    opened by NoRulesJustFeels 0
  • [feat] Provide a link to the real artist on restricted accounts pages

    [feat] Provide a link to the real artist on restricted accounts pages

    Describe the problem

    Copyminters and accounts that violate the Teia T&Cs use the content from other artists and, in many cases, make a profit that is a loss to the original artist.

    These activities are harmful to the original artist and Teia's reputation.

    We want to give back to the original artist by promoting their website.

    Describe the solution you'd like

    Show a link to the original artist's website for accounts that have been restricted.

    Technically, this could be implemented using a GitHub list similar to the other content moderation lists. The list would map a Tezos address to an artist's name and URL.

    The Teia UI would use this list to determine what name and URL to display. This would be part of a banner on the restricted account page.

    Alternatives considered

    No response

    Additional context

    No response

    🧪 feature request 
    opened by NoRulesJustFeels 0
  • [feat] implement a

    [feat] implement a "nearest" filtering option so pixel art can stay sharp when displayed in the ui

    Describe the problem

    Feature request by qizzio versum has this feature:

    small pixel artworks get upscaled with a non/nearest filter type that makes sure that the artwork is displayed bigger than the actual pixel resolution without losing its sharpness

    Describe the solution you'd like

    could be an additional option upon mint. i reckon it would require to be stored in the metadata? or we could upscalke all canvases that are below smth like 24x24 pixel in resolution (smooth filtering doesnt make sense for such small canvases anyways.

    Alternatives considered

    No response

    Additional context

    since pixel art is supposed to look all "boxy", a "nearest" filtering type can be used to endlessly upscale pixel art.

    orwNd-3653249504

    🧪 feature request 
    opened by merchantcoppola 0
  • [feat] add the SUBJKT name next to the wallet abbreviation when synced

    [feat] add the SUBJKT name next to the wallet abbreviation when synced

    Describe the problem

    suggested via discord by root#3305:

    Describe the solution you'd like

     instead of the wallet abbreviation at the top we could show the username and avatar when applicable

    Alternatives considered

    maybe instead of removeing the wallet abbreviation, the SUBJKT could be put next to the wallet address name nma

    Additional context

    maybe this is solved with new design updates for teztok integration?

    🧪 feature request 
    opened by merchantcoppola 0
Owner
Teia Community
Teia is a community owned evolution of the Tezos NFT Marketplace Hic et Nunc.
Teia Community
Bookstore CMS React Front-End to display a list of books, categorize it, add and remove books and update your reading progress

Bookstore REACT app to manage your books Build an app to display a list of books, categorize it, add and remove books and update your reading progress

Eapen Zacharias 3 Aug 19, 2022
Grid-tool - Small tool that allows you to integrate a predefined or generated grid into your front-end development environment.

Grid tool Small tool that allows you to integrate a predefined or generated grid into your front-end development environment. Tool installation includ

hmongouachon 2 Jan 4, 2022
A personal project, made with React, React Native, Typescript and some of the most used front-end libraries.

A personal project, made with React, React Native, Typescript and some of the most used front-end libraries.

Alvaro Junior 1 Jul 23, 2022
Getir.com-react-tailwind - Getir.com anasayfa react + tailwind front-end

Getir.com React + Tailwind Front-end Bir gece uğraşı olarak getir.com'un anasayf

Tayfun Erbilen 102 Dec 17, 2022
A boilerplate for kickstarting my projects with Django backend and React front-end

Django-React-Boilerplate This is a boilerplate for kickstarting my projects with Django backend and React front-end. (AND, PostgreSQL) as the database

Mehedi Shafi 5 Apr 14, 2022
Next JS micro front-end project

a project to create micro frontend nextjs app in seconds!

Amirreza 4 Sep 1, 2022
This is full stack todo Application which has front end and backend side on my own. So you can try this out. Build using

Full Stack Todo Application Hello Everyone... Here I am sharing some information about the TODO APP which I build using React, Redux, Material UI, Exp

Nayan Ingale 5 Nov 8, 2022
OpenMaze landing page front-end

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

OpenMaze 6 Dec 15, 2022
🔍 Remake of Reguleque's front-end, a search engine for government employees. Maintained by the América Transparente foundation.

regulf-react Frontend for Reguleque, a search engine for chilean public workers records' as obtained through transparency databases. Get started To ru

América Transparente 3 Dec 15, 2022
Fiz uma validação de senhas no Front-End usando RegEx!

Seja bem vindo a um dos meus #JokeCodes Nesse código vou te mostrar como fazer uma validação de senha no Front-End, com feedback na tela de login!, us

JOÃO PSTER 3 Oct 5, 2022
Demo project to deploy front- and backend together on heroku.

spring-boot-react-bundle This is a demo project that shows how it is possible to deploy a react frontend and a Spring Boot backend into a heroku dyno.

André Schreck 5 Jul 22, 2022
Find your duo - front/back/mobile

Sobre Este projeto é a trilha Ignite que engloba o projeto (backend, frontend e mobile) Find Your Duo . Aulas 01 - Configuração do ambiente 02 - Desen

Zenky 4 Sep 19, 2022
CoWIN Vaccination Tracker, Below is the PRODUCTION LINK this is updated at end of each day. To see any latest Updates, please check the documentation

CoWIN Vaccination Slots Checking App. CoWIN Vaccination Slots Checking App is a user-friendly website that allow users to find vaccine in nearby avail

Stephin Reji 31 Jan 28, 2022
The UI for staking NFTs on Solana. Cardinal staking UI can be treated as an admin interface for stake pools hosted by cardinal-staking as well as a barebones end-user staking UI

Cardinal Staking UI This repository hosts the UI inteface that powers https://stake.cardinal.so for staking NFTs on Solana. Use this repo to create an

Cardinal 55 Dec 24, 2022
Tina is an open source editor that brings visual editing into React websites. Tina empowers developers to give their teams a contextual and intuitive editing experience without sacrificing code quality.

Tina is an open-source toolkit for building content management directly into your website. Community Forum Getting Started Checkout the tutorial to ge

Tina 8.2k Jan 1, 2023
A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

Getting Started with react-final-boilerplate Clone the code npm install You are good to go with React Application. Open http://localhost:3000/ and you

null 24 Dec 22, 2022
⚡️ Look for Covid-19 Resources, Get Vaccine Availability Notification, Complete source code for covidrescue.co.in website.

covidrescue.co.in ⚡️ Get real-time, verified leads on Oxygen, Remdesivir, ICU, Beds, Food and more based on your location. Get notifications on Vaccin

Placeholder Tech 15 Jul 10, 2022
Cloudflare Durable Objects + Itty Router = shorter code

TLDR; Cloudflare Durable Objects + Itty Router = much shorter code Features Removes nearly all boilerplate from Durable Objects Run instance methods d

Kevin R. Whitley 156 Jan 4, 2023
Source code of Remotebear.

Remotebear Source code of remotebear.io. Technology & Architecture Remotebear is a NextJS web application that gathers job offers from public APIs or

Remotebear 70 Dec 6, 2022