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 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.

Problem

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

Solution

Self-host this CSS file instead of relying on unpkg.com

Deploy smart contract to a custom network, e.g. a network I created called "cranegeode"

The getting started code snippet says this (screenshot), but really I need to add the details in my code manually.

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

When clicking on the Connect wallet button present on below shown two components, an Error and tons of Warnings are logged in the console

Connected the wallet to dashboard
next it asks for a signature

Signed the transaction but still the pop up do not disappears

Goals

• Move generic components that are used in multiple pages out of page-specific folders
• Improve the generic component names - so that it reflects what it does instead of where/how it is being used to encourage reuse and reduce confusion
• Remove duplicate component names to improve auto-import in the code editor and reduce confusion

<HomepageTopNav/>

• Rename To: <MainNavigation/>
• Current Path: components/product-pages/common/Topnav
• Proposed Path: 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/>

• Rename To: <DecoratedSection/>
• Current Path: components/product-pages/homepage/HomepageSection
• Proposed Path: 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/>

• Current Path: components/homepage/sections/NewsletterSection
• Proposed Path: components/sections/NewsletterSection

<SDKSection/>

• Rename To: <SDKShowcaseSection/>
• Current Path: components/homepage/sections/SDKSection
• Proposed Path: components/sections/sdk-showcase/SDKShowcaseSection

This also involves moving <CodeSelector/> from components/product-pages/homepage/CodeSelector to components/sections/sdk-showcase/CodeSelector

tw-components

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

Why?

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 /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

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.

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:

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.

The gas estimation is not accurate for the marketplace v3 contract.

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

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.

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!

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.

In some instances, when creating an item definition attributes they will have long text, causing the Properties column overflow. Leaving the Claimed Supply and Actions hidden and needed to be scrolled.

Affects also the UI for settings of that item

.

error:
info Generating static pages (21/89)deployer.thirdweb.eth 403

Do I have to configure all the variables in .env?


I want to deploy the contract on GOERLI.

when I click Deploy new contract,an error has occurred.

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.

Problem

UI rendering performance is very poor and there are a lot of dropped frames when scrolling the page.

Root Cause

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:

Solution

Instead of creating the blur at runtime with CSS - just use an image

See https://cosmos.network/ for example

Tested on

Hardware: Macbook Pro 16" (2021) (M1 Pro)
Browser: Chrome 107

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

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.

tagging mah man here @MananTank

Steps to reproduce:

1. Drag (or upload) a folder to the react-drop-zone
   

2. Upload

3. Click on Open Folder
   

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

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.

Behavior

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

Fix

const tokenId = router.query?.paths?.[2];
Change position 3 in paths array to 2.

Cause

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.

Steps to Recreate

1. Land on the dashboard
2. Select any existing NFT drop contract - Example: https://thirdweb.com/mumbai/0x436492DBc2E30E56FaC8F2297BD1964833c0687d
3. Click on the "NFTs" sidebar under Extensions
   
4. Click on NFT table row (notice how url changes but the screen doesn't render TokenIdPage component) - the url will show /[chainSlug]/[contract]/nfts/[tokenId] format
5. Click again on the same or different NFT table row - the url will show /[chainSlug]/[contract]/nfts/[tokenId]/[tokenId] format and render TokenIdPage

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)

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.

localhost:3000/:

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 >.<

The Embed Preview feature for the Marketplace v2.0.0 contract is currently not loading as expected. The section displays a blank area.

Is there anyway to fix this issue?

Maybe user can set his api key on dashboard and verify with it

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

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.

Replication

1. Deploy a contract, any drop contracts.
2. Upload a total of 110 tokens.
3. Try to limit it to 50 tokens per page.
4. Navigate to the last page, you'll not be able to see the last 10 tokens.

cc: @MananTank @nachoiacovino

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:

1. Create NFT Drop contract on Polygon Amoy testnet
2. Go to Contract > Sources
3. Initiate verification by pressing the "Verify contract" button

The claim button is not visible on the Token Drop page.

The only way to claim the ERC-20 token is via Explorer or Embed.

Hydration Error

Root Cause

Icons container <div> is put inside a <p> - which is invalid HTML nesting and thus creates an issue with Hydration

Problem

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!

Example

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 !!

Root Cause

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)

Solution

• Wrap the ConsoleApp in a Wrapper Component
• Move router usage in Wrapper Component to avoid triggering re-render of the Entire App because of Context update
• Make the ConsoleApp pure using React.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 updated

Outcome

With 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)