feat: Hook in Portfolio Entry Points

ui/pages/asset/asset.scss

@@ -1,4 +1,4 @@
-@use "design-system";
+@use 'design-system';
 
 .asset {
   &__container {
@@ -42,5 +42,19 @@
   }
 }
 
-.chart-up { stroke: var(--color-success-default); }
-.chart-down { stroke: var(--color-error-default); }
+.chart-up {
+  stroke: var(--color-success-default);
+}
+
+.chart-down {
+  stroke: var(--color-error-default);
+}
+
+.asset-page__spending-caps {
+  text-decoration: none;
+
+  &:hover {
+    color: var(--color-primary-alternative);
+    text-decoration: underline;
+  }
+}

ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap

@@ -254,6 +254,36 @@ exports[`AssetPage should render a native asset 1`] = `
       <div
         class="mm-box mm-box--margin-top-2 mm-box--display-flex mm-box--gap-7 mm-box--flex-direction-column"
       >
+        <div
+          class="mm-box mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column"
+        >
+          <h3
+            class="mm-box mm-text mm-text--heading-md mm-box--padding-bottom-4 mm-box--color-text-default"
+          >
+            Token details
+          </h3>
+          <div
+            class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
+          >
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+            >
+              <p
+                class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
+              >
+                Spending caps
+              </p>
+              <a
+                class="mm-box mm-text mm-button-base asset-page__spending-caps mm-text--body-md-medium mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                href="https://portfolio.test/?metamaskEntry=asset_page&metametricsId=&metricsEnabled=false&marketingEnabled=false&accountAddress=0x1&tab=spending-caps"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Edit in Portfolio
+              </a>
+            </div>
+          </div>
+        </div>
         <div
           class="mm-box mm-box--margin-bottom-8"
         >
@@ -555,59 +585,84 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
             Token details
           </h3>
           <div
-            class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+            class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
           >
-            <p
-              class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
+            <div
+              class="mm-box"
             >
-              Contract address
-            </p>
-            <div>
               <div
-                aria-describedby="tippy-tooltip-9"
-                class=""
-                data-original-title="Copy to clipboard"
-                data-tooltipped=""
-                style="display: inline;"
-                tabindex="0"
+                class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
               >
-                <button
-                  class="mm-box mm-text mm-button-base mm-button-base--size-sm multichain-address-copy-button mm-text--body-sm mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-primary-muted mm-box--rounded-pill"
-                  data-testid="address-copy-button-text"
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
                 >
-                  <span
-                    class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
+                  Contract address
+                </p>
+                <div>
+                  <div
+                    aria-describedby="tippy-tooltip-9"
+                    class=""
+                    data-original-title="Copy to clipboard"
+                    data-tooltipped=""
+                    style="display: inline;"
+                    tabindex="0"
                   >
-                    <div
-                      class="mm-box mm-box--display-flex"
+                    <button
+                      class="mm-box mm-text mm-button-base mm-button-base--size-sm multichain-address-copy-button mm-text--body-sm mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-primary-muted mm-box--rounded-pill"
+                      data-testid="address-copy-button-text"
                     >
-                      0x30937...C4936
-                    </div>
-                  </span>
-                  <span
-                    class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
-                    style="mask-image: url('./images/icons/copy.svg');"
-                  />
-                </button>
+                      <span
+                        class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
+                      >
+                        <div
+                          class="mm-box mm-box--display-flex"
+                        >
+                          0x30937...C4936
+                        </div>
+                      </span>
+                      <span
+                        class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
+                        style="mask-image: url('./images/icons/copy.svg');"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
+              >
+                <div
+                  class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+                >
+                  <p
+                    class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
+                  >
+                    Token decimal
+                  </p>
+                  <p
+                    class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+                  >
+                    18
+                  </p>
+                </div>
               </div>
             </div>
-          </div>
-          <div
-            class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
-          >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
             >
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
               >
-                Token decimal
+                Spending caps
               </p>
-              <p
-                class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+              <a
+                class="mm-box mm-text mm-button-base asset-page__spending-caps mm-text--body-md-medium mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                href="https://portfolio.test/?metamaskEntry=asset_page&metametricsId=&metricsEnabled=false&marketingEnabled=false&accountAddress=0x1&tab=spending-caps"
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                18
-              </p>
+                Edit in Portfolio
+              </a>
             </div>
           </div>
         </div>
@@ -1038,59 +1093,84 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
             Token details
           </h3>
           <div
-            class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+            class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
           >
-            <p
-              class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
+            <div
+              class="mm-box"
             >
-              Contract address
-            </p>
-            <div>
               <div
-                aria-describedby="tippy-tooltip-10"
-                class=""
-                data-original-title="Copy to clipboard"
-                data-tooltipped=""
-                style="display: inline;"
-                tabindex="0"
+                class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
               >
-                <button
-                  class="mm-box mm-text mm-button-base mm-button-base--size-sm multichain-address-copy-button mm-text--body-sm mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-primary-muted mm-box--rounded-pill"
-                  data-testid="address-copy-button-text"
+                <p
+                  class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
                 >
-                  <span
-                    class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
+                  Contract address
+                </p>
+                <div>
+                  <div
+                    aria-describedby="tippy-tooltip-10"
+                    class=""
+                    data-original-title="Copy to clipboard"
+                    data-tooltipped=""
+                    style="display: inline;"
+                    tabindex="0"
                   >
-                    <div
-                      class="mm-box mm-box--display-flex"
+                    <button
+                      class="mm-box mm-text mm-button-base mm-button-base--size-sm multichain-address-copy-button mm-text--body-sm mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-primary-muted mm-box--rounded-pill"
+                      data-testid="address-copy-button-text"
                     >
-                      0xe4246...85f55
-                    </div>
-                  </span>
-                  <span
-                    class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
-                    style="mask-image: url('./images/icons/copy.svg');"
-                  />
-                </button>
+                      <span
+                        class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
+                      >
+                        <div
+                          class="mm-box mm-box--display-flex"
+                        >
+                          0xe4246...85f55
+                        </div>
+                      </span>
+                      <span
+                        class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
+                        style="mask-image: url('./images/icons/copy.svg');"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
+              >
+                <div
+                  class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+                >
+                  <p
+                    class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
+                  >
+                    Token decimal
+                  </p>
+                  <p
+                    class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+                  >
+                    18
+                  </p>
+                </div>
               </div>
             </div>
-          </div>
-          <div
-            class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
-          >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
             >
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
               >
-                Token decimal
+                Spending caps
               </p>
-              <p
-                class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+              <a
+                class="mm-box mm-text mm-button-base asset-page__spending-caps mm-text--body-md-medium mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                href="https://portfolio.test/?metamaskEntry=asset_page&metametricsId=&metricsEnabled=false&marketingEnabled=false&accountAddress=0x1&tab=spending-caps"
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                18
-              </p>
+                Edit in Portfolio
+              </a>
             </div>
           </div>
         </div>