Merge branch 'release/1.0.0-rc.1' into release/nym-wallet-v1.0.1

Wallet 1.0.1 tweaks

.github/workflows/nym-wallet-storybook.yml

@@ -0,0 +1,55 @@
+name: Nym Wallet Storybook
+
+on:
+  push:
+    paths:
+      - 'nym-wallet/**'
+
+jobs:
+  build:
+    runs-on: custom-runner-linux
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install rsync
+      run: sudo apt-get install rsync
+    - uses: rlespinasse/github-slug-action@v3.x
+    - uses: actions/setup-node@v2
+      with:
+        node-version: '16'
+    - name: Setup yarn
+      run: npm install -g yarn
+    - name: Build dependencies
+      run: yarn && yarn build
+    - name: Build storybook
+      run: yarn storybook:build
+      working-directory: ./nym-wallet
+    - name: Deploy branch to CI www (storybook)
+      continue-on-error: true
+      uses: easingthemes/ssh-deploy@main
+      env:
+        SSH_PRIVATE_KEY: ${{ secrets.CI_WWW_SSH_PRIVATE_KEY }}
+        ARGS: "-rltgoDzvO --delete"
+        SOURCE: "nym-wallet/storybook-static/"
+        REMOTE_HOST: ${{ secrets.CI_WWW_REMOTE_HOST }}
+        REMOTE_USER: ${{ secrets.CI_WWW_REMOTE_USER }}
+        TARGET: ${{ secrets.CI_WWW_REMOTE_TARGET }}/wallet-${{ env.GITHUB_REF_SLUG }}
+        EXCLUDE: "/dist/, /node_modules/"
+    - name: Keybase - Node Install
+      run: npm install
+      working-directory: .github/workflows/support-files
+    - name: Keybase - Send Notification
+      env:
+        NYM_NOTIFICATION_KIND: nym-wallet
+        NYM_PROJECT_NAME: "nym-wallet"
+        NYM_CI_WWW_BASE: "${{ secrets.NYM_CI_WWW_BASE }}"
+        NYM_CI_WWW_LOCATION: "wallet-${{ env.GITHUB_REF_SLUG }}"
+        GIT_COMMIT_MESSAGE: "${{ github.event.head_commit.message }}"
+        GIT_BRANCH: "${GITHUB_REF##*/}"
+        KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
+        KEYBASE_NYMBOT_PAPERKEY: "${{ secrets.KEYBASE_NYMBOT_PAPERKEY }}"
+        KEYBASE_NYMBOT_TEAM: "${{ secrets.KEYBASE_NYMBOT_TEAM }}"
+        KEYBASE_NYM_CHANNEL: "ci-nym-wallet"
+        IS_SUCCESS: "${{ job.status == 'success' }}"
+      uses: docker://keybaseio/client:stable-node
+      with:
+        args: .github/workflows/support-files/notifications/entry_point.sh

.github/workflows/support-files/notifications/send_message.js

