thirdweb-dev / dashboard Goto Github PK
View Code? Open in Web Editor NEWthirdweb.com and the thirdweb dashboard
Home Page: https://thirdweb.com
License: Apache License 2.0
thirdweb.com and the thirdweb dashboard
Home Page: https://thirdweb.com
License: Apache License 2.0
I've been facing the following loading spinner while trying to list NFT on the marketplace through the dashboard:
Example contract on the dashboard
I cloned the repo, did some digging, and discovered that using a different IPFS gateway URL fixed the issue. Please have a look.
Thanks!
Found what I believe to be a minor routing bug for the NFT tab within contract-ui
portion of the dashboard. This causes the user to have to click the NFT row in the table twice in order to render TokenIdPage
component.
Expected Route Behavior: /[chainSlug]/[contract]/nfts/[tokenId]
- should render TokenIdPage
component
Current Route Behavior: /[chainSlug]/[contract]/nfts/[tokenId]/[tokenId]
- renders TokenIdPage
component
I believe the error is resulting from line 27 here. Originating from merged PR #1487
dashboard/contract-ui/tabs/nfts/page.tsx
Line 27 in 9612df6
const tokenId = router.query?.paths?.[2];
Change position 3
in paths array to 2
.
router.query?.paths
only includes the [...path]
url path params from page/[chainSlug]/[...path].tsx
. On an example like https://thirdweb.com/mumbai/0x436492DBc2E30E56FaC8F2297BD1964833c0687d/nfts/1 there would be no position 3 in the path array (['0x436492DBc2E30E56FaC8F2297BD1964833c0687d', 'nfts', '1']
), but for https://thirdweb.com/mumbai/0x436492DBc2E30E56FaC8F2297BD1964833c0687d/nfts/1/1 there would be.
I did not run the code locally, but a high level look through the GitHub repo causes me to believe this is causing it.
TokenIdPage
component) - the url will show /[chainSlug]/[contract]/nfts/[tokenId]
format/[chainSlug]/[contract]/nfts/[tokenId]/[tokenId]
format and render TokenIdPage
Currently, the only way to list an NFT on a Marketplace using the dashboard is using the UI selector which uses an NFT API to pull in NFTs owned by the wallet.
This NFT API currently does not support all chains.
As an alternative, it would be nice to have an option that allows users to list an NFT for sale by passing in the contract address and token ID parameters.
If you have a token of around 110 and your item display limits to 50 it only shows to pages instead of 3 pages to accommodate the remaining 10 tickets.
Hello guys,
First of all, thank you very much for sharing such a great tool with everyone.
I am working on my NFT marketplace to mint and list items using this dashboard. However, when I buy listed NFT at my custom marketplace, it disappears from the active listing on the marketplace, however, it is still shown in the list of listings on the thirdweb/dashboard. I am working on the Rinkeby test network if it is important. By the way, the purchase functionality works great, the ownership is transferred and etc.
Could you please help to fix this issue, so the listing is automatically canceled when the item is purchased?
Thanks a lot in advance.
Setting an Allowlist claim phase through the dashboard for an NFTDrop contract without attaching a CSV file results in a Public phase being created instead!
This behaviour is unexpected and undesired. It will require the contract owner to delete the phase and setup a new allowlist with a CSV.
This has happened to me recently and has been verified by Yash through Discord support. I've reported it to Support via email, but have been asked to report the issue here as well.
<HomepageTopNav/>
<MainNavigation/>
components/product-pages/common/Topnav
components/navigation/MainNavigation
Also, move the contents of folder components/product-pages/common/nav
to components/navigation
The name HomepageTopNav
gives the impression that it is only meant for the home page and is positioned at the top, but it is used on a lot of pages and it appears at the bottom on mobile.
<HomepageSection/>
<DecoratedSection/>
components/product-pages/homepage/HomepageSection
components/sections/DecoratedSection
The name HomepageSection
is misleading - it is used on a lot of pages other than the home page. DecoratedSection
gives a better idea of what it does - It creates a section and adds decorations like aurora effects and SVG patterns around its children.
<NewsletterSection/>
components/homepage/sections/NewsletterSection
components/sections/NewsletterSection
<SDKSection/>
<SDKShowcaseSection/>
components/homepage/sections/SDKSection
components/sections/sdk-showcase/SDKShowcaseSection
This also involves moving <CodeSelector/>
from components/product-pages/homepage/CodeSelector
to components/sections/sdk-showcase/CodeSelector
Heading
, Badge
, Button
, Checkbox
, Drawer
, FormLabel
, FormHelperText
, FormErrorMessage
, Link
, MenuGroup
, MenuItem
, Text
Rename them to
TW_Heading
, TW_Badge
, TW_Button
, TW_Checkbox
, TW_Drawer
, TW_FormLabel
, TW_FormHelperText
, TW_FormErrorMessage
, TW_Link
, TW_MenuGroup
, TW_MenuItem
, TW_Text
These components have the same name as ChakraUI components and because of this - the code editorās auto-import feature ends up importing the wrong components. (VSCode auto imports from ChakraUI)
It also creates confusion about what exact component is being used and requires looking at the import path.
To avoid issues like this, There should not be two components with the same name. Adding a Namespace prefix in the component name fixes the issue while maintaining its previous meaning
Also, Delete the tw-components/index.ts
and import tw-components from the file component is defined in. This provides a better DX as Jumping to Component Definition (command-clicking on the component name in VSCode) will jump to the actual file where the component is defined instead of jumping to tw-components/index.ts
. This will also reduce the likelihood of tree-shaking issues in the future as we saw with AddressCopyButton
There are a lot more components like this that also requires refactoring and restructuring which we can cover in the next rounds.
The gas estimation is not accurate for the marketplace v3 contract.
The ENTIRE App is rendered multiple times - I'm not talking about the re-renders triggered by the strict-mode in Dev - This is happening in the Production bundle!
Adding a console.log in the root component ConsoleApp
to illustrate the issue
then creating a production bundle and previewing it:
The entire App is rendered 3 times !!
Using the React Devtools Profiler, I found out that the re-renders are triggered because of updated context (useRouter) and updated props (props object updated but values are same)
router
usage in Wrapper Component to avoid triggering re-render of the Entire App because of Context updateReact.memo
to avoid re-rendering the Entire app when values of props (Component and pageProps) are the same and only the props object itself is updatedWith the above solution, here's what we get in production build on homepage
Here is a table showing the comparison of re-renders done before and after (with this solution)
page | Before: render count | After: render count |
---|---|---|
home page | 3 | 1 |
dashboard | 2 | 1 |
product pages | 2 | 1 |
solution pages | 2 | 1 |
contract details pages | 2 | 1 |
explore page | 2 | 1 |
Iād like to request support for the upcoming Taiko A6 testnet (Type 1 zkEVM) released in the next few days.
Iād also like to ask if this testnet chain could be integrated into your TBA feature, with a dedicated bundler at TaikoA6RPCNumber.bundler.thirdweb.com/ .
Thank you
tagging mah man here @MananTank
Steps to reproduce:
The browser will open the following link: https://bafybeihq3y24sqa67zjhbgrek5ffyaeqdf533kaxymabsfenwgwbz5nrcu.gateway.ipfscdn.io/
Which doesn't work. To be clear the issue here is not related to the upload code, but might be because .gateway.ipfscdn.io
doesn't support accessing a directory using this URL format. Because this link works: https://ipfs.io/ipfs/bafybeihq3y24sqa67zjhbgrek5ffyaeqdf533kaxymabsfenwgwbz5nrcu/
I couldn't find any similar issue about .gateway.ipfscdn.io
anywhere. But if my suspicion is true then maybe we should switch to use https://ipfs.io/ipfs/<cid>
? Happy to create a PR
Issue: When using the read functions (via useContractRead), the sender address is not automatically sent, causing msg.sender to be inaccessible to any view function within the smart contract. To work around this, I must explicitly fetch and pass the address using the "from" property in overrides. demonstrated in the image below calling the function with and without "from" property in overrides.
[Image: Image with and without Overrides property]
Suggestion: It would be beneficial to enhance the user experience by adding a note or highlighting the importance of including the sender's address in view functions. Furthermore, consider implementing a boolean toggle that allows users to enable or disable the automatic forwarding of the sender's address, providing greater flexibility in contract interaction.
note:- above suggestion can be applicable to both Docs and Dashboard.
document update or any thing! please let me know, i'm happy to contribute.
Thank you.
Introduced in #1192
See a video here on steps to reproduce:
https://www.loom.com/share/c3df2cd252474514b35e9772bcfb9f9f
I can take on creating a PR to address it
A CSS file is loaded from unpkg.com and it is a SPOF
If unpkg.com goes down or responds very slowly, the website does not render anything because rendering is blocked by that CSS file
WebPageTest Report: https://www.webpagetest.org/video/compare.php?tests=221202_AiDc8Q_96D,221202_AiDcWE_96F
Self-host this CSS file instead of relying on unpkg.com
It has been confirmed that @thirdweb-dev/react is currently using version ^4.33.0 of @tanstack/react-query.
Are there any plans to adopt version 5 of @tanstack/react-query?
If not, does that imply that my only option is to downgrade to version 4.33.0?
When I attempt to use version 5 of @tanstack/react-query, the following error occurs.
I am currently using next@^14.0.2 and react@^18.
As the title suggests, I verified the my contract code on https://testnet.bscscan.com/, yet I got the problem "Contract could not be imported" on the Contracts page. It is not the first one I imported but it's the only one which gives me errors.
This is the address with the verified code:
https://testnet.bscscan.com/address/0x19A67cFe7d479bfc434CF4385563f3095181Be3E#code
Tried the "Unreal Engine" Image Card on https://thirdweb.com/solutions/gaming and saw that the link was no longer valid.
Whipped together this Python script to check your site quick for Thirdweb related broken links (excluded the chain pages while searching).. a few of your big culprits are https://portal.thirdweb.com/python, https://portal.thirdweb.com/react and https://portal.thirdweb.com/solidity on a few different pages. This can all probably be handled with your redirects to the new doc website. @nachoiacovino @saminacodes @MananTank , the script is not perfect, but it'll give you a good idea of links broken and what pages they are on. Cheers
import requests
from bs4 import BeautifulSoup
import xml.etree.ElementTree as ET
import csv
def append_host(url, host):
"""Append the host to the URL if it's relative."""
if url.startswith('/'):
return host + url
else:
return url
def check_link_status(url):
updated_url = append_host(url, "https://thirdweb.com")
"""Skip non-thirdweb links."""
if ("thirdweb" not in updated_url):
return True
"""Check if the link returns a 404 status code."""
try:
response = requests.get(updated_url, timeout=20)
if response.status_code == 404:
return False
else:
return True
except requests.RequestException:
return False
def check_page_links(url, broken_links_set):
"""Skip chainlist page."""
if ("chainlist" in url):
return broken_links_set
"""Check all <a> tags in the given URL for 404 responses."""
try:
response = requests.get(url)
response.raise_for_status()
soup = BeautifulSoup(response.text, 'html.parser')
a_tags = soup.find_all('a')
for tag in a_tags:
href = tag.get('href')
if href and not check_link_status(href):
broken_links_set.add(href+","+url)
print(broken_links_set)
return broken_links_set
except requests.RequestException as e:
print(f"Error during requests to {url} : {str(e)}")
def fetch_and_parse_xml(url):
"""Fetch XML from the given URL and parse it to extract <loc> tags."""
response = requests.get(url)
response.raise_for_status() # This will raise an error for bad responses
# Parse the XML content
root = ET.fromstring(response.content)
# Extract the <loc> tags
namespaces = {'ns': 'http://www.sitemaps.org/schemas/sitemap/0.9'} # Define the namespace used in the XML
loc_tags = [element.text for element in root.findall('.//ns:loc', namespaces)]
return loc_tags
thirdweb_sitemap_url = "https://thirdweb.com/sitemap-0.xml"
chainlist_url = "https://api.thirdweb.com/v1/chains"
def get_chainlist_and_remove_from_loc_tags(loc_tags_arr):
"""Fetch JSON from the given URL and parse it to extract <loc> tags."""
response = requests.get(chainlist_url)
response.raise_for_status() # This will raise an error for bad responses
# iterate through the JSON content
for chain in response.json()["data"]:
chain_url = "https://thirdweb.com/"+chain["slug"]
if chain_url in loc_tags_arr:
loc_tags_array.remove(chain_url)
return loc_tags_array
print("Fetching sitemap urls...")
loc_tags_array = fetch_and_parse_xml(thirdweb_sitemap_url)
print("Fetching chainlist...")
urls_without_chain_pages = get_chainlist_and_remove_from_loc_tags(loc_tags_array)
print(urls_without_chain_pages)
broken_links_set = set()
# Iterating over the array
for loc in urls_without_chain_pages:
print(f"Checking {loc}")
check_page_links(loc, broken_links_set)
# Specify the filename for your CSV
csv_filename = 'broken_thirdweb_links.csv'
# Open the file in write mode
with open(csv_filename, 'w', newline='') as file:
print(f"Writing to {csv_filename}")
writer = csv.writer(file)
# This link that is broken
writer.writerow(['broken_url'])
# The page on which the broken link was found
writer.writerow(['page_location_url'])
# Iterate through the set and write each item to the file
for item in broken_links_set:
writer.writerow(item.split(","))
print(f"Set exported to {csv_filename}")
I couldn't find documentation on how to get the values for the environment variables.
If it is documented somewhere, Can you please give me the link to it? ( It would be a good idea to include that in the README ) and If it is not documented - Can you add it to the README?
I have been using placeholder values for the environment variables but I'm having trouble with it when running the next build
and I would like to properly set up my local environment so that I can build pages properly
I noticed these errors on the thirdweb site and my web app as well (which uses thirdweb's wallet). It seems to have to do with the wallet connection to metamask. Any thoughts on this? I saw this in the MM github issues:
MetaMask/metamask-extension#20847 (comment)
When logged out of the MM wallet the console does not show any errors.
Issue:
When I try to verify Polygon Amoy contract (NFT Drop) via the dashboard I get "Internal Server Error".
Response:
{"error":"Verification failed: internal error"}
Steps to recreate:
error:
info Generating static pages (21/89)deployer.thirdweb.eth 403
I forked and cloned the project. After running yarn install
, I tried yarn dev
but it's giving me these error in the browser console.
What am I missing?
Tagging mah man @MananTank since you've helped me a lot in the past ^^
Update: so it works well on my Linux machine but not on my Windows desktop >.<
I am using third web for deploying NFT smart contract for different users.
I want to give this embed src url to user to redirect to this nft minting page, Where any collector can come.
Is there any way to get the src url Programmatically, Have not found any function which helps to do so.
very welcome for recommendation and answers.
Usually, on the first load ( and sometimes even after that ) - the website is not using the "Inter" font-family and uses the fallback "sans-serif" to render the text. But when we reload the page - the issue gets resolved.
To replicate this issue, Load the website in incognito, and check the font-family:
Then reload the page, and check again:
Maybe the title didn't explain much to anyone but the description will!!
Was just using up 'thirdweb' for the first time and find it really cool, the UI, the methodology and the idea behind all this setup, But when I pressed the button connect wallet
that's where I felt really disappointed. After clicking on metamask option, it asked me to scan a QR code instead of just showing a pop-up from my Metamask-extension installed on my browser. Like that's the basic and a useful thing which a common 'DAPP' uses up. That QR was like a instruction for me to pick my phone and start a scan, but why someone be doing that when they are working on their PCs or laptops (I know that's not a hard thing to do but still, quite a distraction from our screen).
So, I feel there should be one more way of connecting wallets, using the help of extensions or you can just give the users the option to select any method.
Thanks!!
(If this feature already exists than Sorry for this issue, but I didn't really found it for real)
The /rpc
page loads way too many items initially. May I suggest we use infinite loading to speed this up? Happy to work on a PR
UI rendering performance is very poor and there are a lot of dropped frames when scrolling the page.
This is happening because filter: blur
CSS is used to create the Aurora effect.
filter: blur
filter is extremely taxing on CPU/GPU and should be avoided for creating Aurora effect ( because that requires applying the blur on a large element with a large blur radius )
If we remove the filter:blur
CSS - rendering issues get resolved
See the attached video:
Instead of creating the blur at runtime with CSS - just use an image
See https://cosmos.network/ for example
Hardware: Macbook Pro 16" (2021) (M1 Pro)
Browser: Chrome 107
Hi there.
Request from @warengonzaga to raise the issue here.
We are currently attempting to deploy any smart contract from the dashboard, and we click "deploy now", another box pops up saying deploying, then we get the following error;
Failed to deploy contract
Couldn't deploy CREATE2 factory: {"code":-32603,"message":"Internal JSON-RPC error.","data":{"code":-26,"data":null,"message":"GasPrice 100000000000 lower than minimum allowable 4761904761904"},"stack":"{\n
If you need me to provide anything else, please let me know.
thirdweb's Token contract --> i used this one, but we seem to get the same error on any of the premade contracts.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ššš
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ā¤ļø Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.