feat(ui): location-aware dropdown transitions

kyranjamie · kyranjamie · commit dd1f99b8ec9f · 2025-03-28T10:31:08.000Z
diff --git a/apps/web/app/features/page/page.tsx b/apps/web/app/features/page/page.tsx
@@ -23,7 +23,7 @@ export function PageHeader({ title }: PageHeaderProps) {
       borderBottom="default"
       alignItems="center"
     >
-      <styled.h1 textStyle="heading.04" mx="space.05">
+      <styled.h1 textStyle="heading.05" mx="space.05">
         {title}
       </styled.h1>
 
diff --git a/apps/web/app/features/sign-in-button/sign-in-button.layout.tsx b/apps/web/app/features/sign-in-button/sign-in-button.layout.tsx
@@ -19,11 +19,13 @@ interface ActiveAccountButtonLayoutProps {
   address: string;
   onSignout(): void;
   onSwitchAccount(): void;
+  onOpenExtension(): void;
 }
 export function ActiveAccountButtonLayout({
   address,
   onSignout,
   onSwitchAccount,
+  onOpenExtension,
 }: ActiveAccountButtonLayoutProps) {
   return (
     <DropdownMenu.Root modal={false}>
@@ -46,17 +48,42 @@ export function ActiveAccountButtonLayout({
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Portal>
-        <DropdownMenu.Content sideOffset={2}>
+        <DropdownMenu.Content sideOffset={1}>
           <styled.div mx="space.02" py="space.02">
             <DropdownMenu.Item onSelect={onSwitchAccount}>
-              <Flag textStyle="label.02" img={<ArrowsRepeatLeftRightIcon variant="small" />}>
+              <Flag textStyle="label.03" img={<ArrowsRepeatLeftRightIcon variant="small" />}>
                 Switch account
               </Flag>
             </DropdownMenu.Item>
+
+            <DropdownMenu.Item onSelect={onOpenExtension}>
+              <Flag
+                textStyle="label.03"
+                img={
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                  >
+                    <path
+                      d="M20.5 6C20.5 5.72386 20.2761 5.5 20 5.5H4C3.72386 5.5 3.5 5.72386 3.5 6V18C3.5 18.2761 3.72386 18.5 4 18.5H10C10.2761 18.5 10.5 18.7239 10.5 19C10.5 19.2761 10.2761 19.5 10 19.5H4C3.17157 19.5 2.5 18.8284 2.5 18V6C2.5 5.17157 3.17157 4.5 4 4.5H20C20.8284 4.5 21.5 5.17157 21.5 6V8C21.5 8.27614 21.2761 8.5 21 8.5C20.7239 8.5 20.5 8.27614 20.5 8V6ZM18.388 15.1549C18.2931 15.0381 18.1505 14.9702 18 14.9702C17.8495 14.9702 17.7069 15.0381 17.612 15.1549C17.5444 15.2381 17.4722 15.3182 17.3952 15.3952C17.3182 15.4722 17.2381 15.5444 17.1549 15.612C17.0381 15.7069 16.9702 15.8495 16.9702 16C16.9702 16.1505 17.0381 16.2931 17.1549 16.388C17.2381 16.4556 17.3182 16.5278 17.3952 16.6048C17.4722 16.6818 17.5444 16.7619 17.612 16.8451C17.7069 16.9619 17.8495 17.0298 18 17.0298C18.1505 17.0298 18.2931 16.9619 18.388 16.8451C18.4556 16.7619 18.5278 16.6818 18.6048 16.6048C18.6818 16.5278 18.7619 16.4556 18.8451 16.388C18.9619 16.2931 19.0298 16.1505 19.0298 16C19.0298 15.8495 18.9619 15.7069 18.8451 15.612C18.7619 15.5444 18.6818 15.4722 18.6048 15.3952C18.5278 15.3182 18.4556 15.2381 18.388 15.1549ZM18 11.5C18.2761 11.5 18.5 11.7239 18.5 12C18.5 13.3287 18.794 14.1702 19.3119 14.6881C19.8298 15.206 20.6713 15.5 22 15.5C22.2761 15.5 22.5 15.7239 22.5 16C22.5 16.2761 22.2761 16.5 22 16.5C20.6713 16.5 19.8298 16.794 19.3119 17.3119C18.794 17.8298 18.5 18.6713 18.5 20C18.5 20.2761 18.2761 20.5 18 20.5C17.7239 20.5 17.5 20.2761 17.5 20C17.5 18.6713 17.206 17.8298 16.6881 17.3119C16.1702 16.794 15.3287 16.5 14 16.5C13.7239 16.5 13.5 16.2761 13.5 16C13.5 15.7239 13.7239 15.5 14 15.5C15.3287 15.5 16.1702 15.206 16.6881 14.6881C17.206 14.1702 17.5 13.3287 17.5 12C17.5 11.7239 17.7239 11.5 18 11.5ZM6.5 8C6.5 8.27614 6.27614 8.5 6 8.5C5.72386 8.5 5.5 8.27614 5.5 8C5.5 7.72386 5.72386 7.5 6 7.5C6.27614 7.5 6.5 7.72386 6.5 8ZM9.5 8C9.5 8.27614 9.27614 8.5 9 8.5C8.72386 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.72386 7.5 9 7.5C9.27614 7.5 9.5 7.72386 9.5 8ZM12.5 8C12.5 8.27614 12.2761 8.5 12 8.5C11.7239 8.5 11.5 8.27614 11.5 8C11.5 7.72386 11.7239 7.5 12 7.5C12.2761 7.5 12.5 7.72386 12.5 8Z"
+                      fill="black"
+                      stroke="#12100F"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                }
+              >
+                Open extension
+              </Flag>
+            </DropdownMenu.Item>
             <DropdownMenu.Item onSelect={onSignout}>
               <Flag
                 color="red.action-primary-default"
-                textStyle="label.02"
+                textStyle="label.03"
                 img={
                   <styled.div filter="invert(18%) sepia(94%) saturate(7491%) hue-rotate(359deg);">
                     <ExitIcon variant="small" />
diff --git a/apps/web/app/features/sign-in-button/sign-in-button.tsx b/apps/web/app/features/sign-in-button/sign-in-button.tsx
@@ -18,11 +18,12 @@ function ConnectLeatherButton() {
 }
 
 function ActiveAccountButton() {
-  const { addresses, connect, disconnect } = useLeatherConnect();
+  const { addresses, connect, openExtension, disconnect } = useLeatherConnect();
   return (
     <ActiveAccountButtonLayout
       address={addresses[2].address}
       onSwitchAccount={connect}
+      onOpenExtension={openExtension}
       onSignout={disconnect}
     />
   );
diff --git a/apps/web/app/layouts/nav/nav.tsx b/apps/web/app/layouts/nav/nav.tsx
@@ -16,22 +16,26 @@ export function Nav() {
       borderRight="default"
       minHeight="fit-content"
     >
-      <styled.svg
-        flexShrink={0}
-        m="space.04"
-        xmlns="http://www.w3.org/2000/svg"
-        width="83"
-        height="18"
-        viewBox="0 0 83 18"
-        fill="none"
-      >
-        <path
-          d="M79.8738 13.0979C79.1082 14.5532 77.9854 15.4468 77.1177 15.4468C76.4542 15.4468 75.9438 14.8851 75.9438 13.5574C75.9438 11.4894 76.9646 8.27234 77.4495 6.58723H69.8447L69.1047 9.16596C67.9818 13.1234 66.221 15.4468 63.4394 15.4468C63.0311 15.4468 62.5462 15.3702 62.291 15.217C64.3836 13.7106 66.5017 11.3106 66.5017 8.93617C66.5017 6.97021 65.0726 6.20426 63.7712 6.20426C59.6881 6.20426 56.7789 11.566 57.8762 14.9362C57.2127 15.166 56.6003 15.4468 55.8602 15.4468C55.1201 15.4468 54.7118 14.9362 54.8649 14.2468C55.0436 13.4298 56.0643 10.6979 56.0643 9.21702C56.0643 7.40426 54.6608 6.17872 52.5427 6.17872C52.0578 6.17872 51.5219 6.30638 50.986 6.51064L52.3385 1.73617H49.6845L46.5201 12.8681C46.0353 14.6043 44.5807 15.4468 43.3813 15.4468C41.8756 15.4468 41.3142 14.2468 41.6715 13.0468L42.7943 9.14043H45.678L46.4181 6.58723H43.5089L44.8869 1.73617H42.2329L38.7878 13.8383C38.4561 14.9872 37.665 15.4468 36.9759 15.4468C35.8786 15.4468 35.5469 14.5532 35.7765 13.7362L37.8181 6.58723C37.1035 6.35745 36.0828 6.17872 35.2917 6.17872C30.7237 6.17872 26.411 10.2383 26.411 14.2468C26.411 14.2504 26.411 14.2542 26.411 14.2578C25.1891 15.0416 23.7715 15.4468 22.532 15.4468C21.6644 15.4468 21.1795 15.3702 20.7967 15.166C22.9404 13.7617 25.1605 11.4128 25.1605 8.93617C25.1605 6.97021 23.7315 6.20426 22.43 6.20426C18.3724 6.20426 15.5398 11.4383 16.484 14.783C15.5908 15.2426 14.7742 15.4723 13.881 15.4723C12.4775 15.4723 11.1505 14.8851 10.1297 13.7106L11.4312 9.14043C14.5956 8.88511 18.7807 6.28085 18.7807 3.08936C18.7807 1.09787 17.4537 0 15.7694 0C12.7837 0 10.538 2.88511 9.49171 6.58723C7.55225 6.35745 6.50596 4.26383 8.03711 1.73617H5.28103C3.57124 5.54043 5.30655 8.19574 8.77717 9.14043L7.93504 12.0766C6.65907 11.2851 5.66382 10.9787 4.48994 10.9787C-1.14982 10.9787 -1.37949 18 4.15819 18C5.7659 18 7.70536 17.1574 8.72613 16.034C10.1807 17.3106 11.6098 18 13.4472 18C14.8508 18 16.2798 17.5915 17.7599 16.7234C18.7552 17.5404 20.0567 18 21.9196 18C23.574 18 25.2287 17.6563 26.9326 16.4584C27.4374 17.3471 28.3583 18 29.9071 18C31.2086 18 32.6377 17.4383 33.7095 16.2383C34.5006 17.3872 35.7 18 36.9249 18C37.9457 18 38.992 17.5915 39.8851 16.7745C40.5997 17.5404 41.9012 18 43.3302 18C45.5504 18 48.0258 16.8255 48.8934 13.7872L49.8887 10.2638C50.1949 9.21702 51.0115 8.73192 51.9557 8.73192C52.7724 8.73192 53.2062 9.14043 53.2062 9.85532C53.2062 11.183 52.0323 14.3489 52.0323 15.4723C52.0323 17.3617 53.3083 18 55.0181 18C56.0899 18 56.932 17.9745 59.3308 16.9021C60.3005 17.617 61.8062 18 63.516 18C67.3183 18 69.9723 15.3957 71.7842 9.14043H74.0809C73.6471 10.5957 73.3409 12.2043 73.3409 13.634C73.3409 16.034 74.2085 18 76.8881 18C78.9806 18 81.8898 15.8809 82.6299 13.0979H79.8738ZM15.3867 2.55319C15.8715 2.55319 16.2033 2.83404 16.2033 3.24255C16.2033 4.59574 13.8045 6.33192 12.1457 6.58723C12.9113 3.93192 14.468 2.55319 15.3867 2.55319ZM4.28578 15.4468C2.11665 15.4468 2.29528 13.3021 4.46442 13.3021C5.40863 13.3021 6.14869 13.6085 7.04186 14.3745C6.4294 15.0638 5.25552 15.4468 4.28578 15.4468ZM21.6644 8.73192C22.2003 8.73192 22.532 9.06383 22.532 9.6C22.532 11.0298 20.6691 12.7915 19.0869 13.6851C18.5255 12.0511 20.1332 8.73192 21.6644 8.73192ZM30.3665 15.4468C29.5754 15.4468 29.1926 14.8851 29.1926 14.0681C29.1926 12.1021 31.3107 8.78298 34.5516 8.73192C33.3777 12.8426 32.5866 15.4468 30.3665 15.4468ZM63.0056 8.73192C63.5415 8.73192 63.8732 9.06383 63.8732 9.6C63.8732 11.0298 61.9338 12.8681 60.4537 13.7872C59.8157 12.2553 61.4489 8.73192 63.0056 8.73192Z"
-          fill="#12100F"
-        />
-      </styled.svg>
+      <styled.div>
+        <styled.svg
+          flexShrink={0}
+          m="space.04"
+          // To baseline align with the text in the header
+          mt="18px"
+          xmlns="http://www.w3.org/2000/svg"
+          width="83"
+          height="18"
+          viewBox="0 0 83 18"
+          fill="none"
+        >
+          <path
+            d="M79.8738 13.0979C79.1082 14.5532 77.9854 15.4468 77.1177 15.4468C76.4542 15.4468 75.9438 14.8851 75.9438 13.5574C75.9438 11.4894 76.9646 8.27234 77.4495 6.58723H69.8447L69.1047 9.16596C67.9818 13.1234 66.221 15.4468 63.4394 15.4468C63.0311 15.4468 62.5462 15.3702 62.291 15.217C64.3836 13.7106 66.5017 11.3106 66.5017 8.93617C66.5017 6.97021 65.0726 6.20426 63.7712 6.20426C59.6881 6.20426 56.7789 11.566 57.8762 14.9362C57.2127 15.166 56.6003 15.4468 55.8602 15.4468C55.1201 15.4468 54.7118 14.9362 54.8649 14.2468C55.0436 13.4298 56.0643 10.6979 56.0643 9.21702C56.0643 7.40426 54.6608 6.17872 52.5427 6.17872C52.0578 6.17872 51.5219 6.30638 50.986 6.51064L52.3385 1.73617H49.6845L46.5201 12.8681C46.0353 14.6043 44.5807 15.4468 43.3813 15.4468C41.8756 15.4468 41.3142 14.2468 41.6715 13.0468L42.7943 9.14043H45.678L46.4181 6.58723H43.5089L44.8869 1.73617H42.2329L38.7878 13.8383C38.4561 14.9872 37.665 15.4468 36.9759 15.4468C35.8786 15.4468 35.5469 14.5532 35.7765 13.7362L37.8181 6.58723C37.1035 6.35745 36.0828 6.17872 35.2917 6.17872C30.7237 6.17872 26.411 10.2383 26.411 14.2468C26.411 14.2504 26.411 14.2542 26.411 14.2578C25.1891 15.0416 23.7715 15.4468 22.532 15.4468C21.6644 15.4468 21.1795 15.3702 20.7967 15.166C22.9404 13.7617 25.1605 11.4128 25.1605 8.93617C25.1605 6.97021 23.7315 6.20426 22.43 6.20426C18.3724 6.20426 15.5398 11.4383 16.484 14.783C15.5908 15.2426 14.7742 15.4723 13.881 15.4723C12.4775 15.4723 11.1505 14.8851 10.1297 13.7106L11.4312 9.14043C14.5956 8.88511 18.7807 6.28085 18.7807 3.08936C18.7807 1.09787 17.4537 0 15.7694 0C12.7837 0 10.538 2.88511 9.49171 6.58723C7.55225 6.35745 6.50596 4.26383 8.03711 1.73617H5.28103C3.57124 5.54043 5.30655 8.19574 8.77717 9.14043L7.93504 12.0766C6.65907 11.2851 5.66382 10.9787 4.48994 10.9787C-1.14982 10.9787 -1.37949 18 4.15819 18C5.7659 18 7.70536 17.1574 8.72613 16.034C10.1807 17.3106 11.6098 18 13.4472 18C14.8508 18 16.2798 17.5915 17.7599 16.7234C18.7552 17.5404 20.0567 18 21.9196 18C23.574 18 25.2287 17.6563 26.9326 16.4584C27.4374 17.3471 28.3583 18 29.9071 18C31.2086 18 32.6377 17.4383 33.7095 16.2383C34.5006 17.3872 35.7 18 36.9249 18C37.9457 18 38.992 17.5915 39.8851 16.7745C40.5997 17.5404 41.9012 18 43.3302 18C45.5504 18 48.0258 16.8255 48.8934 13.7872L49.8887 10.2638C50.1949 9.21702 51.0115 8.73192 51.9557 8.73192C52.7724 8.73192 53.2062 9.14043 53.2062 9.85532C53.2062 11.183 52.0323 14.3489 52.0323 15.4723C52.0323 17.3617 53.3083 18 55.0181 18C56.0899 18 56.932 17.9745 59.3308 16.9021C60.3005 17.617 61.8062 18 63.516 18C67.3183 18 69.9723 15.3957 71.7842 9.14043H74.0809C73.6471 10.5957 73.3409 12.2043 73.3409 13.634C73.3409 16.034 74.2085 18 76.8881 18C78.9806 18 81.8898 15.8809 82.6299 13.0979H79.8738ZM15.3867 2.55319C15.8715 2.55319 16.2033 2.83404 16.2033 3.24255C16.2033 4.59574 13.8045 6.33192 12.1457 6.58723C12.9113 3.93192 14.468 2.55319 15.3867 2.55319ZM4.28578 15.4468C2.11665 15.4468 2.29528 13.3021 4.46442 13.3021C5.40863 13.3021 6.14869 13.6085 7.04186 14.3745C6.4294 15.0638 5.25552 15.4468 4.28578 15.4468ZM21.6644 8.73192C22.2003 8.73192 22.532 9.06383 22.532 9.6C22.532 11.0298 20.6691 12.7915 19.0869 13.6851C18.5255 12.0511 20.1332 8.73192 21.6644 8.73192ZM30.3665 15.4468C29.5754 15.4468 29.1926 14.8851 29.1926 14.0681C29.1926 12.1021 31.3107 8.78298 34.5516 8.73192C33.3777 12.8426 32.5866 15.4468 30.3665 15.4468ZM63.0056 8.73192C63.5415 8.73192 63.8732 9.06383 63.8732 9.6C63.8732 11.0298 61.9338 12.8681 60.4537 13.7872C59.8157 12.2553 61.4489 8.73192 63.0056 8.73192Z"
+            fill="#12100F"
+          />
+        </styled.svg>
+      </styled.div>
 
-      <styled.div mt="space.04">
+      <styled.div mt="space.08">
         <NavItem
           href="/sbtc-rewards"
           icon={
diff --git a/apps/web/app/store/addresses.ts b/apps/web/app/store/addresses.ts
@@ -42,6 +42,9 @@ export function useLeatherConnect() {
     stxAddress,
     btcAddressP2tr,
     btcAddressP2wpkh,
+    openExtension() {
+      void leather.open({ mode: 'fullpage' });
+    },
     async connect() {
       const result = await leather.getAddresses();
       setAddresses(result.addresses);
diff --git a/packages/rpc/src/methods/open.ts b/packages/rpc/src/methods/open.ts
@@ -4,11 +4,8 @@ import { defineRpcEndpoint } from '../rpc/schemas';
 
 export const open = defineRpcEndpoint({
   method: 'open',
-  params: z.object({
-    base: z.string(),
-    quote: z.string(),
-  }),
-  result: z.object({
-    message: z.string(),
-  }),
+  params: z.object({ mode: z.enum(['fullpage', 'popup']) }).optional(),
+  result: z.null(),
 });
+
+export type OpenParams = z.infer<typeof open.params>;
diff --git a/packages/tokens/src/keyframes.ts b/packages/tokens/src/keyframes.ts
@@ -85,6 +85,10 @@ export const keyframes = {
     from: { opacity: 1, transform: 'translateY(0)' },
     to: { opacity: 0, transform: 'translateY(4px)' },
   },
+  slideUpAndOut: {
+    from: { opacity: 1, transform: 'translateY(0)' },
+    to: { opacity: 0, transform: 'translateY(-4px)' },
+  },
   slideDown: {
     from: { maxHeight: 0 },
     to: { maxHeight: '1000px' },
diff --git a/packages/ui/src/components/dropdown-menu/dropdown-menu.web.tsx b/packages/ui/src/components/dropdown-menu/dropdown-menu.web.tsx
@@ -69,8 +69,25 @@ const dropdownContentStyles = css({
   p: '0',
   willChange: 'transform, opacity',
   zIndex: 999,
-  _closed: { animation: 'slideDownAndOut 140ms ease-in-out' },
-  _open: { animation: 'slideUpAndFade 140ms ease-in-out' },
+  animationDuration: '160ms',
+  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  animationName: 'slideUpAndFade',
+  '&[data-side="top"]': {
+    _open: { animationName: 'slideUpAndFade' },
+    _closed: { animation: 'slideDownAndOut' },
+  },
+  '&[data-side="bottom"]': {
+    _open: { animationName: 'slideDownAndFade' },
+    _closed: { animationName: 'slideUpAndOut' },
+  },
+  '&[data-side="left"]': {
+    _open: { animationName: 'slideLeftAndFade' },
+    _closed: { animationName: 'slideRightAndOut' },
+  },
+  '&[data-side="right"]': {
+    _open: { animationName: 'slideRightAndFade' },
+    _closed: { animationName: 'slideLeftAndOut' },
+  },
 });
 const Content: typeof RadixDropdownMenu.Content = forwardRef(({ className, ...props }, ref) => (
   <RadixDropdownMenu.Content

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export function PageHeader({ title }: PageHeaderProps) {`
`23`	`23`	`borderBottom="default"`
`24`	`24`	`alignItems="center"`
`25`	`25`	`>`
`26`		`- <styled.h1 textStyle="heading.04" mx="space.05">`
	`26`	`+ <styled.h1 textStyle="heading.05" mx="space.05">`
`27`	`27`	`{title}`
`28`	`28`	`</styled.h1>`
`29`	`29`