··• Misha is typing

3 способа подключить кошелёк в 2023

2023-05-18T19:38:47.850Z

Привет! В этой статье я расскажу о трёх библиотеках для подключения EVM-кошелька в web3-приложение.

Web3Modal

Это библиотека от WalletConnect, поэтому здесь всегда будет отличная поддержка свежих версий WC. Кастомизируется через CSS-переменные, хотя кастомизация не очень глубокая. У них нет интеграции с Sign In With Ethereum, но зато есть своё облачное решение для аутентификации — WalletConnect Auth. Если вас не беспокоит вендор лок, то выглядит это удобнее чем SIWE.

Пример кода

import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal, Web3Button } from '@web3modal/react'
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
import { arbitrum, mainnet, polygon } from 'wagmi/chains'

const chains = [arbitrum, mainnet, polygon]
const projectId = 'YOUR_PROJECT_ID'

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: w3mConnectors({ projectId, version: 1, chains }),
  publicClient
})
const ethereumClient = new EthereumClient(wagmiConfig, chains)

function App() {
  return (
    <>
      <WagmiConfig config={wagmiConfig}>
        <HomePage />
      </WagmiConfig>

      <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
      
      <Web3Button />
    </>
  )
}

Кстати, Web3Modal поддерживает не только Реакт, в отличие от аналогов.

RainbowKit

Библиотека от создателей кошелька Rainbow, интерфейс подключения кошелька сделан в том же стиле. Самый главный минус это, пожалуй, очень скудная кастомизация, в которой даже нельзя задать начертание для шрифта. Есть интеграция с Sign In With Ethereum.

Пример кода

import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, publicClient } = configureChains(
  [mainnet, polygon, optimism, arbitrum],
  [
    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
    publicProvider()
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains
});

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient
})

const App = () => {
  return (
    <WagmiConfig config={wagmiConfig}>
      <RainbowKitProvider chains={chains}>
        /* Your App */
        <ConnectButton />
      </RainbowKitProvider>
    </WagmiConfig>
  );
};

Кстати, в RainbowKit есть поддержка отображения статуса транзакций, которые нужно добавлять вручную.

ConnectKit

Моя любимая библиотека: минималистичный интерфейс, приятные анимации, чем-то напоминает Телеграм. Глубоко кастомизируется, можно даже аватарку подгрузить произвольную. Тоже есть интеграция с Sign In With Ethereum.

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

Пример кода

import { WagmiConfig, createClient } from "wagmi";
import { ConnectKitProvider, ConnectKitButton, getDefaultClient } from "connectkit";

const alchemyId = process.env.ALCHEMY_ID;

const client = createClient(
  getDefaultClient({
    appName: "Your App Name",
    alchemyId,
  }),
);

const App = () => {
  return (
    <WagmiConfig client={client}>
      <ConnectKitProvider>
        /* Your App */
        <ConnectKitButton />
      </ConnectKitProvider>
    </WagmiConfig>
  );
};

Удобно, что в документации ConntectKit есть чеклист того, что нужно проверить перед деплоем в продакшн.

Бонус: @viaprotocol/web3-wallets

Библиотека от команды via.exchange. Не уверен, что она ещё активно поддерживается, но если вам нужно подключать не только EVM-кошельки, то можно обратить внимание на то, как это сделано здесь. Библиотека может работать с кошельками для Solana, Tron, Bitcoin. Полный список сетей можно посмотреть в файле networks.ts.

Пример кода

import { useContext } from 'react'
import { WalletContext, WalletProvider } from '@viaprotocol/web3-wallets'

function App() {
  return (
    <WalletProvider>
      <NestedComponent />
    </WalletProvider>
  )
}

function NestedComponent() {
  const { connect, isConnected, address } = useContext(WalletContext)

  if (!isConnected) {
    return (
      // Select MetaMask and connect to ETH Mainnet
      <button
        type="button"
        onClick={() => connect({ name: 'MetaMask', chainId: 1 })}
      >Connect wallet</button>
    )
  }

  return (
    <p>{address}</p>
  )
}

5 способов сделать мобильный фронтенд похожим на нативное приложение

2022-08-27T19:03:00.764Z

Когда я делаю PWA, гибридное приложение или даже просто мобильную вёрстку, я хочу, чтобы интерфейс ощущался как нативное приложение. В вебе сложно достичь нативной плавности, это правда. Но даже быстрые и красивые веб-приложения легко отличить от нативных из-за специфичного для браузера UX.

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

