Troubleshooting

Widget Not Rendering

Problem: Widget doesn't appear or styles are broken.

Solution:

1

Verify you've imported the styles:

import '@ordanetwork/sdk/react/styles.css';

2

Check browser console for errors.

3

Ensure OrdaProvider wraps your component.

4

Verify all peer dependencies are installed.

Authentication Errors

Problem: "Failed to get JWT token" or 401 errors.

Solution:

1

Check your .env.local has correct credentials:

ORDA_CLIENT_ID=prj_...
ORDA_CLIENT_SECRET=sec_...

2

Verify your JWT endpoint is working:

curl -X POST http://localhost:3000/api/auth/jwt

3

Check server logs for error details.

4

Ensure getToken() returns correct format:

{ jwt: string, expiresAt: number }

Wallet Connection Issues

Problem: Wallets won't connect or WalletConnect modal doesn't open.

Solution:

1

Verify NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID is set.

2

Check projectId is valid (32+ characters).

3

Ensure your domain is allowlisted in WalletConnect Cloud.

4

Try clearing browser cache and reconnecting.

5

Check browser console for WalletConnect errors.

Build Errors

Problem: TypeScript errors or build failures.

Solution:

1

Ensure peer dependencies match version requirements:

npm ls react wagmi viem @tanstack/react-query

2

Clear node_modules and reinstall:

rm -rf node_modules package-lock.json
npm install

3

Check TypeScript version (5.0+):

npx tsc --version

Style Conflicts

Problem: Widget styles conflict with app styles.

Solution:

1

Widget styles are scoped to .orda-widget.

2

Import widget styles AFTER your global styles:

import './globals.css';
import '@ordanetwork/sdk/react/styles.css'; // After globals

3

Use CSS modules or scoped styles for your app.

Token Prices Not Loading

Problem: Token prices show as $0 or fail to load.

Solution:

1

Check network connectivity.

2

Verify JWT has quotes:read permission.

3

Check browser console for API errors.

4

Ensure token addresses are correct.

5

Try refreshing the page.

Debug Mode

Enable debug mode to see detailed logs:

<OrdaProvider
  config={{
    getToken: async () => { /* ... */ },
    appKitConfig,
    debug: true, // Enable debug logs
  }}
>

Debug logs will show:

• SDK initialization

• Token refresh timing

• API request details

• Error stack traces

---

Additional Resources

Documentation

1. orda Developer Portal: https://app.orda.network

2. API Documentation: https://docs.orda.network

3. orda SDK: https://www.npmjs.com/package/@ordanetwork/sdk