Merge pull request #2414 from Giveth/develop

Mt Pelerin Banner release

lang/en.json

@@ -551,8 +551,12 @@
 	"label.receiving_address": "Receiving address",
 	"label.mainnet_address": "Mainnet address",
 	"label.gnosis_chain_address": "Gnosis Chain address",
+	"label.polygon_mainnet_address": "Polygon Mainnet address",
+	"label.optimism_mainnet_address": "Optimism Mainnet address",
 	"label.receiving_address_on_mainnet": "Receiving address on Mainnet",
 	"label.receiving_address_on_gnosis": "Receiving address on Gnosis Chain",
+	"label.receiving_address_on_polygon": "Receiving address on Polygon Mainnet",
+	"label.receiving_address_on_optimism": "Receiving address on Optimism Mainnet",
 	"label.my_wallet_address": "My Wallet Address",
 	"label.resolved_as": "Resolves as ",
 	"label.this_address_is_already_used": "This address is already used for another project. Please enter an address which is not currently associated with any other project.",
@@ -893,8 +897,6 @@
 	"page.home.philanthropy_needs_more_desc_2": "Giveth is building a new way forward with our zero-fee, community-driven donation platform - leveraging the power of blockchain technology to connect on-the-ground projects with",
 	"page.home.philanthropy_needs_more_desc_3": "regenerative funding opportunities.",
 	"page.partnerships.cryptocurrency_jobs": "The decentralized future is people.",
-	"label.polygon_mainnet_address": "Polygon Mainnet address",
-	"label.receiving_address_on_polygon": "Receiving address on Polygon Mainnet",
 	"label.imagine_a_world_where": "Imagine a world where you could support public goods and get rewarded",
 	"label.mint": "Mint",
 	"label.approve": "Approve",
@@ -1226,7 +1228,18 @@
 	"label.getting_started": "Getting Started",
 	"label.the_mt_pelerin_onramp_allows_you_to_use_a_credit_card_or_bank_transfer": "The Mt Pelerin 'onramp' allows you to use a credit card or bank transfer to get crypto in your web3 wallet to donate. First, select the method of payment (bank transfer or credit card), and then select the currency you want to use to purchase crypto. Then, select the crypto currency you wish to purchase. The currency xDAI and network Gnosis Chain will be selected by default. Finally, click 'Buy'.",
 	"label.you_can_wait_on_this_page_until_the_payment_goes_through": "You can wait on this page until the payment goes through, or you can close it. If the payment is successful, the funds will automatically appear in your chosen wallet after some time. Note: If you click 'Close', you will be redirected back to the start and will not get to the next page.",
+	"label.get_crypto_with_mtpelerin": "Get Crypto with Mt Pelerin",
+	"label.use_a_bank_transfer_or_credit_Card": "Use a bank transfer or credit card to purchase crypto and deposit it directly into your web3 wallet.",
+	"label.crypto_made_easy": "Crypto made easy",
+	"label.thanks_to_mtpelerin_you_can_onramp_your_dollars": "Thanks to Mt Pelerin, you can 'onramp' your dollars and get the crypto you want to donate to projects. There is a 0% fee for onramping funds under $500/year, and they charge a small fee for anything over that.",
+	"label.the_funds_are_sent_to_your_wallet_within_minutes": "The funds are sent to your wallet within minutes with zero gas fees",
+	"label.the_service_is_a_kycfree_authorized_financial_intermediary": "The service is a KYC-free authorized financial intermediary based in Switzerland",
+	"label.use_your_bank_account_or_credit_card_to_send_crypto_to_your_wallet": "Use your bank account or credit card to send crypto to your web3 wallet, then donate to support projects!",
+	"label.donate_with_dollars": "Donate with Dollars",
+	"label.see_how_it_works": "see how it works",
+	"label.get_crypto": "Get crypto",
 	"component.pfp_eligibility_modal.title.not_eligible": "Address is not eligible for early minting!",
 	"component.pfp_eligibility_modal.content.not_eligible": "The wallet address you connected with is not on our allowlist for early minting. If you think this is a mistake, contact our team. Check out our documentation for full details on eligibility, or come back when public minting opens on Mar 24, 2023, 16:00 UTC.",
