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. Sui
7. Bitcoin

Support Table

🔸 - In Progress ✅ - Supported ❌ - Not Supported

Chain	Wallet Connection	Token Fetch	Transaction Handlers	Tx Watch	Tx Receipt
EVM	✅	✅	✅	✅	✅
Solana	✅	✅	✅	✅	✅
Sui	✅	✅	✅	✅	✅
Cosmos	✅	✅	✅	✅	✅
Near	✅	✅	✅	✅	✅
Bitcoin	✅	✅	✅	✅	✅
Algorand	❌	❌	❌	❌	❌

Hooks

• [-] useAccounts - get all accounts for a chain type or all chain types
• [-] useChain - get chain data for a specific chain
• [-] useChains - get all chain data
• [-] useConnect - connect to a wallet
• [-] useConnectedWallets - get all connected wallets
• [-] useConnections - get all connections
• [-] useCurrentAccount - get the current account
• [-] useCurrentWallet - get the current wallet
• [-] useDisconnect - disconnect from a wallet
• [-] useIsMobile - check if the user is on a mobile device
• [-] useNetwork - get the current network
• [-] useSendTransaction - send a transaction
• [-] useTangledConfig - get the Tangled config
• [-] useToken - get token data
• [-] useTokenForAccount - get token data for an account
• [-] useTransactionReceipt - get a transaction receipt
• [-] useWaitForTransaction - wait for a transaction
• [-] useWallet - get the current wallet
• [-] useWallets - get all wallets

• useSignMessage - sign a message with the current connected account
• useReadContract - read from a contract