Replace Product Sans

models/common/shortenUuid.ts

@@ -0,0 +1,3 @@
+export default function shortenUuid(uuid: string): string {
+  return uuid.slice(0, 4);
+}

pages/_app.tsx

@@ -17,7 +17,7 @@ const theme = createTheme({
     },
   },
   typography: {
-    fontFamily: ['Product Sans'].join(','),
+    fontFamily: ['Lexend'].join(','),
     h1: {
       fontSize: '3rem',
       fontWeight: 500,

pages/index.tsx

@@ -29,10 +29,6 @@ const Home: NextPage = () => {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
         <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Product+Sans:wght@300;400;500;700&display=swap"
-          rel="stylesheet"
-        />
       </Head>
 
       <main>

pages/wallets/[walletid].tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { faker } from '@faker-js/faker';
 import { Wallet } from '../../models/entities/Wallet';
 import formatWalletName from '../../models/wallet/formatWalletName';
+import shortenUuid from '../../models/common/shortenUuid';
 import { Token } from '../../models/entities/Token';
 import useTransferWizard from '../../models/transfer/useTransferWizard';
 
@@ -23,18 +24,12 @@ export default function Wallet() {
       } else {
         const wallet = {
           id: faker.datatype.uuid(),
-          name: faker.internet.userName(),
+          name: 'wallet2',
           balance: faker.datatype.number({ min: 1000, max: 100000 }),
           createdAt: faker.date.past(),
           logo: faker.image.url(),
         };
         setCurrentWallet(wallet);
-        const token = {
-          id: faker.datatype.uuid(),
-          walletId: wallet.id,
-          createdAt: faker.date.past(),
-        };
-        setChosenToken(token);
       }
     }
 
@@ -51,6 +46,8 @@ export default function Wallet() {
     });
   }, [currentWallet, chosenToken]);
 
+  const title = (chosenToken && ('Token #' + shortenUuid(chosenToken.id))) || (currentWallet && formatWalletName(currentWallet)) || '';
+
   return (
     <Box
       sx={{
@@ -61,7 +58,7 @@ export default function Wallet() {
       }}
     >
       <Header
-        title={(currentWallet && formatWalletName(currentWallet)) || ''}
+        title={title}
         backLink="/home"
         forwardLink={transferWizard.isTransferable ? '/transfer/step1' : ''}
         forwardText={transferWizard.isTransferable ? 'Transfer' : ''}
@@ -73,10 +70,30 @@ export default function Wallet() {
         }}
       >
         <iframe
-          src="https://alpha-dev.treetracker.org/top"
+          //src="https://alpha-dev.treetracker.org/trees/1000249?bounds=-77.3876738548279,40.367375653694786,-77.37879037857057,40.38084568185104"
+          src="https://alpha-dev.treetracker.org/wallets/wallet2?bounds=-74.01040792465211,40.712768515280914,-74.00152444839479,40.712768515280914"
           height="100%"
           width="100%"
           style={{ border: 'none' }}
+          ref={(iframe) => {
+            console.log('xxx iframe: ', iframe);
+            // listen for messages from the iframe
+            window.addEventListener(
+              'message',
+              (event) => {
+                console.log('xxx mother page get event: ', event);
+                if(event.data.id){
+                  const token = {
+                    id: faker.datatype.uuid(),
+                    walletId: currentWallet?.id || 'no',
+                    createdAt: faker.date.past(),
+                  };
+                  setChosenToken(token);
+                }
+              },
+              false
+            );
+          }}
         />
       </Box>
     </Box>

styles/globals.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Product+Sans:wght@300;400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');
 
 html,
 body {
@@ -25,7 +25,7 @@ a {
 
 * {
   box-sizing: border-box;
-  font-family: 'Product Sans';
+  font-family: 'Lexend';
 }
 
 @media (prefers-color-scheme: dark) {