@@ -3,7 +3,7 @@ require('dotenv').config();
 const Bot = require('keybase-bot');
 
 let context = {
-  kinds: ['ts-packages', 'network-explorer', 'nightly'],
+  kinds: ['nym-wallet', 'ts-packages', 'network-explorer', 'nightly'],
 };
 
 /**

.github/workflows/support-files/nym-wallet/index.js

@@ -0,0 +1,29 @@
+const Handlebars = require('handlebars');
+const fs = require('fs');
+const path = require('path');
+
+async function addToContextAndValidate(context) {
+  if (!context.env.NYM_CI_WWW_LOCATION) {
+    throw new Error('Please ensure the env var NYM_CI_WWW_LOCATION is set');
+  }
+  if (!context.env.NYM_CI_WWW_BASE) {
+    throw new Error('Please ensure the env var NYM_CI_WWW_BASE is set');
+  }
+}
+
+async function getMessageBody(context) {
+  const source = fs
+    .readFileSync(
+      context.env.IS_SUCCESS === 'true'
+        ? path.resolve(__dirname, 'templates', 'success')
+        : path.resolve(__dirname, 'templates', 'failure'),
+    )
+    .toString();
+  const template = Handlebars.compile(source);
+  return template(context);
+}
+
+module.exports = {
+  addToContextAndValidate,
+  getMessageBody,
+};

.github/workflows/support-files/nym-wallet/templates/failure

@@ -0,0 +1,11 @@
+🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥
+> :rocket: {{ env.NYM_PROJECT_NAME }}
+> 🔴 **FAILURE** :cry:
+> `branch` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/tree/{{ env.GIT_BRANCH_NAME }}
+> `commit` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/commit/{{ env.GITHUB_SHA }}
+> `build ` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/actions/runs/{{ env.GITHUB_RUN_ID }}
+
+Commit message:
+```
+{{ env.GIT_COMMIT_MESSAGE }}
+```

.github/workflows/support-files/nym-wallet/templates/success

@@ -0,0 +1,15 @@
+🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩
+> :rocket: {{ env.NYM_PROJECT_NAME }}
+> ✅ **SUCCESS**
+
+> ➡️➡️➡️➡️➡️ **View output:**
+> `storybook`: https://{{ env.NYM_CI_WWW_LOCATION }}.{{ env.NYM_CI_WWW_BASE }}
+
+> `branch` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/tree/{{ env.GIT_BRANCH_NAME }}
+> `commit` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/commit/{{ env.GITHUB_SHA }}
+> `build ` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/actions/runs/{{ env.GITHUB_RUN_ID }}
+
+Commit message by `{{ env.GITHUB_ACTOR }}` at {{ timestamp }}:
+```
+{{ env.GIT_COMMIT_MESSAGE }}
+```

assets/logo/logo-wordmark.svg

@@ -1,4 +1,4 @@
-<svg width="210" height="56" viewBox="0 0 210 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 210 56" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M45.8829 0.142822H45.7169V0.28114V48.637L25.3289 0.225818L25.3012 0.142822H25.1905H13.6272H0.652966H0.514648V0.28114V55.7189V55.8572H0.652966H13.6272H13.7655V55.7189V7.28002L34.2365 55.7742L34.2642 55.8572H34.3748H45.8829H58.8294H58.9677V55.7189V0.28114V0.142822H58.8294H45.8829Z"/>
     <path d="M209.347 0.142822H184.616H184.477L184.45 0.253483L171.78 48.8583L159.082 0.253483L159.054 0.142822H158.944H134.157H133.991V0.28114V55.7189V55.8572H134.157H147.104H147.242V55.7189V7.66731L159.774 55.7466L159.801 55.8572H159.94H183.564H183.675L183.703 55.7466L196.234 7.66731V55.7189V55.8572H196.373H209.347H209.485V55.7189V0.28114V0.142822H209.347Z"/>
     <path d="M112.663 0.142822H112.58L112.552 0.198153L96.8116 27.5574L80.988 0.198153L80.9604 0.142822H80.8774H65.9114H65.6348L65.7731 0.364136L90.1447 42.5787V55.7189V55.8572H90.283H103.257H103.396V55.7189V42.5787L127.767 0.364136L127.905 0.142822H127.629H112.663Z"/>

nym-wallet/.storybook/main.js

@@ -0,0 +1,57 @@
+/* eslint-disable no-param-reassign */
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: '@storybook/react',
+  core: {
+    builder: 'webpack5',
+  },
+  // webpackFinal: async (config, { configType }) => {
+  //   // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+  //   // You can change the configuration based on that.
+  //   // 'PRODUCTION' is used when building the static version of storybook.
+  webpackFinal: async (config) => {
+    config.module.rules.forEach((rule) => {
+      // look for SVG import rule and replace
+      // NOTE: the rule before modification is /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
+      if (rule.test?.toString().includes('svg')) {
+        rule.test = /\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
+      }
+    });
+
+    // handle asset loading with this
+    config.module.rules.unshift({
+      test: /\.svg(\?.*)?$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ['@svgr/webpack'],
+    });
+
+    config.resolve.extensions = ['.tsx', '.ts', '.js'];
+    config.resolve.plugins = [new TsconfigPathsPlugin()];
+
+    config.plugins.push(new ForkTsCheckerWebpackPlugin({
+      typescript: {
+        mode: 'write-references',
+        diagnosticOptions: {
+          semantic: true,
+          syntactic: true,
+        },
+      },
+    }));
+
+    if (!config.resolve.alias) {
+      config.resolve.alias = {};
+    }
+
+    config.resolve.alias['@tauri-apps/api'] = `${__dirname}/mocks/tauri`;
+
+    // Return the altered config
+    return config;
+  },
+  features: {
+    emotionAlias: false,
+  },
+};

