Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add AbstractAccountSigner #324

Closed
wants to merge 34 commits into from
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
cee39e9
feat: add dapp-kit-react-privy package
fabiorigam Nov 21, 2024
f2e74cb
fix: continue the privy provider
fabiorigam Nov 21, 2024
c0f9ad9
fix: fix build issue
fabiorigam Nov 21, 2024
a89d4e8
fix: add sample privy next app
fabiorigam Nov 22, 2024
f60cdc9
fix: fix issue
fabiorigam Nov 22, 2024
e75f5ec
feat: add ConnectModal
fabiorigam Nov 22, 2024
c233309
fix: fix linter issue
fabiorigam Nov 22, 2024
a852dbe
Merge branch 'main' into add-privy-provider
fabiorigam Nov 25, 2024
436f098
fix: fix merge conflicts
fabiorigam Nov 25, 2024
06c49d8
fix: improve modal
fabiorigam Nov 25, 2024
7f8a302
fix: refactor
fabiorigam Nov 25, 2024
8c1234b
fix: refactor
fabiorigam Nov 25, 2024
8b4bd58
fix: improve example UI
fabiorigam Nov 25, 2024
cd8d0e2
Merge branch 'main' into add-privy-provider
fabiorigam Nov 25, 2024
64c3711
fix: improve modal
fabiorigam Nov 26, 2024
4145d48
feat: add new hooks
fabiorigam Nov 26, 2024
6e5cfc4
fix: add readme files and a small explanation
fabiorigam Nov 28, 2024
e3158b2
fix: update package
fabiorigam Nov 28, 2024
de72ec5
fi: update readme
fabiorigam Nov 28, 2024
8dc3ce2
feat: move config in separate object + solve compilation issues
Agilulfo1820 Dec 6, 2024
20c6328
fix: typos
Agilulfo1820 Dec 6, 2024
fdf8df9
feat: refactor return types
Agilulfo1820 Dec 9, 2024
45d5d9c
feat: fixed issues
Agilulfo1820 Dec 10, 2024
5375d3c
Merge branch 'feat/dan' into add-privy-provider
Agilulfo1820 Dec 10, 2024
3e42858
feat: update twitter logo
Agilulfo1820 Dec 11, 2024
c11a323
feat: handle cross accounts
Agilulfo1820 Dec 11, 2024
a9e11da
feat: use chakra
Agilulfo1820 Dec 11, 2024
4d9e31a
feat: cross app login
Agilulfo1820 Dec 13, 2024
2392826
Merge branch 'feat/cross-accounts' into add-privy-provider
Agilulfo1820 Dec 13, 2024
5539028
fix: transactions
Agilulfo1820 Dec 17, 2024
9788ef0
feat: connect button
Agilulfo1820 Dec 17, 2024
3f947ff
fix: dependency
Agilulfo1820 Dec 17, 2024
c7c15e8
feat: add AbstractAccountSigner
fabiorigam Dec 17, 2024
3e82ae0
fix: add example
fabiorigam Dec 17, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: add ConnectModal
  • Loading branch information
fabiorigam committed Nov 22, 2024
commit e75f5ec1d963110ee146df47b899227ef9d430c1
8 changes: 4 additions & 4 deletions examples/sample-privy-next-app/src/app/pages/homepage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import { useDisclosure, Button } from "@chakra-ui/react";
import {
useWalletAdapter,
// dappKitModal,
// ConnectModal,
ConnectModal,
} from "@vechain/dapp-kit-react-privy";

const HomePage = (): ReactElement => {
const { isConnected, connectedAddress, isPrivyLoading, logout } =
useWalletAdapter();

const {
//isOpen: isLoginOpen,
isOpen: isLoginOpen,
onOpen: onLoginOpen,
onClose: onLoginClose,
} = useDisclosure();
Expand All @@ -27,11 +27,11 @@ const HomePage = (): ReactElement => {
<Button onClick={onLoginOpen}>Connect</Button>
)}

