Dubious hacks for xx Network

components/account-select.tsx

@@ -12,7 +12,7 @@ export const accountValueTemplate = (option: any, props: any) => {
     return (
       <div className={styles.accountOption}>
         <div>
-          <Identicon value={option?.address} size={32} theme="polkadot" />
+          <Identicon value={option?.address} size={32} theme="substrate" />
           {option?.meta?.name}
         </div>
       </div>
@@ -26,7 +26,7 @@ export const accountOptionTemplate = (option: any) => {
   return (
     <div className={styles.accountOption}>
       <div>
-        <Identicon value={option?.address} size={32} theme="polkadot" />
+        <Identicon value={option?.address} size={32} theme="substrate" />
         {option?.meta?.name}
       </div>
     </div>

components/login.tsx

@@ -5,10 +5,16 @@ import AccountSelect from './account-select';
 
 import { useRouter } from 'next/router';
 
+// AA
+import { stringToHex, stringToU8a, u8aToHex } from "@polkadot/util";
+// import { wrapBytes } from '@polkadot/extension-dapp';
+import { signatureVerify } from '@polkadot/util-crypto';
+
 import styles from '@/styles/Home.module.css';
 import { Inter } from 'next/font/google';
 import Link from 'next/link';
 import { usePolkadotExtensionWithContext } from '@/context/polkadotExtensionContext';
+import { wrap } from 'module';
 const inter = Inter({ subsets: ['latin'] });
 
 export default function LoginButton() {
@@ -24,26 +30,36 @@ export default function LoginButton() {
       setIsLoading(true);
       let signature = '';
       const message = {
-        statement: 'Sign in with polkadot extension to the example tokengated example dApp',
+        statement: 'Signin',
         uri: window.location.origin,
         version: '1',
         nonce: await getCsrfToken(),
       };
-
+      // const msg = wrapBytes(stringToHex(JSON.stringify(message)));
+      
       const signRaw = injector?.signer?.signRaw;
 
       if (!!signRaw && !!actingAccount) {
         // after making sure that signRaw is defined
-        // we can use it to sign our message
+        // we can use it to sign our message        
         const data = await signRaw({
           address: actingAccount.address,
           data: JSON.stringify(message),
-          type: 'bytes',
+          type: 'bytes'
         });
-
+        // print data to console
+        // console.log(data);
+        // set the signature to the data.signature
         signature = data.signature;
+        console.log(data.signature);
+        // signatureVerify(JSON.stringify(message), signature, actingAccount.address);
+        const { isValid } = signatureVerify(JSON.stringify(message), signature, actingAccount.address);
+        console.log(`signature ${data.signature} is ${isValid ? 'valid' : 'invalid'}`);
       }
 
+      // print message to console
+      console.log(JSON.stringify(message));
+
       // will return a promise https://next-auth.js.org/getting-started/client#using-the-redirect-false-option
       const result = await signIn('credentials', {
         redirect: false,
@@ -53,13 +69,14 @@ export default function LoginButton() {
         signature,
         address: actingAccount?.address,
       });
+     
 
       // take the user to the protected page if they are allowed
       if (result?.url) {
         router.push('/protected-api');
       }
 
-      setError(result?.error);
+      setError(result?.error ?? undefined);
       setIsLoading(false);
     } catch (error) {
       setError('Cancelled Signature');

package.json

@@ -12,7 +12,7 @@
     "@polkadot/api": "^10.3.4",
     "@polkadot/api-augment": "^10.3.4",
     "@polkadot/extension-dapp": "^0.45.5",
-    "@polkadot/react-identicon": "^3.1.4",
+    "@polkadot/react-identicon": "^3.10.0",
     "@talismn/connect-wallets": "^1.2.3",
     "@types/node": "18.15.11",
     "@types/react": "18.0.37",

pages/api/auth/[...nextauth].ts

@@ -89,7 +89,7 @@ export const authOptions: NextAuthOptions = {
 
           // verify the account has the defined token
           const wsProvider = new WsProvider(
-            process.env.RPC_ENDPOINT ?? 'wss://kusama-rpc.dwellir.com',
+            process.env.RPC_ENDPOINT ?? 'ws://192.168.1.3:63007',
           );
           const api = await ApiPromise.create({ provider: wsProvider });
           await api.isReady;
@@ -97,8 +97,8 @@ export const authOptions: NextAuthOptions = {
           return {
               id: credentials.address,
               name: credentials.name,
-              freeBalance: "",
-              ksmAddress,
+              freeBalance: api.createType('Balance', 0),
+              ksmAddress: encodeAddress(credentials.address, 2),
             };
 
         } catch (e) {

pages/protected-api.tsx

@@ -42,7 +42,8 @@ export default function ProtectedPage() {
   }
 
   // format the big number to a human readable format
-  const ksmBalance = formatBalance( session.freeBalance, { decimals: 12, withSi: true, withUnit: 'KSM' } )
+  // const ksmBalance = formatBalance( session.freeBalance, { decimals: 12, withSi: true, withUnit: 'KSM' } )
+  const ksmBalance = formatBalance( session.freeBalance, { decimals: 9, withSi: true, withUnit: 'XX' } )
 
   // If session exists, display content
   return (
@@ -54,4 +55,4 @@ export default function ProtectedPage() {
       <PolkadotParticles />
     </main>
   )
-}
\ No newline at end of file
+}

pages/protected.tsx

@@ -26,7 +26,8 @@ export default function Admin( { freeBalance } : { freeBalance : BN } ) : JSX.El
   }
 
   // format the big number to a human readable format
-  const ksmBalance = formatBalance( freeBalance, { decimals: 12, withSi: true, withUnit: 'KSM' } )
+  // const ksmBalance = formatBalance( freeBalance, { decimals: 12, withSi: true, withUnit: 'KSM' } )
+  const ksmBalance = formatBalance( freeBalance, { decimals: 9, withSi: true, withUnit: 'XX' } )
   
   return (
     <main className={ styles.protected }>

xx_README.md

+## README for xx Network
+
+Thank you to [the original author](https://polkadot.study/tutorials/tokengated-polkadot-next-js/intro) and the guy who [forked it](https://github.com/yk909/polkadot-js-tokengated-website/) to apply some fixes (verify/compare if you plan to use in production, of course).
+
+This is partially working, but I'm sharing in the hope someone will use it for xx Network or other Substrate projects/chains for which the upstream forks don't provide instructions. 
+
+## How to run
+
+Install Polkadot{.js} extension, create xx Network wallet, fund it with some amount of xx coins (1.01, for example) and set it to work on `xx Network`.
+
+Download this repo, create `.env.local` and run:
+
+```sh
+npm run dev
+```
+
+Go to http://localhost:3000 in the browser where you installed Polkadot{.js}, and connect the extension to http://localhost:3000 (see xx_polkadot_extension.png), generate an address and make it restricted for use on xx Network (I hoped this would ensure balance will be looked up correctly, but it was not).
+
+With that, I can login but (see xx_screenshot.png) my balance is not correctly shown.
+
+It's interesting that if you go to wallet.xx.network, Polkadot{.js} will add the wallet from the extension and show it in xx Wallet. Neat!
+
+`npm run build` builds okay, but has warnings about multiple versions of some package, etc. I don't know JS well enough to fix this quickly.
+
+## What modified and why
+
+`.env.local` and `pages/api/auth/[...nextauth].js` line 92 there's a fall back to public RPC endpoint, but I modified that one to local as well. In the latter file there's also balance lookup which seems to be malfunctioning somehow.
+
+In `components/login.tsx` I added some functions for debugging, and logging to console.
+
+In `pages/protected-api.tsx` and `pages/protected.tsx` ("static" protected page), changed KSM to XX:
+```sh
+const ksmBalance = formatBalance( session.freeBalance, { decimals: 9, withSi: true, withUnit: 'XX' } )
+```
+All modified pages from yk909's fork (you can see in Commits):
+
+```sh
+modified:   components/account-select.tsx
+modified:   components/login.tsx
+modified:   package-lock.json
+modified:   package.json
+modified:   pages/api/auth/[...nextauth].ts
+modified:   pages/protected-api.tsx
+modified:   pages/protected.tsx
+```
+
+## Known issues
+
+Upon login, incorrect wallet balance is not displayed (0 is shown) which means either it's failing to look it up or I messed the logic up while trying random things. 
+
+It seems it's looking up the balance of the Kusama address instead of 6xxx on xx Network. This is what's output to console.
+
+```raw
+token {
+  name: '123123123',
+  sub: '5GxeeFALkRvjnNgkiMjiP6q2GGnZ1ZmFyjCusHG4VoezqZSN',
+  freeBalance: '0x00000000000000000000000000000000',
+  iat: 1729089706,
+  exp: 1731681706,
+  jti: '79ce6529-185f-4a3e-b68a-75d75a712438'
+}
+JSON Web Token {
+  "name": "123123123",
+  "sub": "5GxeeFALkRvjnNgkiMjiP6q2GGnZ1ZmFyjCusHG4VoezqZSN",
+  "freeBalance": "0x00000000000000000000000000000000",
+  "iat": 1729089706,
+  "exp": 1731681706,
+  "jti": "79ce6529-185f-4a3e-b68a-75d75a712438"
+}
+```
+
+The FAQs say [it's normal to see another address](https://polkadot.js.org/docs/keyring/FAQ#my-pair-address-does-not-match-with-my-chain), but balance look up should work and it doesn't because my wallet balance is > 0 XX.
+
+
+