Merge branch 'main' into transaction-second-party

packages/boutique/frontend/package.json

@@ -35,7 +35,7 @@
     "@tailwindcss/typography": "^0.5.15",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react-swc": "^3.7.1",
+    "@vitejs/plugin-react-swc": "^3.7.2",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.15",

packages/wallet/backend/package.json

@@ -23,7 +23,7 @@
     "express-rate-limit": "^7.4.1",
     "graphql": "^16.9.0",
     "graphql-request": "^6.1.0",
-    "hash-wasm": "^4.11.0",
+    "hash-wasm": "^4.12.0",
     "helmet": "^7.2.0",
     "ioredis": "^5.4.1",
     "iron-session": "^8.0.4",

packages/wallet/frontend/src/components/GrantDetails.tsx

@@ -4,7 +4,7 @@ type GrantDetailsProps = { grant: GrantResponse }
 
 export const GrantDetails = ({ grant }: GrantDetailsProps) => {
   return (
-    <div className="flex flex-col sm:my-10">
+    <div className="flex flex-col my-6">
       <div className="text-xl">
         <span className="font-semibold">Client: </span>
         <span className="font-light">{grant.client}</span>

packages/wallet/frontend/src/components/settings/DeveloperKeys.tsx

@@ -1,5 +1,10 @@
 import { Account } from '@/lib/api/account'
-import { Disclosure, Transition } from '@headlessui/react'
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Transition
+} from '@headlessui/react'
 import { Chevron } from '../icons/Chevron'
 import { walletAddressService } from '@/lib/api/walletAddress'
 import { cx } from 'class-variance-authority'
@@ -68,9 +73,9 @@ type DeveloperKeysProps = {
 
 export const DeveloperKeys = ({ accounts }: DeveloperKeysProps) => {
   return (
-    <dl className="space-y-4 divide-y divide-green dark:divide-pink-neon">
+    <dl className="space-y-4">
       {accounts.map((account, accountIdx) => (
-        <Disclosure as="div" key={account.name} className="pt-4">
+        <Disclosure as="div" key={account.name} className="pt-2">
           {({ open }) => (
             <>
               <AccountHeader
@@ -100,14 +105,14 @@ const AccountHeader = ({ name, isOpen, index }: DisclosureGroupHeaderProps) => {
   const { setRunOnboarding, isDevKeysOnboarding } = useOnboardingContext()
   return (
     <dt>
-      <Disclosure.Button className="flex w-full justify-between rounded-md border border-pink-dark p-2 dark:border-teal-neon">
+      <DisclosureButton className="flex w-full justify-between rounded-md border border-pink-dark px-2 py-1 dark:border-teal-neon">
         <span className="font-semibold leading-7 text-pink-dark dark:text-teal-neon">
           Account: {name}
         </span>
         <span className="ml-6 flex items-center">
           <Chevron
-            className="h-6 w-6 text-pink-dark transition-transform duration-300 dark:text-teal-neon"
-            direction={isOpen ? 'down' : 'left'}
+            className="h-6 w-6 text-pink-dark transition-transform duration-300 dark:text-teal-neon mt-0.5"
+            direction={isOpen ? 'down' : 'right'}
             id={index === 0 ? 'accountsList' : ''}
             onClick={() => {
               if (isDevKeysOnboarding) {
@@ -116,7 +121,7 @@ const AccountHeader = ({ name, isOpen, index }: DisclosureGroupHeaderProps) => {
             }}
           />
         </span>
-      </Disclosure.Button>
+      </DisclosureButton>
     </dt>
   )
 }
@@ -146,7 +151,7 @@ const AccountPanel = ({ walletAddresses, index }: AccountPanelProps) => {
       leaveFrom="transform max-h-screen"
       leaveTo="transform max-h-0"
     >
-      <Disclosure.Panel as="dd" className="mt-6 px-2">
+      <DisclosurePanel as="dd" className="mt-6 px-2 mb-14">
         <ul role="list" className="space-y-4">
           {walletAddresses.map((walletAddress, walletAddressIdx) => (
             <WalletAddressProvider
@@ -162,7 +167,7 @@ const AccountPanel = ({ walletAddresses, index }: AccountPanelProps) => {
             </WalletAddressProvider>
           ))}
         </ul>
-      </Disclosure.Panel>
+      </DisclosurePanel>
     </Transition>
   )
 }
@@ -215,7 +220,7 @@ const KeysGroupHeader = ({
 
   return (
     <dt>
-      <Disclosure.Button className="flex w-full justify-between rounded-md border border-purple-bright dark:border-green-neon px-2">
+      <DisclosureButton className="flex w-full justify-between rounded-md border border-purple-bright dark:border-green-neon px-2">
         <div className="flex flex-col py-1 text-left">
           <span className="font-semibold leading-5 text-purple-bright dark:text-green-neon">
             {name}
@@ -227,7 +232,7 @@ const KeysGroupHeader = ({
         <span className="ml-6 mt-1 flex items-center">
           <Chevron
             className="mt-2 h-5 w-5 text-purple-bright dark:text-green-neon transition-transform duration-300"
-            direction={isOpen ? 'down' : 'left'}
+            direction={isOpen ? 'down' : 'right'}
             id={
               accountIdx === 0 && walletAddressIdx === 0 && index === 0
                 ? 'keysList'
@@ -240,7 +245,7 @@ const KeysGroupHeader = ({
             }}
           />
         </span>
-      </Disclosure.Button>
+      </DisclosureButton>
     </dt>
   )
 }
@@ -307,7 +312,7 @@ const KeysGroupPanel = ({
         }
       }}
     >
-      <Disclosure.Panel as="dd" className="mt-6 px-2">
+      <DisclosurePanel as="dd" className="m-4 px-2">
         <div id="keysDetails">
           <div className="flex flex-col justify-between">
             <p className="font-semibold">Key ID</p>
@@ -324,6 +329,7 @@ const KeysGroupPanel = ({
           <PublicKeyContainer publicKey={keys.publicKey} />
           <Button
             intent="outline"
+            size="sm"
             aria-label="revoke keys"
             className="mt-2"
             onClick={() =>
@@ -339,7 +345,7 @@ const KeysGroupPanel = ({
             Revoke {keys.nickname}
           </Button>
         </div>
-      </Disclosure.Panel>
+      </DisclosurePanel>
     </Transition>
   )
 }
@@ -401,7 +407,6 @@ const WalletAddressKeyInfo = ({
           )}
         </Disclosure>
       ))}
-      <hr className="text-green dark:text-pink-neon" />
       <WalletAddressCTA
         accountIdx={accountIdx}
         walletAddressIdx={walletAddressIdx}
@@ -418,9 +423,10 @@ const WalletAddressCTA = ({
   const [openDialog, closeDialog] = useDialog()
   const { setRunOnboarding, isDevKeysOnboarding } = useOnboardingContext()
   return (
-    <div className="flex flex-col justify-between gap-1 md:flex-row">
+    <div className="flex flex-col justify-between gap-1 md:flex-row pt-3">
       <Button
         aria-label="generate keys"
+        size="sm"
         id={accountIdx === 0 && walletAddressIdx === 0 ? 'generateKey' : ''}
         onClick={() => {
           openDialog(
@@ -439,6 +445,7 @@ const WalletAddressCTA = ({
       </Button>
       <Button
         aria-label="upload keys"
+        size="sm"
         id={accountIdx === 0 && walletAddressIdx === 0 ? 'uploadKey' : ''}
         onClick={() => {
           openDialog(
@@ -472,6 +479,7 @@ const PublicKeyContainer = ({ publicKey }: PublicKeyContainerProps) => {
         <p className="font-normal">Public key</p>
         <Button
           intent="outline"
+          size="sm"
           aria-label="show or hide public key"
           onClick={() => setIsVisible((prev) => !prev)}
         >

packages/wallet/frontend/src/pages/auth/forgot.tsx

@@ -84,14 +84,14 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
         </Form>
       </div>
       <Image
-        className="mt-auto object-cover md:hidden"
+        className="mt-10 object-cover md:hidden"
         src={imageName}
         alt="Forgot password"
         quality={100}
         width={400}
         height={200}
       />
-      <p className="mt-auto text-center font-extralight text-green dark:text-green-neon">
+      <p className="mt-10 text-center font-extralight text-green dark:text-green-neon">
         Remembered your credentials?{' '}
         <Link href="login" className="font-medium underline">
           Login

packages/wallet/frontend/src/pages/auth/index.tsx

@@ -28,14 +28,14 @@ const WelcomePage: NextPageWithLayout = () => {
         Create account
       </Button>
       <Image
-        className="mt-auto object-cover md:hidden"
+        className="mt-10 object-cover md:hidden"
         src={imageName}
         alt="Welcome"
         quality={100}
         width={400}
         height={200}
       />
-      <p className="mt-auto font-extralight text-green dark:text-green-neon">
+      <p className="mt-10 font-extralight text-green dark:text-green-neon">
         About{' '}
         <Link href="https://interledger.org" className="font-medium underline">
           Interledger

packages/wallet/frontend/src/pages/auth/login.tsx

@@ -148,7 +148,7 @@ const LoginPage: NextPageWithLayout = () => {
         </p>
       </div>
       <Image
-        className="mt-auto object-cover md:hidden"
+        className="mt-10 object-cover md:hidden"
         src={imageName}
         alt="Login"
         quality={100}

packages/wallet/frontend/src/pages/auth/reset/[token].tsx

@@ -147,14 +147,14 @@ const ResetPasswordPage: NextPageWithLayout<ResetPasswordPageProps> = ({
       )}
 
       <Image
-        className="mt-auto object-cover md:hidden"
+        className="mt-10 object-cover md:hidden"
         src={imageName}
         alt="Forgot password"
         quality={100}
         width={400}
         height={200}
       />
-      <p className="mt-auto text-center font-extralight text-green dark:text-green-neon">
+      <p className="mt-10 text-center font-extralight text-green dark:text-green-neon">
         Remembered your credentials?{' '}
         <Link href="/auth/login" className="font-medium underline">
           Login

packages/wallet/frontend/src/pages/auth/signup.tsx

@@ -179,7 +179,7 @@ const SignUpPage: NextPageWithLayout = () => {
           )}
         ></div>
       )}
-      <p className="z-10 mt-auto text-center font-extralight text-green dark:text-green-neon">
+      <p className="z-10 mt-10 text-center font-extralight text-green dark:text-green-neon">
         Already a customer?{' '}
         <Link href="login" className="font-medium underline">
           Log in

packages/wallet/frontend/src/pages/auth/verify/[token].tsx

@@ -40,14 +40,14 @@ const VerifyEmailPage: NextPageWithLayout<VerifyEmailPageProps> = ({
       )}
 
       <Image
-        className="mt-auto object-cover md:hidden"
+        className="mt-10 object-cover md:hidden"
         src={imageName}
         alt="Verify email"
         quality={100}
         width={400}
         height={200}
       />
-      <p className="mt-auto text-center font-extralight text-green dark:text-green-neon">
+      <p className="mt-10 text-center font-extralight text-green dark:text-green-neon">
         Have an account? Continue to{' '}
         <Link href="/auth/login" className="font-medium underline">
           Login

packages/wallet/frontend/src/ui/Button.tsx

@@ -25,7 +25,8 @@ const buttonStyles = cva(
         ]
       },
       size: {
-        md: 'p-3 rounded-md'
+        md: 'p-3 rounded-md',
+        sm: 'px-2 py-1 rounded-md'
       },
       fullWidth: {
         true: 'w-full'