-	"component.pfp_eligibility_modal.content.success": "You are eligible to mint your Giver early! Thanks for supporting Giveth"
+	"component.pfp_eligibility_modal.content.success": "You are eligible to mint your Giver early! Thanks for supporting Giveth",
+	"label.duration_ago": "{duration} ago"
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "givethdapp",
-	"version": "2.11.2",
+	"version": "2.12.1",
 	"private": true,
 	"scripts": {
 		"build": "next build",
@@ -35,13 +35,11 @@
 		"axios": "^0.25.0",
 		"bignumber.js": "^9.0.1",
 		"deepmerge": "^4.2.2",
-		"ethers": "^5.6.5",
 		"framer-motion": "^6.2.8",
 		"graphql": "^16.0.1",
 		"human-standard-token-abi": "^2.0.0",
 		"lodash.isequal": "^4.5.0",
 		"lottie-react": "^2.3.1",
-		"moment": "^2.29.4",
 		"next": "^13.1.2",
 		"nprogress": "^0.2.0",
 		"quill": "^1.3.7",

pages/how-to-buy-xdai.tsx

@@ -0,0 +1,5 @@
+import HowToBuyXDAI from '@/components/views/purchase/HowToBuyXdai';
+
+export default function HowToBuyXDAPage() {
+	return <HowToBuyXDAI />;
+}

pages/purchase-xdai.tsx

@@ -0,0 +1,5 @@
+import PurchaseXDai from '@/components/views/purchase/PurchaseXDai';
+
+export default function PurchaseXDaiPage() {
+	return <PurchaseXDai />;
+}

src/apollo/gql/gqlCampaign.ts

@@ -7,6 +7,7 @@ export const CAMPAIGN_CORE_FIELDS = gql`
 		__typename
 		id
 		title
+		hashtags
 		slug
 		isFeatured
 		isNew

src/apollo/gql/gqlDonations.ts

@@ -13,6 +13,7 @@ export const DONATION_CORE_FIELDS = gql`
 		createdAt
 		donationType
 		status
+		onramperId
 	}
 `;
 

src/apollo/gql/gqlUser.ts

@@ -95,6 +95,7 @@ export const FETCH_USER_DONATIONS = gql`
 				}
 				createdAt
 				status
+				onramperId
 			}
 			totalCount
 		}

src/apollo/types/types.ts

