Coder Social home page Coder Social logo

teia-community / teia-ui Goto Github PK

View Code? Open in Web Editor NEW
24.0 8.0 35.0 53.72 MB

Front-end code for teia

Home Page: https://teia.art

License: MIT License

Shell 0.01% HTML 0.94% JavaScript 54.63% SCSS 12.74% CSS 0.15% TypeScript 30.14% MDX 0.31% Dockerfile 0.12% Lua 0.96%
cleannft tezos react objkt open-source tezos-blockchain

teia-ui's Introduction

Teia UI

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

deployment

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

Native

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

Or with docker-compose

git clone https://github.com/teia-community/teia-ui.git
cd teia-ui
docker-compose up -d

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

teia-ui's People

Contributors

0x00000010 avatar andrevenancio avatar atomantic avatar codewithfeeling avatar crzypatchwork avatar dependabot-preview[bot] avatar dependabot[bot] avatar devetec avatar djangobits avatar hornebom avatar jagracar avatar jmagly avatar kylegrover avatar leithba avatar melmass avatar merchantcoppola avatar mrdoob avatar mtyka avatar neocybereth avatar pichiste avatar rkoshino avatar sf-pixel avatar skenaja avatar somaticbits avatar thepartyy avatar veqtor avatar violetforest avatar xat avatar zir0h avatar ztepler avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

teia-ui's Issues

[bug] shares calculation for Beneficiaries is broken?

*Please fill out the following Bug Report Template

Describe the bug
Testing collab contract function on https://teia-ui-main-pr-25.onrender.com/collaborate
No issues until trying to add a beneficiary manually -
The automatic shift of the Collaborators percentages worked well when I added any of the popular beneficiaries in the drop down menu - I put the initial shares of the collaborators at 50 each and then decided to test the beneficiaries and selecting the 5% adjusted the other two correctly.
Ok once I manually deleted the [object object] words in the text box it allowed me to paste in a wallet address but behaved a bit oddly so not sure if it needed a refresh.
Ok I repeated twice, if I tried to paste the address from clipboard into the space without deleting the words [object object] manually nothing will paste into the area and it will delete the information from clipboard (checked clipboard and attempted to paste in other areas without success) but if I recopied the address and deleted the words first it pastes in just fine. (edited)

But then the percentages don't adjust properly and the next screen added up to 104%
Also a second 'Next' button turned up while it was just sitting on the screen without interacting, you can see it in - 2 buttons

Screenshots

add up

collaborate and beneficiaries

manual enter beneficiary

1

Desktop (please complete the following information):

  • OS: [PC Windows 10,64 bit]
  • Browser [Brave]
  • Version [1.36.122]

Smartphone (please complete the following information): I haven't tested on phone yet

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Beneficiary wallet - tz2LYfLnMbAY21GCkRHnPrNWLu6oz8dbeCCV
I got the address from Giving Block

[feat] Better templates