nym-wallet/.storybook/mocks/tauri/index.js

@@ -0,0 +1,13 @@
+/**
+ * This is a mock for Tauri's API package (@tauri-apps/api), to prevent stories from being excluded, because they either use
+ * or import dependencies that use Tauri.
+ */
+
+module.exports = {
+  invoke: (operation) => {
+    console.error(`Tauri cannot be used in Storybook. The operation requested was "${operation}". You can add mock responses to "nym_wallet/.storybook/mocks/tauri.js" if you need. The default response is "void".`);
+    return new Promise((resolve, reject) => {
+      reject(new Error(`Tauri operation ${operation} not available in storybook.`));
+    });
+  },
+}

nym-wallet/.storybook/mocks/tauri/window.js

@@ -0,0 +1,10 @@
+/**
+ * This is a mock for Tauri's API package (@tauri-apps/api/window), to prevent stories from being excluded, because they either use
+ * or import dependencies that use Tauri.
+ */
+
+module.exports = {
+  appWindow: {
+    maximize: () => undefined,
+  }
+}

nym-wallet/.storybook/preview.js

@@ -0,0 +1,19 @@
+import { NymWalletThemeWithMode } from '../src/theme/NymWalletTheme';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+const withThemeProvider = (Story, context) => (
+  <NymWalletThemeWithMode mode="light">
+    <Story {...context} />
+  </NymWalletThemeWithMode>
+);
+
+export const decorators = [withThemeProvider];

nym-wallet/package.json

@@ -10,11 +10,15 @@
     "tauri:dev": "yarn tauri dev",
     "tauri:build": "yarn tauri build",
     "tsc": "tsc --noEmit true",
+    "tsc:watch": "tsc --noEmit true --watch",
     "dev": "yarn run webpack:dev & yarn run tauri:dev",
     "prebuild": "yarn --cwd .. build",
     "build": "run-s webpack:prod tauri:build",
     "lint": "eslint src",
-    "lint:fix": "eslint src --fix"
+    "lint:fix": "eslint src --fix",
+    "prestorybook": "yarn --cwd .. build",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "build-storybook"
   },
   "dependencies": {
     "@babel/preset-typescript": "^7.15.0",
@@ -47,6 +51,12 @@
     "@babel/preset-react": "^7.14.5",
     "@nymproject/eslint-config-react-typescript": "^1.0.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
     "@svgr/webpack": "^6.1.1",
     "@tauri-apps/cli": "^1.0.0-rc.5",
     "@testing-library/jest-dom": "^5.14.1",

nym-wallet/public/index.html

@@ -1,17 +1,11 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
-      rel="stylesheet"
-    />
-    <title>Nym Wallet</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
+<head>
+  <meta charset='utf-8' />
+  <meta name='viewport' content='width=device-width, initial-scale=1' />
+  <title>Nym Wallet</title>
+</head>
+<body>
+<div id='root'></div>
+</body>
 </html>

nym-wallet/src/components/ClientAddress.stories.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Box, Typography } from '@mui/material';
+import { ClientAddressDisplay } from './ClientAddress';
+
+export default {
+  title: 'Wallet / Client Address',
+  component: ClientAddressDisplay,
+} as ComponentMeta<typeof ClientAddressDisplay>;
+
+const Template: ComponentStory<typeof ClientAddressDisplay> = (args) => (
+  <Box display="flex" alignContent="center">
+    <ClientAddressDisplay {...args} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111',
+};
+
+export const WithCopy = Template.bind({});
+WithCopy.args = {
+  address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111',
+  withCopy: true,
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  withLabel: true,
+  address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111',
+};
+
+export const ShowEntireAddress = Template.bind({});
+ShowEntireAddress.args = {
+  withLabel: true,
+  showEntireAddress: true,
+  address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111',
+};
+
+export const Empty = Template.bind({});
+Empty.args = {};
+
+export const EmptyWithLabelAndCopy = Template.bind({});
+EmptyWithLabelAndCopy.args = {
+  withLabel: true,
+  withCopy: true,
+};

