🐷

【ERROR】thirdweb SDKでclientIdを設定した時にアイコンが表示されない時の対処法

2023/07/31に公開

Next.js

React

thirdweb

tech

thirdwebのSDKを使用してwallet connectのボタンを設置をしたところ、なぜかボタンのアイコン（Metamaskなどのロゴ）が全て非表示になってしまったので、その解決策について備忘録として残しておきます。

エラーが発生した場所

結論、コード自体には問題はなく、APIキーの設定（ https://thirdweb.com/dashboard/settings/api-keys ）に問題がありました。

clientIdを設定しなければ正常に動くのに、clientIdを設定した途端にアイコン（画像）が全て表示されなくなりました。

      <ThirdwebProvider
        clientId={process.env.NEXT_PUBLIC_CLIENT_ID}
        activeChain={activeChain}
      >
        <Web3Button
          contractAddress={contractAddress}
          action={async (contract) => contract.call("myFunctionName")}
        >
          Call myFunctionName from the connected wallet
        </Web3Button>
      </ThirdwebProvider>

解決策

APIキーを発行した時の設定でAllowed Domainsが空欄になっていたのが原因でした。

No Domains Configured
This Client ID cannot be used from the web until at least one domain is configured. To allow access from any domain, use the wildcard: *

ドメインが設定されていない
このクライアント ID は、少なくとも 1 つのドメインが設定されるまでウェブから使用できません。どのドメインからのアクセスも許可するには、ワイルドカードを使用します： *

ここはデフォルトだと空欄になっているので、Webから使用できなかったようです。
（アラートが出てますので、よく確認すればすぐわかりました...）

ここを画像の通り、とりあえず*とすれば解決できるかと思います。
実際の運用の際はフロントエンドのドメインにする必要がありますが、エラーの解消が目的であれば*を記載すればOKです。

エラーが発生した場所

解決策

Discussion