{/*<ConnectModal
<ConnectModal
isOpen={isLoginOpen}
onClose={onLoginClose}
logo={"https://cleanify.vet/logo/cleanify_green.png"}
/>*/}
/>
</div>
);
};
Expand Down
1 change: 1 addition & 0 deletions packages/dapp-kit-react-privy/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"purge": "yarn clean && rm -rf node_modules"
},
"dependencies": {
"@headlessui/react": "^2.2.0",
"@privy-io/react-auth": "1.83.1",
"@tanstack/react-query": "^5.61.0",
"@vechain/dapp-kit-react": "*",
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from "./abi";
export * from "./svg";
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export const twitterSvg = {
dark: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="#FFFFFF" d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"/>
</svg>`,
light: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="#1DA1F2" d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"/>
</svg>`,
};

export const googleSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
"use client";

import { Dialog, Transition } from "@headlessui/react";
import { Fragment } from "react";
import { usePrivy } from "@privy-io/react-auth";
import { useWalletModal } from "@vechain/dapp-kit-react";
import { TwitterLogo } from "../TwitterLogo";
import { GoogleLogo } from "../GoogleLogo";

type Props = {
isOpen: boolean;
onClose: () => void;
logo?: string;
};

export const ConnectModal = ({ isOpen, onClose, logo }: Props) => {
const { login } = usePrivy();
const { open } = useWalletModal();

return (
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={onClose}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child>

<div className="fixed inset-0 overflow-y-auto">
<div className="flex items-center justify-center min-h-full p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md p-6 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900 text-center"
>
Log in or sign up
</Dialog.Title>

<div className="mt-4 flex justify-center">
<img
src={logo || "/images/favicon.png"}
alt="logo"
className="max-w-[180px] max-h-[90px]"
/>
</div>

<button
type="button"
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
onClick={onClose}
>
<span className="sr-only">Close</span>
</button>

<div className="mt-6">
<p className="text-sm text-gray-600 text-center">
Select a login method
</p>

<div className="mt-4 space-y-4">
<button
className="w-full flex items-center justify-center p-3 text-sm border border-gray-300 rounded-md hover:bg-gray-50"
onClick={() => {
onClose();
login();
}}
>
<div className="flex items-center space-x-2">
<TwitterLogo isDark={false} />
<GoogleLogo />
</div>
<span>Continue with Social</span>
</button>
<button
className="w-full flex items-center justify-center p-3 text-sm text-gray-500 hover:text-gray-700"
onClick={() => {
onClose();
open();
}}
>
<span>or with Crypto Wallet</span>
</button>
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./ConnectModal";
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Box, BoxProps } from "@chakra-ui/react";
import React from "react";
import { googleSvg } from "../../assets/svg";

type Props = {
boxSize?: string | number;
} & Omit<BoxProps, "dangerouslySetInnerHTML">;

export const GoogleLogo: React.FC<Props> = ({ boxSize = "20px", ...props }) => {
return (
<Box
as="span"
display="inline-block"
width={boxSize}
height={boxSize}
dangerouslySetInnerHTML={{
__html: googleSvg,
}}
{...props}
/>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./GoogleLogo";
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Box, BoxProps } from "@chakra-ui/react";
import React from "react";
import { twitterSvg } from "../../assets/svg";

type Props = {
isDark?: boolean;
boxSize?: string | number;
} & Omit<BoxProps, "dangerouslySetInnerHTML">;

export const TwitterLogo: React.FC<Props> = ({
isDark,
boxSize = "20px",
...props
}) => {
return (
<Box
as="span"
display="inline-block"
width={boxSize}
height={boxSize}
dangerouslySetInnerHTML={{
__html: isDark ? twitterSvg.dark : twitterSvg.light,
}}
{...props}
/>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./TwitterLogo";
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export * from "./ConnectModal";
export * from "./TwitterLogo";
export * from "./GoogleLogo";
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from "./assets";
export * from "./components";
export * from "./hooks";
export * from './DAppKitPrivyProvider';
2 changes: 1 addition & 1 deletion packages/dapp-kit-react-privy/tsup.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@ export default defineConfig({
sourcemap: true,
dts: true,
clean: true,
external: ['react'],
external: ['react']
});
70 changes: 68 additions & 2 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4092,7 +4092,7 @@
dependencies:
"@floating-ui/dom" "^1.0.0"

"@floating-ui/react@^0.26.22":
"@floating-ui/react@^0.26.16", "@floating-ui/react@^0.26.22":
version "0.26.28"
resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.28.tgz#93f44ebaeb02409312e9df9507e83aab4a8c0dc7"
integrity sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==
Expand All @@ -4119,6 +4119,16 @@
"@tanstack/react-virtual" "^3.0.0-beta.60"
client-only "^0.0.1"

"@headlessui/react@^2.2.0":
version "2.2.0"
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-2.2.0.tgz#a8e32f0899862849a1ce1615fa280e7891431ab7"
integrity sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==
dependencies:
"@floating-ui/react" "^0.26.16"
"@react-aria/focus" "^3.17.1"
"@react-aria/interactions" "^3.21.3"
"@tanstack/react-virtual" "^3.8.1"

"@heroicons/react@^2.1.1":
version "2.2.0"
resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.2.0.tgz#0c05124af50434a800773abec8d3af6a297d904b"
Expand Down Expand Up @@ -5641,6 +5651,57 @@
web3-core "^1.8.0"
web3-core-helpers "^1.8.0"

"@react-aria/focus@^3.17.1":
version "3.19.0"
resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.19.0.tgz#82b9a5b83f023b943a7970df3d059f49d61df05d"
integrity sha512-hPF9EXoUQeQl1Y21/rbV2H4FdUR2v+4/I0/vB+8U3bT1CJ+1AFj1hc/rqx2DqEwDlEwOHN+E4+mRahQmlybq0A==
dependencies:
"@react-aria/interactions" "^3.22.5"
"@react-aria/utils" "^3.26.0"
"@react-types/shared" "^3.26.0"
"@swc/helpers" "^0.5.0"
clsx "^2.0.0"

"@react-aria/interactions@^3.21.3", "@react-aria/interactions@^3.22.5":
version "3.22.5"
resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.22.5.tgz#9cd8c93b8b6988f1d315d3efb450119d1432bbb8"
integrity sha512-kMwiAD9E0TQp+XNnOs13yVJghiy8ET8L0cbkeuTgNI96sOAp/63EJ1FSrDf17iD8sdjt41LafwX/dKXW9nCcLQ==
dependencies:
"@react-aria/ssr" "^3.9.7"
"@react-aria/utils" "^3.26.0"
"@react-types/shared" "^3.26.0"
"@swc/helpers" "^0.5.0"

"@react-aria/ssr@^3.9.7":
version "3.9.7"
resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.7.tgz#d89d129f7bbc5148657e6c952ac31c9353183770"
integrity sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==
dependencies:
"@swc/helpers" "^0.5.0"

"@react-aria/utils@^3.26.0":
version "3.26.0"
resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.26.0.tgz#833cbfa33e75d15835b757791b3f754432d2f948"
integrity sha512-LkZouGSjjQ0rEqo4XJosS4L3YC/zzQkfRM3KoqK6fUOmUJ9t0jQ09WjiF+uOoG9u+p30AVg3TrZRUWmoTS+koQ==
dependencies:
"@react-aria/ssr" "^3.9.7"
"@react-stately/utils" "^3.10.5"
"@react-types/shared" "^3.26.0"
"@swc/helpers" "^0.5.0"
clsx "^2.0.0"

"@react-stately/utils@^3.10.5":
version "3.10.5"
resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.10.5.tgz#47bb91cd5afd1bafe39353614e5e281b818ebccc"
integrity sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==
dependencies:
"@swc/helpers" "^0.5.0"

"@react-types/shared@^3.26.0":
version "3.26.0"
resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.26.0.tgz#21a8b579f0097ee78de18e3e580421ced89e4c8c"
integrity sha512-6FuPqvhmjjlpEDLTiYx29IJCbCNWPlsyO+ZUmCUXzhUv2ttShOXfw8CmeHWHftT/b2KweAWuzqSlfeXPR76jpw==

"@remix-run/dev@^2.8.1":
version "2.10.3"
resolved "https://registry.yarnpkg.com/@remix-run/dev/-/dev-2.10.3.tgz#d98d18ec859099bad8552e69f6c01bf4d3faa03b"
Expand Down Expand Up @@ -6428,7 +6489,7 @@
dependencies:
"@tanstack/query-core" "5.60.6"

"@tanstack/react-virtual@^3.0.0-beta.60":
"@tanstack/react-virtual@^3.0.0-beta.60", "@tanstack/react-virtual@^3.8.1":
version "3.10.9"
resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.10.9.tgz#40606b6dd8aba8e977f576d8f7df07f69ca63eea"
integrity sha512-OXO2uBjFqA4Ibr2O3y0YMnkrRWGVNqcvHQXmGvMu6IK8chZl3PrDxFXdGZ2iZkSrKh3/qUYoFqYe+Rx23RoU0g==
Expand Down Expand Up @@ -10062,6 +10123,11 @@ clsx@^1.2.1:
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==

clsx@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==

code-red@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/code-red/-/code-red-1.0.4.tgz#59ba5c9d1d320a4ef795bc10a28bd42bfebe3e35"
Expand Down
Loading