Optional settings for image, title, desc

Access-Labs-Inc · Jul 11, 2024 · 97340ba · 97340ba
1 parent 086a501
commit 97340ba
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 71 deletions.
diff --git a/html-dev/index.html b/html-dev/index.html
@@ -28,6 +28,10 @@ <h2>The shown widget is for demonstration purpose only</h2>
         poolName: "The Block",
         poolId: 'Fxh4hDFHJuTfD3Eq4en36dTk8QvbsSMoTE5Y2hVX3qVt',
         poolSlug: 'the-block',
+        showTitle: true,
+        showDescription: true,
+        showImage: true,
+        showWebsite: true,
       });
       document.querySelector("#acs-blink").addEventListener("connected", (event) => {
         console.log("Connected to the wallet with address: " + JSON.stringify(event.detail));

diff --git a/src/components/dialect/ui/ActionContainer.tsx b/src/components/dialect/ui/ActionContainer.tsx
@@ -164,11 +164,19 @@ const SOFT_LIMIT_INPUTS = 3;
 export const ActionContainer = ({
   initialApiUrl,
   websiteUrl,
+  showImage,
+  showTitle,
+  showDescription,
+  showWebsite,
   cluster = 'mainnet',
 }: {
-  cluster?: ClusterTarget;
   initialApiUrl: string;
   websiteUrl?: string;
+  showImage: boolean;
+  showTitle: boolean;
+  showDescription: boolean;
+  showWebsite: boolean;
+  cluster?: ClusterTarget;
 }) => {
   const { publicKey, sendTransaction } = useWallet();
   const { setVisible: setWalletModalVisible } = useWalletModal();
@@ -183,8 +191,6 @@ export const ActionContainer = ({
     status: actionState !== 'malicious' ? 'idle' : 'blocked',
   });
 
-  console.log("State: ", executionState);
-
   const website = useMemo(() => {
     // TODO: which label for link to show, us or the website
     if (websiteUrl) {
@@ -389,11 +395,11 @@ export const ActionContainer = ({
   return (
     <ActionLayout
       type={actionState}
-      title={action.title}
-      description={action.description}
-      websiteUrl={website.link}
-      websiteText={website.text}
-      image={action.icon}
+      title={showTitle ? action.title : null}
+      description={showDescription ? action.description : null}
+      websiteUrl={showWebsite ? website.link : null}
+      websiteText={showWebsite ? website.text : null}
+      image={showImage ? action.icon : null}
       error={
         executionState.status !== 'success'
           ? executionState.errorMessage ?? action.error

diff --git a/src/components/dialect/ui/ActionLayout.tsx b/src/components/dialect/ui/ActionLayout.tsx
@@ -150,71 +150,81 @@ export const ActionLayout = ({
           />
         </Linkable>
       )}
-      <div className="action-layout-info">
-        <div className="action-layout-external-info">
-          {websiteUrl && (
-            <a
-              href={websiteUrl}
-              target="_blank"
-              className="action-layout-website-link"
-              rel="noopener noreferrer"
-            >
-              <LinkIcon className="action-layout-website-link-icon" />
-              {websiteText ?? websiteUrl}
-            </a>
-          )}
-          {websiteText && !websiteUrl && (
-            <span className="action-layout-website-text">
-              {websiteText}
-            </span>
-          )}
-          <a
-            href="https://docs.dialect.to/documentation/actions/security"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="action-layout-security-link"
-          >
-            {type === 'malicious' && (
-              <Badge
-                variant="error"
-                icon={<ExclamationShieldIcon width={13} height={13} />}
+      {(websiteUrl || websiteUrl || title || description || disclaimer) && (
+        <div className="action-layout-info">
+          <div className="action-layout-external-info">
+            {websiteUrl && (
+              <a
+                href={websiteUrl}
+                target="_blank"
+                className="action-layout-website-link"
+                rel="noopener noreferrer"
               >
-                Blocked
-              </Badge>
+                <LinkIcon className="action-layout-website-link-icon" />
+                {websiteText ?? websiteUrl}
+              </a>
             )}
-            {type === 'trusted' && (
-              <Badge
-                variant="default"
-                icon={<InfoShieldIcon width={13} height={13} />}
-              />
+            {websiteText && !websiteUrl && (
+              <span className="action-layout-website-text">
+                {websiteText}
+              </span>
             )}
-            {type === 'unknown' && (
-              <Badge
-                variant="warning"
-                icon={<InfoShieldIcon width={13} height={13} />}
-              />
+            {(websiteUrl || websiteUrl) && (
+              <a
+                href="https://docs.dialect.to/documentation/actions/security"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="action-layout-security-link"
+              >
+                {type === 'malicious' && (
+                  <Badge
+                    variant="error"
+                    icon={<ExclamationShieldIcon width={13} height={13} />}
+                  >
+                    Blocked
+                  </Badge>
+                )}
+                {type === 'trusted' && (
+                  <Badge
+                    variant="default"
+                    icon={<InfoShieldIcon width={13} height={13} />}
+                  />
+                )}
+                {type === 'unknown' && (
+                  <Badge
+                    variant="warning"
+                    icon={<InfoShieldIcon width={13} height={13} />}
+                  />
+                )}
+              </a>
             )}
-          </a>
+          </div>
+          {title && (
+            <span className="action-layout-title">
+              {title}
+            </span>
+          )}
+          {description && (
+            <span className="action-layout-description">
+              {description}
+            </span>
+          )}
+          {disclaimer && (
+            <div className="action-layout-disclaimer">{disclaimer}</div>
+          )}
         </div>
-        <span className="action-layout-title">
-          {title}
+      )}
+      <ActionContent form={form} inputs={inputs} buttons={buttons} />
+      {success && (
+        <span className="action-layout-success">
+          {success}
         </span>
-        <span className="action-layout-description">
-          {description}
+      )}
+      {error && !success && (
+        <span className="action-layout-error">
+          {error}
         </span>
-        {disclaimer && <div className="action-layout-disclaimer">{disclaimer}</div>}
-        <ActionContent form={form} inputs={inputs} buttons={buttons} />
-        {success && (
-          <span className="action-layout-success">
-            {success}
-          </span>
-        )}
-        {error && !success && (
-          <span className="action-layout-error">
-            {error}
-          </span>
-        )}
-      </div>
+      )}
     </div>
   );
 };

diff --git a/src/index.ts b/src/index.ts
@@ -15,7 +15,9 @@ const defaultConfig: Configurations = {
   poolSlug: null,
   poolName: null,
   debug: true,
-  classPrefix: "acs__",
+  showImage: true,
+  showTitle: true,
+  showDescription: true
 };
 
 // main entry point - calls loader and render Preact app into supplied element

diff --git a/src/main.css b/src/main.css
@@ -198,3 +198,11 @@ html {
 .action-snackbar-default {
   @apply rounded-lg border p-3 text-subtext;
 }
+
+.solana-wallet-button-connect-wallet {
+  @apply flex flex-row items-center justify-center gap-3;
+}
+
+.solana-wallet-button-connect-wallet-wrap {
+  @apply flex items-center justify-center;
+}
diff --git a/src/models.ts b/src/models.ts
@@ -12,9 +12,11 @@ export interface AppConfigurations {
   poolId: string | null;
   poolSlug: string | null;
   poolName: string | null;
-  disconnectButtonClass?: string | null;
-  connectedButtonClass?: string | null;
-  classPrefix: string;
+  websiteUrl: string | null;
+  showImage: boolean;
+  showTitle: boolean;
+  showDescription: boolean;
+  showWebsite: boolean;
 }
 
 export type Configurations = InfraConfigurations & AppConfigurations;
diff --git a/src/routes/Blink.tsx b/src/routes/Blink.tsx
@@ -6,12 +6,24 @@ import { ConfigContext } from '../AppContext';
 import { ActionContainer } from '../components/dialect/ui/ActionContainer';
 
 export const Blink = () => {
-  const { poolSlug } = useContext(ConfigContext);
+  const {
+    poolSlug,
+    websiteUrl,
+    showDescription,
+    showTitle,
+    showImage,
+    showWebsite
+  } = useContext(ConfigContext);
   const actionUrl = `https://actions.dialect.to/api/access-protocol/subscribe/${poolSlug}`;
 
   return (
     <ActionContainer
       initialApiUrl={actionUrl}
+      websiteUrl={websiteUrl ?? undefined}
+      showImage={showImage}
+      showTitle={showTitle}
+      showDescription={showDescription}
+      showWebsite={showWebsite}
     />
   );
 };