Если вы еще не являетесь участником Medium и хотите получить полный доступ к моим историям, воспользуйтесь этой ссылкой, чтобы подписаться на членство в Medium. Ваш членский взнос напрямую поддерживает меня и побуждает писать больше качественных материалов в будущем. Здоровья!

Это второе прохождение нашей серии Full Stack Solana. Если вы не проходили предыдущее прохождение, предлагаю пройти предыдущее, прежде чем начать читать этот пост:

Учебное пособие по Full Stack Solana Web3 (1) — подключение к фантомному кошельку

Во-первых, некоторые обновления с момента предыдущего прохождения, теперь, если вам нужно использовать Phantom Wallet в открытом доступе, вы должны использовать его через HTTPS. В противном случае вы можете попробовать протестировать его на локальном хосте. Если вы хотите посмотреть, как настроить HTTPS, вы можете обратиться к моему предыдущему отрывку здесь.

Скачать модуль solana/web3.js

Теперь загрузите @solana/web3.js

npm install --save @solana/web3.js

Итак, вы загрузили и установили модуль узла библиотеки Solana web3. Однако теперь вы можете использовать эту библиотеку только в своей консоли, но не во внешнем интерфейсе. Теперь нам нужен Browserify, модуль, который используется для обертки Node Module для запуска во внешнем интерфейсе.

Скачать Просмотреть

Теперь вам нужно скачать браузер

$ npm install -g browserify

Теперь нам нужно обернуть @solana/web3.js и импортировать его в код нашего внешнего интерфейса.

Итак, перейдите в папку вашего проекта и создайте внутри еще одну папку с именем Public:

$ cd ~/solanaapp
$ mkdir public

Теперь оберните @solana/web3.js во внешний интерфейс:

$ cd ~/solanaapp/public
$ browserify -r @solana/web3.js > bundle.js

Теперь у вас есть библиотека solana web3, обернутая в bundle.js.

Настройка Nginx для обслуживания bundle.js

Теперь настройте Nginx для обслуживания файла bundle.js в нашем каталоге ~/solanaapp/public:

location /public {
  # Set your project location as the root
  root ~/solanaapp;
  try_files $uri $uri/ =404;
 }

Как только это будет сделано, перезапустите Nginx:

$ sudo systemctl restart nginx

Если вы настроите, как указано выше, вы можете вызвать файл bundle.js из внешнего интерфейса по следующему маршруту:

https://yourdomain.com/public/bundle.js

Сделайте свой первый платеж

Теперь, помните, в предыдущем отрывке мы поместили все коды внешнего интерфейса в index.html, вы можете использовать приведенный ниже код, чтобы включить библиотеку solana web 3 в код внешнего интерфейса:

<script type="text/javascript" src="/public/bundle.js"></script>

Теперь сделайте еще одну кнопку с именем Transfer в коде внешнего интерфейса:

<button onclick="transferSOL()">trasnfer</button>
async function transferSOL(){ 
//to do
}

Теперь подключим библиотеку solana web 3 для выполнения транзакции внутри функции transferSOL():

const web3 = require(“@solana/web3.js”);
async function transferSOL(){
   const pubKey = window.solana.publicKey;     
   const transferTransaction = new  web3.Transaction().add(web3.SystemProgram.transfer({
      fromPubkey: pubKey,
      toPubkey: new  web3.PublicKey("xxxxxx"), //public key of receive account in string
      lamports: 1000
   }))
  const network = "https://api.devnet.solana.com";
  const connection = new web3.Connection(network);
  transferTransaction.feePayer = pubKey;
  let blockhash = (await connection.getLatestBlockhash("finalized")).blockhash;
  transferTransaction.recentBlockhash = blockhash;
  const {signature} = await
  window.solana.signAndSendTransaction(transferTransaction);
        console.log("test");
        await connection.confirmTransaction(signature);
        console.log(signature);
      }}

Приведенный выше код создал кнопку передачи. Как только кошелек пользователя будет подключен к вашему приложению, пользователь может нажать кнопку перевода, чтобы отправить 1000 лампортов на ваш счет в devnet.

Заключение

Поздравляем! Теперь вы создали на своем веб-сайте функцию для подключения к Phantom Wallet и совершения первого платежа. Итак, в следующих статьях мы поговорим подробнее о том, как сделать сайт с пользовательской подпиской, используя описанную выше технику. Если вам интересно, следите за обновлениями этой серии. Ваше здоровье!