+
+ }
+ />
+
+
+
+
+
+ Fetch Accounts
+
+
+
+
+
+ Fetch
+
+
+
+
+
+
+ {error && (
+
+ Error fetching accounts: {error.message}
+
+ )}
+
+ {isLoading && (
+
+
+ Loading accounts...
+
+
+ )}
+
+ {!isLoading && !error && (
+
+
+ Associated accounts
+
+
+ {accounts?.length ? (
+
+
+ Account Name
+ Chain
+
+
+ {accounts.map((accountItem, index) => (
+
+
+
+ {accountItem.accountName}
+
+ |
+
+ {accountItem.chainAccounts.map((chain, chainIndex) => (
+
+ {chain.chainId} ({chain.accountName})
+
+ ))}
+ |
+
+ ))}
+
+
+ ) : (
+ No associated accounts
+ )}
+
+ )}
+
+
+ {/*
+ This is for Demo purposes, displaying what SDK function is executed for this action
+ */}
+ {functionCalls.map((data, index) => (
+
+ ))}
+
+ );
+};
+
+export default AccountsByPublicKey;
diff --git a/packages/apps/wallet-sdk-example/src/routes.tsx b/packages/apps/wallet-sdk-example/src/routes.tsx
index 8e0bd7cf0f..dd9ca6a7df 100644
--- a/packages/apps/wallet-sdk-example/src/routes.tsx
+++ b/packages/apps/wallet-sdk-example/src/routes.tsx
@@ -1,5 +1,6 @@
import { RouteObject } from 'react-router-dom';
+import { AccountsByPublicKey } from './pages/accountsByPublickey';
import MarkdownPage from './pages/Home';
import { KadenaNames } from './pages/kadenaNames/KadenaNamesResolver';
import { Transfer } from './pages/Transfer';
@@ -27,6 +28,10 @@ const routes: RouteObject[] = [
path: '/kadenanames',
element: