wallet-connect-web-examples/dapps/react-dapp-v2-cosmos-provider/src/modals/PairingModal.tsx
Gancho Radkov 0fd85d199a
feat: cosmos example dapp (#102)
* feat: updates cosmos example dapp to latest "@walletconnect"

* refactor: uses default methods from `constants`

* chore: updates dependencies
2023-01-24 09:57:07 +02:00

36 lines
973 B
TypeScript

import * as React from "react";
import { PairingTypes } from "@walletconnect/types";
import Button from "../components/Button";
import Pairing from "../components/Pairing";
import { STable } from "../components/shared";
import { SModalContainer, SModalTitle } from "./shared";
interface PairingModalProps {
pairings: PairingTypes.Struct[];
connect: (pairing?: { topic: string }) => Promise<void>;
}
const PairingModal = (props: PairingModalProps) => {
const { pairings, connect } = props;
return (
<SModalContainer>
<SModalTitle>{"Select available pairing or create new one"}</SModalTitle>
<STable>
{pairings.map(pairing => (
<Pairing
key={pairing.topic}
pairing={pairing}
onClick={() => connect({ topic: pairing.topic })}
/>
))}
</STable>
<Button onClick={() => connect()}>{`New Pairing`}</Button>
</SModalContainer>
);
};
export default PairingModal;