feat(ledger): add utf-8 message signing support

.github/workflows/notify-release.yml

@@ -4,7 +4,7 @@ name: Notify on Release
 on:
   schedule:
     # Run every hour
-    - cron:  '0 * * * *'
+    - cron: '0 * * * *'
 
 jobs:
   firefox-notify:
@@ -54,7 +54,7 @@ jobs:
               "url": "https://addons.mozilla.org/en-US/firefox/addon/hiro-wallet/"
             }]
         with:
-          args: ":rocket: A new version (${{ steps.firefox.outputs.new_version }}) of the Hiro Wallet is available on the Firefox Web Store!"
+          args: ':rocket: A new version (${{ steps.firefox.outputs.new_version }}) of the Hiro Wallet is available on the Firefox Web Store!'
 
       - name: Firefox Discord notification - userx-notifs
         if: steps.firefox.outputs.is_new
@@ -69,7 +69,7 @@ jobs:
               "url": "https://addons.mozilla.org/en-US/firefox/addon/hiro-wallet/"
             }]
         with:
-          args: ":rocket: A new version (${{ steps.firefox.outputs.new_version }}) of the Hiro Wallet is available on the Firefox Web Store!"
+          args: ':rocket: A new version (${{ steps.firefox.outputs.new_version }}) of the Hiro Wallet is available on the Firefox Web Store!'
 
   chrome-notify:
     runs-on: ubuntu-latest
@@ -131,7 +131,7 @@ jobs:
               "url": "https://chrome.google.com/webstore/detail/hiro-wallet/ldinpeekobnhjjdofggfgjlcehhmanlj"
             }]
         with:
-          args: ":rocket: A new version (${{ steps.chrome.outputs.new_version }}) of the Hiro Wallet is available on the Chrome Web Store!"
+          args: ':rocket: A new version (${{ steps.chrome.outputs.new_version }}) of the Hiro Wallet is available on the Chrome Web Store!'
 
       - name: Chrome Discord notification - userx-notifs
         if: steps.chrome.outputs.is_new
@@ -146,4 +146,4 @@ jobs:
               "url": "https://chrome.google.com/webstore/detail/hiro-wallet/ldinpeekobnhjjdofggfgjlcehhmanlj"
             }]
         with:
-          args: ":rocket: A new version (${{ steps.chrome.outputs.new_version }}) of the Hiro Wallet is available on the Chrome Web Store!"
+          args: ':rocket: A new version (${{ steps.chrome.outputs.new_version }}) of the Hiro Wallet is available on the Chrome Web Store!'

src/app/common/hooks/auth/use-auth-request-params.ts

@@ -2,6 +2,6 @@ import { useMemo } from 'react';
 import { useInitialRouteSearchParams } from '@app/store/common/initial-route-search-params.hooks';
 
 export function useAuthRequestParams() {
-  const [params] = useInitialRouteSearchParams();
+  const params = useInitialRouteSearchParams();
   return useMemo(() => ({ origin: params.get('origin') }), [params]);
 }

src/app/common/hooks/auth/use-save-auth-request-callback.ts