Добавляем манифест

Web App Manifest — часть технологии Progressive Web Application (PWA).

PWA это веб-приложение, которые можно установить на устройство и запускать без интерфейса браузера в собственном окне. Хорошее PWA это классно. Мгновенная установка, доступ к нативным API, offline-first и так далее.

Чтобы сделать из сайта топовое offline-first PWA, нужно потратить не один спринт. Но для начала можно просто добавить в папку со статикой manifest.json, тогда при добавлении приложения на рабочий стол оно будет запускать отдельно от браузера! Далее можете докрутить остальные PWA-приколы, про это читайте здесь.

Подробнее о манифестах веб-приложений на MDN.

А здесь можно посмотреть на крохотный манифест Таймстрайпа.

Ставим прозрачный -webkit-tap-highlight-color

Свойство -webkit-tap-highlight-color определяет цвет полупрозрачных прямоугольников, которые появляются над интерактивными элементами UI во время нажатия.

Эта штука нужна на всякий случай, чтобы пользователю было понятно, что взаимодействие с интерфейсом произошло. Поэтому если у ваших UI-элементов нет проблем с визуальным фидбэком, можете смело сделать эти хайлайты прозрачными:

body {
  -webkit-tap-highlight-color: transparent;
}

Фиксим стили ховеров

Обратите внимание на кнопку "Goal options"

На тачскринах нет ховера! Не знали? Про это писал здесь, почитайте: https://teletype.in/@og_mishgun/editor/the-right-hover

Выключаем pinch-to-zoom

Потому что нативные приложения не зумятся!

Ставим user-scalable: 0 в meta viewport. Пример из тэга head Таймстрайпа:

 <meta
   name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
 />

Убираем оверскролл в Сафари

Под оверскроллом я подразумеваю визуальный эффект эластичности прокрутки. Сам по себе он не является чем-то плохим, но опытный пользователь при виде него почувствует запах веба.

На эту тему есть хорошая статья.

Бонус: react-easy-swipe use-gesture

Для Реакт-приложений есть супер-инструмент — библиотека react-easy-swipe. С помощью неё можно добавить в любой компонент поддержку свайпов.

~~В Таймстрайпе она используется для сайдбара, экранов с горизонтальными свайпами и каруселей.~~

Update: недавно появилась библиотека use-gesture, мне удалось попробовать её на одном из проектов и хочу сказать что она гораздо удобнее и функциональнее react-easy-swipe. В документации есть красивые примеры, в том числе с использованием react-spring. Пока что эти две либы дали мне лучший DX в сложных интерфейсных анимациях.

Ещё по теме

***

Понравилась статья? Подпишитесь на мой канал, там я пишу про фронтенд, крипту и лайфстайл.

А ещё подпишитесь на Таймстрайп в Инстаграме.

Правильный :hover

2022-08-27T19:01:00.233Z

Если вы стилизуете ховер через CSS, то у меня для вас новости.

НА ТАЧСКРИНАХ НЕТ ХОВЕРА!

Почему? Да потому что ховер это состояние элемента, над которым занесли поинтер (курсор мыши). Очевидно, что смартфон не знает, над каким элементом висит палец пользователя.

Я не знаю, где была логика разработчиков мобильных браузеров, но почему-то они решили включать стили ховера при нажатии на элемент. Проблема в том, что нажатие на элемент на тачскрине приводит к зависанию стилей в состоянии ховера. Как это выглядит: пользователь делает тап по кнопке, а она начинает гореть так, будто на неё навели курсор. И это состояние сохраняется до следующего тапа или скролла.

В современном вебе таких гадостей быть не должно, а интерактивные элементы должны вести себя также, как и в нативных приложениях.

Что делать?

В CSS есть специальная фича — Interaction media features. Это медиа-запрос, который определяет может ли пользователь наводиться на элементы и использует ли он точный (мышь или стилус) или неточный (палец) поинтер. Пример:

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) { /* ... */ }

/* stylus-based screens */
@media (hover: none) and (pointer: fine) { /* ... */ }

/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) { /* ... */ }

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) { /* ... */ }

Если у вас SCSS, то напишите пожалуйста себе миксин.

А вот пользователям Tailwind 3+ ничего писать не надо: там коробки есть фича-флаг, который делает всё по красоте:

// tailwind.config.js
module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  },
  // ...
}

***

Понравилась статья? Подпишитесь на мой канал, там я пишу про фронтенд, крипту и лайфстайл.