chore: Chain138 snap site header/footer and version bump

Made-with: Cursor

chain138-snap/packages/site/src/components/Footer.tsx

@@ -39,12 +39,38 @@ const PoweredByContainer = styled.div`
   margin-left: 1rem;
 `;
 
+const LegalColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 16rem;
+`;
+
+const SectionTitle = styled.div`
+  font-size: ${({ theme }) => theme.fontSizes.small};
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: ${({ theme }) => theme.colors.text?.muted};
+  margin-bottom: 0.4rem;
+`;
+
+const FooterLink = styled.a`
+  color: ${({ theme }) => theme.colors.text?.default};
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
 /**
- *
+ * @returns The Snap footer with brand, legal links, and build metadata.
  */
 export const Footer = () => {
   const theme = useTheme();
   const buildVersion = getBuildVersion();
+  const currentYear = new Date().getFullYear();
 
   return (
     <FooterWrapper>
@@ -55,6 +81,27 @@ export const Footer = () => {
           <MetaMask color={theme.colors.text?.default} />
         </PoweredByContainer>
       </PoweredByButton>
+      <LegalColumn>
+        <SectionTitle>Explorer</SectionTitle>
+        <FooterLink href="https://explorer.d-bis.org/docs.html">
+          Documentation
+        </FooterLink>
+        <FooterLink href="https://explorer.d-bis.org/privacy.html">
+          Privacy Policy
+        </FooterLink>
+        <FooterLink href="https://explorer.d-bis.org/terms.html">
+          Terms of Service
+        </FooterLink>
+        <FooterLink href="https://explorer.d-bis.org/acknowledgments.html">
+          Acknowledgments
+        </FooterLink>
+        <FooterLink href="mailto:support@d-bis.org">
+          support@d-bis.org
+        </FooterLink>
+      </LegalColumn>
+      <VersionSpan title="Copyright">
+        © {currentYear} Solace Bank Group PLC
+      </VersionSpan>
       {buildVersion ? (
         <VersionSpan title="Build version">v{buildVersion}</VersionSpan>
       ) : null}

chain138-snap/packages/site/src/components/Header.tsx

@@ -6,21 +6,44 @@ import { Toggle } from './Toggle';
 import { getThemePreference } from '../utils';
 
 const HeaderWrapper = styled.header`
+  color: #fff;
+  background: linear-gradient(
+    135deg,
+    ${(props) => props.theme.colors.primary?.default} 0%,
+    ${(props) => props.theme.colors.primary?.dark} 100%
+  );
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  border-bottom: 1px solid ${(props) => props.theme.colors.border?.default};
+`;
+
+const HeaderInner = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 2.4rem;
-  border-bottom: 1px solid ${(props) => props.theme.colors.border?.default};
+  gap: 0.85rem;
+  padding: 0.7rem 1.25rem;
+  max-width: 1320px;
+  margin: 0 auto;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    padding: 0.55rem 0.9rem;
+    flex-wrap: wrap;
+    align-items: stretch;
+  }
 `;
 
 const Title = styled.p`
   font-size: ${(props) => props.theme.fontSizes.title};
   font-weight: bold;
   margin: 0;
-  margin-left: 1.2rem;
+  line-height: 1.05;
+
   ${({ theme }) => theme.mediaQueries.small} {
-    display: none;
+    font-size: 1.1rem;
   }
 `;
 
@@ -28,42 +51,95 @@ const LogoWrapper = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  color: inherit;
+  padding: 0.25rem 0.4rem;
+  border-radius: 11px;
+  transition:
+    background 0.2s,
+    transform 0.2s;
+
+  &:hover,
+  &:focus-visible {
+    background: rgba(255, 255, 255, 0.12);
+    transform: translateY(-1px);
+    outline: none;
+  }
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    gap: 0.45rem;
+    padding: 0.22rem 0.35rem;
+  }
 `;
 
 const RightContainer = styled.div`
   display: flex;
-  flex-direction: row;
   align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    width: 100%;
+    justify-content: space-between;
+  }
+`;
+
+const Brand = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.08rem;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    gap: 0.08rem;
+  }
+`;
+
+const BrandSubtitle = styled.span`
+  font-size: 0.7rem;
+  font-weight: normal;
+  opacity: 0.9;
+  line-height: 1.1;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    font-size: 0.62rem;
+  }
 `;
 
 /**
+ * Render the companion site header.
  *
- * @param options0
- * @param options0.handleToggleClick
+ * @param options0 - Header props.
+ * @param options0.handleToggleClick - Toggles the site theme.
+ * @returns The header element.
  */
 export const Header = ({
   handleToggleClick,
 }: {
-  /**
-   *
-   */
+  /** Toggles the site theme. */
   handleToggleClick: () => void;
 }) => {
   const theme = useTheme();
 
   return (
     <HeaderWrapper>
-      <LogoWrapper>
-        <SnapLogo color={theme.colors.icon?.default} size={36} />
-        <Title>Chain 138 Snap</Title>
-      </LogoWrapper>
-      <RightContainer>
-        <Toggle
-          onToggle={handleToggleClick}
-          defaultChecked={getThemePreference()}
-        />
-        <HeaderButtons />
-      </RightContainer>
+      <HeaderInner>
+        <LogoWrapper as="a" href="/home" aria-label="Go to explorer home">
+          <SnapLogo color={theme.colors.icon?.default} size={30} />
+          <Brand>
+            <Title>Chain 138 Snap</Title>
+            <BrandSubtitle>The Defi Oracle Meta Explorer</BrandSubtitle>
+          </Brand>
+        </LogoWrapper>
+        <RightContainer>
+          <Toggle
+            onToggle={handleToggleClick}
+            defaultChecked={getThemePreference()}
+          />
+          <HeaderButtons />
+        </RightContainer>
+      </HeaderInner>
     </HeaderWrapper>
   );
 };

chain138-snap/packages/site/static/version.json

@@ -1 +1 @@
-{"version":"dev","buildTime":"2026-02-22T19:21:30.615Z"}
+{"version":"dev","buildTime":"2026-03-25T23:54:26.711Z"}