The templates are a bit outdated and some people still rely on them.
It would be good to update their dependencies and make sure they work as expected.
There are bugs in the A-Frame one apparently (reported on Versum's Discord)

  • Update dependencies.
  • Fully test them
  • Check hicetnunc2000 PRs as I think there was some proposed templates there

[feat] make collab username clickable

on the signing status modal, it would be great if the usernames were clickable to go to that profile directly... would likely reduce confusion and risk of scams

(submittet by aebrer on discourse)

collabclick

[feat] Add support for OBJKT.com swaps

Since the vote went into favor of showing objkt.com swaps, it needs to be implemented.

image

For now the idea would be to "only" display/link them, and in a second time implement direct purchase of those swaps

[feat] pass viewer/creator/objkt variables when viewing on ipfs

Is your feature request related to a problem? Please describe.
Interactive OBJKTs can use URI parameters (viewer, creator, objkt) to make an artwork look different based on who is looking at it for example. However this does not work when clicking "View on ipfs" as the parameters are not passed in the link.

Describe the solution you'd like
Add the URI parameters to the "View on ipfs" link.

Additional context
For example: OBJKT#67933 is a piece that looks different whether you own it or not and each owner gets a different color palette. This feature is absent when clicking "View on ipfs".

The URL as it appears in the iFrame tag looks something like this
👍 https://ipfs.io/ipfs/QmWHpvEzEZH1orYmxpZCWfQ3ztDLfXcpykWqE48MBGfbUx/?creator=tz1hfuVWgcJ89ZE75ut9Qroi3y7GFJL5Lf2K&viewer=tz1hfuVWgcJ89ZE75ut9Qroi3y7GFJL5Lf2K&objkt=67933
Notice that the parameters are present.

However when clicking "View on ipfs" it looks like that
👎 https://ipfs.io/ipfs/QmWHpvEzEZH1orYmxpZCWfQ3ztDLfXcpykWqE48MBGfbUx/

[feat] show burn action in history? (+bug)

Describe the bug
Seems that in the new UI, history doesn't show burns.
This then appears to cause swap numbers to vary, and the initial mint seems to be incorrect.

To Reproduce EXAMPLE
Steps to reproduce the behavior:

  1. Go to '...' 715249

  2. Click on history

  3. See issue- it says minted 10 / swapped 20

Expected behaviour
I'm assuming that 20 were minted, 20 were swapped and then 10 were burnt.
expect to see either that 10 were burned (and initial mint was 20) , or minted 10 / swapped 10 (if none were burned)

This is the only example I have evidence for, but have noticed inconsistencies in History listings before, that seem to imply burning may have happened.

[bug] "reswap" button not working on mobile

I am bringing this issue here from malicious sheep who reported it in discord
i am not able to test it since i dont use teia on mobile

they said:
"""
I just attempted and the reswap button isnt working on mobile. It indicates it was selected by slight colour change, but it didn't engage the wallet or indicate anything at the top of browser.
"""""

[bug] cannot Sync Wallet

Cannot Sync a wallet either on pc or phone

And when im try to sync if I look in the console it shows this error:

main.ca416e67.js:1 Uncaught (in promise) Error: libsodium was not correctly initialized.
    at r (main.ca416e67.js:1:26808)
    at main.ca416e67.js:1:41561

[bug] 'Choose File' on Edit Profile does not work on first pass

Describe the bug
I went to my profile to change my picture. I clicked 'Chose File' to add a profile picture. The name of the file showed as expected, but without a preview of the profile picture. Thinking that I had added a profile picture, I selected 'Save Profile' which sent a transaction to my wallet. However, the transaction description said something like "operation failed". I cancelled the transaction and clicked 'Choose File' again, and this time the profile picture previewed.

However, I still get "Invalid Operation" in my wallet.

Screenshots:
IMG_1707

Screen Shot 2022-03-20 at 12 43 45 AM

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'Menu'
  2. Click on 'Profile'
  3. Select 'Choose File'
  4. See error

Expected behavior
I should be able to add my profile picture (and complete the transaction necessary to save it). Then my profile picture change should be visible after the transaction goes through.

Screenshots
See above

Desktop (please complete the following information):

  • OS: MacOS
  • Browser: Brave
  • Version 1.35.104

Smartphone (please complete the following information):

  • Device: iPhone 12
  • OS: iOS 15.3.1
  • Wallet Galleon

[docs] copy text updates for footer, swap info and about section

putting together the copy text updates we got so far

Updating disclaimer/footer copy:

(crzy asked us multiple time to get rid of his name on the site, so this one has the highest prio out of the copytext updates)

replace this:
footer

  • with this:

This open-source, experimental dApp is developed and maintained by the Teia Community and powered by the Tezos blockchain.


Updating menu intro copy:

replace this:
disclaimer

  • with this
    Teia is an artwork made of artworks, an open, community owned digital platform for experimentation, trading ideas and works of creativity as OBJKT NFTs.

Updating swapping info copy text:

replace this:
swappinginfo

  • with this:

The Teia marketplace fee is temporarily set to 0%. Please consider donating to the address hereandnow-fund.tez for maintenance funding.


Updating "about" page copy text

replace this:
aboutcopy

  • with this:
<headline> Teia is ....

... a collaborative artwork made of artworks, a place for ideas and creative works.
... a non-profit, open-source online platform for trading digital assets as OBJKT NFTs.
... a collective, aligning under the values of sustainability, accessibility, and equity.
... owned and maintained by its community, built and improved by its digital citizens.

Teia is and always will be a work-in-progress.

<link> Core Values / Code of Conduct / Terms and Conditions

[feat] add a "restricted" tag to restricted addresses on the "listings" tab

swaps from restricted accounts are not executable through teias UI
but it is currently unclear to the user why a swap is displayed without a price
i suggest adding a "restricted " tag to either the swap (instead of the contract info that is currently displayed like H=N, Teia, Objktcom)

or - imo even better - mark an restructed account as restricted right next to the address/SUBJKT to warn people

or - if we want to stay minimalist - make the address name darker than the nor restricted ones

save

[bug] load time on ATH sorting is high: 60s+

Describe the bug
While trying to sort the marketplace by ATH as per the button/link on the main page, the collection takes 60+ seconds to load without any indication that the page is still loading.

To Reproduce
Steps to reproduce the behavior:

  1. Go to teia.art
  2. Click on 'ATH'
  3. See error/loading issue

Expected behavior
I would expect the load time to be faster or give some indication that the page is loading--left me thinking that I didn't click the link/that the page was broken.

Desktop (please complete the following information):

  • OS: MacOS
  • Browser Brave
  • Version 1.35.104

[bug] Clicking "new OBJKTs" gives an error in web developer console

Describe the bug
If you click on the "new OBJKTs" menu item, a POST call is sent to graphql with the wrong parameters(?) In the web developer console (and in the indexer db logs) you can see the following message:
{"errors":[{"extensions":{"path":"$","code":"data-exception"},"message":"invalid input syntax for type bigint: \"Infinity\""}]}
In my testing the issue only appears the first page load. If I hit F5 and try again, it works.

Is it possible that the $lastId here jumps from 99999999 to Infinity?

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://teia.art
  2. Click on 'new OBJKTs'
  3. Notice the the page stays empty.
  4. See error in web developer console

Expected behavior
Clicking the 'new OBJKTs' link fills the page.

Screenshots
image

Desktop (please complete the following information):

  • OS: linux
  • Browser: firefox
  • Version: 98.0.2 (64-bit)

Also reproducible in Chromium Version 99.0.4844.84 (Official Build) Arch Linux (64-bit)

[feat] standard way to display errors

it would be nice to have some general way to handle errors. currently, errors are often not handled and the ui just becomes black or white.

what we need is a standard way to display errors (for example with some growl-like library). some errors could also be captured by using reacts error boundaries.

[feat] gallery/page for Ukraine fundraiser effort

Is your feature request related to a problem? Please describe.

Having a gallery/page for Ukraine fundraiser works would assist discovery of these collaborative works and help raise funds for the Ukraine no-war effort

Describe the solution you'd like

Could we please have either:

option (1): a dynamic page/view of the Ukraine collaboration art works, linked via menu/appropriate method - preferable option as this will show current list of works dynamically

option (2): static gallery using the galleries.json method - for this method the list of works would need to be updated/refreshed periodically so is more work operationally, to keep the list of works current. but could be an option if dynamic method is not available

Describe alternatives you've considered
see (2) above. other options are external galleries - NFTBiker has a page also

Additional context
background discussion on discord thread: https://discord.com/channels/908672304236625970/951351576839221248/954707960221827072

for option (1)
@melMass mentioned (1) could be an option via using a graphQL “live” query

for (1), nftBiker has this query: https://discord.com/channels/908672304236625970/908710947412140082/950465754292158524
I'm not sure which fields are needed for UI to display the art, so it may need to be modified. I could try help with that if needed (did try a simpler query for just obkjt id to test (2) and that worked ok)

thanks

[feat] hicetdono integration (resolve contract address + claim)

While answering questions about giveaway options i thought that it would be really cool to better show on the TEIA UI if editions are up for free on hicetdono. (https://dono.xtz.tools/)
dono

can we give the hicetdono contract (KT1GziMhWS28ywwCXT4BJxpN6CkF6jqcUiWi) the name "on dono.xtz.tools" or something similar?

or even better: since we integrated objkt and hen swaps, can we make the giveaway claim from hicetdonos smartcontract available trough the teia UI? (like the other marketplace contracts)? if that was the case, hicetdono could become the best way to put up giveaways that are limited to 1 edition per wallet.

[bug] some pngs with transparent bg get displayed with white bg in the creation tab

[feat] PDFs dont get rescaled on desktop pc

I minted a (squared) pdf yesterday and it looks like PDF files on objkt pages dont get rescaled like other file types are
on my first try the PDF was too big so it wouldnt fit into the browser window

this is the corrected version, where i sacled to 1000px in my layout program (https://teia.art/objkt/717662)

i think it would be nice to have the pdfs autoscaled on the objktpages

[feat] add back the </> icon for generative tokens

Multiple people asked for a clear indicator for generative tokens in the feed/thumbnails
there was this </> indicating a OBJKT is a generative one, maybe just bring that back?
currently generative tokens are indistinguishable from images in the feed

[feat] more descriptive text when the indexer is delayed

Is your feature request related to a problem? Please describe.
The red circle notifying of Indexer delays is very helpful

Describe the solution you'd like
I wonder if the little text bit that shows up when you hover could include that information to tell artists not to mint or try later.
Either can add an explanation to the tooltip or add a “more info “button and a dedicated wiki page perhaps.

Describe alternatives you've considered

  • Small note added to the hover text
  • Red button is clickable with description of what it means
  • Wiki page explanation
  • More info button in text

Additional context
Add any other context or screenshots about the feature request here.
Indexer delay

[bug] interactive OBJKTs are not vertically aligned when using fullscreen mode on the minting preview page

Describe the bug
Interactive OBJKTs are not vertically aligned when using fullscreen mode on the minting preview page. The vertical alignment is correct in fullscreen mode once the OBJKT is minted.

To Reproduce
Steps to reproduce the behavior:

  1. go to mint page
  2. upload an interactive OBJKT
  3. go to preview page
  4. open full screen mode (the issue is more obvious on larger monitors)

Expected behavior
The OBJKT should appear vertically centered

Screenshots
image
Preview

image
Minted


Tasks:

[bug] lowest price still collectable from banned accounts

Summary
As a collector, I am still allowed to collect from banned accounts using the HENv2 contract when the swapped price is the lowest price.

Description
Example

  • https://teia.art/objkt/45586
  • Banned account is https://teia.art/hen
  • Banned account listing is 0.15 and is still shown on the main collect button, but is restricted on the "Listings" tab
  • Any objkt listed as the lowest price by a banned account can still be collected by users.

Screenshots
Screen Shot 2022-06-24 at 8 31 44 AM

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://teia.art/objkt/45586
  2. Click on "Collect for 0.15 tez"
  3. User is still allowed to collect from the "hen" banned account in "Listings"

Expected behavior
Listings for banned accounts should not be shown when they are the lowest swap. Using the example from above, the 1 tez listing should be shown instead of the 0.15 tez listing.

Environment

  • OS: Mac OSX
  • Browser Chrome
  • Version 103.x

[feat] show collab objkts under "Creations" tab of the core collaborator IF there is only one core collaborator, and the work is signed

Currently, it's possible to create a collab contract where you are the only core collaborator, with others as beneficiaries. This is a powerful way to use Teia for:

  • automatic donations to charity (eg. Ukraine)
  • automatic donations to Breadfond
  • automatic payments to a service (like conjure, where I send 20% of what I make from art I made with their tool)
  • having a nice contract based collection of art that can be viewed in one place

an example of a collab setup like this can be seen here: https://teia.art/collab/ideocartography_realized_retired_20220711
[EDIT: updated link]

Given that the art in this type of "collab" contract really does only have one creator, I believe that it makes sense to list these under the "Creations" tab of that core collaborator, rather than the "Collabs" tab. I also hope (but don't know for sure) that this could also improve discoverability for these pieces.

[support] 504 Gateway Time-out

Hello,
the page of my artwork does not display the artwork. Instead, it displays a "504 Gateway Time-out" error. The text is OK, only the artwork does not display.

The link : https://teia.art/objkt/726132

The artwork is an html site with javascript. It is quite small in size. It was working when I posted it a few months ago. This has been like this for a few days/weeks. All my other artworks, including others html/javascript, work fine.

Before the error appears, the status line says "Waiting for data.objkt.com...", and sometimes "Waiting for ipfs.io..."

This is Mac/Brave. No adblocks.

Thanks !

[bug] collabs tab lists objkts in reverse order

The collab page is currently listing objkts from oldest (at the top) to newest (at the bottom).

Steps to reproduce the behavior:

  1. Go to Collabs page with multiple objkts: eg https://teia.art/aebrer/collabs
  2. observe that they are in reverse order

Ideally, these objkts would be displayed with the newest objkts at the top, as they do in the Creations tab.

[feat] overhaul UI fixes

  • Standardizing content wrapper margins on mobile for all the pages .
    Designed as 20px

On some pages margins are missing, because new design wasn't applied there yet.

Updated margins already:
https://teia.art/objkt/510549
https://teia.art/faq

Missing margins:
https://teia.art/
https://teia.art/about
https://teia.art/collaborate
https://teia.art/galleries/
https://teia.art/config
https://teia.art/dmt_vision (user profile tabs, manage assets)
https://teia.art/mint
https://teia.art/terms
https://teia.art/search

image

  • Minimizing large distance/margin between content and header
    Especially on mobile
    image
    image

Please have a look suggested margins for the pages we are updating:
https://www.figma.com/file/R5sw1HcoHx4Aup1Yl7rGYA/UX%2FUI?node-id=1338%3A12652
Generally, you can find pink squares to check the sizes between the elements.

  • Minimizing disclaimer - smaller font and shorter sentence
    Current disclaimer size is overlapping menu on smaller mobile devices.
    Please apply font Small -
    image

image

  • Updating disclaimer copy
    This open-source, experimental dApp is developed and maintained by the Teia Community and powered by the Tezos blockchain.

  • Updating menu intro copy
    Teia is an artwork made of artworks, an open, community owned digital platform for experimentation, trading ideas and works of creativity as OBJKT NFTs.

image

  • Improving menu scrolling on mobile
    Currently I can't scroll the menu on iPhone - the content behind the menu is scrolling instead.
    image

  • Updating input fields and buttons on the reswap feature according to style

image

Styles: https://www.figma.com/file/R5sw1HcoHx4Aup1Yl7rGYA/UX%2FUI?node-id=1406%3A11773

  • Removing black background on the TEIA swap label.
    Transparent should be more suitable for light and dark modes.

image

[feat] 404 page

as discussed in discord, it would be good to have a 404 page. maybe a designer can come up with a nice TEIA-404 image.

this will also require some refactoring of the routing logic.

[MIGRATION] Note about the migration

It should mostly be a smooth transition, a few notes:

  • Disable dependantbot
  • There is still references to teia-ui as the wiki in src/pages/about
  • Re-enable branch protection on main (not doable while in private mode)
    Partially, if @xat you can double check 😬
  • What do you think is the best approach? I think that we should rename the current teia-ui repo, if I'm right git does prevent you when a repo you are interacting with was renamed, so maybe teia-ui-legacy and we archive it (still available but not interactible anymore) and name this one teia-ui
  • Empty the teia-ui-legacy main branch and add a notice to the README.md

I'll update this issue if I think of other things, feel free to add your input.

[feat] make reswap work from v1 to teia

there are still lots and lots of editions swapped on hicetnuncs pre-exploit marketplace contract

can we bring back the tool to unswap these listings or better: can we get a button to cancel these swaps?
today i came across a double mint for example were the artist reminted a piece that was trapped ton v1
at the moment the only way to cancel the swap is using hen miirrors that arent really functional anymore

https://teia.art/objkt/104890

https://teia.art/objkt/149545

would be good to have an easy and accessible way to retrieve v1 swaps - be it through a little tool or in the UI directly

[feat] gallery page/link for TezosPride event

Is your feature request related to a problem? Please describe.
Could we please have a gallery/event page/link for Tezos Pride event, similar to the Ukraine Fundraiser link (which was PR45 #45 for reference)

This event may need to use the event tag instead of contract id like UA fundraiser query did

Mal has mentioned NFTBiker had an option to add list of work to a spreadsheet and have those included in the event page, eg for those who forget to use the event tag

Describe the solution you'd like
A link for the Tezos Pride event on Teia homepage that links to a page showing the artwork tagged with event tag, similar to the Ukraine link
image

Describe alternatives you've considered
The alternative is to use the gallery feature and manually update JSON file, though this is not a dynamic list of work, it would need manual operations. This would cater for any not using the event tag. for this case, there'd be a new gallery in the Gallery page rather than a link on homepage (so different to UA fundraiser event)

Please advise if this is preferred option over the dynamic link above

Additional context
please contact MaliciousSheep or AliaK in discord

initial discussion for this request: https://discord.com/channels/908672304236625970/951351576839221248/982983061610319944

discord link for TezosPride event planning: https://discord.com/channels/908672304236625970/981374833642328084

[docs] Make the mint page "terms & Conditions" link to the wiki instead to a static page

The "terms&Conditions" link on the minting page currently links to a static page
while this looks nice visually, it is a bit risky as the COC/T&C is a "living document" and gets updated.

for example in the static page it still states that "explicit and obscene" art is prohibited, which is not up to date
would be better (at least for now) to link to the wiki page of the COC because that one is always the most up to date COC version

https://github.com/teia-community/teia-docs/wiki/Core-Values-Code-of-Conduct-Terms-and-Conditions

wiki TOC

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.