feat: WalletConnect, prototype #1933
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
dianasavvatina
changed the title
Working WalletConnect integration with Umami: - listing dApps connected with WalletConnect - tezos_getAccounts returns the current account - tezos_sign signs payload with the current account - tezos_send supports all perations: - transaction signing - delegate / undelegate - origination, calling smart contract - stake, unstake, finalize - approve and reject by user - success and error from Tezos node Limitations: - the operation result is not shown to the user - pairings list doesn't work on remote disconnect - no tests - no documentation - several lint errors
dianasavvatina
force-pushed
the
add-wallet-connect-prototype
branch
from
aa1f743
to
75b3263
Compare
| */ | ||
| export default function PairingCard({ name, url, topic, onDelete }: IProps) { | ||
| return ( | ||
| <Card className="relative mb-6 min-h-[70px] border border-light"> |
There was a problem hiding this comment.
we don't use classNames in the app. please check out chakra docs
|
|
||
| import PairingCard from "./PairingCard" | ||
|
|
||
| export default function PairingsPage() { |
There was a problem hiding this comment.
please don't use default exports and function declarations like this. instead please use fatarrow functions like
export PairingsPage = () => {...}
| const { pairings } = useSnapshot(SettingsStore.state) | ||
| // const [walletPairings ] = useState(web3wallet.core.pairing.getPairings()) | ||
|
|
||
| async function onDelete(topic: string) { |
| .map(chain => { | ||
| const chainData = getChainData(chain!); | ||
|
|
||
| if (!chainData) {return null;} |
There was a problem hiding this comment.
please add prettier and eslint extensions to your VSCode
| new Serializer() | ||
| .deserialize(payload) | ||
| .then(parsePeerInfo) | ||
| .then(peer => WalletClient.addPeer(peer as ExtendedPeerInfo)) | ||
| .then(() => refresh()) | ||
| .catch(e => { | ||
| toast({ | ||
| description: | ||
| "Beacon sync code in the clipboard is invalid. Please copy a beacon sync code from the dApp", | ||
| description: `Beacon sync code in the clipboard is INVALID. Please copy a beacon sync code from the dApp: ${payload}`, |
There was a problem hiding this comment.
please don't do that. it might be huge and doesn't really help the end user
| @@ -101,16 +101,15 @@ export const useAddPeer = () => { | |||
| const { refresh } = usePeers(); | |||
| const toast = useToast(); | |||
|
|
|||
| return (payload: string) => | |||
| return async (payload: string) => | |||
There was a problem hiding this comment.
this is not necessary as we don't use the awaits here
| @@ -76,6 +80,7 @@ | |||
| "react-test-renderer": "^18.3.1", | |||
| "redux": "^5.0.1", | |||
| "redux-persist": "^6.0.0", | |||
| "valtio": "^2.0.0", | |||
There was a problem hiding this comment.
I am sure we don't need it. most likely you need to use redux that's already included
| /** | ||
| * Types | ||
| */ | ||
| interface IProps { |
There was a problem hiding this comment.
we don't use interfaces, type is preferred
| * Types | ||
| */ | ||
| interface IProps { | ||
| name?: string |
There was a problem hiding this comment.
why all the props are optional?
| /** | ||
| * Store / Actions | ||
| */ | ||
| export const SettingsStore = { |
There was a problem hiding this comment.
this whole thing seems to be either already accessible or it could replicate what's already in the beaconSlice
| export default function ChainDataMini({ chainId }: Props) { | ||
| const chainData = useMemo(() => getChainData(chainId), [chainId]); | ||
|
|
||
| if (!chainData) {return <></>;} |
| import { Card, CardBody } from "@chakra-ui/react"; | ||
| import { type ReactNode } from "react"; | ||
|
|
||
| interface Props { |
There was a problem hiding this comment.
this interface can be replaced with PropsWithChildren<CardProps>
| const { request, chainId } = params; | ||
|
|
||
| // Handle approve action (logic varies based on request method) | ||
| const onApprove = async () => { |
There was a problem hiding this comment.
most of its loading & error handling logic is already in asyncActionHandler
| import { type Web3WalletTypes } from "@walletconnect/web3wallet"; | ||
| import { proxy } from "valtio"; | ||
|
|
||
| interface ModalData { |
There was a problem hiding this comment.
if I understand the purpose correctly, you can achieve the same using useDynamicModalContext hook
Working WalletConnect integration PROTOTYPE with Umami:
Study:
Limitations:
Proposed changes
This is a prototype which is not intended to be Merged.
We are going to use it as a reference for a full implementation.
Types of changes
Steps to reproduce
Screenshots
Add the screenshots of how the app used to look like and how it looks now
Checklist