nym-wallet/src/components/ClientAddress.tsx

@@ -1,20 +1,58 @@
-import React, { useContext } from 'react';
-import { Box, Typography } from '@mui/material';
+import React, { FC, useContext } from 'react';
+import { Box, Typography, Tooltip } from '@mui/material';
 import { ClientContext } from '../context/main';
 import { CopyToClipboard } from './CopyToClipboard';
 import { splice } from '../utils';
 
-export const ClientAddress = ({ withCopy }: { withCopy?: boolean }) => {
-  const { clientDetails } = useContext(ClientContext);
+const AddressTooltip: FC<{ visible?: boolean; address?: string; children: React.ReactElement<any, any> }> = ({
+  visible,
+  address,
+  children,
+}) => {
+  if (!visible) {
+    return children;
+  }
+  if (!address) {
+    return children;
+  }
   return (
-    <Box>
-      <Typography variant="body2" component="span" sx={{ color: 'grey.600' }}>
-        Address:
-      </Typography>{' '}
-      <Typography variant="body2" component="span" color="nym.background.dark" sx={{ mr: 1 }}>
-        {splice(4, 35, clientDetails?.client_address)}
-      </Typography>
-      {withCopy && <CopyToClipboard text={clientDetails?.client_address} iconButton />}
-    </Box>
+    <Tooltip title={address} arrow>
+      {children}
+    </Tooltip>
   );
 };
+
+type ClientAddressProps = {
+  withLabel?: boolean;
+  withCopy?: boolean;
+  showEntireAddress?: boolean;
+};
+
+export const ClientAddressDisplay: FC<ClientAddressProps & { address?: string }> = ({
+  withLabel,
+  withCopy,
+  showEntireAddress,
+  address,
+}) => (
+  <Box>
+    {withLabel && (
+      <>
+        <Typography variant="body2" component="span" sx={{ color: 'grey.600' }}>
+          Address:
+        </Typography>{' '}
+      </>
+    )}
+
+    <AddressTooltip address={address} visible={!showEntireAddress}>
+      <Typography variant="body2" component="span" color="nym.background.dark" sx={{ mr: 1 }}>
+        {showEntireAddress ? address || '' : splice(6, address)}
+      </Typography>
+    </AddressTooltip>
+    {withCopy && <CopyToClipboard text={address} iconButton />}
+  </Box>
+);
+
+export const ClientAddress: FC<ClientAddressProps> = ({ ...props }) => {
+  const { clientDetails } = useContext(ClientContext);
+  return <ClientAddressDisplay {...props} address={clientDetails?.client_address} />;
+};

nym-wallet/src/layouts/AppLayout.tsx

@@ -1,40 +1,44 @@
 import React from 'react';
-import { NymLogo } from '@nymproject/react';
+import { NymWordmark } from '@nymproject/react';
 import { Box, Container } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { AppBar, Nav } from '../components';
 
-export const ApplicationLayout: React.FC = ({ children }) => (
-  <Box
-    sx={{
-      height: '100vh',
-      width: '100vw',
-      display: 'grid',
-      gridTemplateColumns: '240px auto',
-      gridTemplateRows: '100%',
-      overflow: 'hidden',
-    }}
-  >
+export const ApplicationLayout: React.FC = ({ children }) => {
+  const theme = useTheme();
+  return (
     <Box
       sx={{
-        background: '#121726',
-        overflow: 'auto',
-        py: 4,
-        px: 5,
+        height: '100vh',
+        width: '100vw',
+        display: 'grid',
+        gridTemplateColumns: '240px auto',
+        gridTemplateRows: '100%',
+        overflow: 'hidden',
       }}
-      display="flex"
-      flexDirection="column"
-      justifyContent="space-between"
     >
-      <Box>
-        <Box sx={{ mb: 3 }}>
-          <NymLogo width={45} />
+      <Box
+        sx={{
+          background: '#121726',
+          overflow: 'auto',
+          py: 4,
+          px: 5,
+        }}
+        display="flex"
+        flexDirection="column"
+        justifyContent="space-between"
+      >
+        <Box>
+          <Box sx={{ mb: 4 }}>
+            <NymWordmark height={14} fill={theme.palette.background.paper} />
+          </Box>
+          <Nav />
         </Box>
-        <Nav />
       </Box>
+      <Container>
+        <AppBar />
+        {children}
+      </Container>
     </Box>
-    <Container>
-      <AppBar />
-      {children}
-    </Container>
-  </Box>
-);
+  );
+};

nym-wallet/src/pages/receive/index.tsx

@@ -16,7 +16,7 @@ export const Receive = () => {
             You can receive tokens by providing this address to the sender
           </Alert>
           <Box>
-            <ClientAddress withCopy />
+            <ClientAddress withCopy showEntireAddress />
           </Box>
           {clientDetails && <QRCode data-testid="qr-code" value={clientDetails?.client_address} />}
         </Stack>

nym-wallet/src/stories/Introduction.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Introduction" />
+
+# Nym Wallet Storybook
+
+This is the Storybook for the Nym Wallet.

nym-wallet/src/theme/NymWalletTheme.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CssBaseline, PaletteMode } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { getDesignTokens } from './theme';
+import '@assets/fonts/fonts.css';
+
+export const NymWalletThemeWithMode: React.FC<{ mode: PaletteMode }> = ({ mode, children }) => {
+  const theme = React.useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+};

nym-wallet/src/theme/index.tsx

@@ -3,19 +3,14 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
 import { getDesignTokens } from './theme';
 import { ClientContext } from '../context/main';
+import { NymWalletThemeWithMode } from './NymWalletTheme';
 
 /**
  * Provides the theme for the Network Explorer by reacting to the light/dark mode choice stored in the app context.
  */
 export const NymWalletTheme: React.FC = ({ children }) => {
   const { mode } = useContext(ClientContext);
-  const theme = React.useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      {children}
-    </ThemeProvider>
-  );
+  return <NymWalletThemeWithMode mode={mode}>{children}</NymWalletThemeWithMode>;
 };
 
 export const WelcomeTheme: React.FC = ({ children }) => {

nym-wallet/src/utils/index.ts

@@ -134,11 +134,9 @@ export const currencyMap = (network?: Network): TCurrency => {
   }
 };
 
