Skip to content

Commit

Permalink
refactor: update provider list
Browse files Browse the repository at this point in the history
  • Loading branch information
@janniks
janniks committed Nov 17, 2023
1 parent 47c2eb7 commit 211dfdb
Showing 1 changed file with 30 additions and 170 deletions.
200 changes: 30 additions & 170 deletions packages/connect-ui/src/components/modal/modal.tsx
View file
@@ -1,4 +1,5 @@
import { Component, Element, Prop, h } from '@stencil/core';
import { ReactNode } from 'react';
import { WebBTCProvider } from '../../providers';
import { setSelectedProvider } from '../../session';
import CloseIcon from './assets/close-icon.svg';
Expand Down Expand Up @@ -116,29 +117,14 @@ export class Modal {
<div class="space-y-2">
<p class="text-xs font-semibold text-gray-400">INSTALLED</p>
{this.installedProviders.map((provider: WebBTCProvider) => (
<div class="flex gap-3 items-center">
<div class="basis-12 aspect-square">
<img src={provider.icon} alt={`${provider.name} Icon`} class="w-full h-full" />
</div>
<div class="flex-1">
<div class="text-xl font-bold">{provider.name}</div>
{provider.webUrl && (
<a
href={provider.webUrl}
class="text-gray-400 text-sm"
rel="noopener noreferrer"
>
About →
</a>
)}
</div>
<ProviderListItem provider={provider}>
<button
class="text-sm px-5 py-1.5 min-w-[72px] text-white bg-green-500 rounded-full hover:bg-green-400 active:scale-95"
onClick={() => this.handleSelectProvider(provider.id)}
>
SELECT
</button>
</div>
</ProviderListItem>
))}
</div>
)}
Expand All @@ -148,23 +134,7 @@ export class Modal {
<div class="space-y-2">
<p class="text-xs font-semibold text-gray-400">POPULAR</p>
{notInstalledProviders.map((provider: WebBTCProvider) => (
<div class="flex gap-3 items-center">
<div class="basis-12 aspect-square">
<img src={provider.icon} alt={`${provider.name} Icon`} class="w-full h-full" />
</div>
<div class="flex-1">
<div class="text-xl font-bold">{provider.name}</div>
{provider.webUrl && (
<a
href={provider.webUrl}
class="text-gray-400 text-sm"
rel="noopener noreferrer"
target="_blank"
>
About →
</a>
)}
</div>
<ProviderListItem provider={provider}>
{this.getInstallUrl(provider, browser) && (
<a
class="relative text-sm px-5 py-1.5 min-w-[72px] text-white bg-blue-500 rounded-full hover:bg-blue-400 active:scale-95 cursor-pointer"
Expand All @@ -175,147 +145,37 @@ export class Modal {
INSTALL
</a>
)}
</div>
</ProviderListItem>
))}
</div>
)}
</div>
</div>
);

// return (
// <div class="modal-container">
// <div class="modal-body">
// <div class="modal-header">
// <div class="close-modal">
// <img class="close-icon" src={CloseIcon} onClick={() => this.handleCloseModal()} />
// </div>
// {isMobile || browser ? (
// <span class="modal-title">Get wallet to use {this.authOptions.appDetails.name}</span>
// ) : (
// <span class="modal-title">Your browser isn't supported</span>
// )}
// </div>
// <div class="modal-subtitle">
// To sign in to {this.authOptions.appDetails.name}, you will need a Stacks-compatible
// wallet.
// </div>
// <div class="modal-content">
// <div class="wallet-container">
// <div class="modal-wallet-card">
// <img src={LeatherLogo} />
// <div class="modal-wallet-card-content">
// <span class="modal-subheading">Leather</span>
// {browser && !isMobile ? (
// <div class="modal-wallet-text">
// Leather is the only Bitcoin wallet you need to tap into the emerging Bitcoin
// economy.
// </div>
// ) : (
// <div class="modal-wallet-text">
// Browser extension for {` `}
// <a href={CHROME_BROWSER_URL} target="_blank">
// Chrome
// </a>
// {`, `}
// <a href={BRAVE_BROWSER_URL} target="_blank">
// Brave
// </a>
// {`, or `}
// <a href={FIREFOX_BROWSER_URL} target="_blank">
// Firefox
// </a>
// {` on desktop.`}
// </div>
// )}
// <span class="link" onClick={() => window.open('https://leather.io/', '_blank')}>
// About Leather →
// </span>
// {browser && !isMobile && (
// <div class="download-app-container">
// {this.hasOpenedInstall ? (
// <div class="modal-wallet-text">
// After installing Leather, reload this page and sign in.
// </div>
// ) : (
// <button
// class="button"
// onClick={() => {
// this.handleDownloadPath(browser);
// }}
// >
// Download
// </button>
// )}
// </div>
// )}
// </div>
// </div>

// <div class="modal-wallet-card">
// <img src={XverseWalletLogo} />
// <div class="modal-wallet-card-content">
// <span class="modal-subheading">Xverse Wallet</span>
// {browser === 'Chrome' ? (
// <div class="modal-wallet-text">
// Xverse is an advanced web3 wallet for Bitcoin and Stacks. Available for
// Chrome, Android and iOS. Add it to Chrome to continue.
// </div>
// ) : isMobile ? (
// <div class="modal-wallet-text">
// Xverse is your gateway to Stacks apps like {this.authOptions.appDetails.name}.
// Install it on your device to continue.`
// </div>
// ) : (
// <div class="modal-wallet-text">
// Browser extension for {` `}
// <a href={CHROME_BROWSER_URL} target="_blank">
// Chrome
// </a>
// {` on desktop, application for iOS and Android on mobile.`}
// </div>
// )}
// <span
// class="link"
// onClick={() => window.open('https://www.xverse.app/', '_blank')}
// >
// About Xverse Wallet →
// </span>
// <div class="download-app-container">
// {this.hasOpenedInstallXverse ? (
// isMobile ? (
// <span
// class="link"
// onClick={() =>
// window.open(`stacks://browser?url=${window.location.href}`, '_blank')
// }
// >
// Open this page in Xverse Wallet →
// </span>
// ) : (
// <div class="modal-wallet-text">
// After installing Xverse Wallet, reload this page and sign in.
// </div>
// )
// ) : (
// (browser === 'Chrome' || isMobile) && (
// <button
// class="button"
// onClick={() => {
// this.handleDownloadPath(isMobile ?? `Xverse-${browser}`);
// }}
// >
// Download
// </button>
// )
// )}
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
// );
}
}

function ProviderListItem({
provider,
children,
}: {
provider: WebBTCProvider;
children?: ReactNode;
}) {
return (
<div class="flex gap-3 items-center">
<div class="basis-12 aspect-square">
<img src={provider.icon} alt={`${provider.name} Icon`} class="w-full h-full" />
</div>
<div class="flex-1">
<div class="text-xl font-bold">{provider.name}</div>
{provider.webUrl && (
<a href={provider.webUrl} class="text-gray-400 text-sm" rel="noopener noreferrer">
About →
</a>
)}
</div>
{children}
</div>
);
}

0 comments on commit 211dfdb

Please sign in to comment.