@@ -11,7 +11,7 @@ import { RouteUrls } from '@shared/route-urls';
 export function useSaveAuthRequest() {
   const navigate = useNavigate();
   const saveAuthRequest = useUpdateAuthRequest();
-  const [params] = useInitialRouteSearchParams();
+  const params = useInitialRouteSearchParams();
 
   const saveAuthRequestParam = useCallback(
     (authRequest: string) => {

src/app/common/hooks/use-location-state.ts

@@ -0,0 +1,9 @@
+import { useLocation } from 'react-router-dom';
+import get from 'lodash.get';
+
+export function useLocationState(propName: string): string | undefined;
+export function useLocationState(propName: string, defaultValue: string): string;
+export function useLocationState(propName: string, defaultValue?: string) {
+  const location = useLocation();
+  return get(location, `state.${propName}`, defaultValue);
+}

src/app/common/utils.ts

@@ -247,6 +247,10 @@ export async function delay(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
 
+export function createDelay(ms: number) {
+  return async () => delay(ms);
+}
+
 export function with0x(value: string): string {
   return !value.startsWith('0x') ? `0x${value}` : value;
 }

src/app/features/container/container.tsx

@@ -12,7 +12,7 @@ import { useTransactionRequestState } from '@app/store/transactions/requests.hoo
 import { useRouteHeaderState } from '@app/store/ui/ui.hooks';
 import { useCurrentAccount } from '@app/store/accounts/account.hooks';
 import { AccountInfoFetcher, BalanceFetcher } from '@app/features/container/fetchers';
-import { useInitialRouteSearchParams } from '@app/store/common/initial-route-search-params.hooks';
+import { useSetInitialRouteSearchParams } from '@app/store/common/initial-route-search-params.hooks';
 import { useSaveAuthRequest } from '@app/common/hooks/auth/use-save-auth-request-callback';
 
 import { ContainerLayout } from './container.layout';
@@ -64,7 +64,7 @@ function UnmountEffect() {
 
 function useCacheInitialRouteSearchParams() {
   const [searchParams] = useSearchParams();
-  const [_, setParams] = useInitialRouteSearchParams();
+  const setParams = useSetInitialRouteSearchParams();
 
   useEffect(() => {
     setParams(searchParams);

src/app/features/increase-fee-drawer/components/increase-fee-form.tsx

@@ -54,7 +54,7 @@ export function IncreaseFeeForm(): JSX.Element | null {
           await replaceByFee(values);
         },
         ledger: () => {
-          ledgerNavigate.toConnectAndSignStep(rawTx, true);
+          ledgerNavigate.toConnectAndSignTransactionStep(rawTx, true);
         },
       })();
     },

src/app/features/ledger/animations/plugging-in-cable.lottie.tsx

@@ -12,6 +12,7 @@ const options: Options = {
   },
 };
 
+// Required for interop with `React.lazy`
 // ts-unused-exports:disable-next-line
 export default function PluggingInLedgerCableAnimation(props: BoxProps) {
   return (

src/app/features/ledger/components/ledger-screen-detail.tsx

@@ -5,7 +5,6 @@ import { Tooltip } from '@app/components/tooltip';
 
 interface LedgerScreenDetailProps {
   children: React.ReactNode;
-  isFullPage: boolean;
   title: string;
   tooltipLabel?: string;
 }

src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt-container.tsx

@@ -26,7 +26,7 @@ import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
 import { useAuthRequestParams } from '@app/common/hooks/auth/use-auth-request-params';
 
 import { useLedgerNavigate } from '../../hooks/use-ledger-navigate';
-import { LedgerJwtSigningProvider } from '../../ledger-jwt-signing.context';
+import { LedgerJwtSigningProvider } from './ledger-sign-jwt.context';
 
 export function LedgerSignJwtContainer() {
   const location = useLocation();
@@ -122,7 +122,7 @@ export function LedgerSignJwtContainer() {
 
       if (resp.returnCode === LedgerError.TransactionRejected) {
         setAwaitingSignedJwt(false);
-        ledgerNavigate.toTransactionRejectedStep();
+        ledgerNavigate.toOperationRejectedStep();
         return;
       }
 

src/app/features/ledger/ledger-jwt-signing.context.ts → src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt.context.ts

@@ -1,7 +1,7 @@
 import { createContext } from 'react';
 
 import { noop } from '@shared/utils';
-import { getAppVersion } from './ledger-utils';
+import { getAppVersion } from '../../ledger-utils';
 
 export interface LedgerJwtSigningProvider {
   latestDeviceResponse: null | Awaited<ReturnType<typeof getAppVersion>>;

src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt.routes.tsx

@@ -1,20 +1,24 @@
 import { Route } from 'react-router-dom';
 
 import { RouteUrls } from '@shared/route-urls';
+
+import {
+  ConnectLedgerError,
+  ConnectLedgerSuccessLayout,
+  LedgerDisconnected,
+  OperationRejected,
+} from '../../generic-steps';
+
 import { LedgerSignJwtContainer } from './ledger-sign-jwt-container';
 import { ConnectLedgerSignJwt } from './steps/connect-ledger-sign-jwt';
-import { ConnectLedgerSignJwtError } from './steps/connect-ledger-sign-jwt-error';
-import { ConnectLedgerSignJwtSuccess } from './steps/connect-ledger-sign-jwt-success';
-import { LedgerJwtSigningRejected } from './steps/transaction-rejected';
 import { SignJwtHash } from './steps/sign-jwt-hash';
-import { LedgerDisconnected } from '../tx-signing/steps/ledger-disconnected';
 
 export const ledgerJwtSigningRoutes = (
   <Route element={<LedgerSignJwtContainer />}>
     <Route path={RouteUrls.ConnectLedger} element={<ConnectLedgerSignJwt />} />
-    <Route path={RouteUrls.ConnectLedgerError} element={<ConnectLedgerSignJwtError />} />
-    <Route path={RouteUrls.ConnectLedgerSuccess} element={<ConnectLedgerSignJwtSuccess />} />
-    <Route path={RouteUrls.LedgerOperationRejected} element={<LedgerJwtSigningRejected />} />
+    <Route path={RouteUrls.ConnectLedgerError} element={<ConnectLedgerError />} />
+    <Route path={RouteUrls.ConnectLedgerSuccess} element={<ConnectLedgerSuccessLayout />} />
+    <Route path={RouteUrls.LedgerOperationRejected} element={<OperationRejected />} />
     <Route path={RouteUrls.AwaitingDeviceUserAction} element={<SignJwtHash />} />
     <Route path={RouteUrls.LedgerDisconnected} element={<LedgerDisconnected />} />
   </Route>

src/app/features/ledger/flows/jwt-signing/steps/connect-ledger-sign-jwt.tsx

@@ -1,24 +1,17 @@
 import { useContext } from 'react';
-import { useLocation } from 'react-router-dom';
-import get from 'lodash.get';
 
-import { ConnectLedgerLayout } from '@app/features/ledger/steps/connect-ledger.layout';
+import { ConnectLedgerLayout } from '@app/features/ledger/generic-steps';
 
 import { CommonLedgerDeviceInlineWarnings } from '@app/features/ledger/components/ledger-inline-warnings';
-import { ledgerJwtSigningContext } from '@app/features/ledger/ledger-jwt-signing.context';
+import { ledgerJwtSigningContext } from '@app/features/ledger/flows/jwt-signing/ledger-sign-jwt.context';
 
 export function ConnectLedgerSignJwt() {
-  const location = useLocation();
-
   const { signJwtPayload, latestDeviceResponse, awaitingDeviceConnection } =
     useContext(ledgerJwtSigningContext);
 
-  const isLookingForLedger = get(location, 'state.isLookingForLedger');
-
   return (
     <ConnectLedgerLayout
       awaitingLedgerConnection={awaitingDeviceConnection}
-      isLookingForLedger={isLookingForLedger}
       warning={<CommonLedgerDeviceInlineWarnings latestDeviceResponse={latestDeviceResponse} />}
       onConnectLedger={signJwtPayload}
       showInstructions={false}

src/app/features/ledger/flows/jwt-signing/steps/sign-jwt-hash.tsx

@@ -1,11 +1,11 @@
 import { useContext } from 'react';
+import { Box, color, Flex } from '@stacks/ui';
 
 import { useHasApprovedOperation } from '@app/features/ledger/hooks/use-has-approved-transaction';
 import { LedgerWrapper } from '@app/features/ledger/components/ledger-wrapper';
 import { LedgerTitle } from '@app/features/ledger/components/ledger-title';
-import { Box, color, Flex } from '@stacks/ui';
 import { LedgerScreenDetail } from '@app/features/ledger/components/ledger-screen-detail';
-import { ledgerJwtSigningContext } from '@app/features/ledger/ledger-jwt-signing.context';
+import { ledgerJwtSigningContext } from '@app/features/ledger/flows/jwt-signing/ledger-sign-jwt.context';
 import { DeviceOperationApprovalStatus } from '@app/features/ledger/components/device-approval-status';
 import SignLedgerTransaction from '@assets/images/ledger/sign-ledger-transaction.png';
 
@@ -34,7 +34,6 @@ export function SignJwtHash() {
         width="100%"
       >
         <LedgerScreenDetail
-          isFullPage={false}
           title="JWT Hash"
           tooltipLabel="This is a Sha256 hash of the JSON Web Token payload returned to the connecting app, which proves to the app you own the corresponding private key"
         >