-export const splice = (start: number, deleteCount: number, address?: string): string => {
+export const splice = (size: number, address?: string): string => {
   if (address) {
-    const array = address.split('');
-    array.splice(start, deleteCount, '...');
-    return array.join('');
+    return `${address.slice(0, size)}...${address.slice(-size)}`;
   }
   return '';
 };

package.json

@@ -9,7 +9,8 @@
     "explorer"
   ],
   "scripts": {
-    "build": "lerna run --scope @nymproject/mui-theme --scope @nymproject/react build --stream",
+    "build": "run-s build:packages",
+    "build:packages": "lerna run --scope @nymproject/mui-theme --scope @nymproject/react --stream build",
     "build:react-example": "lerna run --scope @nymproject/react-webpack-with-theme-example build --stream",
     "build:playground": "lerna run --scope @nymproject/react storybook:build --stream",
     "build:ci": "yarn build && run-p build:react-example build:playground && yarn build:ci:collect-artifacts",

ts-packages/react-components/src/components/logo/NymWordmark.tsx

@@ -3,7 +3,7 @@ import Wordmark from '@assets/logo/logo-wordmark.svg';
 import { useTheme } from '@mui/material';
 import { LogoProps } from './LogoProps';
 
-export const NymWordmark: React.FC<LogoProps> = ({ height, width }) => {
+export const NymWordmark: React.FC<LogoProps & { fill?: string }> = ({ height, width, fill }) => {
   const theme = useTheme();
-  return <Wordmark height={height} width={width} fill={theme.palette.text.primary} />;
+  return <Wordmark height={height} width={width} fill={fill || theme.palette.text.primary} />;
 };