wallet-connect-web-examples/dapps/react-dapp-v2/src/components/Peer.tsx
Pedro Gomes 954831538d
Beta 100 (#27)
* update deps

* revert react dep updates

* chore: update deps to beta.50

* fix: get dapp running again up to Client.connect()

* save progress

* feat(debug): sets up a debug peerClient as responder

* refactor: remove more hardcoded example connect params

* fix: gets `checkPersistedState` working again

* fix: gets client.disconnect + effects working again

* feat: integrates `session_update` handling with namespaces

* fix: remove hardcoded `chains`

* stash progress

* Establish session

* save progress - established session with example dapp

* refactor: rewrite namespace helpers to handle `requiredNamespaces` (#23)

* fix: re-enables restoring persisted session

* refactor: remove debug peerClient code

* fix: re-enables restoring persisted pairings

* Save progress

* fix: re-enables pairing modal, connecting from existing pairing

* Update modals to handle new payloads

* fix(types): fix Metadata typing

* chore(deps): upgrade to beta.53

* refactor: adjusts event handler args for beta.53 `session_update`

* stash

* fix: adds missing keys for `DEFAULT_EIP155_EVENTS` enum

* stash

* chore: update comment for client.request typing FIXME

* feat: integrate beta.54

* feat: integrate beta.55, removes FIXME comments for client.request types

* chore: clean up unused import

* fix: log session_ping event

* fix: log incoming `session_event`

* chore: upgrade client@2.0.0-beta.55 -> sign-client@2.0.0-beta.56

* chore: integrate beta.57

* New beta changes (#24)

* smal lchange

* fix types

* Add package info

* format empty methods / events

* Update deps

* adjust styles

* attempt ios layout fix

* Revert "attempt ios layout fix"

This reverts commit f0176f2ef52f338980ee54e75a767b3d452733f2.

* beta.54

* fix build

* Update to beta 55

* Add todos

* update wallet to beta 56

* Update mumbai rpc add logger

* update to beta 57

* chore: adds note on beta.100 compatibility

* plock

* beta.58

* beta.100;

Co-authored-by: Ilja <idaderko@gmail.com>
Co-authored-by: Ben Kremer <ben@walletconnect.com>
Co-authored-by: Ilja <IljaDaderko@users.noreply.github.com>
2022-05-30 11:46:15 +02:00

75 lines
1.5 KiB
TypeScript

import { SignClientTypes } from "@walletconnect/types";
import * as React from "react";
import styled from "styled-components";
import { colors, fonts } from "../styles";
const SPeerOneLiner = styled.div`
display: flex;
align-items: center;
border-radius: 8px;
border: 2px solid rgb(${colors.darkGrey});
padding: 5px;
& img {
width: 40px;
height: 40px;
}
& > div {
margin-left: 10px;
}
`;
const SPeerCard = styled.div`
align-items: center;
justify-content: center;
display: flex;
width: 100%;
flex-direction: column;
border-radius: 8px;
border: 2px solid rgb(${colors.darkGrey});
padding: 5px;
& > div {
margin: 4px auto;
}
`;
const SIcon = styled.img`
width: 100px;
margin: 0 auto;
`;
const SCenter = styled.div`
text-align: center;
`;
const SUrl = styled(SCenter as any)`
font-size: ${fonts.size.small};
opacity: 0.8;
`;
const SName = styled(SCenter as any)`
font-weight: bold;
`;
interface PeerProps {
oneLiner?: boolean;
metadata: SignClientTypes.Metadata;
}
const Peer = (props: PeerProps) =>
props.oneLiner ? (
<SPeerOneLiner>
<img src={props.metadata.icons[0]} alt={props.metadata.name} />
<div>{props.metadata.name}</div>
</SPeerOneLiner>
) : (
<SPeerCard>
<SIcon src={props.metadata.icons[0]} alt={props.metadata.name} />
<SName>{props.metadata.name}</SName>
<SCenter>{props.metadata.description}</SCenter>
<SUrl>{props.metadata.url}</SUrl>
</SPeerCard>
);
export default Peer;