Как Подключить Кошелек К DApp С Помощью Next.Js На...

В децентрализованных приложениях, прежде чем пользователь начнет взаимодействовать с функциональными возможностями приложения, ему необходимо подключить адрес кошелька к dApp для хранения подписи пользователя в приложении.

В этом руководстве мы будем использовать пакет polkadot extension dapp для подключения кошелька к dapp.

Необходимые условия

Это краткое руководство, и в нем не будет никакого CSS. Итак, чтобы следовать этому руководству, вам необходимо

иметь установленный node.js или nvm
иметь базовые знания по next.js

Давайте начнем…

Откройте терминал и инициализируйте новый проект next.js с помощью команды yarn create next-app.

Обязательно выберите варианты, представленные на рисунке выше

В терминале перейдите в только что созданный проект и откройте его в редакторе кода.
В редакторе кода откройте файл index.tsx, очистите в нем коды и откройте в нем код, приведенный ниже

export default function Home() {
	return (
		<>
			<h2>Hey Polki, Welcome to Polkadot </h2>
			<button>Connect wallet</button>
		</>
	);
}

В терминале выполните команду yarn run dev и получите результат, как показано на рисунке ниже

В браузере перейдите на localhost, и вы увидите вывод страницы, как показано на рисунке ниже

Интеграция функциональности кошелька dapp connect

Перейдите по адресу polkadot-extension, затем Talisman, установите эти расширения кошельков для polkadot и создайте учетную запись.
Далее в терминале мы установим следующие пакеты yarn add @polkadot/extension-dapp @polkadot/extension-inject и перейдите по этой ссылке polkadot-extension-dapp, чтобы узнать о нем больше. По окончании установки должен появиться следующий вывод

Мы будем использовать динамический импорт для вновь установленного пакета. Подробнее о динамическом импорте можно прочитать здесь dynamic-import
В файле index.tsx добавьте в код следующие импорт и строки

import { useState } from 'react';
import dynamic from 'next/dynamic';

const web3Accounts = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });
const web3Enable = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });

Давайте создадим несколько состояний в нашем dapp и, поскольку мы используем typescript, нам необходимо добавить типы в состояние с помощью установленного нами расширения inject. Поэтому добавьте в свой код следующие строки

import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';

...

const [account, setAccount] = useState<InjectedAccountWithMeta[]>([]);
const [selectedAccount, setSelectedAccount] = useState<InjectedAccountWithMeta>();

Пока что все коды в нашем файле index.tsx должны выглядеть следующим образом

import { useState } from 'react';
import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
import dynamic from 'next/dynamic'

const web3Accounts = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });
const web3Enable = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });



export default function Home() {
  const [account, setAccount] = useState<InjectedAccountWithMeta[]>([]);
  const [selectedAccount, setSelectedAccount] = useState<InjectedAccountWithMeta>();
  return (
    <>
      <h2>Hey Polki, Welcome to Polkadot </h2>
      <button>Connect wallet</button>
    </>
  )
}

Далее в файле index.tsx мы создадим асинхронную функцию, которая будет выполнять функции подключения кошелька в вашем dapp. Скопируйте и вставьте следующие строки кода

async function connectWallet() {
	const { web3Enable, web3Accounts } = await import('@polkadot/extension-dapp');
	const extensions = web3Enable('Polki');

	if (!extensions) {
		throw Error('No Extension Found');
	}

	const allAccounts = await web3Accounts();

	console.log(allAccounts);

	if (allAccounts.length === 1) {
		setSelectedAccount(allAccounts[0]);
	}
}

Наконец, добавьте последний фрагмент кода под фрагментом возврата

{
	account.length === 0 ? <button onClick={connectWallet}>Connect Wallet</button> : null;
}

{
	selectedAccount ? selectedAccount.address : null;
}

Теперь все ваши коды должны выглядеть следующим образом

import { useState } from 'react';
import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
import dynamic from 'next/dynamic'

const web3Accounts = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });
const web3Enable = dynamic(() => import('@polkadot/extension-dapp'), { ssr: false });



export default function Home() {
  const [account, setAccount] = useState<InjectedAccountWithMeta[]>([]);
  const [selectedAccount, setSelectedAccount] = useState<InjectedAccountWithMeta>();

  async function connectWallet(){
    const { web3Enable,web3Accounts } = await import("@polkadot/extension-dapp");
    const extensions = web3Enable("Polki");

    if(!extensions) {
      throw Error("No Extension Found");
    }

    const allAccounts = await web3Accounts();

    console.log(allAccounts);

    if(allAccounts.length === 1){
      setSelectedAccount(allAccounts[0]);
    }
  }
  return (
    <>
      <h2>Hey Polki, Welcome to Polkadot </h2>
      {
        account.length === 0 ? <button onClick={connectWallet}>Connect Wallet</button> : null
      }

      {
        selectedAccount ? selectedAccount.address : null
      }
    </>
  )
}

Убедитесь, что ваш терминал по-прежнему работает, и перейдите в браузер. Нажмите на кнопку «Подключить кошелек», после чего появится всплывающее окно от расширения polkadot, запрашивающее разрешение на подключение к вашему dapp.

Нажмите «Да», чтобы дать ему разрешение, и вот, пожалуйста, адрес вашего кошелька подключен к вашей dapp.

Я надеюсь, что вам понравилось это руководство и вы узнали из него что-то новое. Здесь просто показано, как работает кнопка подключения, и вы можете использовать это в качестве руководства, когда будете пытаться добавить эту функциональность в свой проект Next.js. Идите и создавайте свои web3-приложения на Polkadot. Будьте здоровы

Как подключить кошелек к dApp с помощью Next.js на Polkadot

Необходимые условия

Давайте начнем…

Интеграция функциональности кошелька dapp connect