Router Protocol's Tangled SDK 🪢

1. @tangled3/react 🪢 ⚛️

React wrappers, hooks, components, and utilities for Router Protocol's Tangled SDK. Enable crosschain interactions with your DApp with the Tangled SDK. Compatbile with Next.js 13 and React 18.

Built with @shadcn/ui and tailwind so you can paint it your way :D

Installation

yarn add @tangled3/react

OR

pnpm i @tangled3/react

Usage

import { QueryClient, QueryClientProvider } from 'react-query';
import { TangledProvider } from '@tangled3/react';

export default function App({ Component, pageProps }) {
  return (
    <QueryClientProvider client={new QueryClient()}>
      <TangledProvider
        config={{
          projectName: 'multi chain project',
          chainConfigs: {},
          // chains
        }}
      >
        <Component {...pageProps} />
      </TangledProvider>
    </QueryClientProvider>
  );
}

Feat List

Supported Chain Types

1. EVM
2. Solana
3. Tron
4. Cosmos
5. Near
6. AlephZero
7. Sui
8. Bitcoin

Support Table

🔸 - In Progress ✅ - Supported ❌ - Not Supported

Chain	Wallet Connection	Token Fetch	Transaction Handlers	Tx Watch	Tx Receipt
EVM	✅	✅	🔸	🔸	🔸
Solana	✅	✅	🔸	🔸	🔸
Tron	✅	✅	🔸	🔸	🔸
AlephZero	✅	✅	✅	✅	✅
Sui	🔸	❌	❌	❌	❌
Cosmos	❌	❌	❌	❌	❌
Near	❌	❌	❌	❌	❌
Bitcoin	❌	❌	❌	❌	❌
Casper	❌	❌	❌	❌	❌
Ton	✅	✅	✅	✅	✅
Algorand	❌	❌	❌	❌	❌

Hooks

• useChainsConfig - config for all chains
• useChains - data for all chains
• useChain - data for a specific chain
• useChainId - current chain id
• useWallet - current wallet
• useWallets - all wallets
• useAccount - current account
• useWallet - current wallet
• useWatchTransaction - watch a transaction, return receipt and callback fns
• useSendTransaction - send a transaction, return receipt
• useTransactionReceipt - get a transaction receipt
• useNitroTransactionReceipt - get a transaction receipt from Nitro explorer
• useReadContract - read a contract
• useSignMessage - sign a message with current connected account
• useToken - get token data like name, symbol, decimals
• useTokenAddressData - get token data for an account to get balance, allowance and permit information
• useTokens - get token list for one/multiple chains
• useTransactionHistory - get transaction history for an account stored in local storage

Components

• Connect Button
• Account Dialog
• Network Button
• Network Selector Dialog
• Crosschain Transaction Receipt
• Receipt Status
• Transaction Status
• Transaction Progress

Utilities

• SIWE and similar