About Self Protocol & Tier 3
diff --git a/next-frontend/src/components/GoodDollarClaim.tsx b/next-frontend/src/components/GoodDollarClaim.tsx
new file mode 100644
index 0000000..a998943
--- /dev/null
+++ b/next-frontend/src/components/GoodDollarClaim.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import '@goodsdks/ui-components';
+
+// Declare the custom element for TypeScript
+declare global {
+ namespace JSX {
+ interface IntrinsicElements {
+ 'claim-button': React.DetailedHTMLProps
& {
+ environment?: 'production' | 'staging' | 'development';
+ }, HTMLElement>;
+ }
+ }
+}
+
+export default function GoodDollarClaim() {
+ const buttonRef = useRef(null);
+
+ useEffect(() => {
+ // Configure the claim-button via its DOM property
+ const configureButton = async () => {
+ // Wait for custom element to be defined
+ await customElements.whenDefined('claim-button');
+
+ const element = buttonRef.current;
+ if (element) {
+ // @ts-ignore - The property exists on the web component
+ element.appkitConfig = {
+ projectId: '71dd03d057d89d0af68a4c627ec59694', // Using a default/example ID if user didn't provide one, or request one?
+ // Reusing the one from their example for now or a generic one.
+ // Ideally user should provide their own Reown/WalletConnect project ID.
+ // I'll stick to a potentially shared one or the example one from docs for this task unless user provided one.
+ // In the provided docs example, they used "71dd03d057d89d0af68a4c627ec59694". Good to reuse for now.
+ metadata: {
+ name: 'BlockBelle',
+ description: 'BlockBelle - Women in Web3',
+ url: 'https://blockbelle.com', // Placeholder URL
+ icons: ['https://i.postimg.cc/mrmVf9hm/self.png'], // Reusing the Self logo for now
+ },
+ };
+ }
+ };
+
+ configureButton();
+ }, []);
+
+ return (
+
+
+
+ G$
+
+
+
GoodDollar UBI
+
Claim free G$ tokens daily
+
+
+
+
+ {/* The Web Component */}
+
+
+
+
+