Merge pull request #405 from pendulum-chain/polygon-prototype-staging

Create production release

README.md

@@ -9,7 +9,7 @@
 
 ---
 
-PendulumPay is a gateway for cross-border payments. It is built on top of the Pendulum blockchain.
+Vortex is a gateway for cross-border payments. It is built on top of the Pendulum blockchain.
 
 ## Run
 

signer-service/src/api/routes/v1/index.js

@@ -82,4 +82,6 @@ router.use('/rating', ratingRoutes);
  */
 router.use('/siwe', siweRoutes);
 
+router.use('/ip', (request, response) => response.send(request.ip));
+
 module.exports = router;

signer-service/src/config/express.js

@@ -33,7 +33,19 @@ app.use(
 
 // enable rate limiting
 // Set number of expected proxies
-app.set('trust proxy', rateLimitNumberOfProxies);
+app.set('trust proxy', true);
+
+app.use((req, res, next) => {
+  console.log({
+    'Raw Socket IP': req.socket.remoteAddress,
+    'Express req.ip': req.ip,
+    'X-Forwarded-For': req.headers['x-forwarded-for'],
+    'X-Real-IP': req.headers['x-real-ip'],
+    'Trust Proxy Setting': app.get('trust proxy'),
+  });
+  next();
+});
+
 // Define rate limiter
 const limiter = rateLimit({
   windowMs: rateLimitWindowMinutes * 60 * 1000,

src/components/FeeCollapse/index.tsx

@@ -45,7 +45,7 @@ export const FeeCollapse: FC<CollapseProps> = ({ toAmount = Big(0), toToken, exc
           <p>Details</p>
         </div>
       </div>
-      <div className="collapse-content">
+      <div className="text-[15px] collapse-content">
         <div className="flex justify-between mt-2 ">
           <p>Your quote ({exchangeRate})</p>
           <div className="flex">

src/components/InputKeys/PoolListItem/index.tsx

@@ -9,6 +9,7 @@ interface PoolListItemProps<T extends InputTokenType | OutputTokenType> {
   isSelected?: boolean;
   onSelect: (tokenType: T) => void;
   assetIcon: AssetIconType;
+  name?: string;
 }
 
 export function PoolListItem<T extends InputTokenType | OutputTokenType>({
@@ -17,6 +18,7 @@ export function PoolListItem<T extends InputTokenType | OutputTokenType>({
   isSelected,
   onSelect,
   assetIcon,
+  name,
 }: PoolListItemProps<T>) {
   const tokenIcon = useGetAssetIcon(assetIcon);
 
@@ -43,7 +45,7 @@ export function PoolListItem<T extends InputTokenType | OutputTokenType>({
         <span className="text-lg leading-5 dark:text-white">
           <strong>{tokenSymbol}</strong>
         </span>
-        <span className="text-sm leading-5 text-neutral-500">{tokenSymbol}</span>
+        <span className="text-sm leading-5 text-neutral-500">{name || tokenSymbol}</span>
       </span>
     </Button>
   );

src/components/InputKeys/SelectionModal.tsx

@@ -13,7 +13,7 @@ interface PoolSelectorModalProps<T extends InputTokenType | OutputTokenType> ext
 }
 
 interface PoolListProps<T extends InputTokenType | OutputTokenType> {
-  definitions: { assetSymbol: string; type: T; assetIcon: AssetIconType }[];
+  definitions: { assetSymbol: string; type: T; assetIcon: AssetIconType; name?: string }[];
   onSelect: (tokenType: InputTokenType | OutputTokenType) => void;
   selected: InputTokenType | OutputTokenType;
 }
@@ -46,14 +46,15 @@ function PoolList<T extends InputTokenType | OutputTokenType>({ onSelect, defini
         placeholder="Find by name or address"
       />
       <div className="flex flex-col gap-1">
-        {definitions.map(({ assetIcon, assetSymbol, type }) => (
+        {definitions.map(({ assetIcon, assetSymbol, type, name }) => (
           <PoolListItem
             key={type}
             isSelected={selected === type}
             onSelect={onSelect}
             tokenType={type}
             tokenSymbol={assetSymbol}
             assetIcon={assetIcon}
+            name={name}
           />
         ))}
       </div>

src/components/Navbar/index.tsx

@@ -82,12 +82,12 @@ const MobileMenuList: FC<MobileMenuListProps> = ({ showMenu, closeMenu }) => (
 const Links = () => (
   <ul className="lg:flex lg:items-center lg:justify-around">
     {links.map((link) => (
-      <li key={link.title} className="mb-9 lg:mb-0">
+      <li key={link.title} className="mr-4 mb-9 lg:mb-0">
         <a
           href={link.href}
           target={link.href.startsWith('https') ? '_blank' : ''}
           rel={link.href.startsWith('https') ? 'noreferrer' : ''}
-          className="px-3 text-lg font-thin text-white lg:px-4 xl:px-7 hover:text-amber-500 hover:underline"
+          className="px-3 text-lg font-thin text-white hover:text-amber-500 hover:underline lg:px-0"
         >
           {link.title}
         </a>
@@ -103,10 +103,6 @@ export const Navbar = () => {
   return (
     <header className="flex items-center justify-between px-4 py-4 bg-blue-950 md:py-5 md:px-10">
       <div className="flex">
-        <a href="https://www.vortexfinance.co/" target="_blank" rel="noreferrer" className="flex text-slate-400">
-          <img src={whiteLogo} alt="Vortex Logo" className="mr-1 max-h-6 lg:max-h-8 xl:max-h-12" />
-          Alpha
-        </a>
         <nav className="hidden m-auto lg:block">
           <Links />
         </nav>

src/components/NetworkSelector/index.tsx

@@ -15,7 +15,7 @@ interface NetworkButtonProps {
 
 const NetworkButton = ({ selectedNetwork, isOpen, onClick, disabled }: NetworkButtonProps) => (
   <motion.button
-    className={`flex items-center gap-2 px-2 sm:px-4 py-2 rounded-full bg-base-100 ${
+    className={`flex items-center gap-2 px-2 sm:px-4 py-3 rounded-full bg-base-100 ${
       disabled ? 'opacity-50 cursor-not-allowed' : ''
     }`}
     onClick={onClick}

src/components/PoweredBy/index.tsx

@@ -1,12 +1,56 @@
 import satoshipayLogo from '../../assets/logo/satoshipay.svg';
+import MASTERCARD from '../../assets/payments/mastercard.svg';
+import SEPA from '../../assets/payments/sepa.svg';
+import VISA from '../../assets/payments/visa.svg';
+import vortexLogo from '../../assets/logo/blue.svg';
+interface ImageProps {
+  src: string;
+  alt: string;
+  additionalClass?: string;
+  comingSoon?: boolean;
+}
+
+const paymentImages = [
+  { src: SEPA, alt: 'SEPA logo', additionalClass: 'h-6' },
+  { src: MASTERCARD, alt: 'Mastercard logo', comingSoon: true },
+  { src: VISA, alt: 'Visa logo', comingSoon: true },
+];
+
+const Image = ({ src, alt, comingSoon, additionalClass }: ImageProps) => (
+  <div className="relative">
+    <img src={src} alt={alt} className={`h-[18px] ${additionalClass}`} />
+    {comingSoon && (
+      <div className="absolute bottom-[-10px] right-[-8px] text-[8px] w-12 text-blue-700">Coming soon</div>
+    )}
+  </div>
+);
+
+const ImageList = ({ images }: { images: ImageProps[] }) => (
+  <div className="flex flex-wrap items-start justify-center gap-x-6">
+    {images.map((img) => (
+      <Image key={img.alt} {...img} />
+    ))}
+  </div>
+);
 
 export function PoweredBy() {
   return (
-    <div className="flex items-center justify-center">
-      <p className="mr-1 text-sm text-gray-500">Powered by</p>
-      <a href="https://satoshipay.io" target="_blank" rel="noopener noreferrer" className="transition hover:opacity-80">
-        <img src={satoshipayLogo} alt="Satoshipay" />
-      </a>
-    </div>
+    <section>
+      <ImageList images={paymentImages} />
+      <div className="flex items-center justify-center mt-3">
+        <p className="mr-1 text-sm text-gray-500">Powered by</p>
+        <Image src={vortexLogo} alt="Satoshipay" />
+      </div>
+      <p className="flex items-center justify-center mt-3 mr-1 text-sm text-gray-500">
+        <a
+          href="https://satoshipay.io"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex gap-1 text-xs transition hover:opacity-80"
+        >
+          A <img src={satoshipayLogo} alt="Satoshipay" /> Company
+        </a>
+      </p>
+    </section>
   );
 }