From 97340ba40555967a4dc9a3dab0406a8d8d77bb61 Mon Sep 17 00:00:00 2001 From: Ladislav Martincik Date: Thu, 11 Jul 2024 12:03:40 +0200 Subject: [PATCH] Optional settings for image, title, desc --- html-dev/index.html | 4 + src/components/dialect/ui/ActionContainer.tsx | 22 +-- src/components/dialect/ui/ActionLayout.tsx | 126 ++++++++++-------- src/index.ts | 4 +- src/main.css | 8 ++ src/models.ts | 8 +- src/routes/Blink.tsx | 14 +- 7 files changed, 115 insertions(+), 71 deletions(-) diff --git a/html-dev/index.html b/html-dev/index.html index b8c4494..3ca5f34 100644 --- a/html-dev/index.html +++ b/html-dev/index.html @@ -28,6 +28,10 @@

The shown widget is for demonstration purpose only

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 index a84e6b1..d567854 100644 --- 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 ( )} -
-
- {websiteUrl && ( - - - {websiteText ?? websiteUrl} - - )} - {websiteText && !websiteUrl && ( - - {websiteText} - - )} - - {type === 'malicious' && ( - } + {(websiteUrl || websiteUrl || title || description || disclaimer) && ( +
+
+ {websiteUrl && ( + - Blocked - + + {websiteText ?? websiteUrl} + )} - {type === 'trusted' && ( - } - /> + {websiteText && !websiteUrl && ( + + {websiteText} + )} - {type === 'unknown' && ( - } - /> + {(websiteUrl || websiteUrl) && ( + + {type === 'malicious' && ( + } + > + Blocked + + )} + {type === 'trusted' && ( + } + /> + )} + {type === 'unknown' && ( + } + /> + )} + )} - +
+ {title && ( + + {title} + + )} + {description && ( + + {description} + + )} + {disclaimer && ( +
{disclaimer}
+ )}
- - {title} + )} + + {success && ( + + {success} - - {description} + )} + {error && !success && ( + + {error} - {disclaimer &&
{disclaimer}
} - - {success && ( - - {success} - - )} - {error && !success && ( - - {error} - - )} -
+ )}
); }; diff --git a/src/index.ts b/src/index.ts index e517ef7..3ff50f3 100644 --- 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 index fefd049..01b2c7c 100644 --- 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 index 4d91e2d..57dee50 100644 --- 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 index c92d52d..6a9e08d 100644 --- 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 ( ); };