Implement payments for app deployments #17
@ -35,12 +35,15 @@ type ConfigureDeploymentFormValues = {
|
|||||||
type ConfigureFormValues = ConfigureDeploymentFormValues &
|
type ConfigureFormValues = ConfigureDeploymentFormValues &
|
||||||
EnvironmentVariablesFormValues;
|
EnvironmentVariablesFormValues;
|
||||||
|
|
||||||
|
const DEFAULT_MAX_PRICE = '10000';
|
||||||
|
|
||||||
const Configure = () => {
|
const Configure = () => {
|
||||||
const { signClient, session, accounts } = useWalletConnectClient();
|
const { signClient, session, accounts } = useWalletConnectClient();
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [deployers, setDeployers] = useState<Deployer[]>([]);
|
const [deployers, setDeployers] = useState<Deployer[]>([]);
|
||||||
const [selectedAccount, setSelectedAccount] = useState<string>();
|
const [selectedAccount, setSelectedAccount] = useState<string>();
|
||||||
|
const [selectedDeployer, setSelectedDeployer] = useState<Deployer>();
|
||||||
const [isPaymentLoading, setIsPaymentLoading] = useState(false);
|
const [isPaymentLoading, setIsPaymentLoading] = useState(false);
|
||||||
const [isPaymentDone, setIsPaymentDone] = useState(false);
|
const [isPaymentDone, setIsPaymentDone] = useState(false);
|
||||||
|
|
||||||
@ -64,9 +67,9 @@ const Configure = () => {
|
|||||||
const methods = useForm<ConfigureFormValues>({
|
const methods = useForm<ConfigureFormValues>({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
option: 'Auction',
|
option: 'Auction',
|
||||||
maxPrice: '0',
|
maxPrice: DEFAULT_MAX_PRICE,
|
||||||
lrn: '',
|
lrn: '',
|
||||||
numProviders: 0,
|
numProviders: 1,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -214,12 +217,12 @@ const Configure = () => {
|
|||||||
|
|
||||||
txHash = txHashResponse;
|
txHash = txHashResponse;
|
||||||
|
|
||||||
const isTxHashValid = verifyTx(
|
const isTxHashValid = await verifyTx(
|
||||||
senderAddress,
|
senderAddress,
|
||||||
txHash,
|
txHash,
|
||||||
amount.toString(),
|
amount.toString(),
|
||||||
);
|
);
|
||||||
if (!isTxHashValid) {
|
if (isTxHashValid === false) {
|
||||||
console.error('Invalid Tx hash', txHash);
|
console.error('Invalid Tx hash', txHash);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -276,6 +279,11 @@ const Configure = () => {
|
|||||||
setSelectedAccount(account);
|
setSelectedAccount(account);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const onDeployerChange = useCallback((selectedLrn: string) => {
|
||||||
|
const deployer = deployers.find((d) => d.deployerLrn === selectedLrn);
|
||||||
|
setSelectedDeployer(deployer);
|
||||||
|
}, [deployers]);
|
||||||
|
|
||||||
const cosmosSendTokensHandler = useCallback(
|
const cosmosSendTokensHandler = useCallback(
|
||||||
async (selectedAccount: string, amount: string) => {
|
async (selectedAccount: string, amount: string) => {
|
||||||
if (!signClient || !session || !selectedAccount) {
|
if (!signClient || !session || !selectedAccount) {
|
||||||
@ -410,7 +418,10 @@ const Configure = () => {
|
|||||||
</span>
|
</span>
|
||||||
<Select
|
<Select
|
||||||
value={value}
|
value={value}
|
||||||
onChange={(event) => onChange(event.target.value)}
|
onChange={(event) => {
|
||||||
|
onChange(event.target.value);
|
||||||
|
onDeployerChange(event.target.value);
|
||||||
|
}}
|
||||||
displayEmpty
|
displayEmpty
|
||||||
size="small"
|
size="small"
|
||||||
>
|
>
|
||||||
@ -482,6 +493,27 @@ const Configure = () => {
|
|||||||
<div className="p-4 bg-slate-100 rounded-lg mb-6">
|
<div className="p-4 bg-slate-100 rounded-lg mb-6">
|
||||||
<EnvironmentVariablesForm />
|
<EnvironmentVariablesForm />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{selectedOption === 'LRN' &&
|
||||||
|
!selectedDeployer?.minimumPayment ? (
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
{...buttonSize}
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
rightIcon={
|
||||||
|
isLoading ? (
|
||||||
|
<LoadingIcon className="animate-spin" />
|
||||||
|
) : (
|
||||||
|
<ArrowRightCircleFilledIcon />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{isLoading ? 'Deploying' : 'Deploy'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
<Heading as="h4" className="md:text-lg font-medium mb-3">
|
<Heading as="h4" className="md:text-lg font-medium mb-3">
|
||||||
Connect to your wallet
|
Connect to your wallet
|
||||||
</Heading>
|
</Heading>
|
||||||
@ -505,11 +537,13 @@ const Configure = () => {
|
|||||||
? 'Transaction Requested'
|
? 'Transaction Requested'
|
||||||
: 'Pay and Deploy'
|
: 'Pay and Deploy'
|
||||||
: isLoading
|
: isLoading
|
||||||
? 'Deploying repo'
|
? 'Deploying'
|
||||||
: 'Deploy'}
|
: 'Deploy'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</form>
|
</form>
|
||||||
</FormProvider>
|
</FormProvider>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { Select, Option } from '@snowballtools/material-tailwind-react-fork';
|
import { Select, Option } from '@snowballtools/material-tailwind-react-fork';
|
||||||
|
|
||||||
import { Button } from '../../shared/Button';
|
import { Button } from '../../shared/Button';
|
||||||
import { useWalletConnectClient } from 'context/WalletConnectContext';
|
import { useWalletConnectClient } from 'context/WalletConnectContext';
|
||||||
|
|
||||||
|
@ -138,8 +138,8 @@ export const WalletConnectClientProvider = ({
|
|||||||
const signClient = await SignClient.init({
|
const signClient = await SignClient.init({
|
||||||
projectId: VITE_WALLET_CONNECT_ID,
|
projectId: VITE_WALLET_CONNECT_ID,
|
||||||
metadata: {
|
metadata: {
|
||||||
name: 'Snowball',
|
name: 'Deploy App',
|
||||||
description: 'App for deploying apps',
|
description: '',
|
||||||
url: window.location.href,
|
url: window.location.href,
|
||||||
icons: ['https://avatars.githubusercontent.com/u/92608123'],
|
icons: ['https://avatars.githubusercontent.com/u/92608123'],
|
||||||
},
|
},
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
import { WalletConnectModal } from '@walletconnect/modal';
|
import { WalletConnectModal } from '@walletconnect/modal';
|
||||||
|
|
||||||
import { VITE_WALLET_CONNECT_ID } from 'utils/constants';
|
import { VITE_WALLET_CONNECT_ID } from 'utils/constants';
|
||||||
|
|
||||||
export const walletConnectModal = new WalletConnectModal({
|
export const walletConnectModal = new WalletConnectModal({
|
||||||
projectId: VITE_WALLET_CONNECT_ID!,
|
projectId: VITE_WALLET_CONNECT_ID,
|
||||||
chains: ['cosmos:theta-testnet-001', 'cosmos:laconic_9000-1'],
|
chains: [],
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user