Develop (#99)

* fix(xmtp): text message (#94) * chore(release): publish [skip ci] (#95) - project: @justaname.id/react 0.3.169 - project: @justaname.id/sdk 0.2.166 - project: @justaname.id/siwens 0.0.99 - project: @justweb3/ui 0.0.105 - project: @justweb3/widget 0.0.105 - project: @justverified/plugin 0.0.104 - project: @justweb3/efp-plugin 0.1.65 - project: @justweb3/poap-plugin 0.0.23 - project: @justweb3/talent-protocol-plugin 0.0.23 - project: @justweb3/xmtp-plugin 0.1.10 - project: siwens 0.1.6 Co-authored-by: HadiKhai <[email protected]> * Develop (#96) * fix(xmtp): text message * fix: addresses in update dialog * chore(release): publish [skip ci] (#95) - project: @justaname.id/react 0.3.169 - project: @justaname.id/sdk 0.2.166 - project: @justaname.id/siwens 0.0.99 - project: @justweb3/ui 0.0.105 - project: @justweb3/widget 0.0.105 - project: @justverified/plugin 0.0.104 - project: @justweb3/efp-plugin 0.1.65 - project: @justweb3/poap-plugin 0.0.23 - project: @justweb3/talent-protocol-plugin 0.0.23 - project: @justweb3/xmtp-plugin 0.1.10 - project: siwens 0.1.6 Co-authored-by: HadiKhai <[email protected]> --------- Co-authored-by: HadiKhai <[email protected]> * fix: feedbacks (#97) --------- Co-authored-by: JustHadi <[email protected]> Co-authored-by: HadiKhai <[email protected]>
JustaName-id · Jan 28, 2025 · 7ddc0b8 · 7ddc0b8
1 parent 85514fd
commit 7ddc0b8
Show file tree

Hide file tree

Showing 24 changed files with 1,034 additions and 34 deletions.
diff --git a/apps/console/src/app/layout.tsx b/apps/console/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import { Toaster } from '../components/toast';
 import { Navbar } from '../layout/navbar';
 import './global.css';
 import { Providers } from './providers';
@@ -25,6 +26,7 @@ export default function RootLayout({
       <body>
         <Providers>
           <div className="w-screen  flex flex-col items-center justify-start h-screen">
+            <Toaster />
             <Navbar />
             {children}
           </div>

diff --git a/apps/console/src/app/page.tsx b/apps/console/src/app/page.tsx
@@ -43,8 +43,10 @@ export default function Page() {
       });
     }
   }, [isLoggedIn, connectedEns]);
