Skip to content

Commit

Permalink
Merge pull request #6 from Access-Labs-Inc/feat/optional-settings
Browse files Browse the repository at this point in the history
Optional settings for image, title, desc
  • Loading branch information
martincik authored Jul 11, 2024
2 parents 87b7419 + acee9f9 commit 1eb045d
Show file tree
Hide file tree
Showing 8 changed files with 124 additions and 74 deletions.
4 changes: 4 additions & 0 deletions html-dev/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
22 changes: 14 additions & 8 deletions src/components/dialect/ui/ActionContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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) {
Expand Down Expand Up @@ -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 : undefined}
description={showDescription ? action.description : undefined}
websiteUrl={showWebsite ? website.link : undefined}
websiteText={showWebsite ? website.text : undefined}
image={showImage ? action.icon : undefined}
error={
executionState.status !== 'success'
? executionState.errorMessage ?? action.error
Expand Down
130 changes: 70 additions & 60 deletions src/components/dialect/ui/ActionLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ interface LayoutProps {
websiteText?: string | null;
disclaimer?: ComponentChildren;
type: ActionType;
title: string;
description: string;
title?: string;
description?: string;
buttons?: ButtonProps[];
inputs?: InputProps[];
form?: FormProps;
Expand Down Expand Up @@ -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>
);
};
Expand Down
6 changes: 5 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,12 @@ const defaultConfig: Configurations = {
poolId: null,
poolSlug: null,
poolName: null,
websiteUrl: null,
debug: true,
classPrefix: "acs__",
showImage: true,
showTitle: true,
showDescription: true,
showWebsite: true
};

// main entry point - calls loader and render Preact app into supplied element
Expand Down
8 changes: 8 additions & 0 deletions src/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
8 changes: 5 additions & 3 deletions src/models.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
14 changes: 13 additions & 1 deletion src/routes/Blink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
);
};
6 changes: 5 additions & 1 deletion test/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ export const testConfig = (override?: {}): Configurations =>
poolId: '1',
poolName: 'name',
poolSlug: 'name',
classPrefix: 'prefix'
websiteUrl: null,
showWebsite: true,
showTitle: true,
showDescription: true,
showImage: true
},
override
);
Expand Down

0 comments on commit 1eb045d

Please sign in to comment.