add xnft library link button to apps page (#3629)

packages/app-extension/src/components/Unlocked/Apps/index.tsx

@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import { Blockchain, XNFT_GG_LINK } from "@coral-xyz/common";
 import {
   EmptyState,
@@ -169,9 +170,7 @@ function WalletXnftGrid({
     [wallet]
   );
 
-  return !isLoading && plugins.length === 0 ? (
-    <></>
-  ) : (
+  return !isLoading && plugins.length === 0 ? null : (
     <div
       style={{
         marginLeft: "12px",
@@ -213,8 +212,9 @@ function _WalletXnftGrid({
   return (
     <>
       <BalancesTableHead wallet={wallet} />
-      {showContent ? <div
-        style={{
+      {showContent ? (
+        <div
+          style={{
             paddingTop: "8px",
             paddingBottom: "18px",
             paddingLeft: "10px",
@@ -224,42 +224,66 @@ function _WalletXnftGrid({
             borderBottomRightRadius: "10px",
           }}
         >
-        <Grid container>
-          {isLoading
-              ? Array.from(Array(iconsPerRow).keys()).map((_, idx) => {
-                  return (
-                    <Grid
-                      item
-                      key={idx}
-                      xs={isXs ? 3 : 2}
-                      style={{
-                        marginTop: idx >= iconsPerRow ? "24px" : 0,
-                      }}
-                    >
-                      <SkeletonAppIcon />
-                    </Grid>
-                  );
-                })
-              : plugins.map((p: any, idx: number) => {
+          <Grid container>
+            {isLoading ? (
+              Array.from(Array(iconsPerRow).keys()).map((_, idx) => {
+                return (
+                  <Grid
+                    item
+                    key={idx}
+                    xs={isXs ? 3 : 2}
+                    style={{
+                      marginTop: idx >= iconsPerRow ? "24px" : 0,
+                    }}
+                  >
+                    <SkeletonAppIcon />
+                  </Grid>
+                );
+              })
+            ) : (
+              <>
+                <LibraryLink isXs={isXs} />
+                {plugins.map((p: any, idx: number) => {
                   return (
                     <Grid
                       item
                       key={p.url}
                       xs={isXs ? 3 : 2}
                       style={{
-                        marginTop: idx >= iconsPerRow ? "24px" : 0,
+                        marginTop: idx + 1 >= iconsPerRow ? "24px" : 0,
                       }}
                     >
                       <PluginIcon plugin={p} onClick={() => onClickPlugin(p)} />
                     </Grid>
                   );
                 })}
-        </Grid>
-      </div> : null}
+              </>
+            )}
+          </Grid>
+        </div>
+      ) : null}
     </>
   );
 }
 
+function LibraryLink({ isXs }: { isXs: boolean }) {
+  const theme = useCustomTheme();
+
+  return (
+    <Grid item key="xnft-library" xs={isXs ? 3 : 2}>
+      <AppIcon
+        title={"xNFT.gg \u2197"}
+        iconStyle={{
+          padding: 14,
+          background: theme.custom.colorsInverted.nav,
+        }}
+        iconUrl="https://xnft.gg/logo.svg"
+        onClick={() => window.open("https://xnft.gg", "_blank")}
+      />
+    </Grid>
+  );
+}
+
 function PluginIcon({ plugin, onClick }: any) {
   return (
     <AppIcon title={plugin.title} iconUrl={plugin.iconUrl} onClick={onClick} />
@@ -268,10 +292,12 @@ function PluginIcon({ plugin, onClick }: any) {
 
 function AppIcon({
   title,
+  iconStyle,
   iconUrl,
   onClick,
 }: {
   title: string;
+  iconStyle?: CSSProperties;
   iconUrl: string;
   onClick: () => void;
 }) {
@@ -302,6 +328,7 @@ function AppIcon({
           style={{
             width: ICON_WIDTH,
             height: ICON_WIDTH,
+            ...(iconStyle ?? {}),
           }}
         />
       </Button>