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>
  )
}

В этой статье я покажу несколько трюков, которые могут даже опытных пользователей заставить сомневаться в том, что перед ними не нативный интерфейс. Эти трюки я использовал в мобильной версии 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;
}

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

На тачскринах нет ховера! Не знали? Про это писал здесь, почитайте: 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 в сложных интерфейсных анимациях.

Ещё по теме

• Make your PWA feel more like an app, Thomas Stainer
• Building Native-like Experiences on the Web with PWAs, Miloš Žikić
• How you can develop Progressive Web Apps that feel like native mobile apps, Samuele Dassatti

***

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

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

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

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

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

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

Что делать?

В 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,
  },
  // ...
}

***

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