From 337ddca9c0b0f1bf84e885caa208a505af53d390 Mon Sep 17 00:00:00 2001
From: bobinstein <cavanaugh.stephen1991@gmail.com>
Date: Thu, 16 Jan 2025 12:07:18 -0500
Subject: [PATCH] chore: Made Tip component globally available, fixed tip on
 normalized page

---
 .../concepts/normalized-addresses/page.mdx    | 105 +++++++++++-------
 src/components/Layout.tsx                     |   2 +
 src/components/mdx.tsx                        |   3 +
 3 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/src/app/learn/concepts/normalized-addresses/page.mdx b/src/app/learn/concepts/normalized-addresses/page.mdx
index 47081dc0..8185e850 100644
--- a/src/app/learn/concepts/normalized-addresses/page.mdx
+++ b/src/app/learn/concepts/normalized-addresses/page.mdx
@@ -1,4 +1,4 @@
-import {HeroPattern} from "@/components/HeroPattern"
+import { HeroPattern } from '@/components/HeroPattern'
 
 <HeroPattern />
 
@@ -15,62 +15,84 @@ A tool for easily obtaining a normalized addresses from public keys can be found
 ## At A Glance
 
 {
-<div style={{textAlign: "center"}}>
-    <table className="inline-table" id="address-table"  style={{textAlign: "left"}}>
+
+<div style={{ textAlign: 'center' }}>
+  <table
+    className="inline-table"
+    id="address-table"
+    style={{ textAlign: 'left' }}
+  >
     <thead>
-        <tr style={{textAlign: "center"}}>
-            <th></th>
-            <th>Arweave</th>
-            <th>ETH/POL</th>
-            <th>Solana</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-            <th>Native Address</th>
-            <td>9ODOd-_ZT9oWoRMVmmD4G5f9Z6MjvYxO3Nen-T5OXvU</td>
-            <td>0x084af408C8E492aC52dc0Ec76514A7deF8D5F03f</td>
-            <td>Cd5yb4mvbuQyyJgAkriFZbWQivh2zM68KGZX8Ksn1L85</td>
-        </tr>
-        <tr>
-            <th>base64url Encoded Public Key</th>
-            <td className="scrollable-cell" >0jkGWDFYI3DHEWaXhZitjTg67T-enQwXs50lTDrMhy2qb619_91drv_50J5PwrOYJiMmYhiEA5ojMvrrAFY-Dm1bJbJfVBU1kIsPho2tFcXnbSOa2_1bovAys0ckJU07wkbmIUpzp3trdxYReB4jayMMOXWw9B8xS0v81zFmK3IbCtL9N6WNTMONOSMATHFQrGqtDhDUqKyIsQZCBPFvfGykRWaLWzbtAUrApprqG9hfExQzppNsw0gsftNSHZ1emC5tC2fuib6FhQw9TE2ge9tUjEZNALcVZvopTtTX0H2gEfnRJ48UNeV3SKggjXcoPVeivmqXuPBGncXWWq1pHR-Xs4zSLA5Mgcw_tQJc4FIER0i7hUlZXoc991ZHyOvAC-GlHWzQwvrlY11oD38pB47NkHN2WVPtUCAtyYQe5TE6Xznd9kPgqqvVUkV0s0suh5vINGoiPEnMjyhYEN7eOmJRIJ_A87IJesbdPRV4ZzBsqPbd02RG3ZuVpc3gI1xKvwH1WS05XI8eWK-BbvB3oxB7WjaQTWcfBWhMEULiwx-SucuyAzPAw3i6Wjtq61TcL9SdWhmOf9_yo-Np052tj7MQ66nmgdOH_MEKYjAdFypxTsRQoSLbv28HEcSjwx8u3pY0q0gKMK_5X2XKJrp2i2GB_fVgbcpH9YsgrYxh1Q8</td>
-            <td className="scrollable-cell">2W5VMzNKYwr51QsiYBHUS5h5wxZf_uBgG7C6xiHgBHwwLUty5LHKFFBDlAxTCTAhglcmys2_HQoOj_LnCkA3</td>
-            <td>rK8XXxd8JqsZFPXVOwkSWS5Gh1SJzftfCOLpLk4i1FY</td>
-        </tr>
-        <tr>
-            <th>Normalized Address</th>
-            <td>9ODOd-_ZT9oWoRMVmmD4G5f9Z6MjvYxO3Nen-T5OXvU</td>
-            <td>5JtuS4yOFtUX2Rg3UU7AgBaUqh4s8wyyNTZk9UrzI-Q</td>
-            <td>K8kpPM1RID8ZM2sjF5mYy0rP4gXSRDbrwPUd9Qths64</td>
-        </tr>
-        </tbody>
-    </table>
-</div>}
+      <tr style={{ textAlign: 'center' }}>
+        <th></th>
+        <th>Arweave</th>
+        <th>ETH/POL</th>
+        <th>Solana</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th>Native Address</th>
+        <td>9ODOd-_ZT9oWoRMVmmD4G5f9Z6MjvYxO3Nen-T5OXvU</td>
+        <td>0x084af408C8E492aC52dc0Ec76514A7deF8D5F03f</td>
+        <td>Cd5yb4mvbuQyyJgAkriFZbWQivh2zM68KGZX8Ksn1L85</td>
+      </tr>
+      <tr>
+        <th>base64url Encoded Public Key</th>
+        <td className="scrollable-cell">
+          0jkGWDFYI3DHEWaXhZitjTg67T-enQwXs50lTDrMhy2qb619_91drv_50J5PwrOYJiMmYhiEA5ojMvrrAFY-Dm1bJbJfVBU1kIsPho2tFcXnbSOa2_1bovAys0ckJU07wkbmIUpzp3trdxYReB4jayMMOXWw9B8xS0v81zFmK3IbCtL9N6WNTMONOSMATHFQrGqtDhDUqKyIsQZCBPFvfGykRWaLWzbtAUrApprqG9hfExQzppNsw0gsftNSHZ1emC5tC2fuib6FhQw9TE2ge9tUjEZNALcVZvopTtTX0H2gEfnRJ48UNeV3SKggjXcoPVeivmqXuPBGncXWWq1pHR-Xs4zSLA5Mgcw_tQJc4FIER0i7hUlZXoc991ZHyOvAC-GlHWzQwvrlY11oD38pB47NkHN2WVPtUCAtyYQe5TE6Xznd9kPgqqvVUkV0s0suh5vINGoiPEnMjyhYEN7eOmJRIJ_A87IJesbdPRV4ZzBsqPbd02RG3ZuVpc3gI1xKvwH1WS05XI8eWK-BbvB3oxB7WjaQTWcfBWhMEULiwx-SucuyAzPAw3i6Wjtq61TcL9SdWhmOf9_yo-Np052tj7MQ66nmgdOH_MEKYjAdFypxTsRQoSLbv28HEcSjwx8u3pY0q0gKMK_5X2XKJrp2i2GB_fVgbcpH9YsgrYxh1Q8
+        </td>
+        <td className="scrollable-cell">
+          2W5VMzNKYwr51QsiYBHUS5h5wxZf_uBgG7C6xiHgBHwwLUty5LHKFFBDlAxTCTAhglcmys2_HQoOj_LnCkA3
+        </td>
+        <td>rK8XXxd8JqsZFPXVOwkSWS5Gh1SJzftfCOLpLk4i1FY</td>
+      </tr>
+      <tr>
+        <th>Normalized Address</th>
+        <td>9ODOd-_ZT9oWoRMVmmD4G5f9Z6MjvYxO3Nen-T5OXvU</td>
+        <td>5JtuS4yOFtUX2Rg3UU7AgBaUqh4s8wyyNTZk9UrzI-Q</td>
+        <td>K8kpPM1RID8ZM2sjF5mYy0rP4gXSRDbrwPUd9Qths64</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+}
 
 ## Public Keys and Addresses
 
