Использование Simulation RPC в UI dapp'а

Simulation RPC совместим с Mainnet, Boba и Polygon, а другие сети будут интегрированы постепенно.\ Simulation API совместим со всеми сетями, поддерживаемыми Tenderly.

Вы можете добавить симуляции в свой dapp, интегрировав Simulation RPC или Simulation API.

Преимущества интеграции Simulation API

Интегрируя Simulation API/Simulation RPC, вы можете:

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

Вот несколько примеров:

Если вы создаёте приложение, похожее на кошелёк, вы можете показывать, как транзакция перемещает токены ERC-20, и позволять пользователям видеть движение своих средств.
Если вы создаёте DeFi-продукт, вы можете использовать события для анализа того, соответствует ли транзакция оптимальным условиям, установленным пользователем в UI.
Если вы готовите предложение по управлению, состоящее из нескольких транзакций, вы можете сделать симуляционный пакет, чтобы увидеть, как предложение применяется.
Вы даже можете объединить транзакции предложения с несколькими тестовыми транзакциями, чтобы убедиться, что ваше предложение выполняется как задумано, и выявить возможные слепые зоны.

Пример: добавление симуляций в UI Uniswap

В этом примере мы покажем, как интегрировать Simulation RPC в UI Uniswap и отобразить точные переходы токенов вдоль пути обмена. Так мы дадим пользователю более высокую видимость эффектов транзакции и позволим ему принять обоснованное решение о том, продолжать ли выполнение.

Требования к компоненту `Simulation`

Вот требования к компоненту симуляции:

Компонент должен отображать количество токенов у пользователя до и после подписания и отправки транзакции.
Симуляция должна выполняться каждый раз при изменении данных сделки, поэтому ему нужно получать параметры trade и allowedSlippage.
Компонент должен отслеживать:
- Текущие балансы (до свопа).
- Событие Swap, которое мы будем использовать для расчёта новых балансов.
- Массив событий Transfer, которые мы будем использовать для расчёта новых балансов.

Рендер `Simulation` внутри `ConfirmSwapModal`

Лучшее место, чтобы проинформировать пользователя о результатах транзакции — ConfirmSwapModal, непосредственно перед тем, как он сможет подписать и отправить транзакцию. Код сокращён для краткости:

example

export default function ConfirmSwapModal({
  /* ... */
}: {
  /* ... */
}) {
  // ...
  const modalHeader = useCallback(() => {
    return trade ? (
      <>
        <SwapModalHeader.../>
+        <Simulation trade={trade} recipient={null} allowedSlippage={allowedSlippage} />
      </>
    ) : null
  }, [/* ... */])
  //...

Реализация компонента `Simulation`

Логика компонента лежит в функции simulate:

Она запускается при изменении аргументов trade или provider, поэтому обновляется и ресимулирует всякий раз, когда своп потенциально меняется.
Она вызывает setOldBalances, которая получает балансы токенов ERC-20 In и Out и сохраняет их в переменной состояния oldBalances.
Она вызывает simulateRPC, которая выполняет вызов Simulation RPC к tenderly_simulateTranscation и затем:
- Она разбирает декодированные логи, чтобы найти события Transfer, и сохраняет их в переменной состояния transfers компонента.
- Она разбирает декодированные логи, чтобы найти событие Swap, и сохраняет его в переменной состояния swap компонента.

Наконец, для рендеринга результатов симуляции мы отображаем компонент SimulationDetails, который является чисто функциональным. Он вычисляет старые и новые состояния и рендерит данные на основе trade, swap, transfers и oldBalances.

example.tsx

const Simulation = ({
  trade,
  allowedSlippage,
  recipient,
}: {
  trade: InterfaceTrade<Currency, Currency, TradeType> | undefined;
  recipient: string | null;
  allowedSlippage: Percent;
}) => {
  const { account, provider } = useWeb3React();
  const nativeCurrency = useNativeCurrency();

  const deadline = useTransactionDeadline();
  const signatureData = useERC20PermitFromTrade(trade, allowedSlippage, deadline);
  const args = useSwapCallArguments(
    trade,
    allowedSlippage,
    recipient,
    signatureData.signatureData,
    deadline,
    undefined,
  );

  const [oldBalances, setOldBalances] = useState<any[]>([]);
  const [transfers, setTransfers] = useState<any[]>([]);
  const [swap, setSwap] = useState<any>({});

  useEffect(() => {
    onSimulate();
  }, [trade, provider]);

  async function onSimulate() {
    setOldBalances([]);
    setSwap({});
    const { address, calldata, value } = args[0];
    const provider = RPC_PROVIDERS[SupportedChainId.MAINNET];

    await getCurrentBalances();
    await simulateRPC(account, address, calldata, value);
  }

  async function getCurrentBalances() {
    return Promise.all([
      provider.send('eth_getBalance', [account, 'latest']),
      provider.send('eth_call', [
        {
          to: '0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984',
          data: `0x70a0823100000000000000000000000000${stripX(account)}`,
        },
        'latest',
      ]),
    ]).then(oldBalances => {
      setOldBalances(oldBalances);
    });
  }

  async function simulateRPC(account: string, address: string, calldata: string, value: string) {
    RPC_PROVIDERS[SupportedChainId.MAINNET]
      .send('tenderly_simulateTransaction', [
        {
          from: account,
          to: address,
          data: calldata,
          value: stripHexZero(value),
        },
        'latest', // block number to simulate on
        null, // optional state overrides for involved contracts
      ])
      .then(simulationResponse => {
        console.log('Simulation Response', simulationResponse);
        setTransfers(simulationResponse.logs.filter((log: any) => log.name === 'Transfer'));
        setSwap(simulationResponse.logs.filter((log: any) => log.name === 'Swap')[0]);
      });
  }

  return (
    <>
      ...
      <SimulationDetails
        trade={trade}
        syncing={oldBalances.length == 0 && transfers.length == 0 && !!swap.inputs}
        transfers={transfers}
        oldBalances={oldBalances}
        swap={swap}
      />
    </>
  );
};

Getting Started

Simulator

Console

Monitor

Node RPC

Account & Settings

Использование Simulation RPC в UI dapp'а

Преимущества интеграции Simulation API

Пример: добавление симуляций в UI Uniswap

Требования к компоненту `Simulation`

Рендер `Simulation` внутри `ConfirmSwapModal`

Реализация компонента `Simulation`

​Преимущества интеграции Simulation API

​Пример: добавление симуляций в UI Uniswap

​Требования к компоненту Simulation

​Рендер Simulation внутри ConfirmSwapModal

​Реализация компонента Simulation

Преимущества интеграции Simulation API

Пример: добавление симуляций в UI Uniswap

Требования к компоненту `Simulation`

Рендер `Simulation` внутри `ConfirmSwapModal`

Реализация компонента `Simulation`