+
   const { leftWidth, rightWidth, getBarProps } = useSplit({
     initialLeft: 70,
+    maxRightWidthPercentage: 0.5,
   });
 
   return (
@@ -114,7 +116,8 @@ export default function Page() {
           <div
             style={{
               width: `calc( ${rightWidth}% - 4px)`,
-              maxWidth: `calc( ${rightWidth}% - 4px)`,
+              minWidth: "100px",
+              overflowX: 'hidden'
             }}
           >
             <CodeSection />

diff --git a/apps/console/src/components/sections/customizer/ClaimSection/index.tsx b/apps/console/src/components/sections/customizer/ClaimSection/index.tsx
@@ -6,6 +6,7 @@ import { Input } from '../../../ui/input';
 import axios from 'axios';
 import { ChainId } from '@justaname.id/sdk';
 import { getAnalyticsClient } from '../../../../analytics';
+import { showToast } from '../../../toast';
 
 export const ClaimSection = () => {
   const { config, handleJustWeb3Config } = useContext(JustWeb3Context);
@@ -106,6 +107,7 @@ export const ClaimSection = () => {
         value={currentVal}
         onValueChange={(value) => {
           handleEnsSelect(value, _chainId);
+          showToast('success', "Code updated!", "claim code")
         }}
       >
         <p className="text-base text-black font-bold leading-[125%] my-[5px]">

diff --git a/apps/console/src/components/sections/customizer/Customizer/index.tsx b/apps/console/src/components/sections/customizer/Customizer/index.tsx
@@ -1,15 +1,16 @@
-import { Input } from '../../../ui/input';
-import { ClaimSection } from '../ClaimSection';
-import { SignSection } from '../SignSection';
+import { useMountedAccount } from '@justaname.id/react';
+import { useJustWeb3Theme } from '@justweb3/ui';
 import { JustWeb3Context, useDebounce } from '@justweb3/widget';
-import { ColorSelector } from '../ColorSelector';
 import { useContext, useEffect, useState } from 'react';
-import { useJustWeb3Theme } from '@justweb3/ui';
-import { Switch } from '../../../ui/switch';
 import { useSwitchChain } from 'wagmi';
-import { useMountedAccount } from '@justaname.id/react';
-import { PluginsSection } from '../PluginsSection';
 import { getAnalyticsClient } from '../../../../analytics';
+import { showToast } from '../../../toast';
+import { Input } from '../../../ui/input';
+import { Switch } from '../../../ui/switch';
+import { ClaimSection } from '../ClaimSection';
+import { ColorSelector } from '../ColorSelector';
+import { PluginsSection } from '../PluginsSection';
+import { SignSection } from '../SignSection';
 
 interface CustomizerProps {
   mobile?: boolean;
@@ -70,6 +71,7 @@ export const Customizer = ({ mobile }: CustomizerProps) => {
             onColorChange={(color: string) => {
               changeTheme('background', color);
               document.documentElement.style.setProperty('--background', color);
+              showToast('success', "Code updated!", "color")
             }}
           />
           <ColorSelector
@@ -82,6 +84,7 @@ export const Customizer = ({ mobile }: CustomizerProps) => {
                 '--rk-colors-accentColor',
                 color
               );
+              showToast('success', "Code updated!", "secondary color")
             }}
           />
         </div>
@@ -91,7 +94,10 @@ export const Customizer = ({ mobile }: CustomizerProps) => {
           </p>
           <Input
             value={logoUrl}
-            onChange={(e) => setLogoUrl(e.target.value)}
+            onChange={(e) => {
+              setLogoUrl(e.target.value)
+              showToast('success', "Code updated!", "logo")
+            }}
             placeholder="Logo URL"
             className="pointer-events-auto"
           />

diff --git a/apps/console/src/components/sections/customizer/PluginsSection/JustVerified/index.tsx b/apps/console/src/components/sections/customizer/PluginsSection/JustVerified/index.tsx
@@ -17,6 +17,7 @@ import {
   AccordionTrigger,
 } from '../../../../ui/accordion';
 import { getAnalyticsClient } from '../../../../../analytics';
+import { showToast } from '../../../../toast';
 
 const socials: { logo: ReactNode; title: string; credential: Credentials }[] = [
   {
@@ -99,6 +100,7 @@ export const JustVerified = () => {
       default:
         break;
     }
+    showToast('success', "Code Updated!", `justverified-social-${credential}`)
   };
 
   useEffect(() => {
@@ -123,6 +125,7 @@ export const JustVerified = () => {
         }}
         onCheckedChange={(checked) => {
           handleJustVerifiedConfig(checked);
+          showToast('success', "Code updated!", "justverified")
         }}
         style={{
           position: 'absolute',

diff --git a/apps/console/src/components/sections/customizer/SignSection/index.tsx b/apps/console/src/components/sections/customizer/SignSection/index.tsx
@@ -5,6 +5,7 @@ import { JustWeb3Context, JustWeb3ProviderConfig } from '@justweb3/widget';
 import { Input } from '../../../ui/input';
 import Image from 'next/image';
 import { getAnalyticsClient } from '../../../../analytics';
+import { showToast } from '../../../toast';
 
 export const SignSection = () => {
   const { handleJustWeb3Config, config } = useContext(JustWeb3Context);
@@ -41,6 +42,7 @@ export const SignSection = () => {
             allowedEns:
               action === 'all' || action === 'claimable' ? action : ensList,
           });
+          showToast('success', "Code updated!", "sign-section")
         }}
       >
         <p className="text-base text-black font-bold leading-[125%] my-[5px]">
@@ -64,6 +66,7 @@ export const SignSection = () => {
                   });
                   setEnsList([...ensList, ensInput]);
                   setEnsInput('');
+                  showToast('success', "Code updated!", `sign-section-${ensInput}`)
                 }
               }}
               rightIcon={
@@ -130,6 +133,7 @@ export const SignSection = () => {
                   className="cursor-pointer"
                   onClick={() => {
                     setEnsList(ensList.filter((ensl) => ensl !== _ens));
+                    showToast('success', "Code updated!", "sign-section-removed")
                   }}
                 />
               </div>

diff --git a/apps/console/src/components/toast/icons/AssignmentTurnedIn.tsx b/apps/console/src/components/toast/icons/AssignmentTurnedIn.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+export default function AssignmentTurnedIn(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 25"
+            {...props}
+        >
+            <mask
+                id="assignment-turned-in_svg__a"
+                width={24}
+                height={25}
+                x={0}
+                y={0}
+                maskUnits="userSpaceOnUse"
+                style={{
+                    maskType: 'alpha',
+                }}
+            >
+                <path fill="#D9D9D9" d="M0 .5h24v24H0z" />
+            </mask>
+            <g mask="url(#assignment-turned-in_svg__a)">
+                <path
+                    fill="#FFB2EF"
+                    d="m10.6 16.55 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4zM5 21.5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19.5v-14q0-.824.587-1.412A1.93 1.93 0 0 1 5 3.5h4.2q.326-.9 1.088-1.45A2.86 2.86 0 0 1 12 1.5q.95 0 1.713.55.762.55 1.087 1.45H19q.824 0 1.413.588Q21 4.675 21 5.5v14q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21.5zm7-16.75a.73.73 0 0 0 .75-.75.73.73 0 0 0-.75-.75.73.73 0 0 0-.75.75.73.73 0 0 0 .75.75"
+                />
+            </g>
+        </svg>
+    )
+}
diff --git a/apps/console/src/components/toast/icons/Loading.tsx b/apps/console/src/components/toast/icons/Loading.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+export default function Loading(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 25"
+            {...props}
+        >
+            <mask
+                id="loading_svg__a"
+                width={24}
+                height={25}
+                x={0}
+                y={0}
+                maskUnits="userSpaceOnUse"
+                style={{
+                    maskType: 'alpha',
+                }}
+            >
+                <path fill="#3280F4" d="M0 .5h24v24H0z" />
+            </mask>
+            <g mask="url(#loading_svg__a)">
+                <path
+                    fill="#3280F4"
+                    d="M12 22.5a9.7 9.7 0 0 1-3.875-.788 10.1 10.1 0 0 1-3.187-2.15 10.1 10.1 0 0 1-2.15-3.187A9.7 9.7 0 0 1 2 12.5q0-2.075.788-3.887a10.2 10.2 0 0 1 2.15-3.175 10.1 10.1 0 0 1 3.187-2.15A9.7 9.7 0 0 1 12 2.5q.424 0 .713.288.287.287.287.712 0 .424-.287.713A.97.97 0 0 1 12 4.5q-3.325 0-5.662 2.338Q4 9.175 4 12.5t2.338 5.663T12 20.5t5.663-2.337T20 12.5q0-.424.288-.713A.97.97 0 0 1 21 11.5q.424 0 .712.287.288.288.288.713a9.7 9.7 0 0 1-.788 3.875 10.1 10.1 0 0 1-2.15 3.188 10.2 10.2 0 0 1-3.175 2.15A9.65 9.65 0 0 1 12 22.5"
+                />
+            </g>
+        </svg>
+    )
+}
diff --git a/apps/console/src/components/toast/icons/ToastError.tsx b/apps/console/src/components/toast/icons/ToastError.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+export default function ToastError(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <mask
+                id="toast-error_svg__a"
+                width={24}
+                height={24}
+                x={0}
+                y={0}
+                maskUnits="userSpaceOnUse"
+                style={{
+                    maskType: 'alpha',
+                }}
+            >
+                <path fill="#D9D9D9" d="M0 0h24v24H0z" />
+            </mask>
+            <g mask="url(#toast-error_svg__a)">
+                <path
+                    fill="red"
+                    d="M2 22V4q0-.824.587-1.412A1.93 1.93 0 0 1 4 2h16q.824 0 1.413.587Q22 3.176 22 4v12q0 .824-.587 1.413A1.93 1.93 0 0 1 20 18H6zm7.4-8 2.6-2.6 2.6 2.6 1.4-1.4-2.6-2.6L16 7.4 14.6 6 12 8.6 9.4 6 8 7.4l2.6 2.6L8 12.6z"
+                />
+            </g>
+        </svg>
+    )
+}
diff --git a/apps/console/src/components/toast/icons/ToastInfo.tsx b/apps/console/src/components/toast/icons/ToastInfo.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+export default function ToastInfo(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <mask
+                id="toast-info_svg__a"
+                width={24}
+                height={24}
+                x={0}
+                y={0}
+                maskUnits="userSpaceOnUse"
+                style={{
+                    maskType: 'alpha',
+                }}
+            >
+                <path fill="#D9D9D9" d="M0 0h24v24H0z" />
+            </mask>
+            <g mask="url(#toast-info_svg__a)">
+                <path
+                    fill="#1C1B1F"
+                    d="M12 7q.424 0 .713-.287A.97.97 0 0 0 13 6a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 5a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 6q0 .424.287.713Q11.576 7 12 7m-1 8h2V9h-2zm-9 7V4q0-.824.587-1.412A1.93 1.93 0 0 1 4 2h16q.824 0 1.413.587Q22 3.176 22 4v12q0 .824-.587 1.413A1.93 1.93 0 0 1 20 18H6z"
+                />
+            </g>
+        </svg>
+    )
+}
diff --git a/apps/console/src/components/toast/icons/ToastSuccess.tsx b/apps/console/src/components/toast/icons/ToastSuccess.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+export default function ToastSuccess(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 30 31"
+            {...props}
+        >
+            <mask
+                id="toast-success_svg__a"
+                width={30}
+                height={31}
+                x={0}
+                y={0}
+                maskUnits="userSpaceOnUse"
+                style={{
+                    maskType: 'alpha',
+                }}
+            >
+                <path fill="#D9D9D9" d="M0 .316h30v30H0z" />
+            </mask>
+            <g mask="url(#toast-success_svg__a)">
+                <path
+                    fill="#06CB6C"
+                    d="m15 29.066-9-6.75a2.4 2.4 0 0 1-.734-.875A2.5 2.5 0 0 1 5 20.316v-15q0-1.031.734-1.766A2.4 2.4 0 0 1 7.5 2.816h15q1.032 0 1.766.734T25 5.316v15q0 .593-.266 1.125a2.4 2.4 0 0 1-.734.875zm-1.312-10 7.062-7.063L19 10.191l-5.312 5.312-2.626-2.625-1.812 1.75z"
+                />
+            </g>
+        </svg>
+    )
+}
diff --git a/apps/console/src/components/toast/icons/ToastWarning.tsx b/apps/console/src/components/toast/icons/ToastWarning.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+export default function ToastWarning(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <mask
+                id="toast-warning_svg__a"
+                width={24}
+                height={24}
+                x={0}
+                y={0}
+                maskUnits="userSpaceOnUse"
+                style={{
+                    maskType: 'alpha',
+                }}
+            >
+                <path fill="#D9D9D9" d="M0 0h24v24H0z" />
+            </mask>
+            <g mask="url(#toast-warning_svg__a)">
+                <path
+                    fill="#FEA801"
+                    d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m-1-4h2V7h-2zm-6 8q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19V5q0-.824.587-1.412A1.93 1.93 0 0 1 5 3h4.2q.326-.9 1.088-1.45A2.86 2.86 0 0 1 12 1q.95 0 1.713.55.762.55 1.087 1.45H19q.824 0 1.413.587Q21 4.176 21 5v14q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21zm7-16.75a.73.73 0 0 0 .75-.75.73.73 0 0 0-.75-.75.73.73 0 0 0-.75.75.73.73 0 0 0 .75.75"
+                />
+            </g>
+        </svg>
+    )
+}
diff --git a/apps/console/src/components/toast/icons/index.ts b/apps/console/src/components/toast/icons/index.ts
@@ -0,0 +1,15 @@
+import AssignmentTurnedIn from './AssignmentTurnedIn'
+import Loading from './Loading'
+import ToastError from './ToastError'
+import ToastInfo from './ToastInfo'
+import ToastSuccess from './ToastSuccess'
+import ToastWarning from './ToastWarning'
+
+export {
+    AssignmentTurnedIn,
+    Loading,
+    ToastError,
+    ToastInfo,
+    ToastSuccess,
+    ToastWarning
+}