@@ -188,6 +188,7 @@ export interface IDonation {
 	donationType?: EDonationType;
 	anonymous?: boolean;
 	status: EDonationStatus;
+	onramperId?: string;
 }
 
 export interface IWalletDonation extends IDonation {

src/components/Icons/Optimism.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import Image from 'next/image';
+import { ICurrencyIconProps } from './type';
+
+export const IconOptimism: FC<ICurrencyIconProps> = ({ size = 16 }) => {
+	return (
+		<Image
+			src={`/images/currencies/optimism/16.svg`}
+			alt='optimism'
+			width={size}
+			height={size}
+			loading='lazy'
+		/>
+	);
+};

src/components/NetworkLogo.tsx

@@ -2,15 +2,19 @@ import React from 'react';
 import { IconEthereum } from '@/components/Icons/Eth';
 import { IconGnosisChain } from '@/components/Icons/GnosisChain';
 import { IconPolygon } from '@/components/Icons/Polygon';
+import config from '@/configuration';
+import { IconOptimism } from './Icons/Optimism';
 
 const NetworkLogo = (props: { chainId?: number; logoSize?: number }) => {
 	const { chainId, logoSize } = props;
-	if (chainId === 1 || chainId === 5) {
+	if (chainId === config.MAINNET_NETWORK_NUMBER) {
 		return <IconEthereum size={logoSize} />;
-	} else if (chainId === 100) {
+	} else if (chainId === config.XDAI_NETWORK_NUMBER) {
 		return <IconGnosisChain size={logoSize} />;
-	} else if (chainId === 137) {
+	} else if (chainId === config.POLYGON_NETWORK_NUMBER) {
 		return <IconPolygon size={logoSize} />;
+	} else if (chainId === config.OPTIMISM_NETWORK_NUMBER) {
+		return <IconOptimism size={logoSize} />;
 	} else return null;
 };
 

src/components/modals/AddPolygonAddressModal.tsx

@@ -48,7 +48,7 @@ export const AddPolygonAddressModal: FC<IAddPolygonAddressModal> = ({
 				mutation: ADD_RECIPIENT_ADDRESS_TO_PROJECT,
 				variables: {
 					projectId: Number(project.id),
-					networkId: config.POLYGON_NETWORK.id,
+					networkId: config.POLYGON_NETWORK_NUMBER,
 					address: _address,
 				},
 			});
@@ -63,7 +63,7 @@ export const AddPolygonAddressModal: FC<IAddPolygonAddressModal> = ({
 							{
 								address: _address,
 								isRecipient: true,
-								networkId: config.POLYGON_NETWORK.id,
+								networkId: config.POLYGON_NETWORK_NUMBER,
 							},
 						];
 					}

src/components/modals/DonateModal.tsx

@@ -44,10 +44,9 @@ interface IDonateModalProps extends IModal {
 	givBackEligible?: boolean;
 }
 
-const ethereumChain = config.PRIMARY_NETWORK;
-const gnosisChain = config.SECONDARY_NETWORK;
-const polygonChain = config.POLYGON_NETWORK;
-const stableCoins = [gnosisChain.mainToken, 'DAI', 'USDT'];
+const ethereumChain = config.MAINNET_CONFIG;
+const gnosisChain = config.XDAI_CONFIG;
+const stableCoins = [gnosisChain.nativeCurrency, 'DAI', 'USDT'];
 
 const DonateModal: FC<IDonateModalProps> = props => {
 	const {
@@ -68,9 +67,10 @@ const DonateModal: FC<IDonateModalProps> = props => {
 
 	const givPrice = useAppSelector(state => state.price.givPrice);
 	const givTokenPrice = new BigNumber(givPrice).toNumber();
-	const isGnosis = chainId === gnosisChain.id;
-	const isMainnet = chainId === ethereumChain.id;
-	const isPolygon = chainId === polygonChain.id;
+	const isMainnet = chainId === config.MAINNET_NETWORK_NUMBER;
+	const isGnosis = chainId === config.XDAI_NETWORK_NUMBER;
+	const isPolygon = chainId === config.POLYGON_NETWORK_NUMBER;
+	const isOptimism = chainId === config.OPTIMISM_NETWORK_NUMBER;
 
 	const [donating, setDonating] = useState(false);
 	const [firstDonationSaved, setFirstDonationSaved] = useState(false);
@@ -186,21 +186,28 @@ const DonateModal: FC<IDonateModalProps> = props => {
 				setTokenPrice(1);
 			} else if (token?.symbol === 'GIV') {
 				setTokenPrice(givTokenPrice || 0);
-			} else if (token?.symbol === ethereumChain.mainToken) {
+			} else if (token?.symbol === ethereumChain.nativeCurrency.symbol) {
 				const ethPrice = await fetchEthPrice();
 				setTokenPrice(ethPrice || 0);
 			} else if (token?.address) {
 				let tokenAddress = token.address;
 				// Coingecko doesn't have these tokens in Gnosis Chain, so fetching price from ethereum
-				if ((isGnosis || isPolygon) && token.mainnetAddress) {
+				if (
+					// TODO:Optimism (isGnosis || isPolygon || isOptimism) &&
+					(isGnosis || isPolygon) &&
+					token.mainnetAddress
+				) {
 					tokenAddress = token.mainnetAddress || '';
 				}
 				const coingeckoChainId =
 					isMainnet || token.mainnetAddress
-						? ethereumChain.id
+						? config.MAINNET_NETWORK_NUMBER
 						: isGnosis
-						? gnosisChain.id
-						: polygonChain.id;
+						? config.XDAI_NETWORK_NUMBER
+						: config.POLYGON_NETWORK_NUMBER;
+				// TODO:Optimism : isPolygon
+				// ? config.POLYGON_NETWORK_NUMBER
+				// : config.OPTIMISM_NETWORK_NUMBER;
 				const fetchedPrice = await fetchPrice(
 					coingeckoChainId,
 					tokenAddress,

src/components/modals/DonateWrongNetwork.tsx

@@ -34,6 +34,7 @@ const networks = [
 	config.MAINNET_CONFIG,
 	config.XDAI_CONFIG,
 	config.POLYGON_CONFIG,
+	// TODO:Optimism config.OPTIMISM_CONFIG,
 ];
 
 export const DonateWrongNetwork: FC<IDonateWrongNetwork> = props => {

src/components/modals/FiatDonationConfirmationModal.tsx

@@ -0,0 +1,107 @@
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { Button, P } from '@giveth/ui-design-system';
+import Image from 'next/image';
+
+import { Modal } from '@/components/modals/Modal';
+import { IFiatConfirmationModal } from '@/types/common';
+import { Bullets } from '@/components/styled-components/Bullets';
+import BulbIcon from '/public/images/icons/lightbulb.svg';
+import { useModalAnimation } from '@/hooks/useModalAnimation';
+
+export const FiatDonationConfirmationModal: FC<IFiatConfirmationModal> = ({
+	setShowModal,
+	continueProcess,
+	type,
+}) => {
+	const { isAnimating, closeModal } = useModalAnimation(setShowModal);
+	const { formatMessage } = useIntl();
+
+	return (
+		<Modal
+			closeModal={closeModal}
+			isAnimating={isAnimating}
+			headerIcon={<Image src={BulbIcon} alt='light bulb' />}
+			headerTitle={formatMessage({ id: 'label.before_you_start' })}
+			headerTitlePosition='left'
+		>
+			<Container>
+				<Bullets>
+					{type === 'onramper' ? (
+						<>
+							<li>
+								{formatMessage({
+									id: 'label.you_will_be_purchasing_crypto_on_behalf_of_the_project_account',
+								})}
+							</li>
+							<li>
+								{formatMessage({
+									id: 'label.note_that_your_donations_history_will_be_updated_some_time_after',
+								})}
+							</li>
+							<li>
+								{formatMessage({
+									id: 'label.donations_will_only_be_confirmed_after_a_while_of_being_sent',
+								})}
+							</li>
+						</>
+					) : (
+						type === 'donorbox' && (
+							<>
+								<li>
+									{formatMessage({
+										id: 'label.this_is_a_way_to_support_giveth_using_our',
+									})}{' '}
+									<a
+										href='https://www.sdgimpactfund.org/giveth-foundation'
+										target='_blank'
+										rel='noreferrer'
+									>
+										{formatMessage({
+											id: 'label.sdg_impact_fund',
+										})}
+									</a>
+								</li>
+								<li>
+									{formatMessage({
+										id: 'label.youll_get_a_confirmation_from_donorbox_on_your_email',
+									})}
+								</li>
+							</>
+						)
+					)}
+				</Bullets>
+				<Buttons>
+					<OkButton
+						label={formatMessage({ id: 'label.cancel' })}
+						onClick={closeModal}
+						buttonType='texty'
+					/>
+					<OkButton
+						label={formatMessage({ id: 'label.continue' })}
+						onClick={continueProcess}
+						buttonType='secondary'
+					/>
+				</Buttons>
+			</Container>
+		</Modal>
+	);
+};
+
+const Container = styled(P)`
+	width: 350px;
+	text-align: left;
+	padding: 0 30px 30px;
+`;
+
+const OkButton = styled(Button)`
+	width: 300px;
+	height: 48px;
+	margin: 48px auto 0;
+`;
+
+const Buttons = styled.div`
+	display: flex;
+	flex-direction: row;
+`;

src/components/modals/SwitchNetwork.tsx

@@ -22,6 +22,7 @@ const networks = [
 	config.MAINNET_CONFIG,
 	config.XDAI_CONFIG,
 	config.POLYGON_CONFIG,
+	// TODO:Optimism config.OPTIMISM_CONFIG,
 ];
 
 const SwitchNetwork: FC<IModal> = ({ setShowModal }) => {