React, Web3.js и Metaplex: невозможно импортировать `programs.metadata.Metadata` из @metaplex/js

Question

Проблема

Попытка следовать примеру «вашего первого запроса» здесь: https://docs.metaplex.com/sdk/js/getting-started#your-first-request

Модуль, упомянутый в примерах, не содержит необходимых данных.

Для контекста я использую этот пример для разработки решения, описанного на шаге 5 этих инструкций: https://gist.github.com/creativedrewy/9bce794ff278aae23b64e6dc8f10e906

Шаги по воспроизведению

Шаг 1) Устанавливаю @metaplex/js пакет через: yarn add @metaplex/js

Шаг 2) Импортирую programs из модуля, разместив import { programs } from '@metaplex/js';.

Шаг 3) Я пытаюсь распаковать программы через: const { Metadata } = programs.metadata;

На этом этапе, если я выполню npm run start или yarn run start Я вижу ошибку в том, что свойство Metadata из programs.metadataне определено. Когда я смотрю в node_modules/@metaplex/js/ Вижу, что ошибка правильная.

Единственное упоминание о метаданных в модуле - это функция, используемая для поиска метаданных после того, как у вас есть URL-адрес. На этапе, на котором я нахожусь, пытается получить URL-адрес, поэтому этот пакет бесполезен, несмотря на то, что он единственный, о котором говорится в документации.

Answer 1

Чтобы решить эту проблему, я создал пустое приложение для реагирования и добавил следующие зависимости в свой package.jsonфайл:

        "@metaplex/js": "^1.1.1",
  "@solana/spl-token": "^0.1.8",
  "@solana/web3.js": "^1.24.1",

потом я побежал npm installвнутри корневого каталога приложения.

Внутри App.js(или же index.jsесли вы не использовали create-react-app), я распаковал Metadataнепосредственно из пакета metaplex со следующей строкой, помещенной вверху файла:

      import { Metadata } from '@metaplex/js';

Под всем импортом я добавил следующий код (отредактированная версия кода из примера в исходном вопросе):

      const connection = new Connection('devnet');
const tokenPublicKey = 'Gz3vYbpsB2agTsAwedtvtTkQ1CG9vsioqLW3r9ecNpvZ';

const run = async () => {
  try {
    const ownedMetadata = await Metadata.load(connection, tokenPublicKey);
    console.log(ownedMetadata);
  } catch {
    console.log('Failed to fetch metadata');
  }
};

В моей реализации я использую кнопку внутри своего App()функция вместо вызова run()прямо как в примере:

      <button
  onClick={run}
>
  GALLERY
</button>

Теперь при нажатии на кнопку я правильно вижу метаданные JSON, отображаемые в консоли.