-Crypto wallets consist of two separate components. The public keys, which are public knowledge and can be seen by anyone, and the private keys, which only the owner of a wallet should have access to. Crypto wallet addresses are derived from the public key. 
+Crypto wallets consist of two separate components. The public keys, which are public knowledge and can be seen by anyone, and the private keys, which only the owner of a wallet should have access to. Crypto wallet addresses are derived from the public key.
 
-::: tip Encoded Public Keys
-It is important to note that all crypto wallet public and private keys are binary data. The values provided below for Arweave and Ethereum/Polygon public keys are base64url and hex encoded representations of that binary data respectively.
-:::
+<Tip title="Tip">
+  {' '}
+  Encoded Public Keys It is important to note that all crypto wallet public and
+  private keys are binary data. The values provided below for Arweave and
+  Ethereum/Polygon public keys are base64url and hex encoded representations of
+  that binary data respectively.
+</Tip>
 
 ### Arweave
 
-The public key for an Arweave wallet is the `n` field of the JWK json file. 
+The public key for an Arweave wallet is the `n` field of the JWK json file.
 
-<code style={{ maxWidth: '600px', overflowWrap: 'break-word', whiteSpace: 'normal' }}>0jkGWDFYI3DHEWaXhZitjTg67T-enQwXs50lTDrMhy2qb619_91drv_50J5PwrOYJiMmYhiEA5ojMvrrAFY-Dm1bJbJfVBU1kIsPho2tFcXnbSOa2_1bovAys0ckJU07wkbmIUpzp3trdxYReB4jayMMOXWw9B8xS0v81zFmK3IbCtL9N6WNTMONOSMATHFQrGqtDhDUqKyIsQZCBPFvfGykRWaLWzbtAUrApprqG9hfExQzppNsw0gsftNSHZ1emC5tC2fuib6FhQw9TE2ge9tUjEZNALcVZvopTtTX0H2gEfnRJ48UNeV3SKggjXcoPVeivmqXuPBGncXWWq1pHR-Xs4zSLA5Mgcw_tQJc4FIER0i7hUlZXoc991ZHyOvAC-GlHWzQwvrlY11oD38pB47NkHN2WVPtUCAtyYQe5TE6Xznd9kPgqqvVUkV0s0suh5vINGoiPEnMjyhYEN7eOmJRIJ_A87IJesbdPRV4ZzBsqPbd02RG3ZuVpc3gI1xKvwH1WS05XI8eWK-BbvB3oxB7WjaQTWcfBWhMEULiwx-SucuyAzPAw3i6Wjtq61TcL9SdWhmOf9_yo-Np052tj7MQ66nmgdOH_MEKYjAdFypxTsRQoSLbv28HEcSjwx8u3pY0q0gKMK_5X2XKJrp2i2GB_fVgbcpH9YsgrYxh1Q8</code>
+<code
+  style={{
+    maxWidth: '600px',
+    overflowWrap: 'break-word',
+    whiteSpace: 'normal',
+  }}
+>
+  0jkGWDFYI3DHEWaXhZitjTg67T-enQwXs50lTDrMhy2qb619_91drv_50J5PwrOYJiMmYhiEA5ojMvrrAFY-Dm1bJbJfVBU1kIsPho2tFcXnbSOa2_1bovAys0ckJU07wkbmIUpzp3trdxYReB4jayMMOXWw9B8xS0v81zFmK3IbCtL9N6WNTMONOSMATHFQrGqtDhDUqKyIsQZCBPFvfGykRWaLWzbtAUrApprqG9hfExQzppNsw0gsftNSHZ1emC5tC2fuib6FhQw9TE2ge9tUjEZNALcVZvopTtTX0H2gEfnRJ48UNeV3SKggjXcoPVeivmqXuPBGncXWWq1pHR-Xs4zSLA5Mgcw_tQJc4FIER0i7hUlZXoc991ZHyOvAC-GlHWzQwvrlY11oD38pB47NkHN2WVPtUCAtyYQe5TE6Xznd9kPgqqvVUkV0s0suh5vINGoiPEnMjyhYEN7eOmJRIJ_A87IJesbdPRV4ZzBsqPbd02RG3ZuVpc3gI1xKvwH1WS05XI8eWK-BbvB3oxB7WjaQTWcfBWhMEULiwx-SucuyAzPAw3i6Wjtq61TcL9SdWhmOf9_yo-Np052tj7MQ66nmgdOH_MEKYjAdFypxTsRQoSLbv28HEcSjwx8u3pY0q0gKMK_5X2XKJrp2i2GB_fVgbcpH9YsgrYxh1Q8
+</code>
 
 The public wallet address for that wallet is `9ODOd-_ZT9oWoRMVmmD4G5f9Z6MjvYxO3Nen-T5OXvU`, this is obtained by decoding the public key from base64url to normalize padding, sha256 hashing the result, and then base64url encoding that.
 
 ### Ethereum/Polygon
 
