Распишу чуть детальней, чтоб было понимание:

В Web3 данные и код смарт-контрактов хранятся в распределенных системах (blockchain). Например в Ethereum или Ton код смарт-контракта разворачивается в сети и хранится в каждой полной ноде (компьютер). Доступ к нему возможен через RPC-запросы или специальное API.

Сами данные мы можем хранить в смарт-контрактах, но это дорого. Потому зачастую там мы храним базовые данные. Например баланс или конфиги. Остальное выносим в распределенные хранилища: IPFS, Filecoin. Туда картинки, файлы, JSON и прочее.

Как фронтенд взаимодействует со смарт-контрактами?

Фронтенд не общается напрямую с блокчейном, а использует провайдеры, которые выступают посредниками между приложением и сетью. Этими провайдерами могут быть RPC-узлы, Wallet API. Если используем кошелек, то запросы отправляются через него, который подписывает транзакции.

Протоколы взаимодействия: JSON-RPC, WebSockets или даже GraphQL

То есть, фронтенд отправляет запросы в блокчейн не напрямую, а через прослойку. fetch, axios и прочее используется, чтоб дать нужные данные провайдеру, который уже в свою очередь отправляет данные в блокчейн. Есть еще такие штуки как индексаторы (The Graph, Moralis), которые ускоряют доступ к данным.

Вот простой пример, как из React приложения мы взаимодействуем с blockchain через хук (пример на блокчейн Ton):

`export function useJettonContract() { const { wallet, sender } = useTonConnect() const { client } = useTonClient()

const faucetJettonContract = useAsyncInitialize(async () => { const contract = new FaucetJetton( Address.parse('EQB8StgTQXidy32a8xfu7j4HMoWYV0b0cFM8nXsP2cza_b7Y') ) return client.open(contract) as OpenedContract }, [client, wallet])

return { mint: () => { faucetJettonContract?.sendMintFromFaucet(sender, Address.parse(wallet!)) } } }

Где функция mint уже используется в шаблоне:

`const { mint } = useJettonContract()

return ( { mint() }}

Get jettons

)``