-The public key for an EVM wallet (Ethereum, Polygon/Matic) is derived from its private key, using the [Elliptic Curve Digital Signature Algorithm](https://en.wikipedia.org/wiki/Elliptic_Curve_Digital_Signature_Algorithm), or ECDSA. 
+The public key for an EVM wallet (Ethereum, Polygon/Matic) is derived from its private key, using the [Elliptic Curve Digital Signature Algorithm](https://en.wikipedia.org/wiki/Elliptic_Curve_Digital_Signature_Algorithm), or ECDSA.
 
 `0xb5d96e5533334a630af9d50b226011d44b9879c3165ffee0601bb0bac621e0047c302d4b72e4b1ca145043940c53093021825726cacdbf1d0a0e8ff2e70a4037`
 
-The public wallet address is `0x084af408C8E492aC52dc0Ec76514A7deF8D5F03f`, this is obtained by removing the first byte from the public key, Keccak-256 hashing the remainder, taking the the last 20 bytes (40 hexadecimal characters) and prepending `0x` to it. 
+The public wallet address is `0x084af408C8E492aC52dc0Ec76514A7deF8D5F03f`, this is obtained by removing the first byte from the public key, Keccak-256 hashing the remainder, taking the the last 20 bytes (40 hexadecimal characters) and prepending `0x` to it.
 
 ### Solana
 
@@ -82,7 +104,7 @@ The public wallet address for this wallet is `Cd5yb4mvbuQyyJgAkriFZbWQivh2zM68KG
 
 ## Normalizing Addresses
 
-As shown in the above examples, the format of public keys, and the resulting derived wallet addresses, vary widely between blockchains. Arweave manages this by applying the same derivation methods that Arweave uses for its own wallets to the public keys from other chains. 
+As shown in the above examples, the format of public keys, and the resulting derived wallet addresses, vary widely between blockchains. Arweave manages this by applying the same derivation methods that Arweave uses for its own wallets to the public keys from other chains.
 
 ### Ethereum/Polygon
 
@@ -103,4 +125,3 @@ The normalized public key for Solana wallets are derived similarly. The 32 byte
 Again, this value is used for the GraphQl tag `owner` when uploading data. It can then be sha256 hashed, and base64url encoded again to derive the normalized address:
 
 `K8kpPM1RID8ZM2sjF5mYy0rP4gXSRDbrwPUd9Qths64`
-
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 3f126b2e..0c427a7e 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -11,6 +11,7 @@ import { Logo } from '@/components/Logo';
 import { Navigation } from '@/components/Navigation';
 import { type Section, SectionProvider } from '@/components/SectionProvider';
 import DiagramWithWayfinder from '@/components/DiagramWithWayfinder';
+import Tip from '@/components/Tip'
 
 export function Layout({
   children,
@@ -24,6 +25,7 @@ export function Layout({
   // Define custom components for MDX
   const components = {
     Diagram: DiagramWithWayfinder, // Automatically replaces <Diagram /> in MDX
+    Tip: Tip
   };
 
   return (
diff --git a/src/components/mdx.tsx b/src/components/mdx.tsx
index 08af45ce..27649c5a 100644
--- a/src/components/mdx.tsx
+++ b/src/components/mdx.tsx
@@ -6,11 +6,14 @@ import { Feedback } from '@/components/Feedback'
 import { Heading } from '@/components/Heading'
 import { Prose } from '@/components/Prose'
 import DiagramWithWayfinder from '@/components/DiagramWithWayfinder'
+import TipComponent from '@/components/Tip'
 
 export const a = Link
 export { Button } from '@/components/Button'
 export { CodeGroup, Code as code, Pre as pre } from '@/components/Code'
 export const Diagram = DiagramWithWayfinder
+export const Tip = TipComponent
+
 
 export function wrapper({ children }: { children: React.ReactNode }) {
   return (